@php
    $policy = $attendancePolicy ?? null;
    $allowWeb = $policy?->allowWebCheckin ?? true;
    $mode = $policy?->mode ?? 'normal';
    $allowsOffice = $policy?->allowsOffice() ?? false;
    $allowsRemote = $policy?->allowsRemote() ?? false;
    $isHybrid = $policy?->isHybrid() ?? false;
    $isNormal = $policy?->isNormal() ?? true;
    $requireOfficeLocation = (bool) ($policy?->requireLocationForOffice ?? true);
    $clockedIn = $todayAttendance && $todayAttendance->clock_in_date_time;
    $canClockIn = $allowWeb && ! ($todayHasOpenSession ?? false) && ! ($todayIsWeekoff ?? false);
    $canClockOut = $allowWeb && (bool) ($todayHasOpenSession ?? false);
    $offices = $attendanceOffices ?? [];
    $variant = $variant ?? 'full';
    $prefix = $prefix ?? 'att';
    $sessionType = $todayAttendance->attendance_type ?? '';
    $typeLabel = match ($todayAttendance->attendance_type ?? null) {
        'office' => 'Office',
        'remote' => 'Remote',
        'normal' => 'Normal',
        default => null,
    };
    $officeName = $todayAttendance?->clockInOffice?->name;
    $workingSeconds = ($clockedIn && empty($todayAttendance->clock_out_date_time))
        ? $todayAttendance->clock_in_date_time->diffInSeconds(now())
        : (int) ($todayAttendance->total_duration ?? 0);
    $punchJsPath = public_path('js/attendance-punch.js');
    $punchJsVersion = is_file($punchJsPath) ? filemtime($punchJsPath) : time();
@endphp

@if($allowWeb)
@php
    $showSessionSummary = isset($showSummary)
        ? (bool) $showSummary
        : ($variant === 'full' || $prefix === 'selfdash');
@endphp
<div class="attendance-punch" data-attendance-punch data-variant="{{ $variant }}" data-prefix="{{ $prefix }}" data-mode="{{ $mode }}" data-session-type="{{ $sessionType }}" data-allows-office="{{ $allowsOffice ? '1' : '0' }}" data-allows-remote="{{ $allowsRemote ? '1' : '0' }}" data-is-hybrid="{{ $isHybrid ? '1' : '0' }}" data-require-office-location="{{ $requireOfficeLocation ? '1' : '0' }}" data-accuracy-requirement="{{ $policy?->gpsAccuracyRequirement ?? '' }}" data-offices='@json($offices)'>
    @if($showSessionSummary)
        <div class="space-y-2">
            @if($clockedIn)
                <div class="flex flex-wrap gap-x-4 gap-y-1 text-sm text-slate-600">
                    <span>In: {{ $todayAttendance->clock_in_date_time->format('g:i A') }}</span>
                    @if($typeLabel)
                        <span>{{ $typeLabel }}{{ $officeName ? ' · '.$officeName : '' }}</span>
                    @endif
                    @if(($todayAttendance->remote_approval_status ?? null) === 'pending')
                        <span class="text-amber-700">Remote pending approval</span>
                    @endif
                    <span data-working-duration data-started-at="{{ $todayAttendance->clock_out_date_time ? '' : $todayAttendance->clock_in_date_time->toIso8601String() }}" data-total-seconds="{{ $workingSeconds }}">
                        Duration: {{ intdiv($workingSeconds, 3600) }}h {{ intdiv($workingSeconds % 3600, 60) }}m
                    </span>
                </div>
            @endif
            <div data-geo-status class="text-sm text-slate-600"></div>
        </div>
    @else
        <div data-geo-status class="sr-only" aria-live="polite"></div>
    @endif

    <div class="{{ $showSessionSummary ? 'mt-2' : '' }} flex flex-wrap items-center gap-2">
        @if($canClockIn)
            @if($isHybrid)
                <form action="{{ route('attendance.check-in') }}" method="post" class="attendance-punch-form mb-0" data-punch-type="hybrid">
                    @csrf
                    <input type="hidden" name="latitude" data-field="latitude" value="">
                    <input type="hidden" name="longitude" data-field="longitude" value="">
                    <input type="hidden" name="accuracy" data-field="accuracy" value="">
                    <input type="hidden" name="location" data-field="location" value="">
                    <button type="submit" data-office-submit class="inline-flex items-center gap-2 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-white hover:opacity-95 disabled:cursor-not-allowed disabled:opacity-60">
                        Check In
                    </button>
                </form>
            @else
                @if($allowsOffice)
                    <form action="{{ route('attendance.check-in') }}" method="post" class="attendance-punch-form mb-0" data-punch-type="office">
                        @csrf
                        <input type="hidden" name="latitude" data-field="latitude" value="">
                        <input type="hidden" name="longitude" data-field="longitude" value="">
                        <input type="hidden" name="accuracy" data-field="accuracy" value="">
                        <input type="hidden" name="location" data-field="location" value="">
                        <input type="hidden" name="attendance_type" value="office">
                        <button type="submit" data-office-submit class="inline-flex items-center gap-2 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-white hover:opacity-95 disabled:cursor-not-allowed disabled:opacity-60">
                            Check In
                        </button>
                    </form>
                @endif
                @if($allowsRemote)
                    <form action="{{ route('attendance.check-in') }}" method="post" class="attendance-punch-form mb-0" data-punch-type="remote">
                        @csrf
                        <input type="hidden" name="latitude" data-field="latitude" value="">
                        <input type="hidden" name="longitude" data-field="longitude" value="">
                        <input type="hidden" name="accuracy" data-field="accuracy" value="">
                        <input type="hidden" name="location" data-field="location" value="">
                        <input type="hidden" name="attendance_type" value="remote">
                        <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-white hover:opacity-95 disabled:cursor-not-allowed disabled:opacity-60">
                            Check In
                        </button>
                    </form>
                @endif
                @if($isNormal)
                    <form action="{{ route('attendance.check-in') }}" method="post" class="attendance-punch-form mb-0" data-punch-type="normal">
                        @csrf
                        <input type="hidden" name="latitude" data-field="latitude" value="">
                        <input type="hidden" name="longitude" data-field="longitude" value="">
                        <input type="hidden" name="accuracy" data-field="accuracy" value="">
                        <input type="hidden" name="location" data-field="location" value="">
                        <input type="hidden" name="attendance_type" value="normal">
                        <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-white hover:opacity-95">
                            Check In
                        </button>
                    </form>
                @endif
            @endif
        @endif
        @if($canClockOut)
            <form action="{{ route('attendance.check-out') }}" method="post" class="attendance-punch-form mb-0" data-punch-type="{{ $sessionType ?: 'normal' }}">
                @csrf
                <input type="hidden" name="latitude" data-field="latitude" value="">
                <input type="hidden" name="longitude" data-field="longitude" value="">
                <input type="hidden" name="accuracy" data-field="accuracy" value="">
                <input type="hidden" name="location" data-field="location" value="">
                <input type="hidden" name="attendance_type" value="{{ $sessionType ?: 'normal' }}">
                <button type="submit" @if($sessionType === 'office') data-office-submit @endif class="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-white hover:opacity-95 disabled:cursor-not-allowed disabled:opacity-60" style="background-color: var(--color-secondary)">
                    Check Out
                </button>
            </form>
        @endif
    </div>
</div>
@endif

@pushOnce('scripts', 'attendance-punch-js')
    <script src="{{ asset('js/attendance-punch.js') }}?v={{ $punchJsVersion }}" defer></script>
@endPushOnce