@extends('layouts.app')

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

@section('content')
@include('attendance.top-submenu')
@include('settings.partials.back-to-home')

<div class="max-w-3xl space-y-4">
    @if(session('success'))
        <div class="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ session('error') }}</div>
    @endif

    <x-card>
        <p class="mb-4 text-sm text-slate-600">Configure how employees can check in and out. Employee-level overrides still win when set.</p>
        <form action="{{ route('attendance-policy.update') }}" method="POST" class="space-y-5">
            @csrf
            @method('PUT')
            <div>
                <label class="block text-sm font-medium text-slate-700">Attendance mode</label>
                <select name="mode" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2">
                    <option value="normal" @selected(old('mode', $policy->mode) === 'normal')>Normal — no location restriction</option>
                    <option value="office_geofence" @selected(old('mode', $policy->mode) === 'office_geofence')>Office geo-fence — must be at an office</option>
                    <option value="remote" @selected(old('mode', $policy->mode) === 'remote')>Remote — remote check-in only</option>
                    <option value="hybrid" @selected(old('mode', $policy->mode) === 'hybrid')>Hybrid — office or remote</option>
                </select>
                @error('mode')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-slate-700">Default office radius (meters)</label>
                    <input type="number" name="default_radius_meters" min="10" max="10000" value="{{ old('default_radius_meters', $policy->default_radius_meters) }}" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                    @error('default_radius_meters')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">GPS accuracy requirement (meters)</label>
                    <input type="number" name="gps_accuracy_requirement" min="1" max="1000" value="{{ old('gps_accuracy_requirement', $policy->gps_accuracy_requirement) }}" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="Optional">
                    <p class="mt-1 text-xs text-slate-500">Leave blank to skip accuracy checks.</p>
                    @error('gps_accuracy_requirement')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>
            </div>
            <div class="space-y-2">
                <label class="flex items-center gap-2 text-sm text-slate-700">
                    <input type="hidden" name="remote_approval_required" value="0">
                    <input type="checkbox" name="remote_approval_required" value="1" @checked(old('remote_approval_required', $policy->remote_approval_required))>
                    Require approval for remote attendance
                </label>
                <label class="flex items-center gap-2 text-sm text-slate-700">
                    <input type="hidden" name="require_location_for_office" value="0">
                    <input type="checkbox" name="require_location_for_office" value="1" @checked(old('require_location_for_office', $policy->require_location_for_office))>
                    Require GPS for office check-in
                </label>
                <label class="flex items-center gap-2 text-sm text-slate-700">
                    <input type="hidden" name="allow_web_checkin" value="0">
                    <input type="checkbox" name="allow_web_checkin" value="1" @checked(old('allow_web_checkin', $policy->allow_web_checkin))>
                    Allow web check-in
                </label>
                <label class="flex items-center gap-2 text-sm text-slate-700">
                    <input type="hidden" name="allow_mobile_checkin" value="0">
                    <input type="checkbox" name="allow_mobile_checkin" value="1" @checked(old('allow_mobile_checkin', $policy->allow_mobile_checkin))>
                    Allow mobile check-in
                </label>
            </div>

            <div class="rounded-xl border border-slate-200 bg-slate-50/80 p-4 space-y-4">
                <div>
                    <h3 class="text-sm font-semibold text-slate-800">Biometric attendance (devices set to Both)</h3>
                    <p class="mt-0.5 text-xs text-slate-500">First IN / Last OUT applies only when the biometric device punch mode is Both. Login/Logout devices stay entry/exit gates.</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Biometric attendance mode</label>
                    <select name="biometric_attendance_mode" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2">
                        <option value="FIRST_IN_LAST_OUT" @selected(old('biometric_attendance_mode', $policy->biometric_attendance_mode ?? 'FIRST_IN_LAST_OUT') === 'FIRST_IN_LAST_OUT')>First IN / Last OUT</option>
                        <option value="PAIRWISE_IN_OUT" @selected(old('biometric_attendance_mode', $policy->biometric_attendance_mode ?? '') === 'PAIRWISE_IN_OUT') disabled>Pairwise IN/OUT (coming soon)</option>
                    </select>
                    @error('biometric_attendance_mode')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Minimum punch gap (minutes)</label>
                    <input type="number" name="biometric_min_punch_gap_minutes" min="1" max="60"
                           value="{{ old('biometric_min_punch_gap_minutes', $policy->biometric_min_punch_gap_minutes ?? 1) }}"
                           class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                    <p class="mt-1 text-xs text-slate-500">Repeated face authentications within this gap are stored as DUPLICATE and ignored for IN/OUT.</p>
                    @error('biometric_min_punch_gap_minutes')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>
            </div>

            <div class="flex gap-2">
                <x-button type="submit" variant="primary">Save policy</x-button>
                <a href="{{ route('locations.index') }}" 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">Manage offices</a>
            </div>
        </form>
    </x-card>
</div>
@endsection