@extends('admin.layout')

@section('title', 'إدارة المواقع')

@section('content')
    <div class="card">
        <div
            style="display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; background: rgba(255, 215, 0, 0.1); border-bottom: 1px solid rgba(255, 215, 0, 0.3); border-radius: 15px 15px 0 0;">
            <h3 class="elegant-text" style="color: var(--primary-gold); margin: 0; font-size: 1.5rem;">
                <i class="fas fa-map-marker-alt" style="margin-left: 0.5rem;"></i>
                إدارة المواقع
            </h3>
            <button class="btn btn-primary" onclick="showAddLocationModal()">
                <i class="fas fa-plus"></i> إضافة موقع جديد
            </button>
        </div>
        <div style="padding: 1.5rem;">
            @if($locations->count() > 0)
                <div style="overflow-x: auto;">
                    <table class="table" style="background: rgba(255, 255, 255, 0.02); border-radius: 10px; overflow: hidden;">
                        <thead>
                            <tr style="background: rgba(255, 215, 0, 0.1);">
                                <th style="color: var(--primary-gold); font-weight: 600; padding: 1rem;">#</th>
                                <th style="color: var(--primary-gold); font-weight: 600; padding: 1rem;">الاسم (عربي)</th>
                                <th style="color: var(--primary-gold); font-weight: 600; padding: 1rem;">الاسم (إنجليزي)</th>
                                <th style="color: var(--primary-gold); font-weight: 600; padding: 1rem;">العنوان</th>
                                <th style="color: var(--primary-gold); font-weight: 600; padding: 1rem;">الهاتف</th>
                                <th style="color: var(--primary-gold); font-weight: 600; padding: 1rem;">الحالة</th>
                                <th style="color: var(--primary-gold); font-weight: 600; padding: 1rem;">الإجراءات</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($locations as $location)
                                <tr style="transition: all 0.3s ease;" onmouseover="this.style.background='rgba(255, 215, 0, 0.05)'"
                                    onmouseout="this.style.background='transparent'">
                                    <td style="padding: 1rem; font-weight: 500;">{{ $location->id }}</td>
                                    <td style="padding: 1rem;">
                                        <span class="modern-text" style="font-weight: 500;">{{ $location->name_ar }}</span>
                                    </td>
                                    <td style="padding: 1rem;">
                                        <span style="opacity: 0.8;">{{ $location->name_en }}</span>
                                    </td>
                                    <td style="padding: 1rem;">
                                        <span style="opacity: 0.8;">{{ Str::limit($location->address, 50) }}</span>
                                    </td>
                                    <td style="padding: 1rem;">
                                        <span style="opacity: 0.8;">{{ $location->phone ?? '-' }}</span>
                                    </td>
                                    <td style="padding: 1rem;">
                                        <span class="badge {{ $location->is_active ? 'badge-success' : 'badge-danger' }}">
                                            {{ $location->is_active ? 'نشط' : 'غير نشط' }}
                                        </span>
                                    </td>
                                    <td style="padding: 1rem;">
                                        <div style="display: flex; gap: 0.5rem;">
                                            <button class="btn btn-secondary" style="padding: 0.5rem; border-radius: 8px;"
                                                onclick="editLocation({{ $location->id }})" title="تعديل">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-danger" style="padding: 0.5rem; border-radius: 8px;"
                                                onclick="deleteLocation({{ $location->id }})" title="حذف">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" style="text-align: center; padding: 3rem;">
                                        <div style="opacity: 0.6;">
                                            <i class="fas fa-map-marker-alt"
                                                style="font-size: 3rem; color: var(--primary-gold); margin-bottom: 1rem;"></i>
                                            <p class="modern-text" style="font-size: 1.1rem; margin: 0;">لا توجد مواقع مسجلة</p>
                                            <p style="opacity: 0.7; margin-top: 0.5rem;">قم بإضافة موقع جديد للبدء</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            @else
                <div style="text-align: center; padding: 3rem;">
                    <div style="opacity: 0.6;">
                        <i class="fas fa-map-marker-alt"
                            style="font-size: 4rem; color: var(--primary-gold); margin-bottom: 1rem;"></i>
                        <h3 class="elegant-text" style="color: var(--primary-gold); margin-bottom: 1rem;">لا توجد مواقع</h3>
                        <p class="modern-text" style="opacity: 0.8; margin-bottom: 2rem;">ابدأ بإضافة أول موقع لشركتك</p>
                        <button class="btn btn-primary" onclick="showAddLocationModal()">
                            <i class="fas fa-plus"></i> إضافة موقع جديد
                        </button>
                    </div>
                </div>
            @endif
        </div>
    </div>
    </div>

    <!-- Add Location Modal -->
    <div class="modal fade" id="addLocationModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">إضافة موقع جديد</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="addLocationForm">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">الاسم (عربي)</label>
                                <input type="text" class="form-control" name="name_ar" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">الاسم (إنجليزي)</label>
                                <input type="text" class="form-control" name="name_en" required>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">العنوان</label>
                            <textarea class="form-control" name="address" rows="3" required></textarea>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">الهاتف</label>
                                <input type="text" class="form-control" name="phone">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">البريد الإلكتروني</label>
                                <input type="email" class="form-control" name="email">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">خط الطول</label>
                                <input type="number" step="any" class="form-control" name="longitude">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">خط العرض</label>
                                <input type="number" step="any" class="form-control" name="latitude">
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_active" value="1" checked>
                                <label class="form-check-label">نشط</label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                        <button type="submit" class="btn btn-primary">حفظ</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
        // Show Add Location Modal
        function showAddLocationModal() {
            Swal.fire({
                title: 'إضافة موقع جديد',
                html: `
                    <form id="swalLocationForm" style="text-align: right;">
                        <div style="margin-bottom: 1rem;">
                            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">الاسم (عربي)</label>
                            <input type="text" id="name_ar" class="swal2-input" placeholder="اسم الموقع بالعربية" required style="width: 90%;">
                        </div>
                        <div style="margin-bottom: 1rem;">
                            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">الاسم (إنجليزي)</label>
                            <input type="text" id="name_en" class="swal2-input" placeholder="Location Name in English" required style="width: 90%;">
                        </div>
                        <div style="margin-bottom: 1rem;">
                            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">العنوان</label>
                            <textarea id="address" class="swal2-textarea" placeholder="العنوان الكامل" required style="width: 90%; height: 80px;"></textarea>
                        </div>
                        <div style="margin-bottom: 1rem;">
                            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">الهاتف</label>
                            <input type="text" id="phone" class="swal2-input" placeholder="رقم الهاتف" style="width: 90%;">
                        </div>
                        <div style="margin-bottom: 1rem;">
                            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">البريد الإلكتروني</label>
                            <input type="email" id="email" class="swal2-input" placeholder="البريد الإلكتروني" style="width: 90%;">
                        </div>
                        <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
                            <div style="flex: 1;">
                                <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">خط الطول</label>
                                <input type="number" step="any" id="longitude" class="swal2-input" placeholder="Longitude" style="width: 90%;">
                            </div>
                            <div style="flex: 1;">
                                <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">خط العرض</label>
                                <input type="number" step="any" id="latitude" class="swal2-input" placeholder="Latitude" style="width: 90%;">
                            </div>
                        </div>
                        <div style="margin-bottom: 1rem;">
                            <label style="display: flex; align-items: center; gap: 0.5rem;">
                                <input type="checkbox" id="is_active" checked style="margin: 0;">
                                <span>نشط</span>
                            </label>
                        </div>
                    </form>
                `,
                showCancelButton: true,
                confirmButtonText: 'حفظ',
                cancelButtonText: 'إلغاء',
                confirmButtonColor: '#FFD700',
                cancelButtonColor: '#d33',
                width: '600px',
                preConfirm: () => {
                    const name_ar = document.getElementById('name_ar').value;
                    const name_en = document.getElementById('name_en').value;
                    const address = document.getElementById('address').value;

                    if (!name_ar || !name_en || !address) {
                        Swal.showValidationMessage('يرجى ملء جميع الحقول المطلوبة');
                        return false;
                    }

                    return {
                        name_ar: name_ar,
                        name_en: name_en,
                        address: address,
                        phone: document.getElementById('phone').value,
                        email: document.getElementById('email').value,
                        longitude: document.getElementById('longitude').value,
                        latitude: document.getElementById('latitude').value,
                        is_active: document.getElementById('is_active').checked ? 1 : 0
                    };
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    addLocation(result.value);
                }
            });
        }

        // Add Location
        function addLocation(data) {
            fetch('{{ route("admin.locations") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showSuccess('تم الحفظ بنجاح', 'تم إضافة الموقع الجديد بنجاح');
                    setTimeout(() => location.reload(), 1500);
                } else {
                    showError('خطأ', data.message || 'حدث خطأ أثناء الحفظ');
                }
            })
            .catch(error => {
                showError('خطأ', 'حدث خطأ في الاتصال');
            });
        }

        // Edit Location
        function editLocation(id) {
            // Fetch location data first
            fetch(`/admin/locations/${id}`)
            .then(response => response.json())
            .then(location => {
                Swal.fire({
                    title: 'تعديل الموقع',
                    html: `
                        <form id="swalEditLocationForm" style="text-align: right;">
                            <div style="margin-bottom: 1rem;">
                                <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">الاسم (عربي)</label>
                                <input type="text" id="edit_name_ar" class="swal2-input" value="${location.name_ar}" required style="width: 90%;">
                            </div>
                            <div style="margin-bottom: 1rem;">
                                <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">الاسم (إنجليزي)</label>
                                <input type="text" id="edit_name_en" class="swal2-input" value="${location.name_en}" required style="width: 90%;">
                            </div>
                            <div style="margin-bottom: 1rem;">
                                <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">العنوان</label>
                                <textarea id="edit_address" class="swal2-textarea" required style="width: 90%; height: 80px;">${location.address}</textarea>
                            </div>
                            <div style="margin-bottom: 1rem;">
                                <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">الهاتف</label>
                                <input type="text" id="edit_phone" class="swal2-input" value="${location.phone || ''}" style="width: 90%;">
                            </div>
                            <div style="margin-bottom: 1rem;">
                                <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">البريد الإلكتروني</label>
                                <input type="email" id="edit_email" class="swal2-input" value="${location.email || ''}" style="width: 90%;">
                            </div>
                            <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
                                <div style="flex: 1;">
                                    <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">خط الطول</label>
                                    <input type="number" step="any" id="edit_longitude" class="swal2-input" value="${location.longitude || ''}" style="width: 90%;">
                                </div>
                                <div style="flex: 1;">
                                    <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">خط العرض</label>
                                    <input type="number" step="any" id="edit_latitude" class="swal2-input" value="${location.latitude || ''}" style="width: 90%;">
                                </div>
                            </div>
                            <div style="margin-bottom: 1rem;">
                                <label style="display: flex; align-items: center; gap: 0.5rem;">
                                    <input type="checkbox" id="edit_is_active" ${location.is_active ? 'checked' : ''} style="margin: 0;">
                                    <span>نشط</span>
                                </label>
                            </div>
                        </form>
                    `,
                    showCancelButton: true,
                    confirmButtonText: 'حفظ التعديلات',
                    cancelButtonText: 'إلغاء',
                    confirmButtonColor: '#FFD700',
                    cancelButtonColor: '#d33',
                    width: '600px',
                    preConfirm: () => {
                        const name_ar = document.getElementById('edit_name_ar').value;
                        const name_en = document.getElementById('edit_name_en').value;
                        const address = document.getElementById('edit_address').value;

                        if (!name_ar || !name_en || !address) {
                            Swal.showValidationMessage('يرجى ملء جميع الحقول المطلوبة');
                            return false;
                        }

                        return {
                            name_ar: name_ar,
                            name_en: name_en,
                            address: address,
                            phone: document.getElementById('edit_phone').value,
                            email: document.getElementById('edit_email').value,
                            longitude: document.getElementById('edit_longitude').value,
                            latitude: document.getElementById('edit_latitude').value,
                            is_active: document.getElementById('edit_is_active').checked ? 1 : 0
                        };
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        updateLocation(id, result.value);
                    }
                });
            })
            .catch(error => {
                showError('خطأ', 'لا يمكن تحميل بيانات الموقع');
            });
        }

        // Update Location
        function updateLocation(id, data) {
            fetch(`/admin/locations/${id}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showSuccess('تم التحديث بنجاح', 'تم تحديث بيانات الموقع بنجاح');
                    setTimeout(() => location.reload(), 1500);
                } else {
                    showError('خطأ', data.message || 'حدث خطأ أثناء التحديث');
                }
            })
            .catch(error => {
                showError('خطأ', 'حدث خطأ في الاتصال');
            });
        }

        // Delete Location
        function deleteLocation(id) {
            showConfirm(
                'تأكيد الحذف',
                'هل أنت متأكد من حذف هذا الموقع؟ لا يمكن التراجع عن هذا الإجراء.',
                'نعم، احذف',
                'إلغاء'
            ).then((result) => {
                if (result.isConfirmed) {
                    fetch(`/admin/locations/${id}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            showSuccess('تم الحذف بنجاح', 'تم حذف الموقع بنجاح');
                            setTimeout(() => location.reload(), 1500);
                        } else {
                            showError('خطأ', data.message || 'حدث خطأ أثناء الحذف');
                        }
                    })
                    .catch(error => {
                        showError('خطأ', 'حدث خطأ في الاتصال');
                    });
                }
            });
        }
        </script>
    @endpush
@endsection