@php use App\Models\LeaveType;use App\Models\Staff;use App\Models\User; @endphp
@extends('admin.layouts.app')
@section('title',get_setting('site_name').' | Leave')
@section('content')
    <style>
        .leave-app-filters .select2-container {
            width: 100% !important;
        }

        .leave-app-filters .select2-selection__rendered {
            line-height: 31px !important;
        }

        .leave-app-filters .select2-container .select2-selection--single {
            height: 38px !important;
        }

        .leave-app-filters .select2-selection__arrow {
            height: 36px !important;
        }

        .leave-app-table-card {
            border: 0;
            box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
            border-radius: 0.5rem;
        }

        .leave-app-table-card .card-header {
            background: #fff;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            padding: 1rem 1.25rem;
        }

        .leave-app-table-card .card-body {
            padding: 1.25rem;
        }

        .leave-app-table thead th {
            font-weight: 600;
            font-size: 0.8125rem;
            text-transform: uppercase;
            letter-spacing: 0.02em;
            color: #5f6368;
            border-top: 0;
            white-space: nowrap;
        }

        .leave-app-table tbody td {
            vertical-align: middle;
        }

        .leave-app-staff-cell {
            font-weight: 500;
            max-width: 280px;
        }

        .leave-app-action-btns {
            display: inline-flex;
            flex-wrap: wrap;
            gap: 0.25rem;
            justify-content: flex-end;
        }

        .leave-app-action-btns .btn {
            min-width: 2rem;
        }

        .leave-app-daterange {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .leave-app-daterange-row {
            display: flex;
            align-items: baseline;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .leave-app-daterange-label {
            font-size: 0.6875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #5f6368;
            min-width: 2.5rem;
        }

        .leave-app-daterange-value {
            font-size: 0.875rem;
            font-weight: 400;
            color: #202124;
            font-variant-numeric: tabular-nums;
            line-height: 1.3;
        }

        .leave-app-modal .modal-content {
            border: none;
            border-radius: 0.5rem;
            box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.12);
        }

        .leave-app-modal .modal-header {
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            padding: 1rem 1.25rem;
        }

        .leave-app-modal .modal-title {
            font-weight: 600;
            font-size: 1.05rem;
        }

        .leave-app-modal .modal-body {
            padding: 1.25rem;
        }

        .leave-app-modal .modal-footer {
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            padding: 0.875rem 1.25rem;
        }

        .leave-app-modal-label {
            display: block;
            font-size: 0.8125rem;
            font-weight: 600;
            color: #5f6368;
            margin-bottom: 0.35rem;
        }

        .leave-app-modal-section {
            background: #f8f9fa;
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 0.375rem;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .leave-app-modal-section-title {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #5f6368;
            margin-bottom: 0.75rem;
        }

        .leave-app-modal .form-control[readonly],
        .leave-app-modal textarea[readonly] {
            background-color: #fff;
            border-color: #dee2e6;
            color: #212529;
            cursor: default;
        }

        .leave-app-modal-hint {
            font-size: 0.8125rem;
            color: #6c757d;
            margin-top: 0.25rem;
        }
    </style>
    <div class="row mt-3 mb-3">
        <div class="col-md-12 col-lg-12 col-xl-12 mx-auto">

            <div class="card leave-app-table-card">
                <div class="card-header gutters-5">
                    <div class="row w-100 align-items-center">
                        <div class="col-12 col-md-6 col-lg-6 mb-2 mb-md-0">
                            <h5 class="mb-0">Leave Application</h5>
                        </div>
                        <div class="col-12 col-md-6 col-lg-6 text-md-right">
                            @can('Leave-create')
                                <button type="button" class="btn btn-primary" onclick="leave_add();"><i
                                            class="las la-plus"></i> Add New
                                </button>
                            @endcan
                        </div>
                    </div>

                </div>

                <div class="card-body">

                    <form action="" method="get" class="mb-4">
                        <div class="row leave-app-filters align-items-end g-2">
                            <div class="col-12 col-sm-6 col-lg">
                                <select name="warehouse_id" class="form-control select2" title="{{ __('Branch') }}">
                                    <option value="">{{ __('Please Select Branch') }}</option>
                                    @foreach($warehouses as $wh)
                                        <option value="{{ $wh->id }}" @selected((string) request('warehouse_id') === (string) $wh->id)>{{ $wh->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12 col-sm-6 col-lg">
                                <select name="department_id" class="form-control select2" title="{{ __('Department') }}">
                                    <option value="">{{ __('Please Select Department') }}</option>
                                    @foreach($departments as $dept)
                                        <option value="{{ $dept->id }}" @selected((string) request('department_id') === (string) $dept->id)>{{ $dept->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12 col-sm-6 col-lg">
                                <select name="staff_id" class="select2 form-control" title="{{ __('Staff') }}">
                                    <option value="">Please Select Staff</option>
                                    @foreach(Staff::all() as $staff)
                                        @if($staff->user->is_active==1)
                                            <option value="{{$staff->id}}" @selected(request('staff_id') == $staff->id)>{{$staff->user->name}}
                                                ({{$staff->user_id}})
                                            </option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-6 col-sm-6 col-lg">
                                <select name="year" class="form-control select2" title="{{ __('Year') }}">
                                    <option value="">Please Select Year</option>
                                    @for($i=2020;$i<=date('Y');$i++)
                                        <option value="{{$i}}" @selected((string)request('year') === (string)$i)>{{$i}}</option>
                                    @endfor
                                </select>
                            </div>
                            <div class="col-6 col-sm-6 col-lg">
                                <select name="month" class="form-control select2" title="{{ __('Month') }}">
                                    <option value="">Please Select Month</option>
                                    @for($i=1;$i<=12;$i++)
                                        <option
                                            value="{{$i}}" @selected((string)request('month') === (string)$i)>{{date("F", mktime(0, 0, 0, $i, 1))}}</option>
                                    @endfor
                                </select>
                            </div>
                            <div class="col-6 col-sm-6 col-lg">
                                <select name="approval" class="form-control select2" title="{{ __('Approval') }}">
                                    <option value="">Please Select Any One</option>
                                    <option value="0" @selected((string)request('approval') === '0')>{{__('Pending')}}</option>
                                    <option value="1" @selected((string)request('approval') === '1')>{{__('Approve')}}</option>
                                    <option value="2" @selected((string)request('approval') === '2')>{{__('Reject')}}</option>
                                </select>
                            </div>
                            <div class="col-6 col-sm-6 col-lg">
                                <select name="type" class="form-control select2" title="{{ __('Type') }}">
                                    <option value="">Please Select Any One</option>
                                    <option value="paid" @selected(request('type') === 'paid')>{{__('Paid')}}</option>
                                    <option value="unpaid" @selected(request('type') === 'unpaid')>{{__('Unpaid')}}</option>
                                </select>
                            </div>
                            <div class="col-12 col-sm-6 col-lg-auto">
                                <button type="submit" class="btn btn-primary btn-block btn-sm px-4"><i
                                            class="fas fa-filter"></i>&nbsp;{{__('Filter')}}
                                </button>
                            </div>
                        </div>
                    </form>
                    <div class="table-responsive">
                    <table class="table aiz-table leave-app-table mb-0">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Staff Name</th>
                            <th>Apply Date</th>
                            <th class="text-center">Paid Leave</th>
                            <th>From / To</th>
                            <th>Duration</th>
                            <th>Remarks</th>
                            @if($leaveHandoverEnabled)
                                <th>{{ __('Handover to') }}</th>
                            @endif
                            <th class="text-center">Approval</th>
                            <th class="text-right">Action</th>

                        </tr>
                        </thead>

                        <tbody>
                        @php $status1=null;$status2=null; @endphp
                        @foreach($leaves as $key=>$leave)
                            @php
                                $staffRow = $leave->staff;
                                $durationLabel = (float)$leave->number_of_days === 1.0
                                    ? __('Day')
                                    : __('Days');
                            @endphp
                            <tr>
                                <td>{{$key+1}}</td>
                                <td class="leave-app-staff-cell">
                                    @if($staffRow && $staffRow->user)
                                        {{ $staffRow->user->name }}({{ $staffRow->user_id }})-{{ optional($staffRow->warehouse)->name ?: '-' }}
                                    @else
                                        —
                                    @endif
                                </td>
                                <td>{{$leave->apply_date}}</td>
                                <td class="text-center">

                                    @if($leave->type=='paid')
                                        <i class="fas fa-check-circle text-success fs-24"
                                           title="Paid Leave"></i>
                                    @else
                                        <i class="fas fa-times-circle text-danger fs-24"
                                           title="Unpaid Leave"></i>
                                    @endif

                                </td>
                                <td class="leave-app-daterange-cell">
                                    <div class="leave-app-daterange">
                                        <div class="leave-app-daterange-row">
                                            <span class="leave-app-daterange-label">{{ __('From') }}</span>
                                            <span class="leave-app-daterange-value text-nowrap">{{ $leave->start }}</span>
                                        </div>
                                        <div class="leave-app-daterange-row">
                                            <span class="leave-app-daterange-label">{{ __('To') }}</span>
                                            <span class="leave-app-daterange-value text-nowrap">{{ $leave->end }}</span>
                                        </div>
                                    </div>
                                </td>
                                <td>{{$leave->number_of_days}}&nbsp;{{ $durationLabel }}</td>
                                <td>{{$leave->reason}}</td>
                                @if($leaveHandoverEnabled)
                                    <td class="small">{{ $leave->handoverStaff?->selectOptionLabel() ?? '—' }}</td>
                                @endif
                                <td class="text-center">

                                    @if($leave->status==1)
                                        <i class="fas fa-check-circle text-success fs-24"
                                           title="Approved by {{User::where('id',$leave->approved_by)->value('name')}}"></i>
                                    @elseif($leave->status==0)
                                        <i class="fas fa-minus-circle text-info fs-24" title="Pending"></i>
                                    @else
                                        <i class="fas fa-times-circle text-danger fs-24"
                                           title="Rejected"></i>
                                    @endif

                                </td>

                                <td class="text-right text-nowrap leave-app-action-btns">
                                    @can('Leave-list')
                                        <a class="btn btn-primary btn-sm" href="javascript:void(0)"
                                           onclick='leave_show(@json($leave->id), @json($leave->start), @json($leave->end), @json($leave->reason), @json($leave->number_of_days), @json($leave->handoverStaff?->selectOptionLabel()), @json($leave->on_leave_address_contact))'><i
                                                class="fas fa-eye"></i></a>
                                    @endcan

                                    @can('Leave-edit')
                                        <a class="btn btn-primary btn-sm" href="javascript:void(0)"
                                           onclick='leave_update(@json($leave->id), @json($leave->staff_id), @json($leave->leave_type_id), @json($leave->start), @json($leave->end), @json($leave->reason), @json($leave->apply_date), @json($leave->number_of_days), @json($leave->first_status), @json($leave->second_status), @json($leave->responsibility_handover_staff_id), @json($leave->on_leave_address_contact))'><i
                                                class="fas fa-edit"></i></a>
                                    @endcan
                                    @can('Leave-delete')
                                        <a class="btn btn-danger btn-sm delete_modal"
                                           data-href="{{route('leave.application.destroy',$leave->id)}}"
                                           href="javascript:void(0)"><i
                                                class="fas fa-trash"></i></a>
                                    @endcan

                                </td>
                            </tr>
                        @endforeach
                        </tbody>

                    </table>
                    </div>
                    {{$leaves->appends(request()->query())->links()}}

                </div>
            </div>

        </div>
    </div>
@endsection

@section('modal')
    @include('modals.delete_modal')
    <div class="modal fade leave-app-modal" id="leave_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <form action="{{route('leave.application.store')}}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header align-items-start">
                        <div class="pr-3">
                            <h5 class="modal-title">{{ __('Leave application') }}</h5>
                            <p class="leave-app-modal-hint mb-0">{{ __('Apply date') }}:
                                <strong>{{ date('d-m-Y') }}</strong></p>
                        </div>
                        <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}"><span
                                    aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body pt-2">
                        <div class="row mb-3 d-none" id="errorMessage">
                            <div class="col-12 text-center">
                                <p class="alert alert-warning p-2 border rounded mb-0" id="errorMessageShow"></p>
                            </div>
                        </div>

                        <div class="leave-app-modal-section">
                            <div class="leave-app-modal-section-title">{{ __('Employee & leave type') }}</div>
                            <div class="row">
                                <div class="col-12 col-md-6">
                                    <label class="leave-app-modal-label" for="staff_id">{{ __('Staff') }}</label>
                                    <select name="staff_id" id="staff_id" class="form-control select2"
                                            data-live-search="true" required onchange="staff_info()">
                                        <option value="">{{__('Select Staff')}}</option>
                                        @foreach(Staff::all() as $staff)
                                            <option value="{{$staff->id}}">{{$staff->user->name}}({{$staff->user->id}})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="leave-app-modal-label" for="leave_type">{{ __('Leave type') }}</label>
                                    <select name="leave_type" id="leave_type" class="form-control select2"
                                            data-live-search="true" required>
                                        <option value="">{{__('Select Leave Type')}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="leave-app-modal-section">
                            <div class="leave-app-modal-section-title">{{ __('Leave period') }}</div>
                            <div class="row">
                                <div class="col-12 col-md-6">
                                    <label class="leave-app-modal-label" for="start_date">{{ __('Start date') }}</label>
                                    <input type="date" name="start" id="start_date" class="form-control" required
                                           onchange="daycount()">
                                    <div class="row mt-2 d-none" id="start_date_hide">
                                        <div class="col-12">
                                            <span class="text-muted small d-block mb-1">{{ __('Half day (start)') }}</span>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="btn-1"
                                                       name="LeaveStartDayType" value="FH"
                                                       onchange="daycount()" checked>
                                                <label class="form-check-label" for="btn-1">{{ __('First half') }}</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="btn-2"
                                                       name="LeaveStartDayType" value="SH"
                                                       onchange="daycount()">
                                                <label class="form-check-label" for="btn-2">{{ __('Second half') }}</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="leave-app-modal-label" for="end_date">{{ __('End date') }}</label>
                                    <input type="date" name="end" id="end_date" class="form-control" required
                                           onchange="holiday()" max="{{now()->endOfYear()->format('Y-m-d')}}">
                                    <div class="row mt-2 d-none" id="end_date_hide">
                                        <div class="col-12">
                                            <span class="text-muted small d-block mb-1">{{ __('Half day (end)') }}</span>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="btn-3"
                                                       name="LeaveEndDayType" value="FH"
                                                       onclick="daycount()">
                                                <label class="form-check-label" for="btn-3">{{ __('First half') }}</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="btn-4"
                                                       name="LeaveEndDayType" value="SH" onclick="daycount()" checked>
                                                <label class="form-check-label" for="btn-4">{{ __('Second half') }}</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="leave-app-modal-section mb-0">
                            <div class="leave-app-modal-section-title">{{ __('Details') }}</div>
                            <div class="row">
                                <div class="col-12 col-md-6">
                                    <label class="leave-app-modal-label" for="countDay">{{ __('Duration') }}</label>
                                    <div class="input-group mb-3">
                                        <input type="text" id="countDay" value="" name="countDay" class="form-control"
                                               aria-label="{{ __('Days') }}" readonly>
                                        <div class="input-group-append">
                                            <span class="input-group-text">{{ __('Days') }}</span>
                                        </div>
                                    </div>
                                    <label class="leave-app-modal-label" for="leave_store_reason">{{ __('Reason') }}</label>
                                    <textarea name="reason" id="leave_store_reason" rows="5" class="form-control"
                                              placeholder="{{ __('Type your reason') }}" required></textarea>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="leave-app-modal-label d-block">{{ __('Leave balance') }}</label>
                                    <div class="table-responsive border rounded bg-white">
                                        <table class="table table-sm mb-0">
                                            <tbody id="leave_type_show"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if($leaveHandoverEnabled)
                            @include('partials.leave_responsibility_handover_fields', [
                                'suffix' => '',
                                'handoverStaffList' => $handoverStaffList,
                                'handoverStaffId' => old('responsibility_handover_staff_id'),
                                'onLeaveContact' => old('on_leave_address_contact'),
                            ])
                        @endif

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{__('Cancel')}}</button>
                        <button data-toggle="tooltip" data-placement="top" type="submit" id="saveBtn"
                                class="btn btn-primary">{{__('Save')}}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>


    @php $leave_types_modal = LeaveType::all(); @endphp
    <div class="modal fade leave-app-modal" id="leave_modal_update" tabindex="-1" role="dialog" aria-hidden="true">
        <form action="{{route('leave.application.update')}}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header align-items-start">
                        <div class="pr-3">
                            <h5 class="modal-title">{{ __('Edit leave application') }}</h5>
                            <p class="leave-app-modal-hint mb-0">{{ __('Apply date') }}: <strong><span
                                            id="Apply_id"></span></strong></p>
                        </div>
                        <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}"><span
                                    aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body pt-2">
                        <div class="row mb-3 d-none" id="errorMessages">
                            <div class="col-12 text-center">
                                <p class="alert alert-warning p-2 border rounded mb-0" id="errorMessageShows"></p>
                            </div>
                        </div>
                        <input type="hidden" name="id" id="id">
                        <input type="hidden" name="apply_date" id="apply_date_2">

                        <div class="leave-app-modal-section">
                            <div class="leave-app-modal-section-title">{{ __('Employee & leave type') }}</div>
                            <div class="row">
                                <div class="col-12 col-md-6">
                                    <label class="leave-app-modal-label" for="staff_ids">{{ __('Staff') }}</label>
                                    <select name="staff_id" id="staff_ids" class="form-control select2" required
                                            onchange="staff_info_edit(this)" onclick="staff_info_edit(this)">
                                        <option value="">{{__('Select Staff')}}</option>
                                        @foreach(Staff::all() as $staff)
                                            <option value="{{$staff->id}}">{{$staff->user->name}}({{$staff->user_id}})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="leave-app-modal-label" for="leave_types">{{ __('Leave type') }}</label>
                                    <select name="leave_type" id="leave_types" class="form-control select2" required>
                                        <option value="">{{__('Select Leave Type')}}</option>
                                        @foreach($leave_types_modal as $leave_type)
                                            <option value="{{$leave_type->id}}">{{$leave_type->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="leave-app-modal-section">
                            <div class="leave-app-modal-section-title">{{ __('Leave period') }}</div>
                            <div class="row">
                                <div class="col-12 col-md-6">
                                    <label class="leave-app-modal-label" for="start">{{ __('Start date') }}</label>
                                    <input type="date" name="start" id="start" class="form-control" required
                                           onchange="daycounts()">
                                    <div class="row mt-2 d-none" id="start_date_hide_edit">
                                        <div class="col-12">
                                            <span class="text-muted small d-block mb-1">{{ __('Half day (start)') }}</span>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="btn-1_s"
                                                       name="LeaveStartDayType" value="FH"
                                                       onchange="daycounts()" checked>
                                                <label class="form-check-label" for="btn-1_s">{{ __('First half') }}</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="btn-2_s"
                                                       name="LeaveStartDayType" value="SH"
                                                       onchange="daycounts()">
                                                <label class="form-check-label" for="btn-2_s">{{ __('Second half') }}</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="leave-app-modal-label" for="end">{{ __('End date') }}</label>
                                    <input type="date" name="end" id="end" class="form-control" required
                                           onchange="holiday()">
                                    <div class="row mt-2 d-none" id="end_date_hide_edit">
                                        <div class="col-12">
                                            <span class="text-muted small d-block mb-1">{{ __('Half day (end)') }}</span>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="btn-3_s"
                                                       name="LeaveEndDayType" value="FH"
                                                       onclick="daycounts()">
                                                <label class="form-check-label" for="btn-3_s">{{ __('First half') }}</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="btn-4_s"
                                                       name="LeaveEndDayType" value="SH" onclick="daycounts()" checked>
                                                <label class="form-check-label" for="btn-4_s">{{ __('Second half') }}</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="leave-app-modal-section mb-0">
                            <div class="leave-app-modal-section-title">{{ __('Details') }}</div>
                            <div class="row">
                                <div class="col-12 col-md-6">
                                    <label class="leave-app-modal-label" for="countDays">{{ __('Duration') }}</label>
                                    <div class="input-group mb-3">
                                        <input type="text" id="countDays" value="" name="countDay" class="form-control"
                                               aria-label="{{ __('Days') }}" readonly>
                                        <div class="input-group-append">
                                            <span class="input-group-text">{{ __('Days') }}</span>
                                        </div>
                                    </div>
                                    <label class="leave-app-modal-label" for="reason">{{ __('Reason') }}</label>
                                    <textarea name="reason" id="reason" rows="5" class="form-control"
                                              placeholder="{{ __('Type your reason') }}" required></textarea>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="leave-app-modal-label d-block">{{ __('Leave balance') }}</label>
                                    <div class="table-responsive border rounded bg-white">
                                        <table class="table table-sm mb-0">
                                            <tbody>
                                            @foreach($leave_types_modal as $key=>$leave_type)
                                                <tr>
                                                    <th class="align-middle">{{$leave_type->name}}</th>
                                                    <td class="align-middle" style="width: 36%;">
                                                        <input class="form-control form-control-sm" type="text" name=""
                                                               id="leaves-{{$key}}"
                                                               readonly></td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if($leaveHandoverEnabled)
                            @include('partials.leave_responsibility_handover_fields', [
                                'suffix' => '_edit',
                                'handoverStaffList' => $handoverStaffList,
                                'handoverStaffId' => old('responsibility_handover_staff_id'),
                                'onLeaveContact' => old('on_leave_address_contact'),
                            ])
                        @endif

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{__('Cancel')}}</button>
                        <button data-toggle="tooltip" data-placement="top" type="submit" id="saveBtns"
                                class="btn btn-primary">{{__('Update')}}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>




    <div class="modal fade leave-app-modal" id="leave_modal_show" tabindex="-1" role="dialog" aria-hidden="true">
        <form action="{{route('leave.application.approve')}}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header align-items-start">
                        <div class="pr-3">
                            <h5 class="modal-title">{{ __('Leave application') }}</h5>
                            <p class="leave-app-modal-hint mb-0">{{ __('Review details and approve or reject.') }}</p>
                        </div>
                        <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}"><span
                                    aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body pt-2">
                        <input type="hidden" name="leave_application_id" id="leave_application_id">

                        <div class="leave-app-modal-section">
                            <div class="leave-app-modal-section-title">{{ __('Leave period') }}</div>
                            <div class="row">
                                <div class="col-12 col-md-4">
                                    <label class="leave-app-modal-label" for="start_date_show">{{ __('Start date') }}</label>
                                    <input class="form-control" type="date" name="" id="start_date_show" readonly
                                           tabindex="-1">
                                </div>
                                <div class="col-12 col-md-4">
                                    <label class="leave-app-modal-label" for="end_date_show">{{ __('End date') }}</label>
                                    <input class="form-control" type="date" name="" id="end_date_show" readonly
                                           tabindex="-1">
                                </div>
                                <div class="col-12 col-md-4">
                                    <label class="leave-app-modal-label" for="total_day_show">{{ __('Duration') }}</label>
                                    <div class="input-group">
                                        <input class="form-control" type="text" name="" id="total_day_show" readonly
                                               tabindex="-1">
                                        <div class="input-group-append">
                                            <span class="input-group-text">{{ __('Days') }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="leave-app-modal-section mb-0">
                            <div class="leave-app-modal-section-title">{{ __('Details') }}</div>
                            <label class="leave-app-modal-label" for="reason_show">{{ __('Reason') }}</label>
                            <textarea class="form-control" name="" id="reason_show" rows="5" readonly
                                      tabindex="-1"></textarea>
                        </div>

                        @if($leaveHandoverEnabled)
                            <div class="leave-app-modal-section mb-0 mt-3" id="leave_handover_show_section">
                                <div class="leave-app-modal-section-title">{{ __('Responsibility handover') }}</div>
                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        <label class="leave-app-modal-label">{{ __('Responsibility handovered to') }}</label>
                                        <input type="text" class="form-control" id="handover_staff_show" readonly tabindex="-1">
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label class="leave-app-modal-label">{{ __('On leave address & contact no') }}</label>
                                        <textarea class="form-control" id="on_leave_address_show" rows="4" readonly tabindex="-1"></textarea>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <label class="leave-app-modal-label d-block">{{ __('Handover notice history') }}</label>
                                    <div id="handover_logs_show" class="small text-muted">{{ __('Loading…') }}</div>
                                </div>
                            </div>
                        @endif

                    </div>
                    <div class="modal-footer d-flex flex-wrap align-items-center justify-content-between">
                        <button type="button" class="btn btn-light mb-2 mb-sm-0" data-dismiss="modal">{{__('Close')}}</button>
                        <div class="d-flex flex-wrap justify-content-end">
                            <button data-toggle="tooltip" data-placement="top" type="submit"
                                    class="btn btn-danger" name="reject">{{__('Reject')}}</button>
                            <button data-toggle="tooltip" data-placement="top" type="submit"
                                    class="btn btn-primary ml-2" name="submit">{{__('Approve')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

@endsection

@section('script')
    <script>


        let weekend_day = [];
        let weekend_day_select = [];
        let staff_id_dyanmic;
        let holiday_count = 0;
        const leaveBridgeAccept = @json((int) get_setting('leave_bridge_accept') === 1);
        const leaveHandoverEnabled = @json($leaveHandoverEnabled);

        function resolveLeaveDayCount(weekendDaySelect) {
            if (leaveBridgeAccept) {
                return weekendDaySelect.length;
            }

            return weekendDaySelect.filter((element) => !weekend_day.includes(element)).length;
        }

        function leave_add() {
            $('#leave_modal').modal('show');
        }

        function staff_info() {
            var leaveTypeHeadings = document.querySelectorAll('.leave_type_heading');
            const id = $('#staff_id').val();
            staff_id_dyanmic = id;
            weekend(id);
            get_employee_leave_type(id)
            $('#start_date').val('');
            $('#end_date').val('');
            $('#countDay').val('');

            $('#start_date_hide').addClass('d-none');
            $('#end_date_hide').addClass('d-none');

            $.ajax({
                type: 'Get',
                url: '{{route('leave.type.count')}}',
                data: {id: id},
                success: function (data) {
                    const leave_count = data.map((datas, index) => {
                        $('#leave-' + index).val(datas);
                    });


                }
            })


        }

        function leave_update(id, staff_id, leave_type, from, to, reason, apply_date, countday, status1, status2, handoverStaffId, onLeaveContact) {
            $('#id').val(id);
            $('#Apply_id').html(apply_date);
            $('#staff_ids').val(staff_id);
            $('#leave_types').val(leave_type);
            $('#start').val(from);
            $('#end').val(to);
            $('#reason').val(reason)
            $('#apply_date_2').val(apply_date);
            $('#countDays').val(countday);

            // Update checkbox states
            if (status1 === 'LFH' && status2 === 'LFH') {
                $('#btn-1_s').prop('checked', true);
                $('#btn-3_s').prop('checked', true);
                $('#btn-2_s').prop('checked', false);
                $('#btn-4_s').prop('checked', false);
            } else if (status1 === 'LSH' && status2 === 'LSH') {
                $('#btn-2_s').prop('checked', true);
                $('#btn-4_s').prop('checked', true);
                $('#btn-1_s').prop('checked', false);
                $('#btn-3_s').prop('checked', false);
            } else if (status1 === '' && status2 === '') {
                $('#btn-1_s').prop('checked', true);
                $('#btn-4_s').prop('checked', true);
                $('#btn-2_s').prop('checked', false);
                $('#btn-3_s').prop('checked', false);
            } else {
                // If none of the above conditions match, ensure all are unchecked
                $('#btn-1_s').prop('checked', false);
                $('#btn-2_s').prop('checked', false);
                $('#btn-3_s').prop('checked', false);
                $('#btn-4_s').prop('checked', false);
            }


            staff_info_edit();
            weekend(staff_id);
            daycounts();

            if (leaveHandoverEnabled) {
                $('#responsibility_handover_staff_id_edit').val(handoverStaffId || '').trigger('change');
                $('#on_leave_address_contact_edit').val(onLeaveContact || '');
            }

            $('#leave_modal_update').modal('show');
        }

        function leave_show(id, from, to, reason, countday, handoverLabel, onLeaveContact) {
            $('#leave_application_id').val(id);
            $('#start_date_show').val(from);
            $('#end_date_show').val(to);
            $('#reason_show').val(reason)
            $('#total_day_show').val(countday);
            if (leaveHandoverEnabled) {
                $('#handover_staff_show').val(handoverLabel || '—');
                $('#on_leave_address_show').val(onLeaveContact || '—');
                $('#handover_logs_show').html(@json(__('Loading…')));
                $.get(@json(route('leave.handover.logs', ['id' => '__ID__'])).replace('__ID__', id))
                    .done(function (rows) {
                        if (!rows || !rows.length) {
                            $('#handover_logs_show').html(@json(__('No handover notices recorded.')));
                            return;
                        }
                        var html = '<ul class="list-unstyled mb-0 pl-0">';
                        rows.forEach(function (row) {
                            html += '<li class="mb-2 border-bottom pb-2">'
                                + '<strong>' + row.created_at + '</strong> — ' + row.event
                                + '<br>' + row.handover_staff + (row.notified ? ' <span class="badge badge-success">' + @json(__('Notified')) + '</span>' : '')
                                + '</li>';
                        });
                        html += '</ul>';
                        $('#handover_logs_show').html(html);
                    })
                    .fail(function () {
                        $('#handover_logs_show').html(@json(__('Could not load handover history.')));
                    });
            }
            $('#leave_modal_show').modal('show');
        }


        function staff_info_edit() {

            var id = $('#staff_ids').val();
            $.ajax({
                type: 'Get',
                url: '{{route('leave.type.count')}}',
                data: {id: id},
                success: function (data) {
                    const leave_count = data.map((datas, index) => {
                        $('#leaves-' + index).val(datas);

                    });

                }
            })


        }

        function daycount() {
            let start_date = $('#start_date').val();
            let end_date = $('#end_date').val();
            // holiday_count = $('#holiday_id').val();
            weekend_day_select = [];
            if (start_date !== '' && end_date !== '') {
                $('#start_date_hide').removeClass('d-none');
                $('#end_date_hide').removeClass('d-none');

            } else {
                $('#start_date_hide').addClass('d-none');
                $('#end_date_hide').addClass('d-none');
            }
// Convert date strings to Date objects
            var startDateObject = new Date(start_date);
            var endDateObject = new Date(end_date);


// Function to get the week name (e.g., Monday, Tuesday, etc.)
            function getWeekName(date) {
                const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
                return daysOfWeek[date.getDay()];
            }

// Loop through the dates and display each date with its week name
            var currentDate = new Date(startDateObject);
            while (currentDate <= endDateObject) {
                var formattedDate = currentDate.toISOString().slice(0, 10); // Format the date as "YYYY-MM-DD"
                var weekName = getWeekName(currentDate);
                weekend_day_select.push(weekName);

// Move to the next date
                currentDate.setDate(currentDate.getDate() + 1);
            }

            let leaveDayCount = resolveLeaveDayCount(weekend_day_select);
            let btn1 = document.getElementById('btn-1');
            let btn2 = document.getElementById('btn-2');
            let btn3 = document.getElementById('btn-3');
            let btn4 = document.getElementById('btn-4');
            if (leaveDayCount - holiday_count > 0) {
                if (btn1.checked && btn3.checked) {
                    $('#countDay').val(leaveDayCount - .5);
                } else if (btn2.checked && btn4.checked) {

                    $('#countDay').val(leaveDayCount - .5);
                } else if (btn2.checked && btn3.checked) {

                    $('#countDay').val(leaveDayCount - 1);

                } else {
                    $('#countDay').val(leaveDayCount - holiday_count);

                }
            } else {
                $('#countDay').val(leaveDayCount - holiday_count);
            }

            if (start_date !== '' && end_date !== '') {
                if ($('#countDay').val() <= 0) {
                    $('#saveBtn').attr('disabled', true);
                    $('#saveBtn').attr('title', 'Does not applied leave, Because of Zero days Leave');
                    $('#errorMessage').removeClass('d-none');
                    $('#errorMessageShow').html('Does not applied leave, Because of Zero days Leave');
                } else {
                    $('#saveBtn').attr('disabled', false);
                    $('#saveBtn').attr('title', '');
                    $('#errorMessage').addClass('d-none');
                    $('#errorMessageShow').html('');
                }
            }


        }


        function daycounts() {
            var start_date = $('#start').val();
            var end_date = $('#end').val();
            weekend_day_select = [];
            if (start_date !== '' && end_date !== '') {
                $('#start_date_hide_edit').removeClass('d-none');
                $('#end_date_hide_edit').removeClass('d-none');
            } else {
                $('#start_date_hide_edit').addClass('d-none');
                $('#end_date_hide_edit').addClass('d-none');
            }
// Convert date strings to Date objects
            var startDateObject = new Date(start_date);
            var endDateObject = new Date(end_date);


// Function to get the week name (e.g., Monday, Tuesday, etc.)
            function getWeekName(date) {
                const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
                return daysOfWeek[date.getDay()];
            }

// Loop through the dates and display each date with its week name
            var currentDate = new Date(startDateObject);
            while (currentDate <= endDateObject) {
                var formattedDate = currentDate.toISOString().slice(0, 10); // Format the date as "YYYY-MM-DD"
                var weekName = getWeekName(currentDate);
                weekend_day_select.push(weekName);

// Move to the next date
                currentDate.setDate(currentDate.getDate() + 1);
            }


            let leaveDayCount = resolveLeaveDayCount(weekend_day_select);
            let btn1 = document.getElementById('btn-1_s');
            let btn2 = document.getElementById('btn-2_s');
            let btn3 = document.getElementById('btn-3_s');
            let btn4 = document.getElementById('btn-4_s');
            if (btn1.checked && btn3.checked) {
                $('#countDays').val(leaveDayCount - .5);
            } else if (btn2.checked && btn4.checked) {

                $('#countDays').val(leaveDayCount - .5);
            } else if (btn2.checked && btn3.checked) {

                $('#countDays').val(leaveDayCount - 1);

            } else {
                $('#countDays').val(leaveDayCount);

            }

            if (start_date !== '' && end_date !== '') {
                if ($('#countDays').val() <= 0) {
                    $('#saveBtns').attr('disabled', true);
                    $('#saveBtns').attr('title', 'Does not applied leave, Because of Zero days Leave');
                    $('#errorMessages').removeClass('d-none');
                    $('#errorMessageShows').html('Does not applied leave, Because of Zero days Leave');
                } else {
                    $('#saveBtns').attr('disabled', false);
                    $('#saveBtns').attr('title', '');
                    $('#errorMessages').addClass('d-none');
                    $('#errorMessageShows').html('');
                }
            }


        }


        function weekend(id) {
            weekend_day = [];
            $.ajax({
                type: 'Get',
                url: '{{route('leave.weekend.check')}}',
                data: {id: id},

                success: function (res) {

                    const weekend_check = res.map((datas, index) => {
                        weekend_day.push(datas);

                    });

                }


            })

        }

        function holiday() {
            let id = staff_id_dyanmic;
            let start = $('#start_date').val();
            let end = $('#end_date').val();
            $.ajax({
                type: 'Get',
                url: '{{route('leave.holiday.check')}}',
                data: {id: id, start: start, end: end},

                success: function (res) {
                    $('#holiday_id').val(res);
                    holiday_count = res;
                    console.log(res);
                }


            })

            setTimeout(daycount, 1000);

        }


        function get_employee_leave_type(id) {
            var html = '';
            $.ajax({
                url: '{{route('get.employee.leave.type')}}',
                method: 'GET',
                data: {id: id},
                success: function (datares) {
                    $('#leave_type').find('option').not(':first').remove();
                    const leave_type = datares.map((data, index) => {
                        $('#leave_type').append(new Option(data.name, data.id));
                        html += `<tr id="leave_heading-${data.id}" class="leave_type_heading">
                            <th>${data.name}</th>
                            <td width="25%"><input class="form-control" type="text" name="" id="leave-${index}" readonly></td>
                         </tr>`;
                    });

                    $('#leave_type_show').html(html);

                }

            });


        }

        (function () {
            function bindModalSelect2($modal) {
                $modal.find('select.select2').each(function () {
                    var $el = $(this);
                    if ($el.data('select2')) {
                        $el.select2('destroy');
                    }
                    $el.select2({width: '100%', dropdownParent: $modal});
                });
            }

            $('#leave_modal, #leave_modal_update, #leave_modal_show').on('shown.bs.modal', function () {
                bindModalSelect2($(this));
            });
        })();

    </script>
@endsection