@extends('admin.layouts.app')

@section('title', 'إدارة الخريطة')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">لوحة التحكم</a></li>
                        <li class="breadcrumb-item active">إدارة الخريطة</li>
                    </ol>
                </div>
                <h4 class="page-title">إدارة الخريطة</h4>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- إعدادات الخريطة -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h4 class="header-title">إعدادات الخريطة</h4>
                </div>
                <div class="card-body">
                    <form id="mapSettingsForm">
                        @csrf
                        <div class="mb-3">
                            <label for="mapbox_access_token" class="form-label">Mapbox Access Token</label>
                            <input type="text" class="form-control" id="mapbox_access_token" name="mapbox_access_token" 
                                   value="{{ $mapSettings->mapbox_access_token ?? '' }}" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="default_map_style" class="form-label">نمط الخريطة الافتراضي</label>
                            <select class="form-select" id="default_map_style" name="default_map_style" required>
                                <option value="streets-v12" {{ ($mapSettings->default_map_style ?? '') == 'streets-v12' ? 'selected' : '' }}>الطرق</option>
                                <option value="satellite-v9" {{ ($mapSettings->default_map_style ?? '') == 'satellite-v9' ? 'selected' : '' }}>الأقمار الصناعية</option>
                                <option value="outdoors-v12" {{ ($mapSettings->default_map_style ?? '') == 'outdoors-v12' ? 'selected' : '' }}>الخارجية</option>
                                <option value="light-v11" {{ ($mapSettings->default_map_style ?? '') == 'light-v11' ? 'selected' : '' }}>الفاتحة</option>
                                <option value="dark-v11" {{ ($mapSettings->default_map_style ?? '') == 'dark-v11' ? 'selected' : '' }}>المظلمة</option>
                            </select>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="default_lat" class="form-label">خط العرض</label>
                                    <input type="number" step="0.00000001" class="form-control" id="default_lat" name="default_lat" 
                                           value="{{ $mapSettings->default_lat ?? 31.9539 }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="default_lng" class="form-label">خط الطول</label>
                                    <input type="number" step="0.00000001" class="form-control" id="default_lng" name="default_lng" 
                                           value="{{ $mapSettings->default_lng ?? 46.2575 }}" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="default_zoom" class="form-label">التكبير الافتراضي</label>
                                    <input type="number" class="form-control" id="default_zoom" name="default_zoom" 
                                           value="{{ $mapSettings->default_zoom ?? 12 }}" min="8" max="18" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="min_zoom" class="form-label">أدنى تكبير</label>
                                    <input type="number" class="form-control" id="min_zoom" name="min_zoom" 
                                           value="{{ $mapSettings->min_zoom ?? 8 }}" min="5" max="15" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="max_zoom" class="form-label">أقصى تكبير</label>
                                    <input type="number" class="form-control" id="max_zoom" name="max_zoom" 
                                           value="{{ $mapSettings->max_zoom ?? 18 }}" min="10" max="20" required>
                                </div>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary">حفظ الإعدادات</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- منطقة العمل -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="header-title">منطقة العمل</h4>
                </div>
                <div class="card-body">
                    <form id="workingAreaForm">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="city_name" class="form-label">اسم المدينة (إنجليزي)</label>
                                    <input type="text" class="form-control" id="city_name" name="city_name" 
                                           value="{{ $workingArea->city_name ?? '' }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="city_name_ar" class="form-label">اسم المدينة (عربي)</label>
                                    <input type="text" class="form-control" id="city_name_ar" name="city_name_ar" 
                                           value="{{ $workingArea->city_name_ar ?? '' }}" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="center_lat" class="form-label">خط العرض للمركز</label>
                                    <input type="number" step="0.00000001" class="form-control" id="center_lat" name="center_lat" 
                                           value="{{ $workingArea->center_lat ?? 31.9539 }}" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="center_lng" class="form-label">خط الطول للمركز</label>
                                    <input type="number" step="0.00000001" class="form-control" id="center_lng" name="center_lng" 
                                           value="{{ $workingArea->center_lng ?? 46.2575 }}" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="zoom_level" class="form-label">مستوى التكبير</label>
                                    <input type="number" class="form-control" id="zoom_level" name="zoom_level" 
                                           value="{{ $workingArea->zoom_level ?? 12 }}" min="8" max="18" required>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">وصف المنطقة</label>
                            <textarea class="form-control" id="description" name="description" rows="3">{{ $workingArea->description ?? '' }}</textarea>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">حدود المنطقة</label>
                            <div id="map" style="height: 400px; width: 100%; border: 1px solid #ddd; border-radius: 8px;"></div>
                            <div class="mt-2">
                                <button type="button" class="btn btn-sm btn-outline-primary" onclick="clearBoundaries()">
                                    <i class="fas fa-eraser"></i> مسح الحدود
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-success" onclick="addSampleBoundaries()">
                                    <i class="fas fa-plus"></i> إضافة حدود تجريبية
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-info" onclick="testMap()">
                                    <i class="fas fa-bug"></i> اختبار الخريطة
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-warning" onclick="reloadMap()">
                                    <i class="fas fa-redo"></i> إعادة تحميل الخريطة
                                </button>
                            </div>
                            <small class="form-text text-muted">اضغط على الخريطة لرسم حدود المنطقة، أو استخدم الأزرار أعلاه</small>
                        </div>

                        <button type="submit" class="btn btn-success">حفظ منطقة العمل</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- نقاط الخدمات -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="header-title">نقاط الخدمات</h4>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addServicePointModal">
                        إضافة نقطة خدمة
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-centered table-striped dt-responsive nowrap w-100">
                            <thead>
                                <tr>
                                    <th>الاسم</th>
                                    <th>النوع</th>
                                    <th>الإحداثيات</th>
                                    <th>نصف قطر الخدمة</th>
                                    <th>العنوان</th>
                                    <th>الحالة</th>
                                    <th>الإجراءات</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($servicePoints as $point)
                                <tr>
                                    <td>
                                        <div>
                                            <strong>{{ $point->name }}</strong>
                                            <br>
                                            <small class="text-muted">{{ $point->name_ar }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        @switch($point->type)
                                            @case('taxi')
                                                <span class="badge bg-primary">تاكسي</span>
                                                @break
                                            @case('restaurant')
                                                <span class="badge bg-success">مطعم</span>
                                                @break
                                            @case('gas')
                                                <span class="badge bg-warning">غاز</span>
                                                @break
                                        @endswitch
                                    </td>
                                    <td>
                                        <small>
                                            {{ $point->lat }}, {{ $point->lng }}
                                        </small>
                                    </td>
                                    <td>{{ $point->service_radius }} متر</td>
                                    <td>{{ $point->address ?? '-' }}</td>
                                    <td>
                                        @if($point->is_active)
                                            <span class="badge bg-success">نشط</span>
                                        @else
                                            <span class="badge bg-danger">غير نشط</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-outline-primary" 
                                                onclick="editServicePoint({{ $point->id }})">
                                            <i class="mdi mdi-pencil"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger" 
                                                onclick="deleteServicePoint({{ $point->id }})">
                                            <i class="mdi mdi-delete"></i>
                                        </button>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal إضافة نقطة خدمة -->
<div class="modal fade" id="addServicePointModal" tabindex="-1" aria-labelledby="addServicePointModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addServicePointModalLabel">إضافة نقطة خدمة جديدة</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addServicePointForm">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="service_name" class="form-label">الاسم (إنجليزي)</label>
                                <input type="text" class="form-control" id="service_name" name="name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="service_name_ar" class="form-label">الاسم (عربي)</label>
                                <input type="text" class="form-control" id="service_name_ar" name="name_ar" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="service_type" class="form-label">نوع الخدمة</label>
                                <select class="form-select" id="service_type" name="type" required>
                                    <option value="">اختر النوع</option>
                                    <option value="taxi">تاكسي</option>
                                    <option value="restaurant">مطعم</option>
                                    <option value="gas">غاز</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="service_radius" class="form-label">نصف قطر الخدمة (متر)</label>
                                <input type="number" class="form-control" id="service_radius" name="service_radius" 
                                       value="5000" min="100" max="50000" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="service_lat" class="form-label">خط العرض</label>
                                <input type="number" step="0.00000001" class="form-control" id="service_lat" name="lat" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="service_lng" class="form-label">خط الطول</label>
                                <input type="number" step="0.00000001" class="form-control" id="service_lng" name="lng" required>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="service_address" class="form-label">العنوان</label>
                        <textarea class="form-control" id="service_address" name="address" rows="2"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="service_description" class="form-label">الوصف</label>
                        <textarea class="form-control" id="service_description" name="description" rows="2"></textarea>
                    </div>

                    <input type="hidden" name="working_area_id" value="{{ $workingArea->id ?? 1 }}">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                <button type="submit" form="addServicePointForm" class="btn btn-primary">إضافة</button>
            </div>
        </div>
    </div>
</div>
@endsection
@push('styles')
<link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet" />
@endpush

@push('scripts')
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>

<script>
let map;
let boundaries = [];

// تهيئة الخريطة
function initMap() {
    try {
        console.log('=== INITIALIZING MAP ===');
        
        // التحقق من وجود Mapbox
        if (typeof mapboxgl === 'undefined') {
            console.error('Mapbox not loaded!');
            document.getElementById('map').innerHTML = '<div class="alert alert-danger">خطأ في تحميل Mapbox</div>';
            return;
        }
        
        const mapSettings = @json($mapSettings ?? null);
        const workingArea = @json($workingArea ?? null);
        
        console.log('Map Settings:', mapSettings);
        console.log('Working Area:', workingArea);
        
        // استخدام القيم الافتراضية إذا لم تكن البيانات موجودة
        const accessToken = mapSettings?.mapbox_access_token || 'pk.eyJ1IjoiZmlyYXNhbGdhenplbiIsImEiOiJjbWVvNHVkMXkwMnNkMmlwY2loczNvM3N6In0.P-gQTCBm6QtHvzLdvOJVVA';
        const mapStyle = mapSettings?.default_map_style || 'streets-v12';
        const centerLng = workingArea?.center_lng || 46.2575;
        const centerLat = workingArea?.center_lat || 31.9539;
        const zoomLevel = workingArea?.zoom_level || 12;
        
        console.log('Using Access Token:', accessToken);
        console.log('Using Map Style:', mapStyle);
        console.log('Using Center:', [centerLng, centerLat]);
        console.log('Using Zoom:', zoomLevel);
        
        // التحقق من وجود container
        const mapContainer = document.getElementById('map');
        if (!mapContainer) {
            console.error('Map container not found!');
            return;
        }
        
        // مسح المحتوى السابق
        mapContainer.innerHTML = '';
        
        mapboxgl.accessToken = accessToken;
        
        map = new mapboxgl.Map({
            container: 'map',
            style: `mapbox://styles/mapbox/${mapStyle}`,
            center: [centerLng, centerLat],
            zoom: zoomLevel,
            attributionControl: false,
            preserveDrawingBuffer: true
        });
        
        console.log('Map object created:', map);
        
        // إضافة أدوات التحكم
        try {
            map.addControl(new mapboxgl.NavigationControl());
            map.addControl(new mapboxgl.FullscreenControl());
            console.log('Map controls added');
        } catch (error) {
            console.error('Error adding controls:', error);
        }

        // رسم الحدود الموجودة
        if (workingArea && workingArea.boundaries) {
            boundaries = workingArea.boundaries;
            drawBoundaries();
        }

        // إضافة نقطة عند النقر
        map.on('click', function(e) {
            console.log('Map clicked at:', e.lngLat);
            addBoundaryPoint(e.lngLat.lng, e.lngLat.lat);
        });

        // تحميل الخريطة
        map.on('load', function() {
            console.log('Map loaded successfully');
            
            // رسم الحدود الموجودة
            if (workingArea && workingArea.boundaries) {
                boundaries = workingArea.boundaries;
                drawBoundaries();
            }
        });
        
        // معالجة الأخطاء
        map.on('error', function(e) {
            console.error('Map error:', e);
        });
        
        console.log('Map initialization completed');
    } catch (error) {
        console.error('Error initializing map:', error);
        document.getElementById('map').innerHTML = '<div class="alert alert-danger">خطأ في تهيئة الخريطة: ' + error.message + '</div>';
    }

// إضافة نقطة حدود
function addBoundaryPoint(lng, lat) {
    try {
        if (!map) {
            console.error('Map not initialized');
            return;
        }
        
        boundaries.push({ lng: lng, lat: lat });
        console.log('Added boundary point:', { lng, lat });
        console.log('Total boundary points:', boundaries.length);
        drawBoundaries();
    } catch (error) {
        console.error('Error adding boundary point:', error);
    }
}

// رسم الحدود
function drawBoundaries() {
    try {
        if (!map) {
            console.error('Map not initialized');
            return;
        }
        
        if (boundaries.length < 3) {
            console.log('Not enough boundary points:', boundaries.length);
            return;
        }

        console.log('Drawing boundaries:', boundaries);

        // إزالة الطبقة القديمة
        if (map.getSource('boundaries')) {
            try {
                map.removeLayer('boundaries-fill');
                map.removeLayer('boundaries-line');
                map.removeSource('boundaries');
            } catch (e) {
                console.log('Layers already removed');
            }
        }

    // إضافة المصدر
    map.addSource('boundaries', {
        'type': 'geojson',
        'data': {
            'type': 'Feature',
            'properties': {},
            'geometry': {
                'type': 'Polygon',
                'coordinates': [boundaries.map(p => [p.lng, p.lat])]
            }
        }
    });

    // إضافة طبقة التعبئة
    map.addLayer({
        'id': 'boundaries-fill',
        'type': 'fill',
        'source': 'boundaries',
        'paint': {
            'fill-color': '#007cbf',
            'fill-opacity': 0.1
        }
    });

    // إضافة طبقة الخط
    map.addLayer({
        'id': 'boundaries-line',
        'type': 'line',
        'source': 'boundaries',
        'paint': {
            'line-color': '#007cbf',
            'line-width': 2
        }
    });
    
    console.log('Boundaries drawn successfully');
    } catch (error) {
        console.error('Error drawing boundaries:', error);
    }
}

// حفظ منطقة العمل
document.getElementById('workingAreaForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    formData.append('boundaries', JSON.stringify(boundaries));

    fetch('{{ route("admin.maps.working-area.store") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            Swal.fire({
                icon: 'success',
                title: 'نجح!',
                text: data.message
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'خطأ!',
                text: data.message
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        Swal.fire({
            icon: 'error',
            title: 'خطأ!',
            text: 'حدث خطأ أثناء حفظ منطقة العمل'
        });
    });
});

