@extends('layouts.app')

@section('content')
    <x-common.page-breadcrumb pageTitle="{{ $title }}" />

    @if(session('success'))
        <div class="mb-4 rounded-lg bg-success-50 p-4 text-sm text-success-700 dark:bg-success-500/15 dark:text-success-500">
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="mb-4 rounded-lg bg-error-50 p-4 text-sm text-error-700 dark:bg-error-500/15 dark:text-error-500">
            <ul class="list-disc pl-5">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Pengaturan Lokasi & Jam Absensi</h3>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                Tentukan titik lokasi, radius maksimal, jam masuk, jam pulang, dan toleransi keterlambatan.
            </p>
        </div>

        <form action="{{ route('attendance.settings.update') }}" method="POST" class="space-y-5 p-5">
            @csrf

            <x-form.input
                name="location_name"
                label="Nama Lokasi"
                placeholder="Contoh: Kantor Utama"
                :value="old('location_name', $setting->location_name ?? '')"
            />

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <x-form.input
                    name="latitude"
                    label="Latitude"
                    placeholder="-6.2000000"
                    :value="old('latitude', $setting->latitude ?? '')"
                />

                <x-form.input
                    name="longitude"
                    label="Longitude"
                    placeholder="106.8166660"
                    :value="old('longitude', $setting->longitude ?? '')"
                />
            </div>

            <x-form.input
                name="radius_meters"
                label="Radius Maksimal Meter"
                placeholder="100"
                :value="old('radius_meters', $setting->radius_meters ?? 100)"
            />

            @php
    $selectedWorkStartTime = old('work_start_time', isset($setting->work_start_time) ? substr($setting->work_start_time, 0, 5) : '08:00');
    $selectedWorkEndTime = old('work_end_time', isset($setting->work_end_time) ? substr($setting->work_end_time, 0, 5) : '17:00');

    $timeOptions = [];

    for ($hour = 0; $hour < 24; $hour++) {
        foreach ([0, 15, 30, 45] as $minute) {
            $timeOptions[] = sprintf('%02d:%02d', $hour, $minute);
        }
    }
@endphp

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
    <div>
        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
            Jam Masuk Standar
        </label>

        <select
            name="work_start_time"
            class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
        >
            <option value="">Pilih Jam Masuk</option>
            @foreach($timeOptions as $time)
                <option value="{{ $time }}" @selected($selectedWorkStartTime === $time)>
                    {{ $time }}
                </option>
            @endforeach
        </select>
    </div>

    <div>
        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
            Jam Pulang Standar
        </label>

        <select
            name="work_end_time"
            class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
        >
            <option value="">Pilih Jam Pulang</option>
            @foreach($timeOptions as $time)
                <option value="{{ $time }}" @selected($selectedWorkEndTime === $time)>
                    {{ $time }}
                </option>
            @endforeach
        </select>
    </div>
</div>

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <x-form.input
                    name="late_tolerance_minutes"
                    label="Toleransi Telat Menit"
                    placeholder="0"
                    :value="old('late_tolerance_minutes', $setting->late_tolerance_minutes ?? 0)"
                />

                <x-form.input
                    name="early_leave_tolerance_minutes"
                    label="Toleransi Pulang Cepat Menit"
                    placeholder="0"
                    :value="old('early_leave_tolerance_minutes', $setting->early_leave_tolerance_minutes ?? 0)"
                />
            </div>

            <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                <input
                    type="checkbox"
                    name="is_active"
                    value="1"
                    class="rounded border-gray-300 text-brand-500 focus:ring-brand-500"
                    @checked(old('is_active', $setting->is_active ?? true))
                >
                Aktifkan lokasi absensi
            </label>

            <div class="rounded-lg bg-gray-50 p-4 text-sm text-gray-600 dark:bg-white/[0.03] dark:text-gray-400">
                Tips: buka Google Maps, klik kanan lokasi kantor, lalu salin angka latitude dan longitude.
                Jam masuk dipakai untuk menghitung telat, sedangkan jam pulang dipakai untuk menghitung pulang cepat.
            </div>

            <div class="flex justify-end">
                <button type="submit" class="rounded-lg bg-brand-500 px-5 py-2 text-sm font-medium text-white hover:bg-brand-600">
                    Simpan Pengaturan
                </button>
            </div>
        </form>
    </div>
@endsection