@extends('layouts.app')

@section('title', 'Pengaturan Presensi — Presensi')
@section('page-title', 'Pengaturan Presensi')

@section('content')

    <div class="card" style="max-width:640px;">
        <div class="card-head">
            <h2>Lokasi Kantor</h2>
        </div>

        <form method="POST" action="{{ route('admin.attendance-settings.update') }}" id="settingForm">
            @csrf
            @method('PUT')

            <div class="form-group">
                <label class="form-label" for="office_name">Nama Kantor</label>
                <input type="text" id="office_name" name="office_name" class="form-control"
                       value="{{ old('office_name', $setting->office_name ?? '') }}" placeholder="Kantor Pusat" required>
                @error('office_name') <div class="form-error">{{ $message }}</div> @enderror
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="latitude">Latitude</label>
                    <input type="text" id="latitude" name="latitude" class="form-control"
                           value="{{ old('latitude', $setting->latitude ?? '') }}" placeholder="-7.257472" required>
                    @error('latitude') <div class="form-error">{{ $message }}</div> @enderror
                </div>

                <div class="form-group">
                    <label class="form-label" for="longitude">Longitude</label>
                    <input type="text" id="longitude" name="longitude" class="form-control"
                           value="{{ old('longitude', $setting->longitude ?? '') }}" placeholder="112.752090" required>
                    @error('longitude') <div class="form-error">{{ $message }}</div> @enderror
                </div>
            </div>

            <button type="button" id="useMyLocation" class="btn btn-outline btn-sm" style="margin-bottom:16px;">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M22 12h-3M5 12H2"/></svg>
                Gunakan Lokasi Saat Ini
            </button>
            <p class="form-hint" id="locationStatus" style="margin-top:-10px; margin-bottom:16px;"></p>

            <div class="form-group">
                <label class="form-label" for="radius">Radius Toleransi Lokasi (meter)</label>
                <input type="number" min="1" id="radius" name="radius" class="form-control"
                       value="{{ old('radius', $setting->radius ?? 100) }}" required>
                <p class="form-hint">Pegawai hanya bisa absen jika berada dalam radius ini dari titik kantor.</p>
                @error('radius') <div class="form-error">{{ $message }}</div> @enderror
            </div>

            <hr style="border:none; border-top:1px solid var(--color-border); margin:20px 0;">

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="check_in_time">Jam Masuk</label>
                    <input type="time" step="1" id="check_in_time" name="check_in_time" class="form-control"
                           value="{{ old('check_in_time', $setting->check_in_time ?? '08:00:00') }}" required>
                    @error('check_in_time') <div class="form-error">{{ $message }}</div> @enderror
                </div>

                <div class="form-group">
                    <label class="form-label" for="check_out_time">Jam Pulang</label>
                    <input type="time" step="1" id="check_out_time" name="check_out_time" class="form-control"
                           value="{{ old('check_out_time', $setting->check_out_time ?? '17:00:00') }}" required>
                    @error('check_out_time') <div class="form-error">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="form-group">
                <label class="form-label" for="late_tolerance">Toleransi Keterlambatan (menit)</label>
                <input type="number" min="0" id="late_tolerance" name="late_tolerance" class="form-control"
                       value="{{ old('late_tolerance', $setting->late_tolerance ?? 15) }}" required>
                <p class="form-hint">Absen masuk melewati jam masuk + toleransi ini akan berstatus "Terlambat".</p>
                @error('late_tolerance') <div class="form-error">{{ $message }}</div> @enderror
            </div>

            <button type="submit" class="btn btn-primary">Simpan Pengaturan</button>
        </form>
    </div>

@endsection

@section('scripts')
<script>
    document.getElementById('useMyLocation')?.addEventListener('click', function () {
        const status = document.getElementById('locationStatus');
        if (!navigator.geolocation) {
            status.textContent = 'Browser tidak mendukung deteksi lokasi.';
            return;
        }
        status.textContent = 'Mengambil lokasi...';
        navigator.geolocation.getCurrentPosition(
            (pos) => {
                document.getElementById('latitude').value = pos.coords.latitude.toFixed(6);
                document.getElementById('longitude').value = pos.coords.longitude.toFixed(6);
                status.textContent = 'Lokasi berhasil diambil.';
            },
            () => { status.textContent = 'Gagal mengambil lokasi. Isi manual atau coba lagi.'; },
            { enableHighAccuracy: true, timeout: 10000 }
        );
    });
</script>
@endsection