// حفظ إعدادات الخريطة
document.getElementById('mapSettingsForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);

    fetch('{{ route("admin.maps.settings.store") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            Swal.fire({
                icon: 'success',
                title: 'نجح!',
                text: data.message
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'خطأ!',
                text: data.message
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        Swal.fire({
            icon: 'error',
            title: 'خطأ!',
            text: 'حدث خطأ أثناء حفظ إعدادات الخريطة'
        });
    });
});

// إضافة نقطة خدمة
document.getElementById('addServicePointForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);

    fetch('{{ route("admin.maps.service-points.store") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            Swal.fire({
                icon: 'success',
                title: 'نجح!',
                text: data.message
            });
            location.reload();
        } else {
            Swal.fire({
                icon: 'error',
                title: 'خطأ!',
                text: data.message
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        Swal.fire({
            icon: 'error',
            title: 'خطأ!',
            text: 'حدث خطأ أثناء إضافة نقطة الخدمة'
        });
    });
});

// مسح الحدود
function clearBoundaries() {
    try {
        boundaries = [];
        if (map && map.getSource('boundaries')) {
            try {
                map.removeLayer('boundaries-fill');
                map.removeLayer('boundaries-line');
                map.removeSource('boundaries');
            } catch (e) {
                console.log('Layers already removed');
            }
        }
        console.log('Boundaries cleared');
    } catch (error) {
        console.error('Error clearing boundaries:', error);
    }
}

