@extends('layout.app')

@section('title')
    {{ __('Sites') }}
@endsection

@push('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/editors/summernote.css') }}">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
    <style>
        #map {
            height: 400px;
            width: 100%;
            margin-top: 20px;
            border-radius: 4px;
            border: 1px solid #ddd;
        }
        .leaflet-container {
            font-family: inherit;
        }
        .coordinates-info {
            background: white;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            margin-top: 10px;
            font-size: 12px;
        }
        /* Styles pour la barre de recherche */
        .leaflet-control-geocoder {
            width: 300px;
            max-width: 90%;
        }
        .leaflet-control-geocoder-form input {
            width: 100%;
            height: 36px;
            padding: 6px 12px;
            font-size: 14px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }
        .leaflet-control-geocoder-form input:focus {
            border-color: #007bff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }
        .leaflet-control-geocoder-alternatives {
            max-height: 250px;
            overflow-y: auto;
        }
        .leaflet-control-geocoder-alternatives li {
            padding: 8px 12px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
        }
        .leaflet-control-geocoder-alternatives li:hover {
            background-color: #f5f5f5;
        }
        .search-container {
            position: absolute;
            top: 10px;
            left: 50px;
            z-index: 1000;
            width: 300px;
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        .search-container .input-group {
            border-radius: 4px;
            overflow: hidden;
        }
        .search-container input {
            border: none;
            padding: 10px 15px;
        }
        .search-container input:focus {
            box-shadow: none;
        }
        .search-container .btn {
            border-radius: 0 4px 4px 0;
        }
        .recent-searches {
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            padding: 10px;
            margin-top: 10px;
            font-size: 12px;
        }
        .recent-search-item {
            cursor: pointer;
            padding: 5px;
            border-bottom: 1px solid #eee;
        }
        .recent-search-item:hover {
            background-color: #f5f5f5;
        }
        .recent-search-item:last-child {
            border-bottom: none;
        }
        .location-preview {
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            padding: 10px;
            margin-top: 10px;
            font-size: 12px;
        }
    </style>
@endpush

@section('active_sites', 'active')
@section('data_col', '2-columns')
@section('body_class', '2-columns')

@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
                <h3 class="content-header-title mb-0 d-inline-block">{{ __('Sites')}}</h3>
                <div class="row breadcrumbs-top d-inline-block">
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            @if(isset($site))
                                <li class="breadcrumb-item">{{ __('Edit') }}</li>
                                <li class="breadcrumb-item active">{{$site->reference}}</li>
                            @else
                                <li class="breadcrumb-item active">{{ __('Add') }}</li>
                            @endif
                        </ol>
                    </div>
                </div>
            </div>
            <div class="content-header-right col-md-6 col-12">
                <div class="btn-group float-md-right">
                    <a class="btn btn-dark" href="{{ route('sites.index') }}">
                        <i class="la la-arrow-left"></i> {{ __('Sites') }}
                    </a>
                    <button type="submit" class="btn btn-success ml-1 pr-1 pl-1" form="siteForm">
                        <i class="la la-save"></i> {{ __('Save') }}
                    </button>
                </div>
            </div>
        </div>
        <div class="content-body pb-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-content collpase show">
                                <div class="card-body">
                                    <form class="form form-horizontal" enctype="multipart/form-data" id="siteForm" 
                                        action="@if(isset($site)) {{ route('sites.update', $site->id) }} @else {{ route('sites.store') }} @endif" method="POST">
                                        @csrf
                                        @if(isset($site))
                                            @method('PUT')
                                        @endif
                                        
                                        <div class="form-body">
                                            <h4 class="form-section"><i class="ft-user"></i> {{ __('Basic Informations') }}</h4>
                                            <div class="row">
                                                @if (isset($site))
                                                    <div class="col-12 mb-1">
                                                        <label class="form-label" for="reference">{{ __('Référence') }} </label>
                                                        <input type="text" class="form-control" id="reference" value="{{ $site->reference }}" disabled>
                                                    </div>
                                                @endif
                                                <div class="col-md-7 mb-1">
                                                    <label class="form-label" for="name">{{ __('Name') }} <span class="danger">*</span> </label>
                                                    <input type="text" class="form-control" name="name" id="name" value="{{ old('name', $site->name ?? '') }}" required>
                                                </div>
                                                <div class="col-md-5 mb-1 skin skin-square mt-3">
                                                    <fieldset>
                                                        <input type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', $site->is_active ?? true) ? 'checked' : '' }}>
                                                        <label for="is_active">{{ __('Site active')}}</label>
                                                    </fieldset>
                                                </div>
                                                <div class="col-12 mb-1">
                                                    <label class="form-label" for="description">{{ __('Description') }} </label>
                                                    <textarea class="form-control" name="description" id="description" rows="5">{{ old('description', $site->description ?? '') }}</textarea>
                                                </div>
                                            </div>
                                            
                                            <h4 class="form-section"><i class="ft-map-pin"></i> {{ __('Address Information') }}</h4>
                                            
                                            <div class="alert alert-info">
                                                <i class="la la-info-circle"></i> 
                                                {{ __('Search for a location or click on the map to select the location. You can also drag the marker to adjust the position.') }}
                                            </div>
                                            
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="form-label" for="longitude">{{ __('Longitude') }} <span class="danger">*</span> </label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" name="longitude" id="longitude" 
                                                               value="{{ old('longitude', $site->longitude ?? '') }}" required readonly>
                                                        <div class="input-group-append">
                                                            <button type="button" class="btn btn-outline-primary" id="locateMe">
                                                                <i class="la la-crosshairs"></i> {{ __('Locate Me') }}
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label" for="latitude">{{ __('Latitude') }} <span class="danger">*</span> </label>
                                                    <input type="text" class="form-control" name="latitude" id="latitude" 
                                                           value="{{ old('latitude', $site->latitude ?? '') }}" required readonly>
                                                </div>
                                            </div>
                                            
                                            <div class="coordinates-info mb-2">
                                                <i class="la la-map-marker"></i> 
                                                <span id="coordinates-status">
                                                    @if(isset($site) && $site->latitude && $site->longitude)
                                                        {{ __('Location selected') }}
                                                    @else
                                                        {{ __('Search or click on the map to select a location') }}
                                                    @endif
                                                </span>
                                                <span id="location-name" class="ml-2 font-weight-bold"></span>
                                            </div>
                                            
                                            {{-- Prévisualisation de l'adresse --}}
                                            <div class="location-preview mb-2 d-none" id="addressPreview">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <strong id="previewAddress"></strong>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div id="map"></div>
                                            
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('modals')

@endsection

@push('scripts')
    <script src="{{ asset('modern-admin/app-assets/vendors/js/editors/summernote/summernote.js') }}"></script>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
    <script>
        $(document).ready(function(){
            ajaxForm("#siteForm");
            $('#description').summernote({
                height: 200,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'clear']],
                    ['fontname', ['fontname']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'hr']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ]
            });
            initMap();
        });
        
        // Variables globales pour la carte
        let map;
        let marker;
        let geocoder;
        let searchResultsLayer;
        
        function initMap() {
            // Coordonnées par défaut 
            const defaultLat = {{ isset($site) && $site->latitude ? $site->latitude : 33.98 }};
            const defaultLng = {{ isset($site) && $site->longitude ? $site->longitude : 9.54 }};
            const defaultZoom = {{ isset($site) && $site->latitude && $site->longitude ? 13 : 6 }};
            
            // Initialiser la carte
            map = L.map('map').setView([defaultLat, defaultLng], defaultZoom);
            
            // Ajouter la couche tuiles OpenStreetMap
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap contributors',
                maxZoom: 19
            }).addTo(map);
            
            // Initialiser le geocoder
            geocoder = L.Control.geocoder({
                defaultMarkGeocode: false,
                position: 'topleft',
                placeholder: '{{ __("Search location...") }}',
                errorMessage: '{{ __("Location not found") }}'
            }).addTo(map);
            
            // Gérer les résultats de géocodage
            geocoder.on('markgeocode', function(e) {
                const result = e.geocode;
                const center = result.center;
                const bbox = result.bbox;
                
                // Mettre à jour la position
                updateMapLocation(center.lat, center.lng, 14, result.name);
                
                // Afficher l'adresse
                showAddressPreview(result.name);
            });
            
            // Initialiser le marqueur si des coordonnées existent
            if ({{ isset($site) && $site->latitude && $site->longitude ? 'true' : 'false' }}) {
                marker = L.marker([defaultLat, defaultLng], {
                    draggable: true
                }).addTo(map);
                updateCoordinatesStatus(defaultLat, defaultLng);
                
                // Récupérer le nom de l'emplacement
                reverseGeocode(defaultLat, defaultLng);
            }
            
            // Initialiser la couche pour les résultats de recherche
            searchResultsLayer = L.layerGroup().addTo(map);
            
            // Configurer les événements
            setupMapEvents();
            setupSearchEvents();
        }
        
        function setupMapEvents() {
            // Gestionnaire d'événement pour le clic sur la carte
            map.on('click', function(e) {
                const lat = e.latlng.lat;
                const lng = e.latlng.lng;
                
                updateMapLocation(lat, lng, 13);
                reverseGeocode(lat, lng);
            });
            
            // Gestionnaire pour le bouton "Me localiser"
            $('#locateMe').on('click', function() {
                locateUser();
            });
            
            // Événement pour le déplacement du marqueur
            if (marker) {
                marker.on('dragend', function(e) {
                    const position = marker.getLatLng();
                    updateFormFields(position.lat, position.lng);
                    updateCoordinatesStatus(position.lat, position.lng);
                    reverseGeocode(position.lat, position.lng);
                });
            }
        }
        
        function setupSearchEvents() {
            // Recherche manuelle
            $('#searchLocation').on('click', function() {
                const query = $('#locationSearch').val().trim();
                if (query) {
                    searchLocation(query);
                }
            });
            
            $('#locationSearch').on('keypress', function(e) {
                if (e.which === 13) {
                    const query = $(this).val().trim();
                    if (query) {
                        searchLocation(query);
                    }
                }
            });
            
            // Effacer la recherche
            $('#clearSearch').on('click', function() {
                $('#locationSearch').val('');
                searchResultsLayer.clearLayers();
                $('#addressPreview').addClass('d-none');
                $('#citiesSuggestions').addClass('d-none');
            });
            
            // Afficher les villes
            $('#searchCities').on('click', function() {
                $('#citiesSuggestions').toggleClass('d-none');
            });
            
            // Boutons de villes
            $(document).on('click', '.city-btn', function() {
                const city = $(this).data('city');
                const lat = $(this).data('lat');
                const lng = $(this).data('lng');
                
                $('#locationSearch').val(city);
                updateMapLocation(lat, lng, 12, city);
                showAddressPreview(city + ', Morocco');
                $('#citiesSuggestions').addClass('d-none');
            });
            
            // Recherche position actuelle
            $('#searchCurrent').on('click', function() {
                locateUser();
            });
        }
        
        function searchLocation(query) {
            // Afficher un indicateur de chargement
            const searchBtn = $('#searchLocation');
            const originalHtml = searchBtn.html();
            searchBtn.html('<i class="la la-spinner la-spin"></i> {{ __("Searching") }}').prop('disabled', true);
            
            // Nettoyer les résultats précédents
            searchResultsLayer.clearLayers();
            
            // Utiliser le géocodeur
            geocoder.geocode(query, function(results) {
                searchBtn.html(originalHtml).prop('disabled', false);
                
                if (results && results.length > 0) {
                    const result = results[0];
                    
                    // Créer un marqueur pour le résultat
                    const resultMarker = L.marker(result.center, {
                        icon: L.divIcon({
                            className: 'search-result-marker',
                            html: '<div style="background-color: #007bff; width: 16px; height: 16px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.3);"></div>',
                            iconSize: [20, 20]
                        })
                    }).addTo(searchResultsLayer);
                    
                    resultMarker.bindPopup(`<strong>${result.name}</strong><br>${result.center.lat.toFixed(6)}, ${result.center.lng.toFixed(6)}`);
                    
                    // Centrer sur le résultat
                    updateMapLocation(result.center.lat, result.center.lng, 14, result.name);
                    showAddressPreview(result.name);
                    
                    toastr.success('{{ __("Location found") }}');
                } else {
                    toastr.error('{{ __("Location not found") }}');
                }
            });
        }
        
        function locateUser() {
            if ("geolocation" in navigator) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    const lat = position.coords.latitude;
                    const lng = position.coords.longitude;
                    
                    updateMapLocation(lat, lng, 14, '{{ __("Your current location") }}');
                    reverseGeocode(lat, lng);
                    toastr.success('{{ __("Location found successfully") }}');
                }, function(error) {
                    handleGeolocationError(error);
                }, {
                    enableHighAccuracy: true,
                    timeout: 10000
                });
            } else {
                toastr.error('{{ __("Geolocation is not supported by your browser") }}');
            }
        }
        
        function updateMapLocation(lat, lng, zoom = 13, locationName = '') {
            // Supprimer l'ancien marqueur s'il existe
            if (marker) {
                map.removeLayer(marker);
            }
            
            // Ajouter un nouveau marqueur
            marker = L.marker([lat, lng], {
                draggable: true
            }).addTo(map);
            
            // Mettre à jour les champs de formulaire
            updateFormFields(lat, lng);
            
            // Centrer la carte
            map.setView([lat, lng], zoom);
            
            // Mettre à jour le statut
            updateCoordinatesStatus(lat, lng, locationName);
            
            // Événement pour le déplacement du marqueur
            marker.on('dragend', function(e) {
                const position = marker.getLatLng();
                updateFormFields(position.lat, position.lng);
                updateCoordinatesStatus(position.lat, position.lng);
                reverseGeocode(position.lat, position.lng);
            });
        }
        
        function reverseGeocode(lat, lng) {
            // Utiliser Nominatim pour le géocodage inversé
            const url = `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&zoom=18&addressdetails=1`;
            
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                headers: {
                    'User-Agent': 'YourAppName/1.0'
                },
                success: function(data) {
                    if (data && data.display_name) {
                        showAddressPreview(data.display_name);
                        $('#location-name').text(data.display_name.split(',')[0]);
                    }
                },
                error: function() {
                    // Silencieux en cas d'erreur
                }
            });
        }
        
        function showAddressPreview(address) {
            if (address) {
                $('#previewAddress').text(address);
                $('#addressPreview').removeClass('d-none');
            }
        }
        
        function updateFormFields(lat, lng) {
            $('#latitude').val(lat.toFixed(6));
            $('#longitude').val(lng.toFixed(6));
        }
        
        function updateCoordinatesStatus(lat, lng, locationName = '') {
            const coordsText = `${lat.toFixed(6)}, ${lng.toFixed(6)}`;
            $('#coordinates-status').html(
                `<i class="la la-map-marker"></i> ${coordsText} - {{ __('Location selected') }}`
            );
            
            if (locationName) {
                $('#location-name').text(locationName);
            }
        }
        
        function handleGeolocationError(error) {
            let errorMessage = '{{ __("Unable to retrieve your location") }}';
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    errorMessage = '{{ __("Location access denied. Please check your browser permissions.") }}';
                    break;
                case error.POSITION_UNAVAILABLE:
                    errorMessage = '{{ __("Location information is unavailable.") }}';
                    break;
                case error.TIMEOUT:
                    errorMessage = '{{ __("Location request timed out.") }}';
                    break;
            }
            toastr.error(errorMessage);
        }
        
        // Validation des champs de coordonnées
        $('#latitude, #longitude').on('change', function() {
            const lat = parseFloat($('#latitude').val());
            const lng = parseFloat($('#longitude').val());
            
            if (!isNaN(lat) && !isNaN(lng) && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
                updateMapLocation(lat, lng, 13);
                reverseGeocode(lat, lng);
            }
        });
    </script>
@endpush