@extends('layout.default')

@section('styles')
    <style type="text/css">
        .input-group > .select2-container--default {
            width: auto !important;
            flex: 1 1 auto !important;
        }

        .input-group > .select2-container--default .select2-selection--single {
            height: 100% !important;
            border-radius: 0.42rem 0 0 0.42rem !important;
            line-height: inherit !important;
        }

        .nowrap {
            white-space: nowrap;
        }

        table .select2-selection__rendered {
            line-height: 10px !important;
        }

        table .select2-container .select2-selection--single {
            width: 225px !important;
            height: 30px !important;
            font-size: 1rem !important;
        }

        table .select2-selection__arrow {
            height: 30px !important;
        }

        .btn-group > .select2-container--default {
            width: auto !important;
            flex: 1 1 auto !important;
        }

        .btn-group > .select2-container--default .select2-selection--single {
            height: 100% !important;
            border-radius: 0.42rem 0 0 0.42rem !important;
            line-height: inherit !important;
        }
    </style>
@endsection
@section('subheaderRightToolbar')
    @PermissionsCan(groupPermissionName('shiftassign.index'))
    <a href="{{ route('shiftassign.index') }}" class="btn btn-light-primary font-weight-bolder mr-2">
        <i class="ki ki-long-arrow-back icon-sm"></i>Back(ESC)</a>
    @endPermissionsCan
    @PermissionsCan(groupPermissionName('shiftassign.store'))
    <div class="btn-group">
        <button type="submit" class="btn btn-primary font-weight-bolder" form="shiftassign_form">
            <i class="ki ki-check icon-sm"></i><u>S</u>ave & Continue
        </button>
    </div>
    @endPermissionsCan
@endsection
@section('content')
    <div class="card card-custom card-sticky" id="kt_page_sticky_card">
        <div class="card-body" id="load-section-js">
            <form class="form" id="shiftassign_form" data-method="post" data-url="{{ route('shiftassign.store') }}"
                  enctype="multipart/form-data">
                <div class="row">
                    <div class="col-3">
                        <div class="form-group">
                            <label for="branch_id">Location <b class="text-danger">*</b></label>
                            <select class="form-control form-control-sm branch-select2-js"
                                    name="branch_id" id="branch_id"
                                    data-action="{{ route('branch.autocomplete') }}">
                            </select>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="form-group">
                            <label for="department_id">Department <b class="text-danger">*</b></label>
                            <select class="form-control form-control-solid department-select2-js"
                                    data-action="{{ route('department.autocomplete') }}"
                                    data-placeholder="Select Department" name="department_id"
                                    id="department_id">
                            </select>
                        </div>
                    </div>
                    <div class="col-3">
                        <label for="assign_date_range">Assign From - To Date</label>
                        <div class="input-group">
                            <input type="text" name="assign_date_range" id="assign_date_range" value=""
                                   class="form-control" placeholder="Select date range">
                            <div class="input-group-append">
                                <span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-2"><br>
                        <a href="#" class="btn btn-light-primary mt-2" id="filter-employee" style="width: 170px;"><i
                                    class="flaticon2-cube"></i> Filter</a>
                    </div>
                    <div class="col-3">
                        <div class="form-group">
                            <label for="shift_id">Shift <b class="text-danger">*</b></label>
                            <select class="form-control form-control-solid shift-select2-js"
                                    data-action="{{ route('shift.autocomplete') }}"
                                    data-placeholder="Select Shift" name="shift_id" id="shift_id">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 mb-2">
                        <div class="card card-custom card-border card-shadow" data-card="true" id="kt_card_3">
                            <div class="card-header bg-secondary">
                                <div class="card-title">
                                    <h3 class="card-label">Employee Details</h3>
                                </div>
                                <div class="card-toolbar">
                                    <a href="#" class="btn btn-icon btn-circle btn-sm btn-light-primary mr-1"
                                       data-card-tool="toggle">
                                        <i class="ki ki-arrow-down icon-nm"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="card-body" kt-hidden-height="384">
                                <div class="tab-content">
                                    <div class="table-responsive" id="kt_repeater_1">
                                        <table class="table table-sm table-foot-custom table-striped table-foot-bg table-bordered table-hover"
                                               id="employeeDetailTable" style="margin-bottom: 0px !important;">
                                            <thead class="">
                                            <tr class="text-left">
                                                <th scope="col">Name</th>
                                                <th scope="col" style="min-width: 150px;">Code</th>
                                                <th scope="col" style="min-width: 50px;">
                                                    <div class="checkbox-inline ml-2">
                                                        <label class="checkbox checkbox-square">
                                                            <input type="checkbox" class="bg-primary" id="select_all">
                                                            <span class="bg-success"></span>
                                                            Assign
                                                        </label>
                                                    </div>
                                                </th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td colspan="3">
                                                    <div class="alert alert-custom alert-notice alert-light-dark fade show"
                                                         role="alert"
                                                         style="padding: 10px !important; margin-bottom: 0px !important;">
                                                        <div class="alert-icon"><i class="flaticon-warning"></i></div>
                                                        <div class="alert-text">! SORRY, employee not exists.</div>
                                                        <div class="alert-close">
                                                            <button type="button" class="close" data-dismiss="alert"
                                                                    aria-label="Close"></button>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script type="text/javascript" src="{{ asset('js/modules/shiftassign/create.js?v='.time()) }}"></script>
@endsection