

<?php $__env->startSection('title', 'إدارة الخريطة'); ?>

<?php $__env->startSection('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="<?php echo e(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">
                        <?php echo csrf_field(); ?>
                        <div class="mb-3">
                            <label for="google_maps_api_key" class="form-label">Google Maps API Key</label>
                            <input type="text" class="form-control" id="google_maps_api_key" name="google_maps_api_key" 
                                   value="<?php echo e($mapSettings->google_maps_api_key ?? $mapSettings->mapbox_access_token ?? ''); ?>" required>
                            <small class="form-text text-muted">احصل على API Key من <a href="https://console.cloud.google.com/google/maps-apis" target="_blank">Google Cloud Console</a></small>
                        </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>
                                <?php
                                    $currentStyle = $mapSettings->default_map_style ?? 'roadmap';
                                    // تحويل الأنماط القديمة من Mapbox إلى Google Maps
                                    if (in_array($currentStyle, ['streets-v12', 'light-v11', 'dark-v11'])) {
                                        $currentStyle = 'roadmap';
                                    } elseif ($currentStyle == 'satellite-v9') {
                                        $currentStyle = 'satellite';
                                    } elseif ($currentStyle == 'outdoors-v12') {
                                        $currentStyle = 'terrain';
                                    }
                                ?>
                                <option value="roadmap" <?php echo e($currentStyle == 'roadmap' ? 'selected' : ''); ?>>الطرق (Roadmap)</option>
                                <option value="satellite" <?php echo e($currentStyle == 'satellite' ? 'selected' : ''); ?>>الأقمار الصناعية (Satellite)</option>
                                <option value="hybrid" <?php echo e($currentStyle == 'hybrid' ? 'selected' : ''); ?>>هجين (Hybrid)</option>
                                <option value="terrain" <?php echo e($currentStyle == 'terrain' ? 'selected' : ''); ?>>الطبوغرافي (Terrain)</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="<?php echo e($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="<?php echo e($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="<?php echo e($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="<?php echo e($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="<?php echo e($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">
                        <?php echo csrf_field(); ?>
                        <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="<?php echo e($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="<?php echo e($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="<?php echo e($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="<?php echo e($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="<?php echo e($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"><?php echo e($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>
                                <?php $__currentLoopData = $servicePoints; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $point): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <tr>
                                    <td>
                                        <div>
                                            <strong><?php echo e($point->name); ?></strong>
                                            <br>
                                            <small class="text-muted"><?php echo e($point->name_ar); ?></small>
                                        </div>
                                    </td>
                                    <td>
                                        <?php switch($point->type):
                                            case ('taxi'): ?>
                                                <span class="badge bg-primary">تاكسي</span>
                                                <?php break; ?>
                                            <?php case ('restaurant'): ?>
                                                <span class="badge bg-success">مطعم</span>
                                                <?php break; ?>
                                            <?php case ('gas'): ?>
                                                <span class="badge bg-warning">غاز</span>
                                                <?php break; ?>
                                        <?php endswitch; ?>
                                    </td>
                                    <td>
                                        <small>
                                            <?php echo e($point->lat); ?>, <?php echo e($point->lng); ?>

                                        </small>
                                    </td>
                                    <td><?php echo e($point->service_radius); ?> متر</td>
                                    <td><?php echo e($point->address ?? '-'); ?></td>
                                    <td>
                                        <?php if($point->is_active): ?>
                                            <span class="badge bg-success">نشط</span>
                                        <?php else: ?>
                                            <span class="badge bg-danger">غير نشط</span>
                                        <?php endif; ?>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-outline-primary" 
                                                onclick="editServicePoint(<?php echo e($point->id); ?>)">
                                            <i class="mdi mdi-pencil"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger" 
                                                onclick="deleteServicePoint(<?php echo e($point->id); ?>)">
                                            <i class="mdi mdi-delete"></i>
                                        </button>
                                    </td>
                                </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </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">
                    <?php echo csrf_field(); ?>
                    <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="<?php echo e($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>

<?php $__env->startPush('styles'); ?>
<style>
    /* إصلاح layout صفحة الخريطة */
    .main-content .container-fluid {
        padding: 0 15px;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
    
    .main-content .container-fluid .row {
        margin-left: -15px;
        margin-right: -15px;
        display: flex;
        flex-wrap: wrap;
    }
    
    .main-content .container-fluid .row > [class*="col-"] {
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
        width: 100%;
    }
    
    /* إصلاح عرض الأعمدة */
    @media (min-width: 992px) {
        .main-content .container-fluid .row > .col-lg-4 {
            flex: 0 0 33.333333%;
            max-width: 33.333333%;
        }
        .main-content .container-fluid .row > .col-lg-8 {
            flex: 0 0 66.666667%;
            max-width: 66.666667%;
        }
    }
    
    @media (min-width: 768px) and (max-width: 991px) {
        .main-content .container-fluid .row > .col-lg-4,
        .main-content .container-fluid .row > .col-lg-8 {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
    
    #map {
        height: 400px !important;
        width: 100% !important;
        min-height: 400px !important;
        border: 1px solid #ddd;
        border-radius: 8px;
        background-color: #f0f0f0;
        position: relative;
        display: block;
    }
    
    #map > div {
        width: 100% !important;
        height: 100% !important;
    }
    
    #map.loading {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
    }
    
    .map-container {
        position: relative;
        width: 100%;
    }
    
    .page-title-box {
        margin-bottom: 20px;
    }
    
    .card {
        margin-bottom: 20px;
        height: auto;
        display: flex;
        flex-direction: column;
    }
    
    .card-body {
        flex: 1 1 auto;
    }
    
    /* إصلاح عرض الجدول */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('scripts'); ?>
<?php
    $apiKey = $mapSettings->google_maps_api_key ?? $mapSettings->mapbox_access_token ?? 'YOUR_API_KEY';
?>
<script>
let map;
let boundaries = [];
let boundaryPolygon = null;
let boundaryMarkers = [];
let mapInitialized = false;

// تهيئة الخريطة - يجب أن تكون global function
window.initMap = function() {
    try {
        console.log('=== INITIALIZING GOOGLE MAPS ===');
        
        // التحقق من وجود Google Maps
        if (typeof google === 'undefined' || typeof google.maps === 'undefined') {
            console.error('Google Maps not loaded!');
            document.getElementById('map').innerHTML = '<div class="alert alert-danger">خطأ في تحميل Google Maps. تأكد من إدخال API Key صحيح.</div>';
            return;
        }
        
        const mapSettings = <?php echo json_encode($mapSettings ?? null, 15, 512) ?>;
        const workingArea = <?php echo json_encode($workingArea ?? null, 15, 512) ?>;
        
        console.log('Map Settings:', mapSettings);
        console.log('Working Area:', workingArea);
        
        // استخدام القيم الافتراضية إذا لم تكن البيانات موجودة
        const mapStyle = mapSettings?.default_map_style || 'roadmap';
        const centerLng = workingArea?.center_lng || 46.2575;
        const centerLat = workingArea?.center_lat || 31.9539;
        const zoomLevel = workingArea?.zoom_level || 12;
        
        console.log('Using Map Style:', mapStyle);
        console.log('Using Center:', [centerLat, centerLng]);
        console.log('Using Zoom:', zoomLevel);
        
        // التحقق من وجود container
        const mapContainer = document.getElementById('map');
        if (!mapContainer) {
            console.error('Map container not found!');
            return;
        }
        
        // مسح أي محتوى موجود في container
        mapContainer.innerHTML = '';
        
        // التحقق من أن container له أبعاد
        if (mapContainer.offsetWidth === 0 || mapContainer.offsetHeight === 0) {
            console.warn('Map container has no dimensions, waiting...');
            setTimeout(() => {
                if (mapContainer.offsetWidth > 0 && mapContainer.offsetHeight > 0) {
                    initMap();
                } else {
                    mapContainer.innerHTML = '<div class="alert alert-warning p-3">الخريطة غير مرئية. يرجى التحقق من CSS.</div>';
                }
            }, 500);
            return;
        }
        
        console.log('Map container dimensions:', mapContainer.offsetWidth, 'x', mapContainer.offsetHeight);
        
        // تهيئة Google Maps
        map = new google.maps.Map(mapContainer, {
            center: { lat: centerLat, lng: centerLng },
            zoom: zoomLevel,
            mapTypeId: mapStyle,
            language: 'ar',
            region: 'IQ',
            fullscreenControl: true,
            mapTypeControl: true,
            streetViewControl: true,
            zoomControl: true,
            disableDefaultUI: false
        });
        
        console.log('Google Map object created:', map);
        
        // إضافة event listener للتأكد من تحميل الخريطة
        map.addListener('tilesloaded', function() {
            console.log('Map tiles loaded successfully');
        });
        
        map.addListener('error', function(e) {
            console.error('Map error:', e);
            mapContainer.innerHTML = '<div class="alert alert-danger p-3">خطأ في تحميل الخريطة. تحقق من API Key.</div>';
        });
        
        // رسم الحدود الموجودة
        if (workingArea && workingArea.boundaries) {
            boundaries = workingArea.boundaries;
            drawBoundaries();
        }

        // إضافة نقطة عند النقر
        map.addListener('click', function(e) {
            console.log('Map clicked at:', e.latLng);
            addBoundaryPoint(e.latLng.lng(), e.latLng.lat());
        });
        
        console.log('Map initialization completed');
        mapInitialized = true;
    } catch (error) {
        console.error('Error initializing map:', error);
        const mapContainer = document.getElementById('map');
        if (mapContainer) {
            mapContainer.innerHTML = '<div class="alert alert-danger p-3">خطأ في تهيئة الخريطة: ' + 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);
        
        // إضافة علامة على الخريطة
        const marker = new google.maps.Marker({
            position: { lat: lat, lng: lng },
            map: map,
            draggable: true,
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 8,
                fillColor: '#007cbf',
                fillOpacity: 1,
                strokeColor: '#ffffff',
                strokeWeight: 2
            }
        });
        
        // إمكانية سحب العلامة
        marker.addListener('dragend', function(e) {
            const index = boundaryMarkers.indexOf(marker);
            if (index !== -1) {
                boundaries[index] = { lng: e.latLng.lng(), lat: e.latLng.lat() };
                drawBoundaries();
            }
        });
        
        boundaryMarkers.push(marker);
        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 (boundaryPolygon) {
            boundaryPolygon.setMap(null);
            boundaryPolygon = null;
        }

        // إنشاء مسار مغلق
        const path = boundaries.map(p => ({ lat: p.lat, lng: p.lng }));
        // إغلاق المسار بإضافة النقطة الأولى في النهاية
        if (path.length > 0 && (path[0].lat !== path[path.length - 1].lat || path[0].lng !== path[path.length - 1].lng)) {
            path.push(path[0]);
        }

        // إنشاء المضلع
        boundaryPolygon = new google.maps.Polygon({
            paths: path,
            strokeColor: '#007cbf',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#007cbf',
            fillOpacity: 0.15,
            editable: true,
            draggable: false
        });

        boundaryPolygon.setMap(map);
        
        // تحديث الحدود عند التعديل
        boundaryPolygon.addListener('set_at', function() {
            updateBoundariesFromPolygon();
        });
        
        boundaryPolygon.addListener('insert_at', function() {
            updateBoundariesFromPolygon();
        });
        
        console.log('Boundaries drawn successfully');
    } catch (error) {
        console.error('Error drawing boundaries:', error);
    }
}

// تحديث الحدود من المضلع
function updateBoundariesFromPolygon() {
    try {
        if (!boundaryPolygon) return;
        
        const path = boundaryPolygon.getPath();
        boundaries = [];
        
        path.forEach(function(latLng) {
            boundaries.push({ lat: latLng.lat(), lng: latLng.lng() });
        });
        
        console.log('Boundaries updated from polygon:', boundaries);
    } catch (error) {
        console.error('Error updating boundaries:', error);
    }
}

// حفظ منطقة العمل
document.getElementById('workingAreaForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const submitButton = this.querySelector('button[type="submit"]');
    const originalText = submitButton.innerHTML;
    submitButton.disabled = true;
    submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الحفظ...';
    
    // تحديث الحدود من المضلع إذا كان موجوداً
    if (boundaryPolygon) {
        updateBoundariesFromPolygon();
    }
    
    const formData = new FormData(this);
    formData.append('boundaries', JSON.stringify(boundaries));

    fetch('<?php echo e(route("admin.maps.working-area.store")); ?>', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        submitButton.disabled = false;
        submitButton.innerHTML = originalText;
        
        if (data.success) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'success',
                    title: 'نجح!',
                    text: data.message || 'تم حفظ منطقة العمل بنجاح'
                });
            } else {
                alert('تم حفظ منطقة العمل بنجاح');
            }
        } else {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'error',
                    title: 'خطأ!',
                    text: data.message || 'حدث خطأ أثناء حفظ منطقة العمل'
                });
            } else {
                alert('خطأ: ' + (data.message || 'حدث خطأ أثناء حفظ منطقة العمل'));
            }
        }
    })
    .catch(error => {
        console.error('Error:', error);
        submitButton.disabled = false;
        submitButton.innerHTML = originalText;
        
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                icon: 'error',
                title: 'خطأ!',
                text: 'حدث خطأ أثناء حفظ منطقة العمل'
            });
        } else {
            alert('حدث خطأ أثناء حفظ منطقة العمل');
        }
    });
});

