@php use App\Models\LeaveType;use App\Models\Staff; @endphp
@extends('employee.layouts.app')
@section('title',get_setting('site_name').' Leave')
@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-wrap .card-body.p-2 { padding: 0.5rem !important; }
        .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-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-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: 200px; 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-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 col-xl-10 mx-auto">

                <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
                    <div>
                        <h4 class="page-title mb-0">{{ __('Leave application') }}</h4>
                        <p class="text-muted mb-0 small">{{ __('Apply for leave and track your requests.') }}</p>
                    </div>
                    <button type="button" class="btn btn-primary" onclick="leave_add();">
                        <i class="fas fa-plus"></i> {{ __('Apply for leave') }}
                    </button>
                </div>

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

                <div class="form-row mb-3">
                    <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 class="card">
                    <div class="card-header d-flex flex-wrap align-items-center justify-content-between py-3">
                        <span><i class="fas fa-filter mr-1 text-muted"></i> {{ __('My leave requests') }}</span>
                        @if($hasFilters ?? false)
                            <a href="{{ route('employee.leave.application') }}" class="btn btn-sm btn-outline-secondary">{{ __('Clear filters') }}</a>
                        @endif
                    </div>

                    <form action="" method="get">
                        <div class="leave-app-filters">
                            <div class="form-row align-items-end">
                                <div class="form-group col-6 col-md-3 col-lg-2">
                                    <label>{{ __('Year') }}</label>
                                    <select name="year" class="form-control">
                                        <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-2">
                                    <label>{{ __('Month') }}</label>
                                    <select name="month" class="form-control">
                                        <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-2">
                                    <label>{{ __('Status') }}</label>
                                    <select name="approval" class="form-control">
                                        <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-2">
                                    <label>{{ __('Type') }}</label>
                                    <select name="type" class="form-control">
                                        <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-12 col-md-6 col-lg-2 mb-0">
                                    <label class="d-none d-lg-block">&nbsp;</label>
                                    <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-2">
                        <div class="table-responsive">
                            <table class="table table-hover leave-app-table mb-0">
                                <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('Leave type') }}</th>
                                    <th>{{ __('Apply date') }}</th>
                                    <th>{{ __('Category') }}</th>
                                    <th>{{ __('From / To') }}</th>
                                    <th>{{ __('Duration') }}</th>
                                    <th>{{ __('Reason') }}</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 $durationLabel = (float) $leave->number_of_days === 1.0 ? __('Day') : __('Days'); @endphp
                                    <tr>
                                        <td class="text-muted font-weight-bold">{{ $leaves->firstItem() + $key }}</td>
                                        <td><strong>{{ $leave->leave_type?->name ?? '—' }}</strong></td>
                                        <td>{{ $leave->apply_date }}</td>
                                        <td>
                                            <span class="leave-app-badge {{ $leave->type === 'paid' ? 'paid' : 'unpaid' }}">{{ $leave->type }}</span>
                                        </td>
                                        <td>
                                            <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">{{ $leave->start }}</span>
                                                </div>
                                                <div class="leave-app-daterange-row">
                                                    <span class="leave-app-daterange-label">{{ __('To') }}</span>
                                                    <span class="leave-app-daterange-value">{{ $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 leave-app-action-btns">
                                            @if($leave->status == 0)
                                                <button type="button" class="btn btn-primary btn-sm"
                                                        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="{{ __('View / edit') }}">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                            @else
                                                <button type="button" class="btn btn-light btn-sm"
                                                        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="{{ __('View') }}">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="{{ $leaveHandoverEnabled ? 11 : 10 }}" class="text-center text-muted py-5">
                                            <i class="fas fa-calendar-times fa-2x mb-2 d-block opacity-50"></i>
                                            {{ __('No leave applications yet.') }}
                                            <div class="mt-2">
                                                <button type="button" class="btn btn-sm btn-primary" onclick="leave_add()">
                                                    <i class="fas fa-plus"></i> {{ __('Apply for leave') }}
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @if($leaves->hasPages())
                        <div class="card-footer bg-white">{{ $leaves->links() }}</div>
                    @endif
                </div>

            </div>
        </div>
    </div>
@endsection

@section('modal')
    @php
        $leave_types = \App\Models\LeaveType::where('group_id', auth()->user()->staff->leave_group_id)->get();
    @endphp
    @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>

                        <input type="hidden" name="staff_id" id="staff_id" value="{{ auth()->user()->staff->id }}" onkeyup="staff_info()">

                        <div class="leave-app-modal-section">
                            <div class="leave-app-modal-section-title">{{ __('Leave type') }}</div>
                            <select name="leave_type" id="leave_type_select" class="form-control" required>
                                <option value="">{{ __('Select leave type') }}</option>
                                @foreach($leave_types as $leave_type)
                                    <option value="{{ $leave_type->id }}">{{ $leave_type->name }}</option>
                                @endforeach
                            </select>
                        </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 mb-2" required onchange="daycount()">
                                    <div class="d-none" id="start_date_hide">
                                        <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 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 mb-2" required onchange="holiday()">
                                    <div class="d-none" id="end_date_hide">
                                        <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 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" 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>
                                            @foreach($leave_types as $key => $leave_type)
                                                <tr>
                                                    <th>{{ $leave_type->name }}</th>
                                                    <td width="25%"><input class="form-control" type="text" id="leave-{{ $key }}" readonly></td>
                                                </tr>
                                            @endforeach
                                            </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'),
                                'excludeStaffId' => auth()->user()->staff?->id,
                            ])
                        @endif
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button 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">
                        <input type="hidden" name="staff_id" id="staff_id_hidden">
                        <input type="hidden" name="leave_type" id="leave_type_hidden">

                        <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" required disabled 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 }}</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" required disabled>
                                        <option value="">{{ __('Select leave type') }}</option>
                                        @foreach($leave_types 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 mb-2" required onchange="daycounts()" readonly>
                                    <div id="start_date_hide">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" id="btn-1_s" name="LeaveStartDayType" value="FH" onchange="daycounts()" readonly>
                                            <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()" readonly>
                                            <label class="form-check-label" for="btn-2_s">{{ __('Second half') }}</label>
                                        </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 mb-2" required onchange="holiday()" readonly>
                                    <div id="end_date_hide">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" id="btn-3_s" name="LeaveEndDayType" value="FH" onclick="daycounts()" readonly>
                                            <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()" readonly>
                                            <label class="form-check-label" for="btn-4_s">{{ __('Second half') }}</label>
                                        </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" 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 readonly></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($leave_types as $key => $leave_type)
                                                <tr>
                                                    <th>{{ $leave_type->name }}</th>
                                                    <td width="25%"><input class="form-control" 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'),
                                'excludeStaffId' => auth()->user()->staff?->id,
                            ])
                        @endif
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Update') }}</button>
                    </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() {
            const id = $('#staff_id').val();
            staff_id_dyanmic = 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);

                    });

                }
            })

            weekend(id);

        }

        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);
            $('#staff_id_hidden').val(staff_id);
            $('#leave_types').val(leave_type);
            $('#leave_type_hidden').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);
            }


            // Call additional functions
            staff_info_edit();
            weekend(staff_id);

            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 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').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_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 () {
            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').on('shown.bs.modal', function () {
                bindModalSelect2($(this));
            });
        })();

    </script>
@endsection