@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">{{ $title }}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ $orgUrl . '/home' }}">Home</a>
                    </li>
                    <li class="breadcrumb-item active">{{ $title }}
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="column-search-datatable">
        @if ($errors->any())
            <div class="row">
                <div class="col-md-12">
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif
        <div class="content-header row mt-1">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <div class="row">
                            @if ($type == 'regularize')
                                <div class="col-md-2">
                                    <a class="btn btn-outline-primary"
                                        href="/{{ $alias }}/requests/download-sample?type=regularize">Sample</a>
                                </div>
                                <div class="col-md-10">
                                    <form id="importForm" action="/{{ $alias }}/requests/bulk-import" method="POST"
                                        enctype="multipart/form-data">
                                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                        <input type="hidden" name="type" value="regularize">
                                        <div class="row">
                                            <div class="col-md-8">
                                                <input type="file" name="import_file" class="form-control" required />
                                                @if (session('importFileError'))
                                                    <div class="alert alert-danger">
                                                        {{ session('importFileError') }}
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="col-md-4">
                                                <button type="submit" name="upload" class="btn btn-dark" value="Upload">
                                                    Upload
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            @endif
                        </div>
                    </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 (@$hasPermission['add'])
                                <a class="dt-button create-new btn btn-primary btn-sm" tabindex="0"
                                    title="Compensation off" aria-controls="organization"
                                    href="{{ $orgUrl . '/requests/create?type=' . $type }}">
                                    <span>
                                        <i class="fa fa-plus" aria-hidden="true"></i>
                                        {{ $title }} {{ trans('static.request') }}
                                    </span>
                                </a>
                            @endif
                            @if (($tab1 == 'my-approvals' || ($tab1 == 'all-requests' && Auth::user()->isOrganizationalAdmin())) && ($tab2 == '' || $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-icon btn btn-primary btn-round btn-sm dropdown-toggle" type="button"
                                data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd">
                                <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="offcanvas-end-example">
            <form action="">
                <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
                    <div class="offcanvas-header">
                        <h5 id="offcanvasEndLabel" class="offcanvas-title">Filter</h5>
                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                            aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body my-auto mx-0 flex-grow-0">
                        <div class="row">
                            <input type="hidden" name="type" value="{{ $type }}">
                            <input type="hidden" name="tab1" value="{{ $tab1 }}">
                            <input type="hidden" name="tab2" value="{{ $tab2 }}">
                            <input type="hidden" name="search" id="searchFilter" value="{{ request()->search }}">
                            <div class="col-sm-12">
                                <div class="form-label-group">
                                    <label class="form-label" for="date_range">Date range</label>
                                    <input type="text" id="date_range" name="date_range" value="{{ $dateRange }}"
                                        class="form-control daterangebg"> {!! $errors->first('date_range', '<label class="control-label error" for="date_range">:message</label>') !!}
                                </div>
                            </div>

                            <div class="col-sm-12 mt-1">
                                <div class="form-label-group">
                                    <label class="form-label">Select Shifts</label>
                                    <select class="form-control select2" id="type" name="shift_id[]"
                                        class="form-control" multiple>
                                        @foreach ($shifts as $shift)
                                            <option value="{{ $shift->id }}"
                                                @if ((isset($shiftId) && $shiftId == $shift->id) || old('shift_id') == $shift->id) selected @endif>
                                                {{ $shift->name }}({{ $shift->start_time }} - {{ $shift->end_time }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-12 mt-1">
                                <div class="form-label-group">
                                    <label class="form-label">Department</label>
                                    <select class="form-control select2" id="department_id" name="department_id[]"
                                        class="form-control" multiple>
                                        @foreach ($departments as $department)
                                            <option value="{{ $department->id }}">
                                                {{ $department->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-12 mt-1">
                                <div class="form-label-group">
                                    <label class="form-label">Designation</label>
                                    <select class="form-control select2" id="designation_id" name="designation_id[]"
                                        class="form-control" multiple>
                                        @foreach ($designations as $designation)
                                            <option value="{{ $designation->id }}">
                                                {{ $designation->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            @if (Auth::user()->is_contractor == 0)
                                <div class="col-sm-12 mt-1">
                                    <div class="form-label-group">
                                        <label class="form-label">Contractor</label>
                                        <select class="form-control select2" id="contractor_id" name="contractor_id[]"
                                            class="form-control" multiple>
                                            @foreach ($contractors as $contractor)
                                                <option value="{{ $contractor->id }}">
                                                    {{ $contractor->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            @endif
                            <div class="col-sm-12 mt-1">
                                <div class="form-label-group">
                                    <label class="form-label">Employee Type</label>
                                    <select class="form-control select2" id="employee_type" name="employee_type[]"
                                        class="form-control" multiple>
                                        @foreach ($employeeTypes as $empType)
                                            <option value="{{ $empType }}">
                                                {{ ucfirst($empType) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-12 mt-1">
                                <div class="form-label-group">
                                    <label class="form-label">Employees</label>
                                    <select class="form-control select2" id="employee_id" name="employee_id[]" multiple>
                                        @foreach ($employees as $employee)
                                            <option value="{{ $employee->id }}">
                                                {{ $employee->name }}({{ $employee->employee_code }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-12 mt-1">
                                <div class="form-label-group">
                                    <label class="form-label">Request Status</label>
                                    <select class="form-control select2" id="status" name="status"
                                        class="form-control">
                                        <option value="">Total Requests</option>
                                        <option value="pending">Pending</option>
                                        <option value="approved">Approved Requests</option>
                                        <option value="rejected">Rejected Requests</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <button type="submit" id="filterSubmitBtn"
                            class="btn btn-primary mt-2 mb-1 d-grid w-100 d-flex justify-content-center">
                            <i data-feather='search' class="me-2"></i>
                            {{ trans('common/common.search') }}
                        </button>
                    </div>
                </div>
            </form>
        </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 }}/requests?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 }}/requests?tab1=my-approvals&{{ http_build_query(request()->except('tab1', 'tab2', 'page')) }}">My
                                Approvals
                            </a>
                        </li>
                    </ul>

                    <div class="row align-items-center">
                        <div class="col-md-8"></div>
                        <div class="col-md-4 row">
                            <div class="col-md-10" style="float: right;">
                                <input type="text" placeholder="Search by name" id="search"
                                    onchange="putInFilters()" class="form-control" value="{{ request()->search }}">
                            </div>
                            <div class="col-md-2" style="float: right;">
                                <button type="button" onclick="putInFilters()" class="btn btn-primary btn-sm d-grid">
                                    <i data-feather="search"></i>
                                </button>
                            </div>
                        </div>

                        <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 }}/requests?tab2=&{{ http_build_query(request()->except('tab2', 'page')) }}">All
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link {{ $tab2 == 'pending' ? 'active' : '' }}"
                                        href="{{ $orgUrl }}/requests?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 }}/requests?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 }}/requests?tab2=rejected&{{ http_build_query(request()->except('tab2', 'page')) }}">Rejected
                                    </a>
                                </li>
                            </ul>
                            <table class="dt-column-search table table-responsive dataTable" id="dataTable"
                                data-url="">
                                <thead>
                                    @if (($tab1 == 'my-approvals' || ($tab1 == 'all-requests' && Auth::user()->isOrganizationalAdmin())) && ($tab2 == '' || $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>{{ trans('request/request.employee_name') }}</th>
                                    <th>{{ trans('request/request.employee_code') }}</th>
                                    @if ($type == 'regularize')
                                        <th>{{ trans('request/request.punch_in_time') }}</th>
                                        <th>{{ trans('request/request.punch_out_time') }}</th>
                                    @endif
                                    @if ($type == 'regularize' || $type == 'od')
                                        <th>{{ trans('request/request.requested_punch_in_date_time') }}</th>
                                        <th>{{ trans('request/request.requested_punch_out_date_time') }}</th>
                                    @else
                                        <th>{{ trans('request/request.request_from_date') }}</th>
                                        <th>{{ trans('request/request.request_to_date') }}</th>
                                    @endif
                                    <th>{{ trans('request/request.pending_at') }}</th>
                                    <th>{{ trans('request/request.approval_level') }}</th>

                                    @if (in_array($type, ['od', 'wfh']))
                                        <th>{{ trans('request/request.from_location') }}</th>
                                    @endif

                                    @if ($type == 'od')
                                        <th>{{ trans('request/request.to_location') }}</th>
                                        <th>Duration</th>
                                        <th>Compensate As</th>
                                    @endif

                                    @if ($type == 'ot')
                                        <th>{{ trans('request/request.overtime_hour') }}</th>
                                    @endif

                                    @if ($type == 'wfo')
                                        <th>{{ trans('request/request.floor_and_seat_booking') }}</th>
                                    @endif

                                    <th>{{ trans('request/request.request_reason') }}</th>
                                    @if ($type == 'regularize')
                                        <th>{{ trans('common/common.attachment') }}</th>
                                    @endif
                                    @if ($tab1 == 'my-approvals')
                                        <th>{{ trans('common/common.my_status') }}</th>
                                    @endif
                                    <th>{{ trans('common/common.status') }}</th>
                                    <th>{{ trans('request/request.submission_date') }}</th>
                                    <th>{{ trans('request/request.applied_by') }}</th>
                                    <th>{{ trans('common/common.actions') }}</th>
                                </thead>
                                <tbody>
                                    @foreach ($empRequests as $key => $empRequest)
                                        <tr class="even">
                                            @if (($tab1 == 'my-approvals' || ($tab1 == 'all-requests' && Auth::user()->isOrganizationalAdmin())) && ($tab2 == '' || $tab2 == 'pending'))
                                                <td class="pe-0">
                                                    @if ($empRequest->status == 'pending')
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input comp-off-select"
                                                                type="checkbox" value="{{ $empRequest->id }}">
                                                        </div>
                                                    @endif
                                                </td>
                                            @endif
                                            <td class="sorting_1">{{ $empRequests->firstItem() + $key }}</td>
                                            <td class="">
                                                <div class="d-flex flex-row">
                                                    <div class="avatar me-75">
                                                        <img src="{{ isset($empRequest->employee->image) ? $empRequest->employee->image : '' }}"
                                                            onerror="this.src='/assets/img/default-profile-3.png'"
                                                            width="32" height="32"
                                                            alt="{{ isset($empRequest->employee->name) ? $empRequest->employee->name : '' }}">
                                                    </div>
                                                    <div class="my-auto">
                                                        <h6 class="mb-0 fw-bolder text-dark hr-dashfullemplname">
                                                            {{ isset($empRequest->employee->name) ? $empRequest->employee->name : '' }}
                                                        </h6>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>{{ isset($empRequest->employee->employee_code) ? $empRequest->employee->employee_code : '' }}
                                            </td>
                                            @if ($type == 'regularize')
                                                <td>
                                                    @if ($empRequest->in_time)
                                                        {{ App\Helpers\GeneralHelper::timeFormat($empRequest->in_time) }}
                                                    @endif
                                                </td>
                                                <td>
                                                    @if ($empRequest->out_time)
                                                        {{ App\Helpers\GeneralHelper::timeFormat($empRequest->out_time) }}
                                                    @endif
                                                </td>
                                            @endif
                                            @if ($type == 'regularize' || ($type == 'od' && $empRequest->sub_loc_name == 'Hourly'))
                                                <td>
                                                    @if ($empRequest->request_from_date && $empRequest->request_from_time)
                                                        {{ App\Helpers\GeneralHelper::dateTimeFormat("$empRequest->request_from_date $empRequest->request_from_time") }}
                                                    @endif
                                                </td>
                                                <td>
                                                    @if ($empRequest->request_to_date && $empRequest->request_to_time)
                                                        {{ App\Helpers\GeneralHelper::dateTimeFormat("$empRequest->request_to_date $empRequest->request_to_time") }}
                                                    @endif
                                                </td>
                                            @else
                                                <td>
                                                    @if ($empRequest->request_from_date)
                                                        {{ App\Helpers\GeneralHelper::dateFormat($empRequest->request_from_date) }}
                                                    @endif
                                                </td>
                                                <td>
                                                    @if ($empRequest->request_to_date)
                                                        {{ App\Helpers\GeneralHelper::dateFormat($empRequest->request_to_date) }}
                                                    @endif
                                                </td>
                                            @endif

                                            <td>{{ $empRequest->approvalLevel->approver->name ?? '-' }}</td>
                                            <td>{{ $empRequest->approvalLevel->approver_level ?? '-' }}</td>

                                            @if (in_array($type, ['od', 'wfh']))
                                                <td>{{ $empRequest->location }}</td>
                                            @endif

                                            @if ($type == 'od')
                                                <td>{{ $empRequest->to_location }}</td>
                                                <td>{{ $empRequest->sub_loc_name ?? '-' }}</td>
                                                <td>{{ $empRequest->compensate_as ?? '-' }}</td>
                                            @endif

                                            @if ($type == 'ot')
                                                <td>{{ $empRequest->overtime_hour }}</td>
                                            @endif

                                            @if ($type == 'wfo')
                                                <th>{{ $empRequest->floor_seat }}</th>
                                            @endif

                                            <td>
                                                {{ $empRequest->request_reason }}
                                            </td>
                                            @if ($type == 'regularize')
                                                <td>
                                                    @if ($empRequest->attachment)
                                                        <a href="{{ $empRequest->attachment }}" target="_blank"><i
                                                                data-feather="file" class="font-4"></i></a>
                                                    @endif
                                                </td>
                                            @endif

                                            @if ($tab1 == 'my-approvals')
                                                <td>
                                                    @if (!empty($empRequest->myApprovalLevel->status))
                                                        @if (@$empRequest->myApprovalLevel->status == App\Helpers\ConstantHelper::APPROVED)
                                                            <span
                                                                class="badge rounded-pill badge-light-success badgeborder-radius">{{ ucfirst(@$empRequest->myApprovalLevel->status) }}</span>
                                                        @elseif(
                                                            @$empRequest->myApprovalLevel->status == App\Helpers\ConstantHelper::CANCELED ||
                                                                @$empRequest->myApprovalLevel->status == App\Helpers\ConstantHelper::REJECTED)
                                                            <span
                                                                class="badge rounded-pill badge-light-danger badgeborder-radius">{{ ucfirst(@$empRequest->myApprovalLevel->status) }}</span>
                                                        @else
                                                            <span
                                                                class="badge rounded-pill badge-light-warning badgeborder-radius">{{ ucfirst(@$empRequest->myApprovalLevel->status) }}</span>
                                                        @endif
                                                    @endif
                                                </td>
                                            @endif

                                            <td>
                                                @if ($empRequest->status == App\Helpers\ConstantHelper::APPROVED)
                                                    <span
                                                        class="badge rounded-pill badge-light-success badgeborder-radius">{{ ucfirst($empRequest->status) }}</span>
                                                @elseif(
                                                    $empRequest->status == App\Helpers\ConstantHelper::CANCELED ||
                                                        $empRequest->status == App\Helpers\ConstantHelper::REJECTED)
                                                    <span
                                                        class="badge rounded-pill badge-light-danger badgeborder-radius">{{ ucfirst($empRequest->status) }}</span>
                                                @else
                                                    <span
                                                        class="badge rounded-pill badge-light-warning badgeborder-radius">{{ ucfirst($empRequest->status) }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                {{ App\Helpers\GeneralHelper::dateTimeFormat($empRequest->created_at) }}
                                            </td>
                                            <td>
                                                @php
                                                    if ($empRequest->created_by_type == 'admin') {
                                                        $appliedBy = $empRequest->createdBy;
                                                    } else {
                                                        $appliedBy = $empRequest->createdByEmployee;
                                                    }
                                                @endphp
                                                {{ $appliedBy->name ?? '' }}
                                            </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"
                                                            onclick='showApprovalLevels(@json($empRequest->approvalLevels))'
                                                            href="#"><i data-feather="eye" class="font-4"
                                                                aria-hidden="true"></i><span class="align-middle">
                                                                View</span></a>
                                                        @if (
                                                            $user->isOrganizationalAdmin() 
                                                            && $empRequest->status == 'approved'
                                                            && $type == 'od'
                                                            )
                                                            <a class="dropdown-item approval-btn" href="#"
                                                                data-id="{{ $empRequest->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' || ($tab1 == 'all-requests' && Auth::user()->isOrganizationalAdmin())) && (($tab2 == '' && $empRequest->status == 'pending') || $tab2 == 'pending'))
                                                            <a class="dropdown-item approval-btn" href="#"
                                                                data-id="{{ $empRequest->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="{{ $empRequest->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($empRequests) == 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">
                                    {{ $empRequests->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">{{ $title }} 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 fade" id="approval-level-popup" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg 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-3">
                    <div class="mb-2">
                        <h3 class="mb-2" id="modelHeading">{{ $title }} Approvals</h3>
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Approver</th>
                                <th>Level</th>
                                <th>Status</th>
                                <th>Action At</th>
                                <th>Remarks</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </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 type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    <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();
        });
        $(function() {
            $('.select2').select2();

            $('input[name="date_range"]').daterangepicker({
                opens: 'left'
            })
        });

        $('#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 += `/requests/${status}/${ids[0]}`;
            } else {
                actionUrl += `/requests/${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');
        }

        function showApprovalLevels(approvalLevels) {
            html = '';
            approvalLevels.forEach((item, key) => {
                html += `
                    <tr>
                        <td>${key + 1}</td>
                        <td>${item?.approver?.name || ''} ${item?.approver?.employee_code ? "("+item?.approver?.employee_code+")" : ''}</td>
                        <td>${item?.approver_level   || '-'}</td>
                        <td>${item?.status || ''}</td>
                        <td>${item?.action_at || ''}</td>
                        <td>${item?.remarks || ''}</td>
                    </tr>
                `;
            });

            $('#approval-level-popup tbody').html(html);
            $('#approval-level-popup').modal('show');
        }

        function putInFilters() {
            var search = $('#search').val();
            $('#searchFilter').val(search);

            $('#filterSubmitBtn').click();
        }
    </script>
@endpush