// حفظ إعدادات الخريطة
document.getElementById('mapSettingsForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const submitButton = this.querySelector('button[type="submit"]');
    const originalText = submitButton.innerHTML;
    submitButton.disabled = true;
    submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الحفظ...';
    
    const formData = new FormData(this);
    // تغيير اسم الحقل من mapbox_access_token إلى google_maps_api_key
    const apiKey = document.getElementById('google_maps_api_key').value;
    formData.delete('mapbox_access_token');
    formData.append('google_maps_api_key', apiKey);

    fetch('<?php echo e(route("admin.maps.settings.store")); ?>', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(async response => {
        const data = await response.json();
        if (!response.ok) {
            // إذا كانت الاستجابة تحتوي على أخطاء validation
            if (data.errors) {
                const errors = Object.values(data.errors).flat();
                throw new Error(errors.join('\n'));
            }
            throw new Error(data.message || 'Network response was not ok');
        }
        return data;
    })
    .then(data => {
        submitButton.disabled = false;
        submitButton.innerHTML = originalText;
        
        if (data.success) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'success',
                    title: 'نجح!',
                    text: data.message || 'تم حفظ الإعدادات بنجاح'
                }).then(() => {
                    // إعادة تحميل الصفحة لتطبيق الإعدادات الجديدة
                    location.reload();
                });
            } else {
                alert('تم حفظ الإعدادات بنجاح');
                location.reload();
            }
        } else {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'error',
                    title: 'خطأ!',
                    text: data.message || 'حدث خطأ أثناء حفظ الإعدادات'
                });
            } else {
                alert('خطأ: ' + (data.message || 'حدث خطأ أثناء حفظ الإعدادات'));
            }
        }
    })
    .catch(error => {
        console.error('Error:', error);
        submitButton.disabled = false;
        submitButton.innerHTML = originalText;
        
        let errorMessage = error.message || 'حدث خطأ أثناء حفظ إعدادات الخريطة';
        
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                icon: 'error',
                title: 'خطأ!',
                text: errorMessage,
                html: errorMessage.includes('\n') ? errorMessage.replace(/\n/g, '<br>') : errorMessage
            });
        } else {
            alert(errorMessage);
        }
    });
});

