@extends('layout.app')

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

@push('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/tables/datatable/datatables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/tables/extensions/buttons.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/tables/datatable/buttons.bootstrap4.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/tables/datatable/select.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/tables/extensions/responsive.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/tables/extensions/colReorder.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/tables/extensions/fixedHeader.dataTables.min.css') }}">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <style>
        #mapModal .modal-dialog {
            max-width: 90%;
            width: 90%;
        }
        #mapModal .modal-content {
            height: 90vh;
        }
        #allSitesMap {
            height: calc(90vh - 120px);
            width: 100%;
            border-radius: 4px;
            z-index: 1;
        }
        .leaflet-container {
            font-family: inherit;
        }
        .site-marker-popup .site-name {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        .site-marker-popup .site-ref {
            color: #666;
            font-size: 12px;
            margin-bottom: 5px;
        }
        .site-marker-popup .site-coords {
            color: #888;
            font-size: 11px;
            margin-bottom: 8px;
        }
        .site-marker-popup .site-status {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: bold;
        }
        .site-marker-popup .status-active {
            background-color: #28a745;
            color: white;
        }
        .site-marker-popup .status-inactive {
            background-color: #dc3545;
            color: white;
        }
        .map-controls {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 1000;
            background: white;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            max-width: 300px;
        }
        .site-counter {
            background: #007bff;
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .map-legend {
            margin-top: 10px;
            font-size: 12px;
        }
        .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }
        .legend-color {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .legend-active {
            background-color: #28a745;
        }
        .legend-inactive {
            background-color: #dc3545;
        }
    </style>
    <style>
        table.dataTable.no-footer {
            border-bottom: none !important;
        }
        #filterModal .modal-header{
            border-bottom: none !important;
        }
    </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>
            </div>
            <div class="content-header-right col-md-6 col-12">
                <div class="btn-group float-md-right">
                    <a  class="btn btn-success mr-1 pr-1 pl-1" href="{{ route('sites.create')}}" >
                        <i class="la la-plus"></i> {{ __('Add') }}
                    </a>
                    <button type="button" class="btn btn-warning pr-1 pl-1" data-toggle="modal" data-target="#mapModal" id="showMapBtn" >
                        <i class="la la-map"></i> {{ __('Map View') }}
                    </button>
                </div>
            </div>
        </div>
        <div class="content-body pb-5">
            <section>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-content collapse show">
                                <div class="card-body card-dashboard">
                                    <table class="table table-bordered dataex-res-constructor">
                                        <thead class="text-uppercase text-center text-white bg-secondary">
                                            <tr>
                                                <th>{{ __('ID') }}</th>
                                                <th>{{ __('Name') }}</th>
                                                <th>{{ __('Description') }}</th>
                                                <th>{{ __('Status') }}</th>
                                                <th>{{ __('Date création') }}</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
@endsection

@section('modals')
<div class="modal animated bounceInUp text-left" id="mapModal" tabindex="-1" role="dialog" aria-labelledby="mapModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body px-2 pb-3">
                <div class="row">
                    <div class="col-12">
                        <div class="alert alert-info">
                            <i class="la la-info-circle"></i> 
                            {{ __('This map shows all sites with their locations. Click on markers to see details.') }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="map-controls">
                            <div class="site-counter">
                                <i class="la la-map-marker"></i> 
                                <span id="siteCount">0</span> {{ __('sites') }}
                            </div>
                            <div class="form-group mb-2">
                                <label class="form-label" for="filterStatus">{{ __('Filter by Status') }}</label>
                                <select class="form-control form-control-sm" id="filterStatus">
                                    <option value="all">{{ __('All Sites') }}</option>
                                    <option value="active">{{ __('Active Only') }}</option>
                                    <option value="inactive">{{ __('Inactive Only') }}</option>
                                </select>
                            </div>
                            <div class="map-legend">
                                <div class="legend-item">
                                    <div class="legend-color legend-active"></div>
                                    <span>{{ __('Active Site') }}</span>
                                </div>
                                <div class="legend-item">
                                    <div class="legend-color legend-inactive"></div>
                                    <span>{{ __('Inactive Site') }}</span>
                                </div>
                            </div>
                        </div>
                        <div id="allSitesMap"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script src="{{ asset('modern-admin/app-assets/vendors/js/tables/datatable/datatables.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/tables/buttons.colVis.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/tables/datatable/dataTables.colReorder.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/tables/datatable/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/tables/datatable/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/tables/datatable/dataTables.fixedHeader.min.js') }}"></script>
    @include('sites.partials.datatable')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>   
    <script>
        $(document).ready(function(){
            
            // Initialiser la carte quand la modal s'ouvre
            $('#mapModal').on('shown.bs.modal', function() {
                initMap();
                loadSites();
            });
            
            // Réinitialiser la carte quand la modal se ferme
            $('#mapModal').on('hidden.bs.modal', function() {
                if (window.allSitesMap) {
                    window.allSitesMap.remove();
                    window.allSitesMap = null;
                    window.siteMarkers = [];
                }
            });
            
            // Filtrer les sites par statut
            $('#filterStatus').on('change', function() {
                filterSitesByStatus($(this).val());
            });
        });
        
        function initMap() { 
            // Initialiser la carte avec une vue par défaut 
            window.allSitesMap = L.map('allSitesMap').setView([33.98, 9.54], 6);
            
            // Ajouter la couche tuiles OpenStreetMap
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '',
                maxZoom: 19
            }).addTo(window.allSitesMap);
            
            // Initialiser les bounds et les marqueurs
            window.allSitesBounds = L.latLngBounds();
            window.siteMarkers = [];
            window.siteMarkersLayer = L.layerGroup().addTo(window.allSitesMap);
        }
        
        function loadSites() {
            // Afficher un indicateur de chargement
            $('#sitesTableBody').html('<tr><td colspan="5" class="text-center"><i class="la la-spinner la-spin"></i> {{ __("Loading sites...") }}</td></tr>');
            
            // Récupérer les sites via AJAX
            $.ajax({
                url: "{{ route('sites.getAll') }}",
                type: "GET",
                dataType: "json",
                success: function(response) {
                    if (response.sites && response.sites.length > 0) {
                        // Mettre à jour le compteur
                        $('#siteCount').text(response.sites.length);
                        
                        // Vider le tableau
                        $('#sitesTableBody').empty();
                        
                        // Variables pour les bounds
                        let hasValidCoords = false;
                        
                        // Ajouter chaque site à la carte et au tableau
                        response.sites.forEach(function(site) {
                            addSiteToMap(site);
                            
                            // Ajouter aux bounds si les coordonnées sont valides
                            if (site.latitude && site.longitude) {
                                const latLng = L.latLng(site.latitude, site.longitude);
                                window.allSitesBounds.extend(latLng);
                                hasValidCoords = true;
                            }
                        });
                        
                        // Ajuster la vue de la carte si des coordonnées valides existent
                        if (hasValidCoords && window.allSitesBounds.isValid()) {
                            window.allSitesMap.fitBounds(window.allSitesBounds.pad(0.1));
                        }
                    } else {
                        $('#sitesTableBody').html('<tr><td colspan="5" class="text-center text-muted">{{ __("No sites found") }}</td></tr>');
                        $('#siteCount').text('0');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error loading sites:', error);
                    $('#sitesTableBody').html('<tr><td colspan="5" class="text-center text-danger">{{ __("Error loading sites") }}</td></tr>');
                    toastr.error('{{ __("Failed to load sites") }}');
                }
            });
        }
        
        function addSiteToMap(site) {
            // Vérifier que le site a des coordonnées
            if (!site.latitude || !site.longitude) {
                return;
            }
            
            // Définir la couleur du marqueur basée sur le statut
            const markerColor = site.is_active ? 'green' : 'red';
            const markerIcon = L.divIcon({
                className: 'custom-marker',
                html: `<div style="background-color: ${markerColor}; width: 20px; height: 20px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.3);"></div>`,
                iconSize: [24, 24],
                iconAnchor: [12, 12]
            });
            
            // Créer le marqueur
            const marker = L.marker([site.latitude, site.longitude], {
                icon: markerIcon,
                title: site.name
            });
            
            // Créer le contenu du popup
            const popupContent = `
                <div class="site-marker-popup">
                    <div class="site-name">${site.name}</div>
                    <div class="site-ref"><strong>{{ __('Reference') }}:</strong> ${site.reference || 'N/A'}</div>
                    <div class="site-coords">
                        <strong>{{ __('Coordinates') }}:</strong><br>
                        ${site.latitude.toFixed(6)}, ${site.longitude.toFixed(6)}
                    </div>
                    <div class="site-status ${site.is_active ? 'status-active' : 'status-inactive'}">
                        ${site.is_active ? '{{ __("Active") }}' : '{{ __("Inactive") }}'}
                    </div>
                </div>
            `;
            
            // Ajouter le popup
            marker.bindPopup(popupContent, {
                maxWidth: 250
            });
            
            // Ajouter à la couche des marqueurs
            marker.addTo(window.siteMarkersLayer);
            
            // Stocker une référence au marqueur avec les données du site
            marker.siteData = site;
            window.siteMarkers.push(marker);
        }
        
        function filterSitesByStatus(status) {
            // Filtrer les marqueurs sur la carte
            window.siteMarkersLayer.clearLayers();
            
            let activeCount = 0;
            let inactiveCount = 0;
            
            window.siteMarkers.forEach(function(marker) {
                const site = marker.siteData;
                let shouldShow = false;
                
                if (status === 'all') {
                    shouldShow = true;
                } else if (status === 'active' && site.is_active) {
                    shouldShow = true;
                } else if (status === 'inactive' && !site.is_active) {
                    shouldShow = true;
                }
                
                if (shouldShow) {
                    marker.addTo(window.siteMarkersLayer);
                    if (site.is_active) {
                        activeCount++;
                    } else {
                        inactiveCount++;
                    }
                }
            });
            
            // Filtrer les lignes du tableau
            $('#sitesTableBody tr').each(function() {
                const rowStatus = $(this).data('status');
                let shouldShow = false;
                
                if (status === 'all') {
                    shouldShow = true;
                } else if (status === 'active' && rowStatus === 'active') {
                    shouldShow = true;
                } else if (status === 'inactive' && rowStatus === 'inactive') {
                    shouldShow = true;
                }
                
                $(this).toggle(shouldShow);
            });
            
            // Mettre à jour le compteur
            const totalCount = status === 'all' ? window.siteMarkers.length : 
                             status === 'active' ? activeCount : inactiveCount;
            $('#siteCount').text(totalCount);
        }
        
        // Gestionnaire pour le bouton "Voir sur la carte" dans le tableau
        $(document).on('click', '.view-on-map', function() {
            const lat = $(this).data('lat');
            const lng = $(this).data('lng');
            const name = $(this).data('name');
            
            if (lat && lng && window.allSitesMap) {
                window.allSitesMap.setView([lat, lng], 13);
                
                // Ouvrir le popup correspondant
                window.siteMarkers.forEach(function(marker) {
                    if (marker.siteData && marker.siteData.name === name) {
                        marker.openPopup();
                    }
                });
            }
        });
    </script>
@endpush