@extends('adminlte::page')

@section('content')
    <div class="col-md-8 offset-md-2 pt-2">
        <div class="card">
            <div class="card-header bg-color">
                <span class="" style="vertical-align: middle">
                    <i class="fa-solid fa-filter fa-fw"></i> WIP Employee Time Extended - Filter
                </span>
            </div>
            <form action="{{ route('wipemployeetimeextended') }}" method="POST">
                @csrf
                @method('PUT')
                <div class="card-body">
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label class="col-form-label col-form-label-sm">Work Date From</label>
                            <input
                                id="filterEmployeeTimeFrom"
                                name="filterEmployeeTimeFrom"
                                class="form-control flatpickrDate"
                                type="text"
                                readonly />

                            @error('filterEmployeeTimeFrom')
                                <span class="small text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group col-md-6">
                            <label class="col-form-label col-form-label-sm">Work Date To</label>
                            <input
                                id="filterEmployeeTimeTo"
                                name="filterEmployeeTimeTo"
                                class="form-control flatpickrDate"
                                type="text"
                                readonly />
                            @error('filterEmployeeTimeTo')
                                <span class="small text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label class="col-form-label pb-0 col-form-label-sm">Employee <span class="text-success">(m)</span></label>

                            <div id="filterEmployee">
                                <select
                                    data-live-search="true"
                                    name="filterEmployee[]"
                                    class="form-control bootstrapselect"
                                    style="z-index: 10000 !important;"
                                    multiple>

                                    @foreach ($listEmployees as $le)
                                        <option value="{{ $le->Employee }}">{{ $le->Employee . ' - ' . $le->First_Name . ' ' . $le->Last_Name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group col-md-6">
                            <label class="col-form-label pb-0 col-form-label-sm">Department <span class="text-success">(m)</span></label>

                            <div id="filterDepartment">
                                <select
                                    data-live-search="true"
                                    name="filterDepartment[]"
                                    class="form-control bootstrapselect"
                                    style="z-index: 10000 !important;"
                                    multiple>

                                    @foreach ($listDepartments as $ld)
                                        <option value="{{ $ld->code }}">{{ $ld->detail }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label class="col-form-label pb-0 col-form-label-sm">Status <span class="text-success">(m)</span></label>

                            <div id="filterStatus">
                                <select
                                    data-live-search="true"
                                    name="filterStatus"
                                    class="form-control bootstrapselect"
                                    style="z-index: 10000 !important;"
                                    multiple>
                                    <option value="" selected>All</option>
                                    <option value="Active">Active</option>
                                    <option value="Inactive">Inactive</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group col-md-6">
                            <label class="col-form-label pb-0 col-form-label-sm">Destination</label>

                            <div id="filterDestination">
                                <select
                                    name="filterDestination"
                                    class="form-control bootstrapselect"
                                    style="z-index: 10000 !important;">

                                    <option value="1" selected="selected">PDF</option>
                                    <option value="2">EXCEL</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <hr class="pt-2 pb-1" />

                    <span class="text-danger text-sm font-italic"> * The field is required.</span>

                    <div class="float-right">
                        <a href="{{ route('/') }}" class="btn btn-danger">
                            <i class="fas fa-times fa-fw"></i> Cancel
                        </a>

                        <button
                            type="submit"
                            class="btn btn-sl">
                            <i class="fa-solid fa-filter fa-fw"></i> Filter Report
                        </button>
                    </div>
                </div>
            </form>
            <br>
        </div>
    </div>
@endsection