// إضافة نقطة خدمة
document.getElementById('addServicePointForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const submitButton = document.querySelector('#addServicePointModal button[type="submit"]');
    const originalText = submitButton.innerHTML;
    submitButton.disabled = true;
    submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الحفظ...';
    
    const formData = new FormData(this);

    fetch('<?php echo e(route("admin.maps.service-points.store")); ?>', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        submitButton.disabled = false;
        submitButton.innerHTML = originalText;
        
        if (data.success) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'success',
                    title: 'نجح!',
                    text: data.message || 'تم إضافة نقطة الخدمة بنجاح'
                }).then(() => {
                    location.reload();
                });
            } else {
                alert('تم إضافة نقطة الخدمة بنجاح');
                location.reload();
            }
        } else {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'error',
                    title: 'خطأ!',
                    text: data.message || 'حدث خطأ أثناء إضافة نقطة الخدمة'
                });
            } else {
                alert('خطأ: ' + (data.message || 'حدث خطأ أثناء إضافة نقطة الخدمة'));
            }
        }
    })
    .catch(error => {
        console.error('Error:', error);
        submitButton.disabled = false;
        submitButton.innerHTML = originalText;
        
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                icon: 'error',
                title: 'خطأ!',
                text: 'حدث خطأ أثناء إضافة نقطة الخدمة'
            });
        } else {
            alert('حدث خطأ أثناء إضافة نقطة الخدمة');
        }
    });
});

