@extends('layouts.app')
@section('title', __('tracker::lang.Tracker'))
@section('content')
@section('css')
    <!-- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" /> -->
    <!-- <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script> -->
    <style>
        #map {
            height: 500px; /* Adjust as needed */
            width: 100%;
        }
    </style>
@endsection
@include('tracker::layouts.nav')
<!-- Main content -->
<section class="content no-print">
    @component('components.filters', ['title' => __('tracker::lang.filters'), 'class' => 'box-solid'])
        
		<div class="col-md-4" id="customer">
            <div class="form-group">
                <label for="tripSelect">{{__('lang.customer')}}:</label>
                <div class="input-group" style="width: 100%;">
                    <select id="tripSelect" class="form-control select2" onchange="updateMap()" style="width: 100%;">
                        <option value="">{{ __('lang.all') }}</option>
                        @foreach ($contacts as $c)
                            <option value="{{$c->id}}" data-latitude="{{$c->latitude}}" data-longitude="{{$c->longitude}}">
                                {{$c->first_name}}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <label for="traching">{{__('lang.sales_persons')}}:</label>
                <select id="traching" onchange="fetchRepRoute()" class="form-control select2" style="width: 100%;">
                    <option value="">{{ __('lang.selected') }}</option>
                    @foreach (getSalesPersons() as $k => $s)
                        <option value="{{$k}}">{{ $s }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                {!! Form::label('date_day', __('sale.sale_date') . ':*') !!}
                <div class="input-group">
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                    {!! Form::text('date_day', $default_datetime, ['class' => 'form-control', 'id' => 'date_day', 'readonly', 'required']) !!}
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                {!! Form::label('trip_route', __('tracker::lang.Trip Routes') . ':' ) !!}
                <div class="input-group">
                    <span class="input-group-addon">
                        <!-- <i class="fa fa-map-marker"></i> -->
                    </span>
                    {!! Form::select('trip_route', $trip_routes??[], null , ['class' => 'form-control select2', 'id' => 'trip_route', 'placeholder' => __('lang.selected'), 'style' => 'width: 100%;']); !!}
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                {!! Form::label('state_id', __('business.state') . ':' ) !!}
                <div class="input-group">
                    <span class="input-group-addon">
                        <!-- <i class="fa fa-map-marker"></i> -->
                    </span>
                    {!! Form::select('state_id', statesDefault()??[], null , ['class' => 'form-control select2', 'id' => 'state_id', 'placeholder' => __('lang.selected'), 'style' => 'width: 100%;']); !!}
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="form-group">
                {!! Form::label('city_id', __('business.city') . ':' ) !!}
                <div class="input-group">
                    <span class="input-group-addon">
                        <!-- <i class="fa fa-map-marker"></i> -->
                    </span>
                    {!! Form::select('city_id', [], null , ['class' => 'form-control select2', 'id' => 'city_id', 'placeholder' => __('lang.selected'), 'style' => 'width: 100%;']); !!}
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                {!! Form::label('location_id[]', __('purchase.business_location') . ':') !!}
                <!-- زرار تحديد الكل -->
                <button type="button"  class="btn btn-success btn-xs select_location_id"><i class="fa fa-check" id="select_location_id" style="font-size: 10px;"></i></button>
                <!-- زرار إلغاء التحديد -->
                <button type="button"  class="btn btn-danger btn-xs deselect_location_id"><i class="fa fa-times" id="deselect_location_id" style="font-size: 10px;"></i></button>
                
                <div class="form-group">
                    {!! Form::select('location_id[]', $business_locations, null, ['class' => 'form-control select2', 'id' => 'location_id', 'multiple' => 'multiple', 'style' => 'width:100%']) !!}
                </div>
            </div>
        </div>
	@endcomponent

    @component('components.widget', ['title' => __('tracker::lang.Tracker Map'), 'icon' => '<i class="ion ion-clipboard"></i>', 'class' => 'box-solid'])
        <div id="map" style="width: 100%; height: 500px;"></div>
    @endcomponent
</section>
@stop
@section('javascript')
    <script src="{{ asset('modules/locations/js/app.js?v=' . time()) }}"></script>

    <script>
        $(document).ready(function () {
            // تفعيل select2
            $('#location_id').select2();

            // تحديد الكل
            $('.select_location_id').click(function () {
                let allOptions = $('#location_id option').map(function () {
                    return $(this).val();
                }).get();

                $('#location_id').val(allOptions).trigger('change');
            });

            // إلغاء التحديد
            $('.deselect_location_id').click(function () {
                $('#location_id').val(null).trigger('change');
            });
        });
    </script>

    <script>
        $('#trip_route, #state_id, #city_id, #location_id').on('change', function () {
            const routeId = $('#trip_route').val();
            const stateId = $('#state_id').val();
            const cityId = $('#city_id').val();
            const locationId = $('#location_id').val();
            const date = $('#date_day').val();

            if (routeId || stateId || cityId || locationId || date) {
                fetchRouteCustomers(routeId, stateId, cityId, locationId, date);
            } else {
                drawAllCustomers();
            }
        });

        function fetchRouteCustomers(routeId, stateId, cityId, locationId, date_day) {
            $.ajax({
                url: '{{ route("tracker.routeCustomers") }}', // Route جديد نعمله في Laravel
                method: 'GET',
                data: { 
                    route_id: routeId, 
                    state_id: stateId,
                    city_id: cityId,
                    location_id: locationId,
                    date: date_day,
                },
                success: function (customers) {
                    if (customers.length <= 0) {
                        drawAllCustomers();
                    }else{
                        drawAllCustomers();
                        drawRouteCustomers(customers);
                    }

                },
                error: function () {
                    console.error('فشل تحميل العملاء المرتبطين بالرحلة');
                }
            });
        }

        function drawRouteCustomers(customers) {
            const bounds = new google.maps.LatLngBounds();

            customers.forEach(c => {
                const lat = parseFloat(c.latitude);
                const lng = parseFloat(c.longitude);

                if (!isNaN(lat) && !isNaN(lng)) {
                    const position = new google.maps.LatLng(lat, lng);

                    // 🔹 تحقق لو في marker قديم في نفس الإحداثيات
                    const existingIndex = customerMarkers.findIndex(m => {
                        const pos = m.getPosition();
                        return (
                            Math.abs(pos.lat() - lat) < 0.000001 &&
                            Math.abs(pos.lng() - lng) < 0.000001
                        );
                    });

                    // 🔹 لو فيه marker مطابق، احذفه من الخريطة والمصفوفة
                    if (existingIndex !== -1) {
                        customerMarkers[existingIndex].setMap(null);
                        customerMarkers.splice(existingIndex, 1);
                    }

                    // 🔹 أضف marker جديد
                    const marker = new google.maps.Marker({
                        position,
                        map,
                        title: c.first_name,
                        icon: {
                            url: '{{ asset('map/map2.png') }}',
                            scaledSize: new google.maps.Size(40, 40)
                        }
                    });

                    customerMarkers.push(marker);
                    bounds.extend(position);
                }
            });

            if (!bounds.isEmpty()) {
                map.fitBounds(bounds);
            }
        }
    </script>

    <script>
        $('#date_day').datetimepicker({
            format: moment_date_format + ' ' + moment_time_format,
            ignoreReadonly: true,
        });
    </script>

    <script>
        let map;
        let customerMarkers = [];
        let routeMarkers = [];
        let routePolyline;

        // Init map
        function initAutocomplete() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 24.730691, lng: 46.6528521 },
                zoom: 6,
                mapTypeId: 'roadmap'
            });

            drawAllCustomers(); // ارسم كل العملاء مبدأيًا

            fetchRepRoute();
        }
        
        // Function to update map on customer change
        function updateMap() {
            clearMap();

            const select = document.getElementById('tripSelect');
            const option = select.options[select.selectedIndex];
            const lat = parseFloat(option.dataset.latitude);
            const lng = parseFloat(option.dataset.longitude);

            if (!isNaN(lat) && !isNaN(lng)) {
                const position = new google.maps.LatLng(lat, lng);
                map.setZoom(20);
                map.panTo(position);

                const marker = new google.maps.Marker({
                    position,
                    map,
                    title: option.textContent,
                    icon: {
                        url: '{{ asset('map/map.png') }}',
                        scaledSize: new google.maps.Size(40, 40)
                    }
                });

                customerMarkers.push(marker);
            } else {
                drawAllCustomers();
            }
        }

        // =================== CUSTOMER MAP =====================
        function drawAllCustomers() {
            clearMap(); // امسح كل شيء قبل الرسم

            const select = document.getElementById('tripSelect');
            const bounds = new google.maps.LatLngBounds();

            for (let i = 0; i < select.options.length; i++) {
                const option = select.options[i];
                const lat = parseFloat(option.dataset.latitude);
                const lng = parseFloat(option.dataset.longitude);
                const name = option.textContent;

                if (!isNaN(lat) && !isNaN(lng)) {
                    const position = new google.maps.LatLng(lat, lng);
                    bounds.extend(position);

                    const marker = new google.maps.Marker({
                        position,
                        map,
                        title: name,
                        icon: {
                            url: '{{ asset('map/map.png') }}',
                            scaledSize: new google.maps.Size(40, 40)
                        }
                    });

                    customerMarkers.push(marker);
                }
            }

            if (!bounds.isEmpty()) {
                map.fitBounds(bounds);
            }
        }

        // Clear map markers and polylines
        function clearMap() {
            customerMarkers.forEach(marker => marker.setMap(null));
            routeMarkers.forEach(marker => marker.setMap(null));
            if (routePolyline) {
                routePolyline.setMap(null);
            }

            customerMarkers = [];
            routeMarkers = [];
            routePolyline = null;
        }

        $('#date_day').on('dp.change', function (e) {
            const routeId = $('#trip_route').val();
            const stateId = $('#state_id').val();
            const cityId = $('#city_id').val();
            const locationId = $('#location_id').val();
            const date = $('#date_day').val();
            
            if (routeId || stateId || cityId || locationId || date) {
                fetchRouteCustomers(routeId, stateId, cityId, locationId, date);
            }

            fetchRepRoute();
        });

        function fetchRepRoute() {
            const repId = document.getElementById('traching').value;
            const date = document.getElementById('date_day').value;

            if (!repId || !date) {
                drawAllCustomers(); // لو مش محدد المندوب أو التاريخ، نرسم العملاء فقط
                return;
            }

            // طلب AJAX للحصول على المسار
            $.ajax({
                url: '{{ route("tracker.positions") }}', // تأكد إنك عامل Route دا
                method: 'POST',
                data: {
                    user_id: repId,
                    date_day: date
                },
                success: function (result) {
                    drawRepRoute(result);
                },
                error: function (err) {
                    console.error("Error fetching rep route");
                }
            });
        }

        // رسم خط السير
        function drawRepRoute(positions) {
            // مسح التتبع فقط (مش العملاء)
            routeMarkers.forEach(marker => marker.setMap(null));
            if (routePolyline) routePolyline.setMap(null);
            routeMarkers = [];

            const path = [];
            
            positions.forEach((pos, index) => {
                const latLng = new google.maps.LatLng(pos.latitude, pos.longitude);
                path.push(latLng);

                const marker = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    title: `${pos.date_at}`,
                    label: {
                        text: (index + 1).toString(), // رقم الترتيب
                        color: "#ffff",
                        fontSize: "10px",
                        fontWeight: "bold"
                    },
                    icon: {
                        path: google.maps.SymbolPath.CIRCLE,
                        fillColor: "#2dce89",
                        fillOpacity: 1,
                        strokeColor: "#3A86FF",
                        strokeWeight: 2,
                        scale: 10 // حجم الدائرة
                    }
                });

                routeMarkers.push(marker);
            });

            if (path.length > 0) {
                routePolyline = new google.maps.Polyline({
                    path: path,
                    geodesic: true,
                    strokeColor: '#2196f3',
                    strokeOpacity: 1.0,
                    strokeWeight: 4
                });
                routePolyline.setMap(map);
                map.fitBounds(new google.maps.LatLngBounds(...path));
            }
        }

    </script>

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDr423M1AYPV2kqWYrYeOckUL3APmmKKTA&libraries=geometry&callback=initAutocomplete">
    </script>
@endsection