@extends('layouts.app')

@section('title', 'Pengaturan Sistem')

@section('content')
<div class="p-4 md:p-8 max-w-4xl mx-auto">

    <div class="flex justify-between items-center mb-8">
        <div>
            <h2 class="text-2xl font-bold text-gray-800">Pengaturan Sistem</h2>
            <p class="text-sm text-gray-500">Atur jam, lokasi, dan aturan absensi.</p>
        </div>
        <a href="{{ route('admin.dashboard') }}" class="text-gray-500 hover:text-primary transition">
            Kembali ke Dashboard
        </a>
    </div>

    <div class="bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-gray-100">
        <form action="{{ route('admin.settings.update') }}" method="POST">
            @csrf

            <!-- Bagian 1: Waktu & Mode -->
            <h3 class="text-lg font-bold text-gray-700 mb-4 flex items-center gap-2">
                <span class="bg-blue-100 text-blue-600 p-1.5 rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </span>
                Waktu & Mode
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-2 uppercase">Jam Masuk</label>
                    <input type="time" name="jam_masuk" value="{{ $settings['jam_masuk'] ?? '08:00' }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-green-100 outline-none transition bg-gray-50">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-2 uppercase">Jam Pulang</label>
                    <input type="time" name="jam_pulang" value="{{ $settings['jam_pulang'] ?? '17:00' }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-green-100 outline-none transition bg-gray-50">
                </div>
            </div>

            <div class="mb-8">
                <label class="block text-xs font-semibold text-gray-600 mb-3 uppercase">Mode Absensi</label>
                <div class="grid grid-cols-2 gap-4">
                    <label class="cursor-pointer">
                        <input type="radio" name="mode_absen" value="single" {{ ($settings['mode_absensi'] ?? 'double') == 'single' ? 'checked' : '' }} class="peer sr-only">
                        <div class="p-4 rounded-2xl border-2 border-gray-100 peer-checked:border-primary peer-checked:bg-emerald-50 transition-all text-center">
                            <span class="font-bold text-gray-700 peer-checked:text-primary block">Satu Kali</span>
                            <span class="text-xs text-gray-400">Hanya Absen Masuk</span>
                        </div>
                    </label>
                    <label class="cursor-pointer">
                        <input type="radio" name="mode_absen" value="double" {{ ($settings['mode_absensi'] ?? 'double') == 'double' ? 'checked' : '' }} class="peer sr-only">
                        <div class="p-4 rounded-2xl border-2 border-gray-100 peer-checked:border-primary peer-checked:bg-emerald-50 transition-all text-center">
                            <span class="font-bold text-gray-700 peer-checked:text-primary block">Dua Kali</span>
                            <span class="text-xs text-gray-400">Masuk & Pulang</span>
                        </div>
                    </label>
                </div>
            </div>

            <!-- Bagian 2: Lokasi (Geo-Fence) -->
            <h3 class="text-lg font-bold text-gray-700 mb-4 flex items-center gap-2">
                <span class="bg-red-100 text-red-600 p-1.5 rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                </span>
                Geo-Lokasi
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                <div class="md:col-span-2">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-2 uppercase">Latitude</label>
                            <input type="number" step="any" id="lat" name="office_lat" value="{{ $settings['office_lat'] ?? '' }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary outline-none bg-gray-50" placeholder="-6.xxxxx">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-2 uppercase">Longitude</label>
                            <input type="number" step="any" id="lng" name="office_lng" value="{{ $settings['office_lng'] ?? '' }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary outline-none bg-gray-50" placeholder="106.xxxxx">
                        </div>
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-2 uppercase">Radius (Meter)</label>
                    <input type="text" name="radius" value="{{ $settings['radius'] ?? '100' }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary outline-none bg-gray-50" placeholder="Contoh: 500000000">
                </div>
            </div>

            <button type="button" onclick="getLocation()" class="mb-8 text-sm text-primary font-semibold hover:underline flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
                Ambil Lokasi Saat Ini (Admin)
            </button>

            <!-- Bagian 3: Hari Aktif -->
            <h3 class="text-lg font-bold text-gray-700 mb-4 flex items-center gap-2">
                <span class="bg-purple-100 text-purple-600 p-1.5 rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                </span>
                Hari Aktif
            </h3>

            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                @php
                    $activeDays = explode(',', $settings['active_days'] ?? '1,2,3,4,5');
                    $dayNames = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'];
                @endphp
                @for($i=1; $i<=7; $i++)
                    <label class="flex items-center space-x-3 bg-gray-50 p-3 rounded-xl cursor-pointer hover:bg-gray-100 transition">
                        <input type="checkbox" name="active_days[]" value="{{ $i }}" {{ in_array($i, $activeDays) ? 'checked' : '' }} class="w-5 h-5 text-primary rounded focus:ring-primary border-gray-300">
                        <span class="text-gray-700 font-medium">{{ $dayNames[$i-1] }}</span>
                    </label>
                @endfor
            </div>

            <div class="pt-4 border-t border-gray-100">
                <button type="submit" class="w-full bg-primary hover:bg-secondary text-white font-bold py-4 rounded-xl shadow-lg shadow-green-200 transition-all transform hover:-translate-y-1">
                    Simpan Pengaturan
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                document.getElementById('lat').value = position.coords.latitude;
                document.getElementById('lng').value = position.coords.longitude;
                alert("Lokasi berhasil didapat!");
            }, function(error) {
                alert("Gagal mengambil lokasi. Pastikan GPS aktif.");
            });
        } else {
            alert("Browser tidak mendukung Geolocation.");
        }
    }
</script>
@endsection