@extends('layout.app')

@section('title')
    {{ __('Drivers') }}
@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>
        table.dataTable.no-footer {
            border-bottom: none !important;
        }
        #filterModal .modal-header{
            border-bottom: none !important;
        }
        #allSitesMap {
            height: 700px;
            width: 100%;
            border-radius: 5px;
            z-index: 1;
        }
        .custom-div-icon {
            background: transparent;
            border: none;
        }
        .site-marker {
            background-color: #28a745;
            border-radius: 50%;
            text-align: center;
            color: white;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        .driver-marker {
            background-color: #dc3545;
            border-radius: 50%;
            text-align: center;
            color: white;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
            }
            70% {
                transform: scale(1.1);
                box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
            }
        }
        .leaflet-control-attribution {
            font-size: 8px;
        }
        .last-update {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: white;
            padding: 5px 10px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            z-index: 1000;
            font-size: 12px;
        }
    </style>
@endpush

@section('active_my_drivers', '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 mb-1">
            <div class="content-header-left col-md-6 col-12 breadcrumb-new">
                <h3 class="content-header-title mb-0 d-inline-block">{{ __('Drivers')}}</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-msm-right">
                    <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 p-0">
                        <div class="card">
                            <div class="card-content collapse show">
                                <div class="card-body card-dashboard p-1">
                                    <table class="table table-bordered dataex-res-constructor">
                                        <thead class="text-uppercase text-center text-white bg-teal-maq">
                                            <tr>
                                                <th>{{ __('ID') }}</th>
                                                <th>{{ __('Name') }}</th>
                                                <th>{{ __('Libre') }}</th>
                                                <th>{{ __('Next Trip') }}</th>
                                                <th>{{ __('Email') }}</th>
                                                <th>{{ __('Phone') }}</th>
                                                <th>{{ __('Fonction') }}</th>
                                                <th>{{ __('Organisation') }}</th>
                                                <th>{{ __('Status') }}</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-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="mapModalLabel">
                    <i class="la la-map"></i> {{ __('Drivers Map') }}
                </h4>
                <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> 
                            {{ __('Green markers show sites, red markers show drivers currently on trip. Map updates automatically every minute.') }}
                        </div>
                    </div>
                    <div class="col-12" id="mapCounter">
                        
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 position-relative">
                        <div id="allSitesMap"></div>
                        <div class="last-update" id="lastUpdate"></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('drivers.partials.datatable3')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>  
    <script>
        $(document).ready(function(){
            let map = null;
            let markers = [];
            let updateInterval = null;
            
            // Fonction pour créer une icône personnalisée
            function createCustomIcon(type, text, size = 30) {
                return L.divIcon({
                    className: 'custom-div-icon',
                    html: `<div class="${type}-marker" style="width: ${size}px; height: ${size}px; font-size: ${size/2}px;">${text}</div>`,
                    iconSize: [size, size],
                    popupAnchor: [0, -size/2]
                });
            }
            
            // Fonction pour initialiser la carte
            function initMap() {
                if (map) {
                    map.remove();
                }
                
                map = L.map('allSitesMap').setView([46.603354, 1.888334], 6); // Centré sur la France
                
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '© OpenStreetMap contributors'
                }).addTo(map);
                
                // Charger les données initiales
                loadMapData();
                
                // Configurer le rafraîchissement automatique toutes les minutes
                if (updateInterval) {
                    clearInterval(updateInterval);
                }
                updateInterval = setInterval(loadMapData, 30000); // 30000 ms = 1/2 minute
            }
            
            // Fonction pour charger les données de la carte
            function loadMapData() {
                $.ajax({
                    url: '{{ route("drivers.getDataMap2") }}',
                    method: 'GET',
                    success: function(response) {
                        updateMap(response);
                        updateLastUpdateTime();
                    },
                    error: function(xhr, status, error) {
                        console.error('Erreur lors du chargement des données:', error);
                        $('#allSitesMap').before('<div class="alert alert-danger">Erreur lors du chargement des données de la carte</div>');
                    }
                });
            }
            
            function createSiteIcon() {
                return L.icon({
                    iconUrl: '{{ asset("image/site-marker.png") }}',
                    iconSize: [30, 48],
                    iconAnchor: [16, 32],
                    popupAnchor: [0, -32],
                    className: 'site-marker-icon'
                });
            }

            function createDriverIcon() {
                return L.icon({
                    iconUrl: '{{ asset("image/driver-marker.png") }}',
                    iconSize: [35, 40],
                    iconAnchor: [16, 32],
                    popupAnchor: [0, -32],
                    className: 'driver-marker-icon'
                });
            }

            // Modifiez la fonction updateMap
            function updateMap(data) {
                // Supprimer tous les marqueurs existants
                markers.forEach(marker => map.removeLayer(marker));
                markers = [];
                
                // Ajouter les sites (marqueurs avec image site-marker.png)
                if (data.sites && data.sites.length > 0) {
                    data.sites.forEach((site, index) => {
                        if (site.latitude && site.longitude) {
                            const marker = L.marker([site.latitude, site.longitude], {
                                icon: createSiteIcon()
                            }).bindPopup(`
                                <div class="site-marker-popup">
                                    <b>${site.name}</b><br>
                                    <i class="la la-map-marker"></i> Site<br>
                                    <small>${site.latitude.toFixed(6)}, ${site.longitude.toFixed(6)}</small>
                                </div>
                            `);
                            marker.addTo(map);
                            markers.push(marker);
                        }
                    });
                }
                
                // Ajouter les drivers (marqueurs avec image driver-marker.png)
                if (data.drivers && data.drivers.length > 0) {
                    data.drivers.forEach((driver, index) => {
                        if (driver.latitude && driver.longitude) {
                            const marker = L.marker([driver.latitude, driver.longitude], {
                                icon: createDriverIcon()
                            }).bindPopup(`
                                <div class="driver-marker-popup">
                                    <b>${driver.name}</b><br>
                                    <i class="la la-clock-o"></i> Dernière vue: ${driver.last_seen}<br>
                                    <i class="la la-truck"></i> En tournée<br>
                                    <small>${driver.latitude.toFixed(6)}, ${driver.longitude.toFixed(6)}</small>
                                </div>
                            `);
                            marker.addTo(map);
                            markers.push(marker);
                        }
                    });
                }
                
                // Ajuster la vue pour voir tous les marqueurs
                if (markers.length > 0) {
                    const group = L.featureGroup(markers);
                    map.fitBounds(group.getBounds().pad(0.1));
                }
                
                // Afficher le compteur
                updateCounter(data);
            }
            
            // Fonction pour mettre à jour le compteur
            function updateCounter(data) {
                const siteCount = data.sites ? data.sites.length : 0;
                const driverCount = data.drivers ? data.drivers.length : 0;
                
                let counterHtml = `
                    <div class="alert alert-success py-1 px-2 mb-2">
                        <small>
                            <i class="la la-map-marker text-success"></i> Sites: ${siteCount} | 
                            <i class="la la-truck text-danger"></i> Chauffeurs en tournée: ${driverCount}
                        </small>
                    </div>
                `;
                
                $('#mapCounter').html(counterHtml);
            }
            
            // Fonction pour mettre à jour l'heure de dernière mise à jour
            function updateLastUpdateTime() {
                const now = new Date();
                const timeString = now.toLocaleTimeString('fr-FR', {
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit'
                });
                $('#lastUpdate').html(`Dernière mise à jour: ${timeString}`);
            }
            
            // Initialiser la carte quand le modal est ouvert
            $('#mapModal').on('shown.bs.modal', function() {
                initMap();
            });
            
            // Nettoyer l'intervalle quand le modal est fermé
            $('#mapModal').on('hidden.bs.modal', function() {
                if (updateInterval) {
                    clearInterval(updateInterval);
                    updateInterval = null;
                }
                if (map) {
                    map.remove();
                    map = null;
                }
            });
            
            // Recharger manuellement les données
            $('#refreshMapBtn').click(function() {
                loadMapData();
            });
            
            // Gérer le redimensionnement de la carte
            $(window).resize(function() {
                if (map) {
                    setTimeout(() => {
                        map.invalidateSize();
                    }, 200);
                }
            });
        });
    </script>
@endpush