@extends('admin.layouts.master')
@section('page-title', 'الرئيسية')

@section('content')
    <div class="container-fluid px-1">

        <div id="map" style="width: 100%; height: 77vh"></div>

        <!-- كاردات الإحصائيات -->
        <div class="row mt-4">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <h6 class="card-title">عدد الطلبات اليوم</h6>
                        <h3 id="todayOrders">0</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <h6 class="card-title">تكلفة الطلبات اليوم</h6>
                        <h3 id="todayRevenue">0 ل.س</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <h6 class="card-title">عدد الطلبات هذا الشهر</h6>
                        <h3 id="monthOrders">0</h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <h6 class="card-title">تكلفة الطلبات هذا الشهر</h6>
                        <h3 id="monthRevenue">0 ل.س</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <h6 class="card-title">عدد الطلبات الكلي</h6>
                        <h3 id="totalOrders">0</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <h6 class="card-title">تكلفة الطلبات الكلية</h6>
                        <h3 id="totalRevenue">0 ل.س</h3>
                    </div>
                </div>
            </div>
        </div>

        <!-- شارت الطلبات -->
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">عدد الطلبات - آخر 7 أيام</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="ordersChart" width="400" height="100"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">مجموع تكلفة الطلبات - آخر 7 أيام</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="revenueChart" width="400" height="100"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- جداول السائقين الأكثر نشاطاً -->
        <div class="row mt-4">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">السائقين الأكثر نشاطاً - اليوم</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>اسم السائق</th>
                                        <th>عدد الطلبات</th>
                                    </tr>
                                </thead>
                                <tbody id="topDriversToday">
                                    <tr>
                                        <td colspan="3" class="text-center">جاري التحميل...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">السائقين الأكثر نشاطاً - الأسبوع</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>اسم السائق</th>
                                        <th>عدد الطلبات</th>
                                    </tr>
                                </thead>
                                <tbody id="topDriversWeek">
                                    <tr>
                                        <td colspan="3" class="text-center">جاري التحميل...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">السائقين الأكثر نشاطاً - الشهر</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>اسم السائق</th>
                                        <th>عدد الطلبات</th>
                                    </tr>
                                </thead>
                                <tbody id="topDriversMonth">
                                    <tr>
                                        <td colspan="3" class="text-center">جاري التحميل...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

@endsection

