@extends('layouts.app')
@section('title')
    {{ __('messages_301.Driver map') }}
@endsection
@section('style')
    <style>
        #map {
            width: 100%;
            height: 500px;
            margin-top: 20px;
        }
    </style>
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        @include('inc.breadcrumb', [
            'breadcrumb_items' => [
                __('messages.Home') => route('home'),
                __('messages_301.Driver map') => 'active',
            ],
        ])



        <div class="card">
            <div class="p-3 d-flex justify-content-start">

                <div class="col-xl-4 col-md-4 ">
                    <label class="mb-1">{{ __('messages_301.Driver') }}</label>
                    <select name="driver_id" class="form-control select2 select_driver_id">
                        <option value="">--------</option>
                        @foreach ($locations as $driver)
                            <option @selected(request('driver_id') == $driver->id) value="{{ $driver->id }}" data-lat="{{ $driver->lat }}"
                                data-long="{{ $driver->long }}" data-name="{{ $driver->user->name }}"
                                data-rating="{{ $driver->user->rate ? $driver->user->rate : ' 0.0' }}"
                                data-vehicle={{ $driver->user->vehicle_documents?->image ? asset($driver->user->vehicle_documents->image) : asset('default-images/car.png') }}>
                                {{ $driver->user->name . ' - ' . $driver->user->mobile_country_code . ' ' . $driver->user->mobile }}
                            </option>
                        @endforeach
                    </select>

                </div>
            </div>
            <div class="col-xl-12  ">
                <div class="card ">
                    <div class="card-body p-5">
                        <div class="card-title d-flex align-items-center">
                        </div>
                        <hr>
                        <div class="row g-3">
                            <div id="map"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('script')
    {{-- <script src="{{ asset('assets/js/maps.js') }}"></script> --}}
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAAOcn3r6DVavhuoPatQvNGg5kUuV1zAFo&callback=initMap&v=weekly&libraries=marker"
        defer></script>
    <script>
        const locations = {!! $locations->toJson() !!};
        $('.select2').select2()
    </script>
    @include('admin.users.drivers.includes.map')
    <script>
        $(document).ready(function() {
            // جلب المواقع من المتغير المرسل من الـ Controller
            const drivers = locations.map(location => ({
                lat: parseFloat(location.lat),
                lng: parseFloat(location.long),
                name: location.user.name,
                phone: location.user.mobile_country_code + location.user.mobile,
                rate: location.user.rate,
                type: location.user.vehicle_documents_approved.type
            }));

            let map; // متغير عام للخريطة
            let infoWindow; // متغير عام لـ InfoWindow
            let markers = []; // لتخزين العلامات (markers) للسائقين

            // عرض السائقين على الخريطة
            addDriversToMap(drivers);

            // إنشاء الخريطة وعرض السائقين عليها
            function addDriversToMap(drivers) {
                if (drivers.length === 0) return;

                // إنشاء الخريطة
                map = new google.maps.Map($('#map')[0], {
                    center: {
                        lat: drivers[0].lat,
                        lng: drivers[0].lng
                    },
                    zoom: 10,
                });

                // إنشاء عنصر InfoWindow
                infoWindow = new google.maps.InfoWindow();

                // إضافة السائقين للخريطة
                drivers.forEach(driver => {
                    const marker = new google.maps.Marker({
                        position: {
                            lat: driver.lat,
                            lng: driver.lng
                        },
                        map: map,
                        title: `${driver.name} (Rating: ${driver.rate})`,
                        icon: {
                            url: "{{ asset('') }}" + driver.type
                            .image, // استبدل هذا بالمسار الصحيح لصورة السيارة
                            scaledSize: new google.maps.Size(40, 40) // تعديل الحجم ليكون مناسبًا
                        }
                    });

                    // إضافة الحدث للنقر على الـ Marker
                    marker.addListener('click', () => {
                        map.setCenter(marker.position); // نقل الخريطة إلى موقع السائق
                        map.setZoom(17); // تكبير الخريطة
                        const content = `
                    <div>
                        <h5>${driver.name}</h5>
                        <p>Rating: ${driver.rate ?? '0.0'}</p>
                    </div>
                `;
                        infoWindow.setContent(content);
                        infoWindow.open(map, marker);
                    });

                    // تخزين العلامة في المصفوفة
                    markers.push({
                        marker,
                        driver
                    });
                });
            }

            // التعامل مع اختيار سائق من الـ Select
            $('.select_driver_id').on('change', function() {
                const selectedOption = $(this).find('option:selected');
                const lat = parseFloat(selectedOption.data('lat'));
                const lng = parseFloat(selectedOption.data('long'));
                const name = selectedOption.data('name');
                const vehicle = selectedOption.data('vehicle');
                const rating = selectedOption.data('rating');

              

                // تحديث الخريطة لموقع السائق المحدد
                map.setCenter({
                    lat,
                    lng
                });
                map.setZoom(17);

                // البحث عن العلامة المناسبة للسائق
                const targetMarker = markers.find(m =>
                    m.driver.lat === lat && m.driver.lng === lng
                );

                if (targetMarker) {
                    const content = `
                <div>
                    <h5>${name}</h5>
                    <p>Rating: ${rating}</p>
                </div>
            `;
                    infoWindow.setContent(content);
                    infoWindow.open(map, targetMarker.marker);
                }
            });
        });
    </script>
@endsection