// مسح الحدود
function clearBoundaries() {
    try {
        boundaries = [];
        
        // إزالة المضلع
        if (boundaryPolygon) {
            boundaryPolygon.setMap(null);
            boundaryPolygon = null;
        }
        
        // إزالة العلامات
        boundaryMarkers.forEach(function(marker) {
            marker.setMap(null);
        });
        boundaryMarkers = [];
        
        console.log('Boundaries cleared');
    } catch (error) {
        console.error('Error clearing boundaries:', error);
    }
}

// إضافة حدود تجريبية
function addSampleBoundaries() {
    try {
        if (!map) {
            console.error('Map not initialized');
            return;
        }
        
        // مسح الحدود الحالية
        clearBoundaries();
        
        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 }
        ];
        
        // إضافة علامات
        boundaries.forEach(function(point) {
            addBoundaryPoint(point.lng, point.lat);
        });
        
        drawBoundaries();
        console.log('Sample boundaries added:', boundaries);
    } catch (error) {
        console.error('Error adding sample boundaries:', error);
    }
}

// اختبار الخريطة
function testMap() {
    try {
        console.log('=== GOOGLE MAPS TEST ===');
        console.log('Map object:', map);
        console.log('Map container:', document.getElementById('map'));
        console.log('Boundaries:', boundaries);
        console.log('Google Maps loaded:', typeof google !== 'undefined' && typeof google.maps !== 'undefined');
        
        if (map) {
            const center = map.getCenter();
            console.log('Map center:', { lat: center.lat(), lng: center.lng() });
            console.log('Map zoom:', map.getZoom());
            console.log('Map type:', map.getMapTypeId());
        }
        
        // اختبار إضافة نقطة تجريبية
        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...');
        
        // مسح الحدود
        clearBoundaries();
        
        // إعادة تهيئة الخريطة
        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);
    }
}

