@extends('layout.app')

@section('title', __('Map Test'))

@section('data_col', '2-columns')
@section('body_class', '2-columns menu-collapsed')

@push('styles')
    <style>
        #main-map {
            height: 750px;
            width: 100%;
            border-radius: 8px;
            border: 1px solid #ddd;
        }
        .leaflet-control-attribution {
            display: none !important;
        }
        .location-info {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-top: 15px;
            border: 1px solid #e0e0e0;
        }
        .location-type-selector {
            margin-bottom: 15px;
        }
        .site-selector, .map-selector {
            margin-bottom: 15px;
        }
        .route-info {
            background: #e8f4ff;
            border-radius: 8px;
            padding: 15px;
            margin: 15px 0;
            border-left: 4px solid #5A8DEE;
        }
        .map-container {
            position: relative;
        }
        .map-overlay {
            margin-bottom: 10px;
            background: white;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            border: 1px solid #dee2e6;
        }
        .coordinates-display {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
        .search-container {
            margin-bottom: 15px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }
        .search-input-wrapper {
            position: relative;
            margin-bottom: 10px;
        }
        .search-input-wrapper input {
            padding-right: 40px;
            border-radius: 20px;
            border: 2px solid #e0e0e0;
            transition: all 0.3s ease;
        }
        .search-input-wrapper input:focus {
            border-color: #5A8DEE;
            box-shadow: 0 0 0 0.2rem rgba(90, 141, 238, 0.25);
        }
        .search-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }
        .coordinate-input-group {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
        .coordinate-input-group input {
            flex: 1;
            border-radius: 6px;
            border: 1px solid #dee2e6;
            padding: 8px 12px;
        }
        .search-tabs {
            border-bottom: 2px solid #dee2e6;
            margin-bottom: 15px;
        }
        .search-tab {
            padding: 8px 16px;
            cursor: pointer;
            border: none;
            background: none;
            color: #666;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        .search-tab.active {
            color: #5A8DEE;
            border-bottom: 2px solid #5A8DEE;
            margin-bottom: -2px;
        }
        .search-tab:hover {
            color: #5A8DEE;
        }
        .autoComplete_wrapper {
            width: 100%;
        }
        .autoComplete_wrapper > input {
            width: 100%;
            border-radius: 20px;
            border: 2px solid #e0e0e0;
            font-size: 14px;
        }
        .autoComplete_wrapper > ul {
            max-height: 300px;
            overflow-y: auto;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            z-index: 2000;
        }
        .autoComplete_wrapper > ul > li {
            padding: 10px 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        .autoComplete_wrapper > ul > li:hover {
            background: #e8f4ff;
        }
        .search-result-item {
            display: flex;
            align-items: center;
        }
        .search-result-item i {
            margin-right: 10px;
            color: #5A8DEE;
        }
        .search-result-details {
            flex: 1;
        }
        .search-result-name {
            font-weight: 500;
            color: #333;
        }
        .search-result-address {
            font-size: 12px;
            color: #666;
        }
        .location-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            margin-right: 8px;
        }
        .location-badge.depart {
            background: #5A8DEE;
            color: white;
        }
        .location-badge.dest {
            background: #28a745;
            color: white;
        }
        .selected-locations-panel {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            border: 1px solid #dee2e6;
        }
        .location-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 6px;
            margin-bottom: 10px;
        }
        .location-item:last-child {
            margin-bottom: 0;
        }
        .location-item-info {
            flex: 1;
        }
        .location-item-actions button {
            margin-left: 5px;
        }
        .leaflet-routing-container {
            max-height: 300px;
            overflow-y: auto;
        }
        .autoComplete_wrapper {
            position: relative;
        }
        .autoComplete_loader {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border: 2px solid #e0e0e0;
            border-top: 2px solid #5A8DEE;
            border-radius: 50%;
            animation: autoCompleteSpin 0.8s linear infinite;
            display: none;
            z-index: 10;
        }
        @keyframes autoCompleteSpin {
            0% { transform: translateY(-50%) rotate(0deg); }
            100% { transform: translateY(-50%) rotate(360deg); }
        }
        .autoComplete_wrapper.loading .autoComplete_loader {
            display: block;
        }
        .autoComplete_wrapper.loading input {
            padding-right: 45px !important;
        }
        .autoComplete_wrapper.loading .search-icon {
            opacity: 0;
        }
        .autoComplete_wrapper > ul {
            transition: opacity 0.2s ease;
        }
        .trip-selector-section {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 2px solid #e0e0e0;
        }
        .trip-card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            border: 1px solid #dee2e6;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .trip-card:hover {
            border-color: #5A8DEE;
            box-shadow: 0 2px 8px rgba(90, 141, 238, 0.2);
        }
        .trip-card.selected {
            border: 2px solid #5A8DEE;
            background: #f0f7ff;
        }
        .trip-name {
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }
        .trip-waypoints {
            font-size: 12px;
            color: #666;
            margin-bottom: 10px;
        }
        .trip-waypoints i {
            margin: 0 5px;
            color: #5A8DEE;
        }
        .trip-comparison {
            background: #f8f9fa;
            border-radius: 6px;
            padding: 10px;
            margin-top: 10px;
            display: none;
        }
        .trip-card.selected .trip-comparison {
            display: block;
        }
        .comparison-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid #dee2e6;
        }
        .comparison-row:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        .comparison-label {
            color: #666;
        }
        .comparison-value {
            font-weight: bold;
        }
        .comparison-value.before {
            color: #666;
        }
        .comparison-value.after {
            color: #5A8DEE;
        }
        .comparison-diff {
            font-size: 12px;
            margin-left: 10px;
        }
        .diff-increase {
            color: #dc3545;
        }
        .diff-decrease {
            color: #28a745;
        }
        .trip-route-info {
            background: #fff3cd;
            border-radius: 6px;
            padding: 12px;
            margin: 15px 0;
            border-left: 4px solid #ffc107;
        }
        .section-title {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        .section-title i {
            margin-right: 8px;
            color: #5A8DEE;
        }
        .trip-result-card {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            background: white;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .trip-result-card:hover {
            border-color: #5A8DEE;
            box-shadow: 0 2px 8px rgba(90, 141, 238, 0.15);
        }
        .trip-result-card.selected {
            border: 2px solid #5A8DEE;
            background: #f0f7ff;
        }
        .trip-result-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .trip-result-name {
            font-weight: bold;
            font-size: 16px;
            color: #333;
        }
        .trip-result-badge {
            background: #5A8DEE;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
        }
        .trip-result-badge.best {
            background: #28a745;
        }
        .trip-result-stats {
            display: flex;
            gap: 20px;
            margin-bottom: 10px;
            font-size: 14px;
        }
        .trip-result-stat {
            display: flex;
            align-items: center;
        }
        .trip-result-stat i {
            margin-right: 5px;
            color: #5A8DEE;
        }
        .trip-result-diff {
            color: #dc3545;
        }
        .trip-result-eta {
            font-size: 13px;
            color: #666;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px dashed #dee2e6;
        }
        .btn-compare-all {
            background: linear-gradient(135deg, #5A8DEE 0%, #4a7fd4 100%);
            border: none;
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            font-weight: bold;
            width: 100%;
            margin-top: 15px;
            transition: all 0.3s ease;
        }
        .btn-compare-all:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(90, 141, 238, 0.3);
        }
        .btn-compare-all:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        .modal-body {
            max-height: 750px;
            overflow-y: auto;
        }
        .unified-search-container {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .unified-search-title {
            color: white;
            margin-bottom: 15px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        
        .unified-search-title i {
            margin-right: 10px;
            font-size: 20px;
        }
        
        .unified-search-input-wrapper {
            background: white;
            border-radius: 50px;
            padding: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .unified-search-input {
            border: none !important;
            padding: 15px 20px !important;
            font-size: 16px !important;
            border-radius: 50px !important;
            background: transparent !important;
        }
        
        .unified-search-input:focus {
            box-shadow: none !important;
            outline: none !important;
        }
        
        .search-mode-selector {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        .search-mode-btn {
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            padding: 8px 16px;
            border-radius: 30px;
            font-size: 14px;
            transition: all 0.3s ease;
            cursor: pointer;
            flex: 1;
            text-align: center;
        }
        
        .search-mode-btn:hover {
            background: rgba(255,255,255,0.3);
        }
        
        .search-mode-btn.active {
            background: white;
            color: #667eea;
            font-weight: bold;
        }
        
        .unified-coordinates-panel {
            background: white;
            border-radius: 12px;
            padding: 15px;
            margin-top: 15px;
            display: none;
        }
        
        .location-selector-buttons {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        .location-selector-btn {
            flex: 1;
            padding: 12px;
            border-radius: 8px;
            border: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .location-selector-btn.depart {
            background: linear-gradient(135deg, #5A8DEE 0%, #4a7fd4 100%);
            color: white;
        }
        
        .location-selector-btn.destination {
            background: linear-gradient(135deg, #28a745 0%, #20a038 100%);
            color: white;
        }
        
        .location-selector-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        .location-selector-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }
        
        .current-selection-indicator {
            background: rgba(255,255,255,0.15);
            border-radius: 8px;
            padding: 10px 15px;
            margin-top: 15px;
            color: white;
        }
        
        .selection-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            margin-right: 8px;
        }
        
        .selection-badge.waiting-depart {
            background: #ffc107;
            color: #333;
        }
        
        .selection-badge.waiting-dest {
            background: #17a2b8;
            color: white;
        }
        
        .selection-badge.complete {
            background: #28a745;
            color: white;
        }
        
        .site-selector-unified {
            margin-top: 15px;
            display: none;
        }
        
        .site-selector-unified select {
            width: 100%;
            padding: 12px;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }
        
        .autoComplete_wrapper > ul {
            position: absolute;
            z-index: 3000 !important;
            width: 100%;
            max-height: 400px;
            overflow-y: auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }
        
        .autoComplete_wrapper > ul > li {
            padding: 12px 20px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
        }
        
        .autoComplete_wrapper > ul > li:hover,
        .autoComplete_wrapper > ul > li[aria-selected="true"] {
            background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
        }
        
        .search-result-item {
            display: flex;
            align-items: center;
        }
        
        .search-result-icon {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: white;
        }
        
        .search-result-icon.site {
            background: #764ba2;
        }
        
        .search-result-icon.address {
            background: #5A8DEE;
        }
        
        .search-result-icon.coordinates {
            background: #28a745;
        }
        
        .search-result-content {
            flex: 1;
        }
        
        .search-result-title {
            font-weight: 600;
            color: #333;
            margin-bottom: 3px;
        }
        
        .search-result-subtitle {
            font-size: 12px;
            color: #666;
        }
        
        .search-result-badge {
            background: #e8f4ff;
            color: #5A8DEE;
            padding: 4px 8px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: bold;
        }
    </style>
@endpush

@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="content-wrapper p-1">
            <div class="content-body pb-5">
                <div class="row">
                    <div class="col-md-3">
                        {{-- NOUVEAU : Recherche unifiée --}}
                        <div class="unified-search-container">
                            <div class="unified-search-title">
                                <i class="fas fa-search-location"></i>
                                {{ __('Recherche de trajet') }}
                            </div>
                            
                            <div class="unified-search-input-wrapper">
                                <div class="autoComplete_wrapper">
                                    <input type="text" 
                                           id="unified-search-input" 
                                           class="form-control unified-search-input" 
                                           placeholder="Rechercher une adresse, un site ou entrer des coordonnées..."
                                           >
                                    <div class="autoComplete_loader"></div>
                                </div>
                            </div>
                            
                            <div class="search-mode-selector">
                                <div class="search-mode-btn active" data-mode="search">
                                    <i class="fas fa-search"></i> Recherche
                                </div>
                                <div class="search-mode-btn" data-mode="sites">
                                    <i class="fas fa-building"></i> Sites
                                </div>
                                <div class="search-mode-btn" data-mode="coordinates">
                                    <i class="fas fa-map-marker-alt"></i> Coordonnées
                                </div>
                            </div>
                            
                            {{-- Panneau des coordonnées --}}
                            <div class="unified-coordinates-panel" id="coordinates-panel">
                                <div class="row">
                                    <div class="col-6">
                                        <input type="text" id="coord-lat" class="form-control" placeholder="Latitude">
                                    </div>
                                    <div class="col-6">
                                        <input type="text" id="coord-lng" class="form-control" placeholder="Longitude">
                                    </div>
                                </div>
                                <button class="btn btn-light btn-sm w-100 mt-2" onclick="window.useCoordinates()">
                                    <i class="fas fa-check"></i> Utiliser ces coordonnées
                                </button>
                            </div>
                            
                            {{-- Sélecteur de sites --}}
                            <div class="site-selector-unified" id="sites-panel">
                                <select id="site-select" class="form-control">
                                    <option value="">{{ __('Choisir un site...') }}</option>
                                    @foreach($sites as $site)
                                        <option value="{{ $site->id }}" 
                                                data-lat="{{ $site->latitude }}" 
                                                data-lng="{{ $site->longitude }}"
                                                data-name="{{ $site->name }}">
                                            {{ $site->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            
                            {{-- Boutons de sélection départ/destination --}}
                            <div class="location-selector-buttons">
                                <button class="location-selector-btn depart" id="set-as-depart-btn" onclick="window.setCurrentAsDepart()">
                                    <i class="fas fa-map-pin"></i> Définir comme DÉPART
                                </button>
                                <button class="location-selector-btn destination" id="set-as-dest-btn" onclick="window.setCurrentAsDest()">
                                    <i class="fas fa-flag-checkered"></i> Définir comme DESTINATION
                                </button>
                            </div>
                            
                            {{-- Indicateur d'état --}}
                            <div class="current-selection-indicator" id="selection-indicator">
                                <span class="selection-badge waiting-depart">
                                    <i class="fas fa-hourglass-start"></i> En attente du départ
                                </span>
                            </div>
                            
                            <button class="btn btn-light w-100 mt-3" onclick="window.getMyLocation()">
                                <i class="fas fa-location-arrow"></i> Utiliser ma position actuelle
                            </button>
                        </div>
                        
                        {{-- Panneau des points sélectionnés (inchangé) --}}
                        <div class="selected-locations-panel">
                            <h5><i class="fas fa-list"></i> Points sélectionnés</h5>
                            <div id="selected-locations-list">
                                <p class="text-muted text-center">Aucun point sélectionné</p>
                            </div>
                        </div>
                        
                        <button class="btn btn-primary btn-lg w-100" id="calculate-route" disabled>
                            <i class="fas fa-route"></i> {{ __('Calculer l\'itinéraire') }}
                        </button>
                        
                        {{-- Le reste est inchangé... --}}
                        <div id="route-info" class="route-info" style="display: none;"></div>
                        
                        {{-- Section des circuits --}}
                        <div class="trip-selector-section">
                            <div class="section-title">
                                <i class="fas fa-bus"></i> 
                                {{ __('Analyse des circuits') }}
                            </div>
                            <p class="text-muted small">
                                <i class="fas fa-info-circle"></i> 
                                Cliquez sur "Comparer tous les circuits" pour voir l'impact de l'ajout du passager sur chaque circuit disponible.
                            </p>
                            <button class="btn-compare-all" id="compare-all-trips-btn" disabled>
                                <i class="fas fa-chart-bar"></i> Comparer tous les circuits
                            </button>
                            <!-- Résumé du circuit sélectionné -->
                            <div id="trip-summary" class="trip-route-info" style="display: none;">
                                <strong><i class="fas fa-chart-bar"></i> Circuit sélectionné:</strong>
                                <div id="trip-summary-content"></div>
                            </div>
                        </div>
                        
                        <script id="trips-data" type="application/json">
                            @json($trips)
                        </script>
                    </div>
                    
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-header">
                                <div class="float-right">
                                    <span class="map-overlay mr-1">
                                        <small>
                                            <i class="fas fa-info-circle"></i> 
                                            <span id="selection-mode-indicator">Sélectionnez un point sur la carte</span>
                                        </small>
                                    </span>
                                    <button class="btn btn-sm btn-outline-primary" id="toggle-routing" type="button">
                                        <i class="fas fa-chevron-up"></i> Itinéraire
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger" id="clear-all-markers" type="button">
                                        <i class="fas fa-trash"></i> Tout effacer
                                    </button>
                                </div>
                            </div>
                            <div class="card-content">
                                <div class="card-body p-0">
                                    <div class="map-container">
                                        <div id="main-map"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {{-- Scripts existants... --}}
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script>
    
    {{-- Nouveau script unifié --}}
    @include('test4-unified')
@endpush