@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">Comp-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">Comp-Off
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="column-search-datatable">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-start mb-0"></h2>

                    </div>
                </div>
            </div>
            <div class="content-header-right text-md-end col-md-6 col-12 d-md-block d-none">
                <div class="mb-1 breadcrumb-right">
                    <div class="mx-1">
                        <div class="dropdown">
                            @if ($tab1 == 'my-approvals' && $tab2 == 'pending')
                                <button data-status="rejected"
                                    class="btn btn-danger btn-sm waves-effect waves-float waves-light approval-multiple-btn">
                                    <i data-feather="x-circle"></i>
                                    Reject
                                </button>
                                <button data-status="approved"
                                    class="btn btn-success btn-sm waves-effect waves-float waves-light approval-multiple-btn">
                                    <i data-feather="check-circle"></i>
                                    Approve
                                </button>
                            @endif
                            <button
                                class="px-2 btn-icon btn btn-secondary btn-sm btn-round dropdown-toggle waves-effect waves-float waves-light"
                                type="button" data-bs-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false">Export</button>

                            <button class="btn btn-icon btn-primary" data-bs-target="#filter" data-bs-toggle="modal">
                                <i data-feather="filter"></i>
                            </button>

                            <div class="dropdown-menu" style="">
                                <a class="dropdown-item" target="_blank"
                                    href="{{ url()->current() . '?' . request()->getQueryString() . '&export=excel' }}">
                                    <span>{{ trans('common/common.excel') }}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <ul class="nav nav-tabs border-bottom" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link {{ !empty($tab1) ? ($tab1 == 'all-requests' ? 'active' : '') : 'active' }}"
                                href="{{ $orgUrl }}/compensation/approvals?tab1=all-requests&{{ http_build_query(request()->except('tab1', 'tab2', 'page')) }}">All
                                Requests
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {{ $tab1 == 'my-approvals' ? 'active' : '' }}"
                                href="{{ $orgUrl }}/compensation/approvals?tab1=my-approvals&{{ http_build_query(request()->except('tab1', 'tab2', 'page')) }}">My
                                Approvals
                            </a>
                        </li>
                    </ul>
                    <div class="card-datatable">
                        <ul class="nav nav-tabs border-bottom" style="float: right;" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link {{ empty($tab2) ? 'active' : '' }}"
                                    href="{{ $orgUrl }}/compensation/approvals?tab2=&{{ http_build_query(request()->except('tab2', 'page')) }}">All
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ $tab2 == 'pending' ? 'active' : '' }}"
                                    href="{{ $orgUrl }}/compensation/approvals?tab2=pending&{{ http_build_query(request()->except('tab2', 'page')) }}">Pending
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ $tab2 == 'approved' ? 'active' : '' }}"
                                    href="{{ $orgUrl }}/compensation/approvals?tab2=approved&{{ http_build_query(request()->except('tab2', 'page')) }}">Approved
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ $tab2 == 'rejected' ? 'active' : '' }}"
                                    href="{{ $orgUrl }}/compensation/approvals?tab2=rejected&{{ http_build_query(request()->except('tab2', 'page')) }}">Rejected
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ $tab2 == 'cancelled' ? 'active' : '' }}"
                                    href="{{ $orgUrl }}/compensation/approvals?tab2=cancelled&{{ http_build_query(request()->except('tab2', 'page')) }}">Cancelled
                                </a>
                            </li>
                            @if ($tab1 == 'all-requests')
                                <li class="nav-item">
                                    <a class="nav-link {{ $tab2 == 'revoked' ? 'active' : '' }}"
                                        href="{{ $orgUrl }}/compensation/approvals?tab2=revoked&{{ http_build_query(request()->except('tab2', 'page')) }}">Revoked
                                    </a>
                                </li>
                            @endif
                        </ul>

                        <table class="dt-column-search table table-responsive dataTable" id="dataTable" data-url="">
                            <thead>
                                @if ($tab1 == 'my-approvals' && $tab2 == 'pending')
                                    <th class="pe-0">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="comp-off-select-all">
                                        </div>
                                    </th>
                                @endif
                                <th>#</th>
                                <th>Employee Name</th>
                                <th>Date</th>
                                <th>Shift</th>
                                <th>Shift Start</th>
                                <th>Shift End</th>
                                <th>Start Time</th>
                                <th>End Time</th>
                                <th>Working Hours</th>
                                <th>Day Count</th>
                                <th>Expiry Date</th>
                                <th>Availed Status</th>
                                <th>Status</th>
                                <th>Apply Date and Time</th>
                                <th>Action</th>
                            </thead>
                            <tbody>
                                @foreach ($compensationRequests as $key => $compensationRequest)
                                    <tr class="even">
                                        @if ($tab1 == 'my-approvals' && $tab2 == 'pending')
                                            <td class="pe-0">
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input comp-off-select" type="checkbox"
                                                        value="{{ $compensationRequest->id }}">
                                                </div>
                                            </td>
                                        @endif
                                        <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>
                                            {{ isset($compensationRequest->attendanceSummary->shift->name) ? $compensationRequest->attendanceSummary->shift->name : '--' }}
                                        </td>
                                        <td>
                                            {{ isset($compensationRequest->attendanceSummary->shift->start_time) ? App\Helpers\GeneralHelper::timeFormat($compensationRequest->attendanceSummary->shift->start_time) : '--' }}
                                        </td>
                                        <td>
                                            {{ isset($compensationRequest->attendanceSummary->shift->end_time) ? App\Helpers\GeneralHelper::timeFormat($compensationRequest->attendanceSummary->shift->end_time) : '--' }}
                                        </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->expiry_date ? App\Helpers\GeneralHelper::dateFormat($compensationRequest->expiry_date) : '-' }}
                                        </td>
                                        <td>
                                            {{ $compensationRequest->availed_status }}@if ($compensationRequest->bal_day_count > '0')
                                                ({{ $compensationRequest->bal_day_count }})
                                            @endif
                                        </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 (
                                                        $user->isOrganizationalAdmin() &&
                                                            $compensationRequest->status == 'approved' &&
                                                            $compensationRequest->availed_status == 'pending')
                                                        <a class="dropdown-item approval-btn" href="#"
                                                            data-id="{{ $compensationRequest->id }}"
                                                            data-status="cancelled"><i data-feather="x" class="font-4"
                                                                aria-hidden="true"></i><span class="align-middle">
                                                                Cancel</span></a>
                                                    @endif
                                                    @if ($tab1 == 'my-approvals' && $tab2 == 'pending')
                                                        <a class="dropdown-item approval-btn" href="#"
                                                            data-id="{{ $compensationRequest->id }}"
                                                            data-status="approved"><i data-feather="check" class="font-4"
                                                                aria-hidden="true"></i><span class="align-middle">
                                                                Approve</span></a>

                                                        <a class="dropdown-item approval-btn" href="#"
                                                            data-id="{{ $compensationRequest->id }}"
                                                            data-status="rejected">
                                                            <i data-feather="x" class="font-4"
                                                                aria-hidden="true"></i><span class="align-middle">
                                                                Reject</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">
                                {{ $compensationRequests->appends(request()->except('page'))->links('partials.pagination') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/ Column Search -->

    <div class="modal fade" id="approval-popup" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered ">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-5 pt-50">
                    <div class="mb-2">
                        <h3 class="mb-2" id="modelHeading">Comp-Off Approval</h3>
                    </div>
                    <form id="approval-form" role="post-data" method="POST"
                        action="{{ $orgUrl . '/compensation/approval' }}">
                        <input type="hidden" name="status" id="status" value="">
                        <input type="hidden" name="ids" id="ids" value="">
                        <div class="row">
                            <div class="col-12">
                                <label>Remarks</label>
                                <textarea class="form-control" name="remarks" id="remarks" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="col-12 d-flex justify-content-end mt-2 pt-50">
                            <button type="button" data-request="ajax-submit" data-target="[role=post-data]"
                                class="btn btn-primary"
                                id="submit-btn">{{ trans('common/common.submit_request') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <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">
                    <input type="hidden" name="tab1" value="{{ $tab1 }}">
                    <input type="hidden" name="tab2" value="{{ $tab2 }}">
                    <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" 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>
                <div class="modal-footer justify-content-start">
                    <button type="submit" class="btn btn-primary data-submit mr-1">Apply</button>
                    <a href="{{ $orgUrl . '/compensation/approvals' }}" class="btn btn-outline-secondary"
                        data-dismiss="modal">Clear</a>
                </div>
            </form>
        </div>
    </div>
@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>
        $(document).ready(function() {
            $('.select2').select2();
        });

        $('#comp-off-select-all').change(function() {
            if ($(this).is(':checked')) {
                $('.comp-off-select').prop('checked', true);
            } else {
                $('.comp-off-select').prop('checked', false);
            }
        });

        $('.comp-off-select').change(function() {
            if ($('.comp-off-select').length == $('.comp-off-select:checked').length) {
                $('#comp-off-select-all').prop('checked', true);
            } else {
                $('#comp-off-select-all').prop('checked', false);
            }
        });

        $('.approval-btn').on('click', function(e) {
            e.preventDefault();
            let status = $(this).data('status');
            let ids = [$(this).data('id')];

            setApprovalFormFields(status, ids);
        });

        $('.approval-multiple-btn').on('click', function(e) {
            e.preventDefault();
            let status = $(this).data('status');
            let ids = [];

            $('.comp-off-select:checked').each(function(key, item) {
                ids.push($(item).val());
            });

            if (ids.length > 0) {
                setApprovalFormFields(status, ids);
            } else {

            }
        });

        function setApprovalFormFields(status, ids) {
            $('#status').val(status);
            $('#ids').val(ids);
            $('#remarks').val('');

            let actionUrl = "{{ $orgUrl }}";
            if (ids.length == 1) {
                actionUrl += `/compensations/${status}/${ids[0]}`;
            } else {
                actionUrl += `/compensations/${status}/multiple`;
            }

            $('#approval-form').attr('action', actionUrl);

            if (status == 'rejected') {
                $('#submit-btn').html('Reject');
            } else if (status == 'cancelled') {
                $('#submit-btn').html('Cancel');
            } else {
                $('#submit-btn').html('Approve');
            }

            $('#approval-popup').modal('show');
        }
    </script>
@endpush