// تحميل Google Maps API
(function() {
    const apiKey = '<?php echo e($apiKey); ?>';
    console.log('🔑 API Key:', apiKey ? apiKey.substring(0, 20) + '...' : 'NOT SET');
    
    // التحقق من وجود API Key
    if (!apiKey || apiKey === 'YOUR_API_KEY' || apiKey.trim() === '') {
        console.warn('⚠️ API Key not set');
        // إذا لم يكن هناك API Key، نعرض رسالة
        document.addEventListener('DOMContentLoaded', function() {
            const mapContainer = document.getElementById('map');
            if (mapContainer) {
                mapContainer.innerHTML = '<div class="alert alert-warning p-3 text-center"><i class="fas fa-exclamation-triangle"></i><br>يرجى إدخال Google Maps API Key في إعدادات الخريطة أولاً.</div>';
            }
        });
        return;
    }
    
    // التحقق من أن initMap موجود كـ global function
    if (typeof window.initMap !== 'function') {
        console.error('❌ initMap function not found!');
        document.addEventListener('DOMContentLoaded', function() {
            const mapContainer = document.getElementById('map');
            if (mapContainer) {
                mapContainer.innerHTML = '<div class="alert alert-danger p-3 text-center">خطأ في تهيئة الخريطة. يرجى تحديث الصفحة.</div>';
            }
        });
        return;
    }
    
    console.log('✅ initMap function found, loading Google Maps API...');
    
    // تحميل Google Maps API مع callback
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=drawing,places&language=ar&region=IQ&callback=initMap`;
    script.async = true;
    script.defer = true;
    
    script.onerror = function() {
        console.error('❌ Failed to load Google Maps API');
        const mapContainer = document.getElementById('map');
        if (mapContainer) {
            mapContainer.innerHTML = '<div class="alert alert-danger p-3 text-center"><i class="fas fa-times-circle"></i><br>فشل في تحميل Google Maps API.<br>تأكد من صحة API Key وتفعيل Maps JavaScript API في Google Cloud Console.</div>';
        }
    };
    
    script.onload = function() {
        console.log('✅ Google Maps API script loaded successfully');
    };
    
    // إضافة script إلى head
    document.head.appendChild(script);
    console.log('📝 Google Maps API script added to head');
})();
</script>
<?php $__env->stopPush(); ?>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('admin.layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\wamp64\www\taxi_app\resources\views/admin/maps/index.blade.php ENDPATH**/ ?>