// إضافة حدود تجريبية
function addSampleBoundaries() {
    try {
        if (!map) {
            console.error('Map not initialized');
            return;
        }
        
        const centerLng = 46.2575;
        const centerLat = 31.9539;
        const offset = 0.05; // حوالي 5 كم
        
        boundaries = [
            { lng: centerLng - offset, lat: centerLat - offset },
            { lng: centerLng + offset, lat: centerLat - offset },
            { lng: centerLng + offset, lat: centerLat + offset },
            { lng: centerLng - offset, lat: centerLat + offset },
            { lng: centerLng - offset, lat: centerLat - offset }
        ];
        
        drawBoundaries();
        console.log('Sample boundaries added:', boundaries);
    } catch (error) {
        console.error('Error adding sample boundaries:', error);
    }
}

// اختبار الخريطة
function testMap() {
    try {
        console.log('=== MAP TEST ===');
        console.log('Map object:', map);
        console.log('Map container:', document.getElementById('map'));
        console.log('Boundaries:', boundaries);
        console.log('Mapbox loaded:', typeof mapboxgl !== 'undefined');
        
        if (map) {
            console.log('Map center:', map.getCenter());
            console.log('Map zoom:', map.getZoom());
            console.log('Map style:', map.getStyle());
        }
        
                // اختبار إضافة نقطة تجريبية
        if (map) {
            console.log('Testing map click simulation...');
            const center = map.getCenter();
            addBoundaryPoint(center.lng, center.lat);
        }
    } catch (error) {
        console.error('Error in map test:', error);
    }
}

