@extends('layouts.app', [
    'navClass' => 'navbar-light bg-secondary',
    'searchClass' => 'navbar-search-dark',
    'parentSection' => 'dashboards',
    'elementName' => 'dashboard-alternative'
])

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />

@push('css')
<style type="text/css">
    #map {
      height: 600px;
      width: 100%
    }
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<style>
    .custom-div-icon {
        background: transparent;
        border: none;
    }
    .custom-div-icon svg {
        display: block;
        width: 24px;
        height: 24px;
    }
</style>
@endpush

@section('title', 'Mapa de Viagens |')

@section('content')
    <div class="header pb-6">
        <div class="container-fluid">
            <div class="header-body">
                <div class="row align-items-center py-4">
                    <div class="col-lg-6 col-7">
                        <h6 class="h2 d-inline-block mb-0">Mapa de Viagens</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page content -->
    <div class="container-fluid mt--6">
		<div class="row">
			<div class="col-12">
				<div class="card"  style="min-height: 600px">
					<!-- Card header -->
					<div class="card-header">
						<div class="row align-items-center">
							<div class="col-8">
								<!-- Title -->
								<h5 class="h3 mb-0">Viagens em Tempo Real</h5>
							</div>
							<!-- <div class="col-4 text-right">
								<a href="#!" class="btn btn-sm btn-neutral">Action</a>
							</div> -->
						</div>
					</div>
					<div class="card-body">
                        <div id="map" style="width: 100%; height: 550px;"></div>
                        <!-- List group -->
							<br><br>
							@if (count($flights_list) > 0)
							<ul class="list-group list-group-flush list my--3">
								@foreach ($flights_list as $flight)
								<li class="list-group-item px-0">
									<div class="row align-items-center">
										<div class="col">
											<small>Produto:</small>
											<h5 class="mb-0"> <a class="dropdown-item" href="{{ route('salesproduct.edit', $flight->sp_id ) }}"> <i class="ni ni-folder-17"></i> Ver produto</a></h5>
										</div>
										<div class="col">
											<small>Destino:</small>
											<h5 class="mb-0">{{$flight->country . " - " . $flight->state_city}}</h5>
										</div>
										<div class="col">
											<small>Cliente:</small>
											<h5 class="mb-0">{{$flight->first_name . "  " .  $flight->last_name}}</h5>
										</div>
										<div class="col">
											<small>Período</small>
											<h5 class="mb-0">De {{ date('d/m/Y', strtotime($flight->start_date)) }} a {{ date('d/m/Y', strtotime($flight->end_date)) }}</h5>
										</div>
									</div>
								</li>
								@endforeach
							</ul>
							@else
							<h6 class="surtitle" style="text-align: center">Não há viagens ocorrendo agora</h6>
							@endif
							<br>
						<br>
					</div>
				</div>
			</div>
		</div>
        <br>
        <!-- Footer -->
        @include('layouts.footers.auth')
    </div>
@endsection

@push('js')
    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.extension.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    {{-- <script src="{{ asset('argon') }}/vendor/jvectormap-next/jquery-jvectormap.min.js"></script>
    <script src="{{ asset('argon') }}/js/vendor/jvectormap/jquery-jvectormap-world-mill.js"></script> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.min.js" integrity="sha512-mlz/Fs1VtBou2TrUkGzX4VoGvybkD9nkeXWJm3rle0DPHssYYx4j+8kIS15T78ttGfmOjH0lLaBXGcShaVkdkg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@endpush
@push('js')
<script>
        var map = L.map('map').setView([0, 0], 2); // Coordenadas iniciais globais e zoom afastado
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    var flights = @json($flights);
    console.log(flights); // Log para verificar os dados das viagens

    // Criar um ícone personalizado usando SVG
    var customIcon = L.divIcon({
        className: 'custom-div-icon',
        html: `
        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="#64d885" stroke="#1a0d29" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin">
            <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/>
            <circle cx="12" cy="10" r="3"/>
        </svg>
        `,
        iconSize: [28, 28],
        iconAnchor: [12, 24],
        popupAnchor: [0, -24]
    });

    var markers = [];
    var bounds = L.latLngBounds();

    flights.forEach(function(flight) {
        var clientName = flight[0];
        var cityName = flight[1];
        var latitude = parseFloat(flight[2]);
        var longitude = parseFloat(flight[3]);
        var startDate = new Date(flight[4]).toLocaleDateString('pt-BR');
        var endDate = new Date(flight[5]).toLocaleDateString('pt-BR');
        var country = flight[6];
        var tripId = flight[7];

        console.log(`Processando cidade: ${cityName}`);

        if (!isNaN(latitude) && !isNaN(longitude)) {
            // Se há latitude e longitude, use-os
            console.log(`Adicionando marcador com coordenadas: ${latitude}, ${longitude}`);
            var marker = L.marker([latitude, longitude], { icon: customIcon })
                .bindPopup(`<b>Cliente:</b> ${clientName}<br><b>Data:</b> ${startDate} - ${endDate}<br><b>Cidade:</b> ${cityName}`);

            // Evento de hover para mostrar popup
            marker.on('mouseover', function (e) {
                this.openPopup();
            });
            marker.on('mouseout', function (e) {
                this.closePopup();
            });

            markers.push(marker);
            bounds.extend(marker.getLatLng());
        }
    });

    // Adiciona os marcadores ao mapa
    var markersGroup = L.layerGroup(markers).addTo(map);

    // Ajusta o zoom e a posição do mapa para caber todos os marcadores
    if (bounds.isValid()) {
        map.fitBounds(bounds, { padding: [50, 50] }); // Adiciona um padding para melhor visualização
    }
</script>
@endpush
@push('css')
    <link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-select-bs4/css/select.bootstrap4.min.css">
@endpush

@push('js')
    <script src="{{ asset('argon') }}/vendor/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/buttons.print.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-select/js/dataTables.select.min.js"></script>
@endpush