@extends('layouts.app')

@section('title', 'Attendance')
@section('heading', 'Attendance')

@section('content')
@include('attendance.top-submenu')
    @php
        $canManageAttendance = (bool) ($canManageAttendance ?? false);
        $markableUsers = $markableUsers ?? collect();
        $dayDetails = $dayDetails ?? [];
        $selectedEmployee = $selectedEmployee ?? null;
        $canRequestRegularization = (bool) ($canRequestRegularization ?? false);
        $regularizationsByDate = $regularizationsByDate ?? collect();
        $selectedYear = $selectedYear ?? now()->year;
        $selectedMonth = $selectedMonth ?? now()->month;
        $selectedEmployeeId = $selectedEmployeeId ?? auth()->id();
    @endphp
    <x-card>
        <div class="mb-4 flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
            <div>
                <p class="text-slate-600">Monthly attendance calendar</p>
                @if($selectedEmployee)
                    <p class="mt-1 text-sm font-semibold text-slate-900">
                        {{ $selectedEmployee->name }}
                        @if($selectedEmployee->department?->name)
                            <span class="font-normal text-slate-500">· {{ $selectedEmployee->department->name }}</span>
                        @endif
                    </p>
                    @if(! empty($weekoffRuleName))
                        <p class="mt-0.5 text-xs text-slate-500">Weekoff rule: <span class="font-medium text-slate-700">{{ $weekoffRuleName }}</span></p>
                    @endif
                @endif
            </div>
            <div class="flex flex-wrap items-center gap-2 md:justify-end lg:justify-end">
                @if($canManageAttendance)
                    <button
                        type="button"
                        x-data
                        x-on:click="$dispatch('open-modal', 'attendance-add-new')"
                        class="inline-flex items-center rounded-lg bg-primary px-3 py-2 text-sm font-medium text-white shadow-sm hover:opacity-95"
                    >
                        Add New Attendance
                    </button>
                    <a
                        href="{{ route('attendance.bulk') }}"
                        class="inline-flex items-center rounded-lg bg-orange-500 px-3 py-2 text-sm font-medium text-white shadow-sm hover:opacity-95"
                    >
                        Mark Bulk Attendance
                    </a>
                @endif
            </div>
        </div>

        <form method="GET" action="{{ route('attendance.index') }}" autocomplete="off" data-attendance-employee-id="{{ (int) $selectedEmployeeId }}" data-attendance-month="{{ $monthValue }}" class="mb-5 flex flex-wrap items-end justify-end gap-3 rounded-lg border border-slate-200 bg-slate-50 p-3">
            @if($canPickEmployee ?? false)
                <div class="justify-end">
                    <label class="mb-1 block text-xs font-medium uppercase text-slate-500">Employee</label>
                    <select name="employee_id" autocomplete="off" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2" onchange="this.form.submit()" style="width: 200px">
                        @foreach($employeeOptions as $employee)
                            <option value="{{ $employee->id }}" @selected((int) $selectedEmployeeId === (int) $employee->id)>
                                {{ $employee->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            @endif
            <div>
                <label class="mb-1 block text-xs font-medium uppercase text-slate-500">Month</label>
                <input
                    type="month"
                    name="month_picker"
                    value="{{ $monthValue }}"
                    max="{{ now()->format('Y-m') }}"
                    class="rounded-lg border border-slate-300 px-3 py-2 text-sm"
                    autocomplete="off"
                    onchange="syncAttendanceMonthFilter(this)"
                >
                <input type="hidden" name="year" id="attendance-year" value="{{ $selectedYear }}">
                <input type="hidden" name="month" id="attendance-month" value="{{ $selectedMonth }}">
            </div>
            <div class="flex items-center gap-2">
                <a
                    href="{{ $prevMonthUrl }}"
                    class="inline-flex items-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
                    title="Previous month"
                >
                    <i class="bi bi-chevron-left"></i>
                </a>
                @if($nextMonthUrl)
                    <a
                        href="{{ $nextMonthUrl }}"
                        class="inline-flex items-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
                        title="Next month"
                    >
                        <i class="bi bi-chevron-right"></i>
                    </a>
                @else
                    <span class="inline-flex cursor-not-allowed items-center rounded-lg border border-slate-200 bg-slate-100 px-3 py-2 text-sm text-slate-400">
                        <i class="bi bi-chevron-right"></i>
                    </span>
                @endif
            </div>
        </form>

        @if($canManageAttendance)
            <x-modal name="attendance-add-new" slideFrom="right" class="ml-auto h-full w-full max-w-3xl overflow-y-auto rounded-none border-l border-slate-200">
                <x-slot name="title">Add New Attendance</x-slot>
                <form id="attendance-add-new-form" action="{{ route('attendance.mark-multi-day') }}" method="POST" class="grid gap-3 md:grid-cols-2">
                    @csrf
                    <div class="md:col-span-2">
                        <label class="mb-1 block text-xs font-medium uppercase text-slate-500">Users</label>
                        <select name="user_ids[]" multiple required class="h-28 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                            @foreach($markableUsers as $user)
                                <option value="{{ $user->id }}" @selected((int) $selectedEmployeeId === (int) $user->id)>{{ $user->name }} ({{ $user->employee_number ?? 'EMP-'.$user->id }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-medium uppercase text-slate-500">Date</label>
                        <input type="date" name="date" value="{{ now()->format('Y-m-d') }}" required class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" max="{{ now()->format('Y-m-d') }}">
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-medium uppercase text-slate-500">Clock In Time</label>
                        <input type="time" name="clock_in_time" step="1" required class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-medium uppercase text-slate-500">Clock Out Time</label>
                        <input type="time" name="clock_out_time" step="1" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-medium uppercase text-slate-500">Clock In IP Address</label>
                        <input type="text" name="clock_in_ip_address" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="Optional">
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-medium uppercase text-slate-500">Clock Out IP Address</label>
                        <input type="text" name="clock_out_ip_address" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="Optional">
                    </div>
                    <div class="md:col-span-2 flex flex-wrap items-center gap-4 pt-1">
                        <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                            <input type="checkbox" name="is_late" value="1" class="rounded border-slate-300">
                            Is Late
                        </label>
                        <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                            <input type="checkbox" name="is_half_day" value="1" class="rounded border-slate-300">
                            Is Half Day
                        </label>
                    </div>
                    <div class="md:col-span-2 flex items-center justify-end gap-2 pt-2">
                        <input type="hidden" name="overwrite" value="1">
                        <button type="button" x-data x-on:click="$dispatch('close-modal')" class="inline-flex items-center rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200">Cancel</button>
                        <button type="submit" class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:opacity-95">Create</button>
                    </div>
                </form>
            </x-modal>
        @endif

        <div class="mb-5 grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6">
            <x-stat-card title="Present" :value="$stats['present']"
                iconClass="bg-emerald-100 text-emerald-700"
                iconWrapperClass="h-10 w-10 rounded-lg flex items-center justify-center">
                <x-slot name="icon"><i class="bi bi-person-check"></i></x-slot>
            </x-stat-card>

            <x-stat-card title="Absent" :value="$stats['absent']"
                iconClass="bg-red-100 text-red-700"
                iconWrapperClass="h-10 w-10 rounded-lg flex items-center justify-center">
                <x-slot name="icon"><i class="bi bi-person-x"></i></x-slot>
            </x-stat-card>

            <x-stat-card title="On Leave" :value="$stats['on_leave']"
                iconClass="bg-sky-100 text-sky-700"
                iconWrapperClass="h-10 w-10 rounded-lg flex items-center justify-center">
                <x-slot name="icon"><i class="bi bi-calendar-x"></i></x-slot>
            </x-stat-card>

            <x-stat-card title="Late Arrivals" :value="$stats['late']"
                iconClass="bg-amber-100 text-amber-700"
                iconWrapperClass="h-10 w-10 rounded-lg flex items-center justify-center">
                <x-slot name="icon"><i class="bi bi-clock-history"></i></x-slot>
            </x-stat-card>

            <x-stat-card title="Missing Clock-out" :value="$stats['missing_punch_out'] ?? 0"
                iconClass="bg-red-100 text-red-700"
                iconWrapperClass="h-10 w-10 rounded-lg flex items-center justify-center">
                <x-slot name="icon"><i class="bi bi-clock-fill"></i></x-slot>
            </x-stat-card>

            <x-stat-card title="Reg. Pending" :value="$stats['regularization_pending'] ?? 0"
                iconClass="bg-violet-100 text-violet-700"
                iconWrapperClass="h-10 w-10 rounded-lg flex items-center justify-center">
                <x-slot name="icon"><i class="bi bi-pencil-square"></i></x-slot>
            </x-stat-card>
        </div>

        <p class="mb-3 text-sm font-semibold text-slate-900">Attendance Calendar — {{ $monthLabel }}</p>

        <x-attendance-month-calendar :weeks="$calendarWeeks" :employee-name="$selectedEmployee?->name" />

        @foreach($dayDetails as $date => $day)
            @php
                $details = $day['sessions_detailed'] ?? [];
                $clockIn = $day['clock_in'] ?? null;
                $clockOut = $day['clock_out'] ?? null;
                $totalSeconds = (int) (($clockIn && $clockOut) ? $clockIn->diffInSeconds($clockOut) : 0);
                $effectiveSeconds = (int) array_sum(array_map(fn ($d) => (int) ($d['duration_seconds'] ?? 0), $details));
                $totalH = intdiv($effectiveSeconds, 3600);
                $totalM = intdiv($effectiveSeconds % 3600, 60);
                $effectiveLabel = ($totalH > 0) ? "{$totalH} hrs {$totalM} mins" : "{$totalM} mins";
                $prod = $totalSeconds > 0 ? round(($effectiveSeconds / $totalSeconds) * 100, 2) : null;
                $formattedDate = \Carbon\Carbon::parse($date)->format('l, d-m-Y');
                $dayStatus = (string) ($day['status'] ?? '');
                $canDayActions = ! in_array($dayStatus, ['weekoff', 'holiday', 'future', 'outside', 'not_joined'], true);
                $clockInTimeValue = $clockIn ? $clockIn->format('H:i:s') : '';
                $clockOutTimeValue = $clockOut ? $clockOut->format('H:i:s') : '';
                $regularizationClockInValue = $clockIn ? $clockIn->format('H:i') : '';
                $regularizationClockOutValue = $clockOut ? $clockOut->format('H:i') : '';
                $dayRegularization = $regularizationsByDate->get($date);
                $visualStatus = (string) ($day['visual_status'] ?? '');
                $statusIcon = (string) ($day['icon'] ?? '');
                $statusTextClass = match ($visualStatus) {
                    'present' => 'text-emerald-700',
                    'late' => 'text-amber-700',
                    'missing_punch_out' => 'text-red-700',
                    'in_progress' => 'text-sky-700',
                    'early_out' => 'text-orange-700',
                    default => 'text-slate-900',
                };
                $missingOut = $visualStatus === 'missing_punch_out';
            @endphp
            <x-modal name="attendance-day-{{ $date }}" slideFrom="right" class="ml-auto h-full w-full max-w-[800px] overflow-y-auto rounded-none border-l border-slate-200">
                <x-slot name="title">Clock In/Out History</x-slot>
                <div class="space-y-3">
                    <div class="flex flex-col gap-3 border-b border-slate-200 pb-4 sm:flex-row sm:items-start sm:justify-between">
                        <div>
                            <p class="text-sm font-semibold text-slate-900">{{ $selectedEmployee?->name ?? '—' }}</p>
                            <p class="text-sm text-slate-600">{{ $formattedDate }}</p>
                            @if($day['display_status'] ?? '')
                                <p class="mt-2 inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold {{ $statusTextClass }}">
                                    @if($statusIcon)
                                        <i class="bi bi-{{ $statusIcon }}"></i>
                                    @endif
                                    {{ $day['display_status'] }}
                                    @if($day['regularization_status'] ?? null)
                                        <span class="text-slate-500">· Reg. {{ ucfirst($day['regularization_status']) }}</span>
                                    @endif
                                </p>
                            @endif
                        </div>
                        @if($canDayActions && $canManageAttendance)
                            <div class="flex flex-wrap gap-2">
                                <button
                                    type="button"
                                    class="inline-flex items-center rounded-lg bg-primary px-3 py-2 text-xs font-medium text-white hover:opacity-95 sm:text-sm"
                                    onclick="openAttendanceEditForDay(@json($date), @json((int) $selectedEmployeeId), @json($clockInTimeValue), @json($clockOutTimeValue))"
                                >
                                    <i class="bi bi-pencil-square me-1"></i>Update Attendance
                                </button>
                            </div>
                        @endif
                    </div>

                    <div class="rounded-xl border border-slate-200 bg-slate-50 p-4">
                        <p class="text-sm font-semibold text-slate-900">Day Summary</p>
                        <div class="mt-3 grid gap-2 text-sm">
                            <div class="flex items-center justify-between">
                                <span class="text-slate-600">Status</span>
                                <span class="font-semibold text-slate-900">{{ $day['display_status'] ?? '—' }}</span>
                            </div>
                            @if(! empty($day['attendance_type_label']))
                                <div class="flex items-center justify-between">
                                    <span class="text-slate-600">Check-in type</span>
                                    <span class="font-semibold text-slate-900">
                                        {{ $day['attendance_type_label'] }}
                                        @if(! empty($day['office_name']) && ($day['attendance_type'] ?? null) === 'office')
                                            <span class="font-normal text-slate-500">· {{ $day['office_name'] }}</span>
                                        @endif
                                    </span>
                                </div>
                            @endif
                            <div class="flex items-center justify-between">
                                <span class="text-slate-600">Clock In</span>
                                <span class="font-semibold text-slate-900">{{ $day['clock_in_label'] ?? '--' }}</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-slate-600">Clock Out</span>
                                <span @class(['font-semibold', $missingOut && empty($day['clock_out_label']) ? 'text-red-600' : 'text-slate-900'])>
                                    @if($missingOut && empty($day['clock_out_label']))
                                        <i class="bi bi-clock-fill me-1"></i>Missing
                                    @else
                                        {{ $day['clock_out_label'] ?? '--' }}
                                    @endif
                                </span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-slate-600">Total Work Hours</span>
                                <span class="font-semibold text-slate-900">{{ $day['hours'] ?? '--' }}</span>
                            </div>
                            @if(($day['biometric_punch_count'] ?? 0) > 0)
                                <div class="flex items-center justify-between">
                                    <span class="text-slate-600">Biometric punches</span>
                                    <span class="font-semibold text-slate-900">{{ $day['biometric_punch_count'] }}</span>
                                </div>
                            @endif
                            @if(! empty($details))
                                <div class="flex items-center justify-between">
                                    <span class="text-slate-600">Effective Work Time</span>
                                    <span class="font-semibold text-slate-900">{{ $effectiveLabel }}</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-slate-600">Productivity Rate</span>
                                    <span class="font-semibold {{ is_null($prod) ? 'text-slate-500' : 'text-emerald-700' }}">
                                        {{ is_null($prod) ? '--' : ($prod . ' %') }}
                                    </span>
                                </div>
                            @endif
                        </div>
                    </div>

                    @php $bioPunches = $day['biometric_punches'] ?? []; @endphp
                    @if(! empty($bioPunches))
                        <details class="rounded-xl border border-slate-200 bg-white open:shadow-sm" open>
                            <summary class="cursor-pointer list-none px-4 py-3 text-sm font-semibold text-slate-900">
                                Biometric punches
                                <span class="ml-1 font-normal text-slate-500">({{ count($bioPunches) }})</span>
                            </summary>
                            <div class="border-t border-slate-100 overflow-hidden">
                                <table class="min-w-full divide-y divide-slate-200">
                                    <thead class="bg-slate-50">
                                        <tr>
                                            <th class="px-4 py-2 text-left text-xs font-medium uppercase text-slate-500">Time</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium uppercase text-slate-500">Type</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-slate-100 bg-white">
                                        @foreach($bioPunches as $bp)
                                            @php
                                                $type = $bp['processed_type'] ?? ($bp['is_duplicate'] ? 'DUPLICATE' : '—');
                                                $typeClass = match ($type) {
                                                    'FIRST_IN' => 'bg-emerald-50 text-emerald-700',
                                                    'LAST_OUT' => 'bg-indigo-50 text-indigo-700',
                                                    'INTERMEDIATE' => 'bg-slate-100 text-slate-600',
                                                    'DUPLICATE' => 'bg-amber-50 text-amber-700',
                                                    default => 'bg-slate-100 text-slate-600',
                                                };
                                                $label = match ($type) {
                                                    'FIRST_IN' => 'First IN',
                                                    'LAST_OUT' => 'Last OUT',
                                                    'INTERMEDIATE' => 'Intermediate',
                                                    'DUPLICATE' => 'Duplicate',
                                                    default => $type,
                                                };
                                            @endphp
                                            <tr>
                                                <td class="px-4 py-2.5 text-sm text-slate-700">{{ $bp['time'] ?? '—' }}</td>
                                                <td class="px-4 py-2.5 text-sm">
                                                    <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-semibold {{ $typeClass }}">{{ $label }}</span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </details>
                    @endif

                    <div>
                        <p class="mb-2 text-sm font-semibold text-slate-900">Session Details</p>
                        @if(! empty($details))
                            <div class="overflow-hidden rounded-xl border border-slate-200">
                                <table class="min-w-full divide-y divide-slate-200">
                                    <thead class="bg-slate-50">
                                        <tr>
                                            <th class="px-4 py-3 text-left">Clock In Time</th>
                                            <th class="px-4 py-3 text-left">Clock Out Time</th>
                                            <th class="px-4 py-3 text-left">Duration</th>
                                            <th class="px-4 py-3 text-left">Notes</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-slate-200 bg-white">
                                        @foreach($details as $d)
                                            <tr>
                                                <td class="px-4 py-3 text-sm text-slate-700">{{ $d['start'] ?? '--' }}</td>
                                                <td class="px-4 py-3 text-sm text-slate-700">{{ $d['end'] ?? '--' }}</td>
                                                <td class="px-4 py-3 text-sm text-slate-700">{{ $d['duration_label'] ?? '--' }}</td>
                                                <td class="px-4 py-3 text-sm text-slate-600">{{ $d['notes'] ?: '—' }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <p class="text-sm text-slate-500">No session history for this date.</p>
                        @endif
                    </div>

                    @if($canDayActions && ($canRequestRegularization || $dayRegularization))
                        @include('attendance.partials.day-regularization', [
                            'date' => $date,
                            'regularization' => $dayRegularization,
                            'canRequest' => $canRequestRegularization,
                            'defaultClockIn' => $regularizationClockInValue,
                            'defaultClockOut' => $regularizationClockOutValue,
                            'selectedYear' => $selectedYear,
                            'selectedMonth' => $selectedMonth,
                            'selectedEmployeeId' => $selectedEmployeeId,
                        ])
                    @endif

                    <div class="flex justify-end pt-2">
                        <button type="button" x-data x-on:click="$dispatch('close-modal')" class="inline-flex items-center rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200">Close</button>
                    </div>
                </div>
            </x-modal>
        @endforeach
    </x-card>

    @push('scripts')
        <script>
            function restoreAttendanceFiltersFromPage() {
                const form = document.querySelector('form[data-attendance-employee-id]');
                if (!form) {
                    return;
                }

                const employeeId = form.getAttribute('data-attendance-employee-id');
                const select = form.querySelector('select[name="employee_id"]');
                if (select && employeeId) {
                    const option = Array.from(select.options).find((item) => String(item.value) === String(employeeId));
                    const rendered = select.nextElementSibling?.classList.contains('select2-container')
                        ? select.nextElementSibling.querySelector('.select2-selection__rendered')
                        : null;
                    const renderedLabel = (rendered?.getAttribute('title') || rendered?.textContent || '').trim();
                    const optionLabel = (option?.text || '').trim();
                    const filterIsStale = String(select.value) !== String(employeeId)
                        || (optionLabel !== '' && renderedLabel !== '' && renderedLabel !== optionLabel);

                    if (filterIsStale) {
                        const onChange = select.getAttribute('onchange');
                        select.onchange = null;
                        if (onChange) {
                            select.removeAttribute('onchange');
                        }
                        if (window.jQuery && window.jQuery(select).data('select2')) {
                            window.jQuery(select).val(String(employeeId)).trigger('change.select2');
                        } else {
                            select.value = String(employeeId);
                        }
                        if (onChange) {
                            select.setAttribute('onchange', onChange);
                        }
                    }
                }

                const monthValue = form.getAttribute('data-attendance-month');
                if (!monthValue) {
                    return;
                }
                const monthInput = form.querySelector('input[name="month_picker"]');
                if (monthInput && monthInput.value !== monthValue) {
                    monthInput.value = monthValue;
                }
                const [year, month] = monthValue.split('-');
                const yearInput = document.getElementById('attendance-year');
                const monthHidden = document.getElementById('attendance-month');
                if (yearInput) {
                    yearInput.value = year;
                }
                if (monthHidden && month) {
                    monthHidden.value = String(parseInt(month, 10));
                }
            }

            window.addEventListener('pageshow', restoreAttendanceFiltersFromPage);

            function syncAttendanceMonthFilter(input) {
                if (!input.value) {
                    return;
                }
                const [year, month] = input.value.split('-');
                document.getElementById('attendance-year').value = year;
                document.getElementById('attendance-month').value = String(parseInt(month, 10));
                input.form.submit();
            }

            function openAttendanceEditForDay(date, userId, clockIn, clockOut) {
                const form = document.getElementById('attendance-add-new-form');
                if (!form) {
                    return;
                }

                const dateInput = form.querySelector('[name="date"]');
                if (dateInput) {
                    dateInput.value = date;
                }

                const userSelect = form.querySelector('[name="user_ids[]"]');
                if (userSelect) {
                    Array.from(userSelect.options).forEach((option) => {
                        option.selected = String(option.value) === String(userId);
                    });
                    if (window.jQuery && window.jQuery(userSelect).data('select2')) {
                        window.jQuery(userSelect).trigger('change');
                    }
                }

                const clockInInput = form.querySelector('[name="clock_in_time"]');
                const clockOutInput = form.querySelector('[name="clock_out_time"]');
                if (clockInInput) {
                    clockInInput.value = clockIn || '';
                }
                if (clockOutInput) {
                    clockOutInput.value = clockOut || '';
                }

                window.dispatchEvent(new CustomEvent('close-modal'));
                window.dispatchEvent(new CustomEvent('open-modal', { detail: 'attendance-add-new' }));
            }
        </script>
    @endpush
@endsection