// إعادة تحميل الخريطة
function reloadMap() {
    try {
        console.log('Reloading map...');
        
        // إزالة الخريطة القديمة
        if (map) {
            map.remove();
            map = null;
        }
        
        // مسح الحدود
        boundaries = [];
        
        // إعادة تهيئة الخريطة
        setTimeout(() => {
            initMap();
        }, 500);
        
    } catch (error) {
        console.error('Error reloading map:', error);
    }
}

// تعديل نقطة خدمة
function editServicePoint(id) {
    try {
        console.log('Editing service point:', id);
        // هنا يمكنك إضافة كود تعديل نقطة الخدمة
        alert('تعديل نقطة الخدمة رقم: ' + id);
    } catch (error) {
        console.error('Error editing service point:', error);
    }
}

// حذف نقطة خدمة
function deleteServicePoint(id) {
    try {
        console.log('Deleting service point:', id);
        if (confirm('هل أنت متأكد من حذف نقطة الخدمة؟')) {
            // هنا يمكنك إضافة كود حذف نقطة الخدمة
            alert('تم حذف نقطة الخدمة رقم: ' + id);
        }
    } catch (error) {
        console.error('Error deleting service point:', error);
    }
}

// تهيئة الخريطة عند تحميل الصفحة
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, initializing map...');
    
    // التحقق من تحميل Mapbox
    if (typeof mapboxgl === 'undefined') {
        console.error('Mapbox not loaded!');
        document.getElementById('map').innerHTML = '<div class="alert alert-warning">جاري تحميل الخريطة...</div>';
        
        setTimeout(() => {
            if (typeof mapboxgl !== 'undefined') {
                console.log('Mapbox loaded, initializing map...');
                document.getElementById('map').innerHTML = '';
                initMap();
            } else {
                console.error('Mapbox still not loaded after timeout');
                document.getElementById('map').innerHTML = '<div class="alert alert-danger">فشل في تحميل الخريطة. يرجى تحديث الصفحة.</div>';
            }
        }, 3000);
    } else {
        console.log('Mapbox already loaded, initializing map...');
        initMap();
    }
});
</script>
@endpush
