@extends('dashboard.layouts.app')

@section('title', 'Nouvelle Zone Géographique - UAC eservices')

@section('page-title', 'Nouvelle Zone Géographique')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('rh.dashboard') }}">RH</a></li>
    <li class="breadcrumb-item"><a href="{{ route('rh.zones.index') }}">Zones Géographiques</a></li>
    <li class="breadcrumb-item active" aria-current="page">Nouvelle Zone</li>
@endsection



@push('styles')
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin="" />
<style>
    #map {
        height: 450px !important;
        width: 100%;
        border-radius: 8px;
        border: 2px solid #dee2e6;
        z-index: 1;
    }
    .leaflet-container {
        font-family: inherit;
        height: 100%;
    }
</style>
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-primary text-white">
                <h4 class="card-title mb-0">
                    <i class="mdi mdi-map-marker-plus"></i> Créer une Nouvelle Zone Géographique
                </h4>
            </div>
            <div class="card-body p-4">
                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show">
                        <i class="mdi mdi-alert-circle me-2"></i>
                        <strong>Erreurs de validation :</strong>
                        <ul class="mb-0 mt-2">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <div class="alert alert-info">
                    <i class="mdi mdi-information"></i>
                    <strong>Information :</strong> Cliquez sur la carte pour définir le centre de la zone géographique, ou saisissez les coordonnées manuellement.
                </div>

                <form method="POST" action="{{ route('rh.zones.store') }}" class="needs-validation" novalidate>
                    @csrf

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="text"
                                    class="form-control @error('nom') is-invalid @enderror"
                                    id="nom"
                                    name="nom"
                                    value="{{ old('nom') }}"
                                    placeholder="Nom de la zone"
                                    required>
                                <label for="nom"><i class="mdi mdi-label"></i> Nom de la zone *</label>
                                @error('nom')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="number"
                                    class="form-control @error('rayon') is-invalid @enderror"
                                    id="rayon"
                                    name="rayon"
                                    value="{{ old('rayon', 100) }}"
                                    min="10"
                                    max="5000"
                                    placeholder="Rayon"
                                    required>
                                <label for="rayon"><i class="mdi mdi-radius"></i> Rayon (mètres) *</label>
                                <small class="text-muted">Entre 10 et 5000 mètres</small>
                                @error('rayon')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="form-floating mb-3">
                        <textarea class="form-control @error('description') is-invalid @enderror"
                            id="description"
                            name="description"
                            placeholder="Description"
                            style="height: 80px;">{{ old('description') }}</textarea>
                        <label for="description"><i class="mdi mdi-text"></i> Description</label>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Carte interactive -->
                    <div class="card bg-light mb-3">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="mdi mdi-map"></i> Sélectionner la Position sur la Carte
                            </h5>
                            <p class="text-muted small">Cliquez sur la carte pour définir le centre de la zone</p>
                            <div id="map"></div>
                        </div>
                    </div>

                    <!-- Coordonnées manuelles -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="number"
                                    class="form-control @error('latitude') is-invalid @enderror"
                                    id="latitude"
                                    name="latitude"
                                    value="{{ old('latitude', '6.3703') }}"
                                    step="0.00000001"
                                    min="-90"
                                    max="90"
                                    placeholder="Latitude"
                                    required>
                                <label for="latitude"><i class="mdi mdi-latitude"></i> Latitude *</label>
                                @error('latitude')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="number"
                                    class="form-control @error('longitude') is-invalid @enderror"
                                    id="longitude"
                                    name="longitude"
                                    value="{{ old('longitude', '2.3912') }}"
                                    step="0.00000001"
                                    min="-180"
                                    max="180"
                                    placeholder="Longitude"
                                    required>
                                <label for="longitude"><i class="mdi mdi-longitude"></i> Longitude *</label>
                                @error('longitude')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="form-check form-switch mb-4">
                        <input class="form-check-input" type="checkbox" id="active" name="active" checked>
                        <label class="form-check-label" for="active">
                            <i class="mdi mdi-check-circle"></i> Zone active
                        </label>
                    </div>

                    <div class="d-flex justify-content-between align-items-center">
                        <a href="{{ route('rh.zones.index') }}" class="btn btn-secondary btn-lg">
                            <i class="mdi mdi-arrow-left"></i> Annuler
                        </a>
                        <button type="submit" class="btn btn-primary btn-lg px-5">
                            <i class="mdi mdi-content-save"></i> Créer la Zone
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin=""></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Valeurs par défaut (Cotonou)
    let defaultLat = {{ old('latitude', '6.4703') }};
    let defaultLng = {{ old('longitude', '2.2912') }};
    const defaultRadius = {{ old('rayon', 10000) }};

    // Initialisation de la carte
    const map = L.map('map').setView([defaultLat, defaultLng], 15);

    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap &copy; CARTO',
        subdomains: 'abcd',
        maxZoom: 19
    }).addTo(map);

    let marker = null;
    let circle = null;

    // Fonction pour mettre à jour la carte
    function updateMap(lat, lng, radius) {
        if (marker) map.removeLayer(marker);
        if (circle) map.removeLayer(circle);

        marker = L.marker([lat, lng], { draggable: true }).addTo(map);

        circle = L.circle([lat, lng], {
            color: '#007bff',
            fillColor: '#007bff',
            fillOpacity: 0.2,
            radius: radius
        }).addTo(map);

        map.setView([lat, lng], 16);

        // Gestion du déplacement du marqueur
        marker.on('dragend', function(e) {
            const pos = e.target.getLatLng();
            document.getElementById('latitude').value = pos.lat.toFixed(8);
            document.getElementById('longitude').value = pos.lng.toFixed(8);
            updateCircle();
        });
    }

    function updateCircle() {
        const lat = parseFloat(document.getElementById('latitude').value);
        const lng = parseFloat(document.getElementById('longitude').value);
        const radius = parseInt(document.getElementById('rayon').value);

        if (!isNaN(lat) && !isNaN(lng) && !isNaN(radius)) {
            updateMap(lat, lng, radius);
        }
    }

    // Initialisation avec les valeurs par défaut
    updateMap(defaultLat, defaultLng, defaultRadius);

    // === ✅ Étape 1 : Essayer d’obtenir la position GPS ===
    if (navigator.geolocation) {
        console.log("📡 Tentative de localisation GPS en cours...");
        navigator.geolocation.getCurrentPosition(
            function (position) {
                const lat = position.coords.latitude.toFixed(8);
                const lon = position.coords.longitude.toFixed(8);
                const accuracy = position.coords.accuracy;

                console.log(`✅ Position GPS : ${lat}, ${lon} (±${accuracy} m)`);

                document.getElementById('latitude').value = lat;
                document.getElementById('longitude').value = lon;

                updateMap(lat, lon, defaultRadius);

                const info = document.createElement('small');
                info.className = 'text-muted';
                info.textContent = `Position GPS détectée (±${Math.round(accuracy)} m)`;
                document.getElementById('latitude').closest('.form-floating').appendChild(info);
            },
            function (error) {
                console.warn("⚠️ Erreur GPS :", error.message);
                console.log("🌍 Tentative de localisation via IP...");
                // === ✅ Étape 2 : Fallback IP ===
                fetch('https://ipapi.co/json/')
                    .then(r => r.json())
                    .then(data => {
                        const lat = data.latitude;
                        const lon = data.longitude;
                        console.log(`🌍 Position via IP : ${lat}, ${lon}`);

                        document.getElementById('latitude').value = lat;
                        document.getElementById('longitude').value = lon;

                        updateMap(lat, lon, defaultRadius);

                        const info = document.createElement('small');
                        info.className = 'text-muted';
                        info.textContent = `Position estimée via IP (~10 km de précision)`;
                        document.getElementById('latitude').closest('.form-floating').appendChild(info);
                    })
                    .catch(() => {
                        toastr.error("Impossible d’obtenir votre position.");
                    });
            },
            {
                enableHighAccuracy: true,
                timeout: 15000,
                maximumAge: 0
            }
        );
    } else {
        console.log("❌ La géolocalisation GPS n’est pas supportée, fallback IP...");
        fetch('https://ipapi.co/json/')
            .then(r => r.json())
            .then(data => {
                const lat = data.latitude;
                const lon = data.longitude;
                console.log(`🌍 Position via IP : ${lat}, ${lon}`);

                document.getElementById('latitude').value = lat;
                document.getElementById('longitude').value = lon;
                updateMap(lat, lon, defaultRadius);
            });
    }

    // Interaction manuelle
    map.on('click', function(e) {
        document.getElementById('latitude').value = e.latlng.lat.toFixed(8);
        document.getElementById('longitude').value = e.latlng.lng.toFixed(8);
        updateCircle();
    });

    document.getElementById('latitude').addEventListener('input', updateCircle);
    document.getElementById('longitude').addEventListener('input', updateCircle);
    document.getElementById('rayon').addEventListener('input', updateCircle);
});
</script>


@endpush