@extends('dashboard.layouts.app')

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

@section('page-title', 'Modifier 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">Modifier</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-warning text-dark">
                <h4 class="card-title mb-0">
                    <i class="mdi mdi-map-marker-edit"></i> Modifier la Zone Géographique
                </h4>
            </div>
            <div class="card-body p-4">
                <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.update', $zone) }}" class="needs-validation" novalidate>
                    @csrf
                    @method('PUT')

                    <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', $zone->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', $zone->rayon) }}"
                                    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', $zone->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', $zone->latitude) }}"
                                    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', $zone->longitude) }}"
                                    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" {{ old('active', $zone->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-warning btn-lg px-5">
                            <i class="mdi mdi-content-save"></i> Mettre à Jour
                        </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>
    // Coordonnées de la zone
    const defaultLat = {{ old('latitude', $zone->latitude) }};
    const defaultLng = {{ old('longitude', $zone->longitude) }};
    const defaultRadius = {{ old('rayon', $zone->rayon) }};

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

    // Ajouter le layer de carte
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
        maxZoom: 19
    }).addTo(map);

    // Marqueur et cercle
    let marker = null;
    let circle = null;

    // Fonction pour mettre à jour la carte
    function updateMap(lat, lng, radius) {
        // Supprimer l'ancien marqueur et cercle
        if (marker) map.removeLayer(marker);
        if (circle) map.removeLayer(circle);

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

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

        // Centrer la carte
        map.setView([lat, lng], 15);

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

    // Fonction pour mettre à jour le cercle
    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);
        }
    }

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

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

    // Changement des inputs
    document.getElementById('latitude').addEventListener('input', updateCircle);
    document.getElementById('longitude').addEventListener('input', updateCircle);
    document.getElementById('rayon').addEventListener('input', updateCircle);

    // Validation Bootstrap
    (function () {
        'use strict'
        var forms = document.querySelectorAll('.needs-validation')
        Array.prototype.slice.call(forms)
            .forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
    })()
</script>
@endpush