@extends('layouts.app')
@section('title','System Settings')
@section('page-title','Settings')

@section('content')
<div class="page-header">
    <div>
        <h1>System Settings</h1>
        <nav aria-label="breadcrumb"><ol class="breadcrumb">
            <li class="breadcrumb-item active">Configuration</li>
        </ol></nav>
    </div>
</div>

<form method="POST" action="{{ route('settings.update') }}">
    @csrf @method('PUT')
    <div class="row g-4">

        {{-- ── Company ──────────────────────────────────────── --}}
        <div class="col-12 col-lg-6">
            <div class="card h-100">
                <div class="card-header">
                    <i class="bi bi-building me-2"></i>Organisation
                </div>
                <div class="card-body row g-3">
                    <div class="col-12">
                        <label class="form-label">Organisation Name *</label>
                        <input type="text" name="HRMS_COMPANY" class="form-control"
                               value="{{ old('HRMS_COMPANY', $settings['HRMS_COMPANY']) }}" required
                               placeholder="e.g. University of Liberia">
                        <div class="form-text">Shown in the sidebar, payslips, and email footers.</div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Logo Initials *</label>
                        <input type="text" name="HRMS_COMPANY_CODE" class="form-control"
                               value="{{ old('HRMS_COMPANY_CODE', $settings['HRMS_COMPANY_CODE']) }}"
                               required maxlength="5" placeholder="UL"
                               style="text-transform:uppercase;letter-spacing:.1em;font-weight:700;">
                        <div class="form-text">Up to 5 characters. Shown in the sidebar badge.</div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Primary Currency *</label>
                        <input type="text" name="HRMS_CURRENCY_PRIMARY" class="form-control"
                               value="{{ old('HRMS_CURRENCY_PRIMARY', $settings['HRMS_CURRENCY_PRIMARY']) }}"
                               required maxlength="3" placeholder="USD"
                               style="text-transform:uppercase;font-weight:700;">
                        <div class="form-text">ISO 4217 code, e.g. USD, GHS, NGN.</div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Secondary Currency</label>
                        <input type="text" name="HRMS_CURRENCY_SECONDARY" class="form-control"
                               value="{{ old('HRMS_CURRENCY_SECONDARY', $settings['HRMS_CURRENCY_SECONDARY']) }}"
                               maxlength="3" placeholder="LRD (optional)"
                               style="text-transform:uppercase;font-weight:700;">
                        <div class="form-text">Optional. Shown alongside net pay on payslips.</div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Exchange Rate</label>
                        <div class="input-group">
                            <span class="input-group-text" style="background:var(--body-bg);border-color:var(--topbar-border);color:var(--text-2);font-size:.78rem;">1 primary =</span>
                            <input type="number" name="HRMS_EXCHANGE_RATE" class="form-control"
                                   step="0.0001" min="0"
                                   value="{{ old('HRMS_EXCHANGE_RATE', $settings['HRMS_EXCHANGE_RATE']) }}"
                                   placeholder="e.g. 192.5">
                        </div>
                        <div class="form-text">Units of secondary currency per 1 primary.</div>
                    </div>
                    <div class="col-12">
                        <label class="form-label">HR Department Name *</label>
                        <input type="text" name="HRMS_HR_DEPT" class="form-control"
                               value="{{ old('HRMS_HR_DEPT', $settings['HRMS_HR_DEPT']) }}" required
                               placeholder="Human Resource Department">
                        <div class="form-text">Shown on payslips and official documents.</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── GPS Attendance ───────────────────────────────── --}}
        <div class="col-12 col-lg-6">
            <div class="card h-100">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <span><i class="bi bi-geo-alt me-2"></i>GPS Attendance Restriction</span>
                    <span id="gpsStatusBadge"
                          class="badge {{ $settings['HRMS_GPS_RESTRICT'] ? 'bg-success' : 'bg-secondary' }}">
                        {{ $settings['HRMS_GPS_RESTRICT'] ? 'Enabled' : 'Disabled' }}
                    </span>
                </div>
                <div class="card-body row g-3">

                    {{-- Enable toggle --}}
                    <div class="col-12">
                        <div class="d-flex align-items-center justify-content-between p-3 rounded-3"
                             style="background:var(--body-bg);border:1px solid var(--card-border);">
                            <div>
                                <div class="fw-semibold" style="font-size:.88rem;">Enable GPS Restriction</div>
                                <div style="font-size:.78rem;color:var(--text-2);">
                                    When on, employees can only clock in within the allowed radius.
                                </div>
                            </div>
                            <div class="form-check form-switch ms-3 mb-0">
                                <input type="checkbox" name="HRMS_GPS_RESTRICT" id="gpsToggle"
                                       class="form-check-input" role="switch"
                                       value="1" style="width:2.5rem;height:1.3rem;cursor:pointer;"
                                       {{ $settings['HRMS_GPS_RESTRICT'] ? 'checked' : '' }}
                                       onchange="updateGpsBadge(this.checked)">
                            </div>
                        </div>
                    </div>

                    {{-- Coordinates --}}
                    <div class="col-6">
                        <label class="form-label">Office Latitude</label>
                        <div class="input-group">
                            <span class="input-group-text" style="background:var(--body-bg);border-color:var(--topbar-border);color:var(--text-2);font-size:.78rem;">LAT</span>
                            <input type="number" name="HRMS_GPS_LAT" id="gpsLat"
                                   class="form-control" step="0.000001"
                                   min="-90" max="90"
                                   value="{{ old('HRMS_GPS_LAT', $settings['HRMS_GPS_LAT']) }}"
                                   placeholder="e.g. 6.305700">
                        </div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Office Longitude</label>
                        <div class="input-group">
                            <span class="input-group-text" style="background:var(--body-bg);border-color:var(--topbar-border);color:var(--text-2);font-size:.78rem;">LNG</span>
                            <input type="number" name="HRMS_GPS_LNG" id="gpsLng"
                                   class="form-control" step="0.000001"
                                   min="-180" max="180"
                                   value="{{ old('HRMS_GPS_LNG', $settings['HRMS_GPS_LNG']) }}"
                                   placeholder="e.g. -10.796900">
                        </div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Allowed Radius (metres) *</label>
                        <input type="number" name="HRMS_GPS_RADIUS_METERS" id="gpsRadius"
                               class="form-control" min="10" max="5000"
                               value="{{ old('HRMS_GPS_RADIUS_METERS', $settings['HRMS_GPS_RADIUS_METERS']) }}"
                               required>
                        <div class="form-text">Typical: 100–300 m for a campus.</div>
                    </div>
                    <div class="col-6 d-flex align-items-end">
                        <button type="button" class="btn btn-outline-primary w-100"
                                onclick="detectLocation()"
                                id="detectBtn">
                            <i class="bi bi-crosshair me-2"></i>Use My Location
                        </button>
                    </div>

                    {{-- Map preview --}}
                    <div class="col-12">
                        <div id="mapPreview" style="height:220px;border-radius:12px;overflow:hidden;border:1px solid var(--card-border);background:var(--body-bg);display:flex;align-items:center;justify-content:center;color:var(--text-3);">
                            <div class="text-center">
                                <i class="bi bi-map" style="font-size:2rem;display:block;margin-bottom:.5rem;"></i>
                                <span style="font-size:.83rem;">Enter coordinates to preview on map</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        {{-- Save --}}
        <div class="col-12">
            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary px-4">
                    <i class="bi bi-check-lg me-2"></i>Save Settings
                </button>
                <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary">Cancel</a>
            </div>
        </div>

    </div>
