@php use App\Models\Staff; @endphp
@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | Leave Application')
@section('content')
    <style>
        .leave-app-wrap .card { border-radius: 14px; border: 1px solid #edf0f6; box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04); }
        .leave-app-wrap .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 700; }
        .leave-app-filters { background: #f8fafc; border-bottom: 1px solid #edf0f6; padding: 14px 16px; }
        .leave-app-filters label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); margin-bottom: 6px; }
        .leave-app-filters .form-group { margin-bottom: 10px; }
        @media (min-width: 992px) { .leave-app-filters .form-group { margin-bottom: 0; } }
        .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-stat { background: #fff; border: 1px solid #edf0f6; border-radius: 10px; padding: 10px 14px; text-align: center; height: 100%; }
        .leave-app-stat .num { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
        .leave-app-stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
        .leave-app-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(15,23,42,.65); border-top: 0; white-space: nowrap; }
        .leave-app-table tbody td { vertical-align: middle; }
        .leave-app-staff-cell { font-weight: 600; max-width: 280px; }
        .leave-app-action-btns { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
        .leave-app-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: capitalize; }
        .leave-app-badge.approved { background: rgba(34,197,94,.12); color: #166534; }
        .leave-app-badge.pending { background: rgba(14,165,233,.12); color: #0369a1; }
        .leave-app-badge.rejected { background: rgba(239,68,68,.12); color: #991b1b; }
        .leave-app-badge.paid { background: rgba(34,197,94,.12); color: #166534; }
        .leave-app-badge.unpaid { background: rgba(239,68,68,.12); color: #991b1b; }
        .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; color: #202124; font-variant-numeric: tabular-nums; line-height: 1.3; }
        .leave-app-remarks { max-width: 220px; white-space: normal; word-break: break-word; font-size: 13px; }
        .leave-app-modal .modal-content { border: none; border-radius: 12px; box-shadow: 0 0.5rem 2rem rgba(15, 23, 42, 0.15); }
        .leave-app-modal .modal-header { border-bottom: 1px solid #edf0f6; padding: 1rem 1.25rem; }
        .leave-app-modal .modal-title { font-weight: 700; font-size: 1.05rem; }
        .leave-app-modal .modal-body { padding: 1.25rem; }
        .leave-app-modal .modal-footer { border-top: 1px solid #edf0f6; padding: 0.875rem 1.25rem; }
        .leave-app-modal-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); margin-bottom: 6px; }
        .leave-app-modal-section { background: #f8fafc; border: 1px solid #edf0f6; border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
        .leave-app-modal-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgba(15,23,42,.55); 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; }
        .leave-handover-section { margin-top: 2px !important; }
    </style>
    <div class="container-fluid leave-app-wrap">
        <div class="row mt-3">
            <div class="col-12 d-flex flex-wrap justify-content-between align-items-center mb-3">
                <div>
                    <h4 class="page-title mb-0">Leave Application</h4>
                    <p class="text-muted mb-0">Review, approve, and manage employee leave requests.</p>
                </div>
                @can('Leave-create')
                    <button type="button" class="btn btn-primary" onclick="leave_add();">
                        <i class="las la-plus"></i> Add New
                    </button>
                @endcan
            </div>

            @if (session()->has('message'))
                <div class="col-12"><div class="alert alert-success">{{ session('message') }}</div></div>
            @endif
            @if (session()->has('error'))
                <div class="col-12"><div class="alert alert-danger">{{ session('error') }}</div></div>
            @endif

            <div class="col-12 mb-3">
                <div class="form-row">
                    <div class="col-6 col-md-3 mb-2">
                        <div class="leave-app-stat">
                            <div class="num text-primary">{{ (int) ($leaveStats->total ?? 0) }}</div>
                            <div class="lbl">Total</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="leave-app-stat">
                            <div class="num text-info">{{ (int) ($leaveStats->pending ?? 0) }}</div>
                            <div class="lbl">Pending</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="leave-app-stat">
                            <div class="num text-success">{{ (int) ($leaveStats->approved ?? 0) }}</div>
                            <div class="lbl">Approved</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="leave-app-stat">
                            <div class="num text-danger">{{ (int) ($leaveStats->rejected ?? 0) }}</div>
                            <div class="lbl">Rejected</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12">
            <div class="card">
                <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                    <span>Filters</span>
                    <a href="{{ route('leave.application') }}" class="btn btn-sm btn-outline-secondary">Clear Filters</a>
                </div>

                <form action="" method="get">
                    <div class="leave-app-filters">
                        <div class="form-row align-items-end">
                            @unless(\App\Support\BranchWiseFeature::appliesToUser())
                            <div class="form-group col-md-6 col-lg-2">
                                <label>{{ __('Branch') }}</label>
                                <select name="warehouse_id" class="form-control select2">
                                    <option value="">{{ __('All Branches') }}</option>
                                    @foreach($warehouses as $wh)
                                        <option value="{{ $wh->id }}" @selected((string) request('warehouse_id') === (string) $wh->id)>{{ $wh->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endunless
                            <div class="form-group col-md-6 col-lg-2">
                                <label>{{ __('Department') }}</label>
                                <select name="department_id" class="form-control select2">
                                    <option value="">{{ __('All Departments') }}</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="form-group col-md-6 col-lg-3">
                                <label>{{ __('Staff') }}</label>
                                <select name="staff_id" class="select2 form-control">
                                    <option value="">All Employees</option>
                                    @foreach($staffFilterList as $staff)
                                        @if($staff->user?->is_active)
                                            <option value="{{ $staff->id }}" @selected(request('staff_id') == $staff->id)>
                                                {{ $staff->user?->name ?? 'Staff #'.$staff->id }}({{ $staff->user_id }})-{{ $staff->designation?->name ?? 'No Designation' }}
                                            </option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-6 col-md-3 col-lg-1">
                                <label>{{ __('Year') }}</label>
                                <select name="year" class="form-control select2">
                                    <option value="">All</option>
                                    @for($i = 2020; $i <= date('Y'); $i++)
                                        <option value="{{ $i }}" @selected((string) request('year') === (string) $i)>{{ $i }}</option>
                                    @endfor
                                </select>
                            </div>
                            <div class="form-group col-6 col-md-3 col-lg-1">
                                <label>{{ __('Month') }}</label>
                                <select name="month" class="form-control select2">
                                    <option value="">All</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="form-group col-6 col-md-3 col-lg-1">
                                <label>{{ __('Status') }}</label>
                                <select name="approval" class="form-control select2">
                                    <option value="">All</option>
                                    <option value="0" @selected((string) request('approval') === '0')>{{ __('Pending') }}</option>
                                    <option value="1" @selected((string) request('approval') === '1')>{{ __('Approved') }}</option>
                                    <option value="2" @selected((string) request('approval') === '2')>{{ __('Rejected') }}</option>
                                </select>
                            </div>
                            <div class="form-group col-6 col-md-3 col-lg-1">
                                <label>{{ __('Type') }}</label>
                                <select name="type" class="form-control select2">
                                    <option value="">All</option>
                                    <option value="paid" @selected(request('type') === 'paid')>{{ __('Paid') }}</option>
                                    <option value="unpaid" @selected(request('type') === 'unpaid')>{{ __('Unpaid') }}</option>
                                </select>
                            </div>
                            <div class="form-group col-md-6 col-lg-1">
                                <button type="submit" class="btn btn-primary btn-block">
                                    <i class="fas fa-filter"></i> Filter
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="card-body p-0">
                    <div class="table-responsive">
                    <table class="table table-hover leave-app-table mb-0">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Employee</th>
                            <th>Leave Type</th>
                            <th>Apply Date</th>
                            <th>Category</th>
                            <th>From / To</th>
                            <th>Duration</th>
                            <th>Remarks</th>
                            <th class="text-center">{{ __('Document') }}</th>
                            @if($leaveHandoverEnabled)
                                <th>{{ __('Handover to') }}</th>
                            @endif
                            <th class="text-center">Status</th>
                            <th class="text-right">Action</th>
                        </tr>
                        </thead>

                        <tbody>
                        @php
                            $leaveDocService = app(\App\Services\LeaveSupportingDocumentService::class);
                        @endphp
                        @forelse($leaves as $key => $leave)
                            @php
                                $staffRow = $leave->staff;
                                $durationLabel = (float) $leave->number_of_days === 1.0 ? __('Day') : __('Days');
                            @endphp
                            <tr>
                                <td>{{ $leaves->firstItem() + $key }}</td>
                                <td class="leave-app-staff-cell">
                                    @if($staffRow && $staffRow->user)
                                        {{ $staffRow->user->name }}
                                        <br><small class="text-muted">ID: {{ $staffRow->user_id }} · {{ $staffRow->designation?->name ?? 'No Designation' }} · {{ $staffRow->warehouse?->name ?? '—' }}</small>
                                    @else
                                        —
                                    @endif
                                </td>
                                <td>{{ $leave->leave_type?->name ?? '—' }}</td>
                                <td>{{ $leave->apply_date }}</td>
                                <td>
                                    <span class="leave-app-badge {{ $leave->type === 'paid' ? 'paid' : 'unpaid' }}">{{ $leave->type }}</span>
                                </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 }} {{ $durationLabel }}</td>
                                <td class="leave-app-remarks">{{ $leave->reason ?: '—' }}</td>
                                <td class="text-center">
                                    @if($leaveDocService->hasDocument($leave))
                                        <a href="{{ route('leave.application.document', $leave->id) }}"
                                           class="btn btn-light btn-sm" title="{{ __('View document') }}"><i class="fas fa-paperclip"></i></a>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                @if($leaveHandoverEnabled)
                                    <td class="small">{{ $leave->handoverStaff?->selectOptionLabel() ?? '—' }}</td>
                                @endif
                                <td class="text-center">
                                    @if($leave->status == 1)
                                        <span class="leave-app-badge approved" title="Approved by {{ $leave->approvedBy?->name ?? '—' }}">Approved</span>
                                    @elseif($leave->status == 0)
                                        <span class="leave-app-badge pending">Pending</span>
                                    @else
                                        <span class="leave-app-badge rejected">Rejected</span>
                                    @endif
                                </td>

                                <td class="text-right text-nowrap leave-app-action-btns">
                                    @can('Leave-list')
                                        <a class="btn btn-light 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), @json($leaveDocService->hasDocument($leave) ? route('leave.application.document', $leave->id) : null))'
                                           title="View"><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), @json($leaveDocService->hasDocument($leave) ? route('leave.application.document', $leave->id) : null))'
                                           title="Edit"><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)" title="Delete"><i class="fas fa-trash"></i></a>
                                    @endcan
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ $leaveHandoverEnabled ? 12 : 11 }}" class="text-center text-muted py-4">No leave applications found.</td>
                            </tr>
                        @endforelse
                        </tbody>

                    </table>
                    </div>
                </div>

                @if($leaves->hasPages())
                    <div class="card-footer">{{ $leaves->links() }}</div>
                @endif
            </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" enctype="multipart/form-data">
            @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($staffFilterList as $staff)
                                            <option value="{{ $staff->id }}">{{ $staff->user?->name ?? 'Staff #'.$staff->id }}({{ $staff->user_id }})-{{ $staff->designation?->name ?? 'No Designation' }}</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 class="mt-3">
                                        @include('partials.leave_supporting_document_fields')
                                    </div>
                                </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>


    <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" enctype="multipart/form-data">
            @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($staffFilterList as $staff)
                                            <option value="{{ $staff->id }}">{{ $staff->user?->name ?? 'Staff #'.$staff->id }}({{ $staff->user_id }})-{{ $staff->designation?->name ?? 'No Designation' }}</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($leaveTypesForModal 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 id="leave_edit_document_current" class="mt-3 small d-none">
                                        <span class="text-muted">{{ __('Current file') }}:</span>
                                        <a href="#" id="supporting_document_edit_link" target="_blank" rel="noopener" class="ml-1">{{ __('View document') }}</a>
                                        <div class="custom-control custom-checkbox mt-2">
                                            <input type="checkbox" class="custom-control-input" name="remove_supporting_document" value="1" id="remove_supporting_document_edit">
                                            <label class="custom-control-label" for="remove_supporting_document_edit">{{ __('Remove current document') }}</label>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        @include('partials.leave_supporting_document_fields', ['suffix' => '_edit'])
                                    </div>
                                </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($leaveTypesForModal 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" 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 id="leave_show_document_wrap" class="mt-3 d-none">
                                <label class="leave-app-modal-label d-block">{{ __('Supporting document') }}</label>
                                <a href="#" id="leave_show_document_link" target="_blank" rel="noopener" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-paperclip"></i> {{ __('View document') }}
                                </a>
                            </div>
                        </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, documentUrl) {
            $('#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 || '');
            }

            $('#supporting_document_edit').val('');
            if (documentUrl) {
                $('#leave_edit_document_current').removeClass('d-none');
                $('#supporting_document_edit_link').attr('href', documentUrl);
                $('#remove_supporting_document_edit').prop('checked', false);
            } else {
                $('#leave_edit_document_current').addClass('d-none');
                $('#supporting_document_edit_link').attr('href', '#');
                $('#remove_supporting_document_edit').prop('checked', false);
            }

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

        function leave_show(id, from, to, reason, countday, handoverLabel, onLeaveContact, documentUrl) {
            $('#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 (documentUrl) {
                $('#leave_show_document_wrap').removeClass('d-none');
                $('#leave_show_document_link').attr('href', documentUrl);
            } else {
                $('#leave_show_document_wrap').addClass('d-none');
                $('#leave_show_document_link').attr('href', '#');
            }
            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);

                }

            });


        }

        $(document).ready(function () {
            $('.leave-app-filters select.select2').select2({ width: '100%' });
        });

        (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