@section('scripts')

    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        let map;
        const markers = {}; // نخزن الماركرات حسب driver_id
        const infoWindows = {}; // نخزن نوافذ المعلومات

        // تهيئة شارت الطلبات
        function initOrdersChart() {
            const ctx = document.getElementById('ordersChart').getContext('2d');
            
            fetch('/api/orders-last-7-days')
                .then(response => response.json())
                .then(data => {
                    const chart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: data.labels,
                            datasets: [{
                                label: 'عدد الطلبات',
                                data: data.values,
                                backgroundColor: '#4CAF50',
                                borderColor: '#4CAF50',
                                borderWidth: 1,
                                borderRadius: 5,
                                borderSkipped: false,
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    display: false
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    ticks: {
                                        stepSize: 1,
                                        font: {
                                            size: 12
                                        }
                                    },
                                    grid: {
                                        color: 'rgba(0,0,0,0.1)'
                                    }
                                },
                                x: {
                                    ticks: {
                                        font: {
                                            size: 12
                                        }
                                    },
                                    grid: {
                                        display: false
                                    }
                                }
                            },
                            elements: {
                                point: {
                                    hoverBackgroundColor: '#4CAF50'
                                }
                            }
                        }
                    });
                })
                .catch(error => {
                    console.error('Error fetching orders data:', error);
                });
        }

        // تهيئة شارت الإيرادات
        function initRevenueChart() {
            const ctx = document.getElementById('revenueChart').getContext('2d');
            
            fetch('/api/revenue-last-7-days')
                .then(response => response.json())
                .then(data => {
                    const chart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: data.labels,
                            datasets: [{
                                label: 'مجموع التكلفة (ل.س)',
                                data: data.values,
                                backgroundColor: '#2196F3',
                                borderColor: '#2196F3',
                                borderWidth: 1,
                                borderRadius: 5,
                                borderSkipped: false,
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    display: false
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    ticks: {
                                        callback: function(value) {
                                            return value.toLocaleString('ar-SY') + ' ل.س';
                                        },
                                        font: {
                                            size: 12
                                        }
                                    },
                                    grid: {
                                        color: 'rgba(0,0,0,0.1)'
                                    }
                                },
                                x: {
                                    ticks: {
                                        font: {
                                            size: 12
                                        }
                                    },
                                    grid: {
                                        display: false
                                    }
                                }
                            },
                            elements: {
                                point: {
                                    hoverBackgroundColor: '#2196F3'
                                }
                            }
                        }
                    });
                })
                .catch(error => {
                    console.error('Error fetching revenue data:', error);
                });
        }

        // تحميل الإحصائيات
        function loadStatistics() {
            fetch('/api/dashboard-statistics')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('todayOrders').textContent = data.today_orders.toLocaleString('en-US');
                    document.getElementById('todayRevenue').textContent = data.today_revenue.toLocaleString('en-US') + ' ل.س';
                    document.getElementById('monthOrders').textContent = data.month_orders.toLocaleString('en-US');
                    document.getElementById('monthRevenue').textContent = data.month_revenue.toLocaleString('en-US') + ' ل.س';
                    document.getElementById('totalOrders').textContent = data.total_orders.toLocaleString('en-US');
                    document.getElementById('totalRevenue').textContent = data.total_revenue.toLocaleString('en-US') + ' ل.س';
                })
                .catch(error => {
                    console.error('Error fetching statistics:', error);
                });
        }

        // تحميل بيانات السائقين الأكثر نشاطاً
        function loadTopDrivers() {
            // تحميل بيانات اليوم
            fetch('/api/top-drivers-today')
                .then(response => response.json())
                .then(data => {
                    const tbody = document.getElementById('topDriversToday');
                    tbody.innerHTML = '';
                    
                    if (data.length === 0) {
                        tbody.innerHTML = '<tr><td colspan="3" class="text-center">لا توجد بيانات</td></tr>';
                        return;
                    }
                    
                    data.forEach((driver, index) => {
                        const row = `
                            <tr>
                                <td>${index + 1}</td>
                                <td>${driver.driver_name}</td>
                                <td>${driver.orders_count.toLocaleString('en-US')}</td>
                            </tr>
                        `;
                        tbody.innerHTML += row;
                    });
                })
                .catch(error => {
                    console.error('Error fetching today drivers:', error);
                    document.getElementById('topDriversToday').innerHTML = '<tr><td colspan="3" class="text-center text-danger">خطأ في تحميل البيانات</td></tr>';
                });

            // تحميل بيانات الأسبوع
            fetch('/api/top-drivers-week')
                .then(response => response.json())
                .then(data => {
                    const tbody = document.getElementById('topDriversWeek');
                    tbody.innerHTML = '';
                    
                    if (data.length === 0) {
                        tbody.innerHTML = '<tr><td colspan="3" class="text-center">لا توجد بيانات</td></tr>';
                        return;
                    }
                    
                    data.forEach((driver, index) => {
                        const row = `
                            <tr>
                                <td>${index + 1}</td>
                                <td>${driver.driver_name}</td>
                                <td>${driver.orders_count.toLocaleString('en-US')}</td>
                            </tr>
                        `;
                        tbody.innerHTML += row;
                    });
                })
                .catch(error => {
                    console.error('Error fetching week drivers:', error);
                    document.getElementById('topDriversWeek').innerHTML = '<tr><td colspan="3" class="text-center text-danger">خطأ في تحميل البيانات</td></tr>';
                });

            // تحميل بيانات الشهر
            fetch('/api/top-drivers-month')
                .then(response => response.json())
                .then(data => {
                    const tbody = document.getElementById('topDriversMonth');
                    tbody.innerHTML = '';
                    
                    if (data.length === 0) {
                        tbody.innerHTML = '<tr><td colspan="3" class="text-center">لا توجد بيانات</td></tr>';
                        return;
                    }
                    
                    data.forEach((driver, index) => {
                        const row = `
                            <tr>
                                <td>${index + 1}</td>
                                <td>${driver.driver_name}</td>
                                <td>${driver.orders_count.toLocaleString('en-US')}</td>
                            </tr>
                        `;
                        tbody.innerHTML += row;
                    });
                })
                .catch(error => {
                    console.error('Error fetching month drivers:', error);
                    document.getElementById('topDriversMonth').innerHTML = '<tr><td colspan="3" class="text-center text-danger">خطأ في تحميل البيانات</td></tr>';
                });
        }

        function initMap() {
            console.log('Google Maps API loaded successfully');
            console.log('Available Google Maps objects:', Object.keys(google.maps));
            
            const center = { lat: 34.8896, lng: 35.8866 };
            map = new google.maps.Map(document.getElementById("map"), {
                center: center,
                zoom: 13,
                mapId: "1ba42bb26d2ee98eb188ac64", // Map ID مطلوب لـ Advanced Markers
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true,
                streetViewControl: false,
                fullscreenControl: true,
            });
            
            console.log('Map initialized successfully');

            fetchAndUpdateMarkers();
            setInterval(fetchAndUpdateMarkers, 5000);
        }

        function createMarkerElement(driverName, carNumber) {
            const markerElement = document.createElement('div');
            markerElement.className = 'custom-marker';
            markerElement.innerHTML = `
                <div style="
                    background: #4CAF50;
                    color: white;
                    border-radius: 50%;
                    width: 40px;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: bold;
                    font-size: 12px;
                    border: 3px solid white;
                    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
                    cursor: pointer;
                ">
                    🚗
                </div>
            `;
            return markerElement;
        }

        function createInfoWindowContent(driver, lastUpdate) {
            // تنسيق التاريخ بشكل مقروء بالتاريخ الميلادي
            const updateDate = new Date(lastUpdate);
            const formattedDate = updateDate.toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            });

            return `
                <div style="padding: 15px; min-width: 250px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                    <h4 style="margin: 0 0 12px 0; color: #333; font-size: 16px; border-bottom: 2px solid #4CAF50; padding-bottom: 8px;">
                        ${driver.name}
                    </h4>
                    <p style="margin: 8px 0; color: #555; font-size: 14px;">
                        <strong>🚗 نوع السيارة:</strong> ${driver.description || 'غير محدد'}
                    </p>
                    <p style="margin: 8px 0; color: #4CAF50; font-size: 13px;">
                        <strong>🟢 متصل الآن</strong>
                    </p>
                    <p style="margin: 8px 0; color: #888; font-size: 12px; border-top: 1px solid #eee; padding-top: 8px;">
                        <strong>📅 آخر تحديث:</strong><br>
                        ${formattedDate}
                    </p>
                </div>
            `;
        }

        function fetchAndUpdateMarkers() {
            console.log('Fetching driver locations...');
            fetch('/driver-locations-json')
                .then(response => {
                    console.log('Response status:', response.status);
                    console.log('Response headers:', response.headers);
                    if (!response.ok) {
                        throw new Error(`Network response was not ok: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('Received data:', data);
                    console.log('Data type:', typeof data);
                    console.log('Data length:', Array.isArray(data) ? data.length : 'Not an array');
                    
                    // مسح جميع الماركرات القديمة
                    console.log('Clearing all existing markers...');
                    Object.keys(markers).forEach(id => {
                        markers[id].setMap(null);
                        delete markers[id];
                        delete infoWindows[id];
                    });
                    console.log('All markers cleared');
                    
                    const onlineDriverIds = [];

                    data.forEach(driverLoc => {
                        console.log('Processing driver location:', driverLoc);
                        const id = driverLoc.driver_id;
                        onlineDriverIds.push(id);

                        const position = {
                            lat: parseFloat(driverLoc.latitude),
                            lng: parseFloat(driverLoc.longitude),
                        };
                        console.log('Position:', position);
                        console.log('Driver ID:', id);
                        console.log('Driver name:', driverLoc.driver?.name);
                        console.log('Is driver online:', driverLoc.driver?.is_online);

                        console.log('Creating new marker for driver:', driverLoc.driver?.name);
                        // إنشاء ماركر جديد
                        const markerElement = createMarkerElement(
                            driverLoc.driver?.name,
                            driverLoc.driver?.car_number
                        );

                        try {
                            console.log('About to create marker with position:', position);
                            const marker = new google.maps.Marker({
                                position: position,
                                map: map,
                                title: driverLoc.driver?.name || 'بدون اسم',
                            });
                            console.log('Marker created successfully');
                            console.log('Marker object:', marker);

                            // إنشاء نافذة المعلومات
                            const infoWindow = new google.maps.InfoWindow({
                                content: createInfoWindowContent(driverLoc.driver, driverLoc.updated_at),
                            });

                            // إضافة مستمع النقر
                            marker.addListener('click', () => {
                                // إغلاق جميع النوافذ المفتوحة
                                Object.values(infoWindows).forEach(window => {
                                    window.close();
                                });
                                infoWindow.open(map, marker);
                            });

                            markers[id] = marker;
                            infoWindows[id] = infoWindow;
                            console.log('Marker saved to markers object. Current count:', Object.keys(markers).length);
                        } catch (error) {
                            console.error('Error creating marker:', error);
                        }
                    });

                    // لا نحتاج لحذف الماركرات لأننا نمسحها جميعاً في البداية
                    console.log('All markers created successfully');
                    console.log(`Updated ${onlineDriverIds.length} markers`);
                    console.log('Current markers count:', Object.keys(markers).length);
                    console.log('Markers IDs:', Object.keys(markers));
                })
                .catch(error => {
                    console.error('Error fetching driver locations:', error);
                });
        }

        // تهيئة الشارت عند تحميل الصفحة
        document.addEventListener('DOMContentLoaded', function() {
            loadStatistics();
            loadTopDrivers();
            initOrdersChart();
            initRevenueChart();
        });
    </script>

    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCws_Rk-1h7FkrAqHjSS9LZEbkpHV9VQzg&libraries=marker&v=weekly&callback=initMap&loading=async"
        async defer>
    </script>
    




@endsection