@extends('app-new')
@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Compensations Off</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ $orgUrl . '/home' }}">Home</a>
                    </li>
                    <li class="breadcrumb-item active">Compensations Off
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@push('prev-next-head')
    <div class="content-header-right text-end col-md-3 col-12">
        <div class="form-group breadcrumb-right">
            <button class="btn btn-primary btn-sm waves-effect waves-float waves-light" data-bs-target="#filter"
                data-bs-toggle="modal">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-filter">
                    <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
                </svg> Filter
            </button>
        </div>
    </div>
@endpush
@section('content')
    <section id="column-search-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-datatable">
                        <div class="card-header border-bottom p-1">
                            <div class="head-label">
                                <h6 class="mb-0">Compensations Off Listings</h6>
                            </div>
                            <div class="dt-action-buttons text-end">
                                <div class="dt-buttons d-inline-flex">
                                    <div class="form-label-group me-2">
                                        <form>
                                            <input type="text" name="search" placeholder="Search by name" id="search"
                                                class="form-control" value="{{ $search }}">
                                        </form>
                                    </div>

                                    {{-- <a class="dt-button create-new btn btn-primary" tabindex="0"
                                        aria-controls="organization" href="{{ $orgUrl . '/compensations-attendance' }}">
                                        <span>
                                            <i class="fa fa-plus" aria-hidden="true"></i>
                                            {{ trans('static.comp_off') }} {{ trans('static.request') }}
                                        </span>
                                    </a> --}}


                                </div>
                            </div>

                        </div>
                        <table class="dt-column-search table table-responsive dataTable" id="dataTable" data-url="">
                            <thead>
                                <th>#</th>
                                <th>Employee Name</th>
                                <th>Date</th>
                                <th>Start Time</th>
                                <th>End Time</th>
                                <th>Working Hours</th>
                                <th>Day Count</th>
                                <th>Availed Status</th>
                                <th>Expiry Date</th>
                                <th>Status</th>
                                <th>Apply Date and Time</th>
                                <th>{{ trans('common/common.actions') }}</th>
                            </thead>
                            <tbody>
                                @foreach ($compensationRequests as $key => $compensationRequest)
                                    <tr class="even">
                                        <td class="sorting_1">{{ $key + 1 }}</td>
                                        <td class="">
                                            <div class="d-flex flex-row">
                                                <div class="avatar me-75">
                                                    <img src="{{ isset($compensationRequest->employee->image) ? $compensationRequest->employee->image : '' }}"
                                                        onerror="this.src='/assets/img/default-profile-3.png'"
                                                        width="32" height="32"
                                                        alt="{{ isset($compensationRequest->employee->name) ? $compensationRequest->employee->name : '' }}">
                                                </div>
                                                <div class="my-auto">
                                                    <h6 class="mb-0 fw-bolder text-dark hr-dashfullemplname">
                                                        {{ isset($compensationRequest->employee->name) ? $compensationRequest->employee->name : '' }}
                                                        ({{ isset($compensationRequest->employee->employee_code) ? $compensationRequest->employee->employee_code : '' }})
                                                    </h6>
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            {{ $compensationRequest->request_date ? App\Helpers\GeneralHelper::dateFormat($compensationRequest->request_date) : '-' }}
                                        </td>
                                        <td>
                                            {{ $compensationRequest->start_time ? App\Helpers\GeneralHelper::timeFormat($compensationRequest->start_time) : '-' }}
                                        </td>
                                        <td>
                                            {{ $compensationRequest->end_time ? App\Helpers\GeneralHelper::timeFormat($compensationRequest->end_time) : '-' }}
                                        </td>
                                        <td>
                                            {{ $compensationRequest->working_hours }}
                                        </td>
                                        <td>
                                            {{ $compensationRequest->day_count }}
                                        </td>
                                        <td>
                                            {{ $compensationRequest->availed_status}}@if($compensationRequest->bal_day_count > '0') ({{ $compensationRequest->bal_day_count }}) @endif
                                        </td>
                                        <td>
                                            {{ $compensationRequest->expiry_date ? App\Helpers\GeneralHelper::dateFormat($compensationRequest->expiry_date) : '-' }}
                                        </td>
                                        <td>
                                            @if ($compensationRequest->status == App\Helpers\ConstantHelper::APPROVED)
                                                <span
                                                    class="badge rounded-pill badge-light-success badgeborder-radius">{{ ucfirst($compensationRequest->status) }}</span>
                                            @elseif(
                                                $compensationRequest->status == App\Helpers\ConstantHelper::CANCELED ||
                                                    $compensationRequest->status == App\Helpers\ConstantHelper::REJECTED)
                                                <span
                                                    class="badge rounded-pill badge-light-danger badgeborder-radius">{{ ucfirst($compensationRequest->status) }}</span>
                                            @else
                                                <span
                                                    class="badge rounded-pill badge-light-warning badgeborder-radius">{{ ucfirst($compensationRequest->status) }}</span>
                                            @endif
                                        </td>
                                        <td>
                                            {{ App\Helpers\GeneralHelper::dateTimeFormat($compensationRequest->created_at) }}
                                        </td>

                                        <td>
                                            <div class="mb-1">
                                                <a class="pe-1 dropdown-toggle hide-arrow text-primary"
                                                    data-bs-toggle="dropdown">
                                                    <i data-feather="more-vertical" class="font-small-4"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a class="dropdown-item"
                                                        href="{{ $orgUrl . '/compensations/' . $compensationRequest->id }}"><i
                                                            data-feather="eye" class="font-4" aria-hidden="true"></i><span
                                                            class="align-middle">
                                                            View</span></a>

                                                    @if ($compensationRequest->status == 'approved' && $compensationRequest->availed_status == 'pending')
                                                        <a class="dropdown-item sa-params" href="javascript:;"
                                                            data-action="post"
                                                            data-message="Are you sure you want to cancel?"
                                                            data-url="{{ $orgUrl . '/compensations/cancelled/' . $compensationRequest->id }}"
                                                            data-reload="true" data-request="ajax-submit-confirm">x<span
                                                                class="align-middle">
                                                                {{ trans('common/common.cancel') }}</span></a>
                                                    @endif
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        @if (count($compensationRequests) == 0)
                            <div>
                                <center>No record(s) found!</center>
                            </div>
                        @endif

                        <div class="d-flex justify-content-between mx-0 row">
                            <div class="col-sm-12 col-md-6">
                                <div class="dataTables_info" id="organization_info" role="status" aria-live="polite">
                                    Showing
                                    {{ ($compensationRequests->currentpage() - 1) * $compensationRequests->perpage() + 1 }}
                                    to
                                    {{ ($compensationRequests->currentpage() - 1) * $compensationRequests->perpage() + $compensationRequests->count() }}
                                    of {{ $compensationRequests->total() }} entries</div>
                            </div>
                            <div class="col-sm-12 col-md-6">
                                {{ $compensationRequests->appends(request()->except('page'))->links('partials.pagination') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/ Column Search -->
    {{-- filter --}}
    <div class="modal modal-slide-in fade filterpopuplabel" id="filter">
        <div class="modal-dialog sidebar-sm">
            <form class="add-new-record modal-content pt-0" method="GET">
                <div class="modal-header mb-1">
                    <h5 class="modal-title" id="exampleModalLabel">Apply Filter</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                </div>
                <div class="modal-body flex-grow-1">
                    <div class="mb-1">
                        <label class="form-label" for="fp-range">Select Date Range</label>
                        <input type="text" name="date_range" class="form-control flatpickr-range"
                            value="{{ Request::get('date_range') }}" placeholder="YYYY-MM-DD to YYYY-MM-DD" />
                    </div>

                    <label class="form-label mt-2">Employee Type</label>
                    @if (Auth::user()->is_contractor == 0)
                        <select class="form-control select2" id="employee_type" name="employee_type[]"
                            onchange="getEmployeeByType(this)" multiple>
                            @foreach ($employeeTypes as $empType)
                                <option value="{{ $empType }}" @if (in_array($empType, request()->input('employee_type', []))) selected @endif>
                                    {{ $empType }}
                                </option>
                            @endforeach
                        </select>
                    @else
                        <select class="form-control select2" id="employee_type" name="employee_type[]"
                            onchange="getEmployeeByType(this)" multiple>
                            <option value="{{ $employeeType }}" selected>
                                {{ $employeeType }}
                            </option>
                        </select>
                    @endif

                    <label class="form-label mt-2" for="area_id">{{ trans('master/master.employees') }}</label>
                    <select class="form-control mb-2 select2" name="employee_id[]" id="employee_id" multiple>
                        @foreach ($employees as $employee)
                            <option value="{{ $employee->id }}" @if ($employeeIds && in_array($employee->id, $employeeIds)) selected @endif>
                                {{ $employee->name }}({{ $employee->employee_code }})
                            </option>
                        @endforeach
                    </select>


                    <div class="mb-1">
                        <label class="form-label">Select Status</label>
                        <select class="form-control" name="status">
                            <option value=" ">All</option>
                            @foreach ($status as $status)
                                <option value="{{ $status }}"
                                    {{ Request::get('status') == $status ? 'selected' : '' }}>
                                    {{ ucfirst($status) }}</option>
                            @endforeach
                        </select>
                    </div>

                </div>
                <div class="modal-footer justify-content-start">
                    <button type="submit" class="btn btn-primary data-submit mr-1">Apply</button>
                    <a href="{{ $orgUrl . '/compensations' }}" class="btn btn-outline-secondary"
                        data-dismiss="modal">Clear</a>
                </div>
            </form>
        </div>
    </div>
    {{-- filter --}}
@endsection
@push('footer-script')
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>

    <!-- END: Page Vendor JS-->
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>


    <!-- BEGIN: Page JS-->
    <script src="{{ asset('js/common-script.js') }}"></script>
    <script src="{{ asset('js/sweetalert.js') }}"></script>

    <!-- END: Page JS-->

    <script>
        $("#search").change(function() {
            this.form.submit();
        });
        $(document).ready(function() {
            $('.select2').select2();
        });

        var selectedEmployeeIds = JSON.parse('{!! json_encode($employeeIds) !!}');

        function getEmployeeByType(select) {
            var employeeTypes = [];
            $(select).find(':selected').each(function(key, option) {
                employeeTypes.push($(option).val());
            })
            var url = "{{ route('employees-by-type', ['alias' => $alias]) }}?employee_type=" + employeeTypes;
            $.ajax({
                url: url,
                type: "GET",
                success: function(data) {
                    var op = '';
                    for (var i = 0; i < data.length; i++) {
                        op += '<option value="' + data[i].id + '"';

                        if (selectedEmployeeIds.includes((data[i].id).toString())) {
                            op += ' selected ';
                        }

                        op += ' >' + data[i].name + '(' + data[i]
                            .employee_code + ')</option>';
                    }
                    $('#employee_id').html(op).select2();
                }
            });
        }

        $('#employee_id, #employee_type').change(function() {
            selectedEmployeeIds = [];
            $('#employee_id').find(':selected').each(function(key, option) {
                selectedEmployeeIds.push($(option).val());
            })
        });
    </script>
@endpush