</form>
@endsection

@push('scripts')
<script>
function updateGpsBadge(enabled) {
    const badge = document.getElementById('gpsStatusBadge');
    badge.textContent = enabled ? 'Enabled' : 'Disabled';
    badge.className   = 'badge ' + (enabled ? 'bg-success' : 'bg-secondary');
}

function detectLocation() {
    const btn = document.getElementById('detectBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Detecting…';

    const success = (pos) => {
        document.getElementById('gpsLat').value = pos.coords.latitude.toFixed(6);
        document.getElementById('gpsLng').value = pos.coords.longitude.toFixed(6);
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-check-circle-fill text-success me-2"></i>Location Captured';
        updateMapPreview(pos.coords.latitude, pos.coords.longitude);
    };

    const fail = (err) => {
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-crosshair me-2"></i>Use My Location';
        alert('Could not get location: ' + (err.message || 'Permission denied'));
    };

    navigator.geolocation.getCurrentPosition(success, (err) => {
        if (err.code === 3) {
            navigator.geolocation.getCurrentPosition(success, fail, {
                enableHighAccuracy: false, timeout: 10000, maximumAge: 60000,
            });
        } else { fail(err); }
    }, { enableHighAccuracy: true, timeout: 8000, maximumAge: 20000 });
}

function updateMapPreview(lat, lng) {
    if (!lat || !lng) return;

    const radius = document.getElementById('gpsRadius').value || 150;
    const zoom   = radius <= 100 ? 17 : radius <= 300 ? 16 : radius <= 1000 ? 15 : 14;

    // OpenStreetMap tile-based static preview using an iframe
    const mapEl = document.getElementById('mapPreview');
    mapEl.innerHTML = `
        <iframe
            width="100%" height="220"
            style="border:none;"
            src="https://www.openstreetmap.org/export/embed.html?bbox=${lng-0.003},${lat-0.003},${+lng+0.003},${+lat+0.003}&layer=mapnik&marker=${lat},${lng}"
            allowfullscreen>
        </iframe>`;
}

// Auto-preview if coordinates already exist
document.addEventListener('DOMContentLoaded', () => {
    const lat = document.getElementById('gpsLat').value;
    const lng = document.getElementById('gpsLng').value;
    if (lat && lng) updateMapPreview(parseFloat(lat), parseFloat(lng));

    // Refresh preview when coordinates change
    ['gpsLat','gpsLng','gpsRadius'].forEach(id => {
        document.getElementById(id)?.addEventListener('change', () => {
            const la = document.getElementById('gpsLat').value;
            const lo = document.getElementById('gpsLng').value;
            if (la && lo) updateMapPreview(parseFloat(la), parseFloat(lo));
        });
    });
});
</script>
@endpush