@extends('layouts.app')

@section('title', 'مواقع العمل')

@push('styles')
<style>
    /* ═══ Work Locations — wl- prefix ═══ */
    .wl-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 12px;
    }
    .wl-header h1 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1B2A4A;
        margin: 0;
    }
    .wl-btn {
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: background 0.15s, opacity 0.15s;
        text-decoration: none;
    }
    .wl-btn:hover { opacity: 0.9; }
    .wl-btn-primary { background: #E8502F; color: #fff; }
    .wl-btn-primary:hover { background: #d4441f; }
    .wl-btn-sm {
        padding: 6px 10px;
        font-size: 0.8rem;
        border-radius: 6px;
    }
    .wl-btn-edit { background: #dbeafe; color: #1e40af; }
    .wl-btn-delete { background: #fee2e2; color: #991b1b; }
    .wl-btn-geo { background: #d1fae5; color: #065f46; }
    .wl-btn-geo:hover { background: #a7f3d0; }

    .wl-alert {
        padding: 12px 20px;
        border-radius: 8px;
        margin-bottom: 16px;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .wl-alert-success { background: #d1fae5; color: #065f46; }
    .wl-alert-error { background: #fee2e2; color: #991b1b; }

    .wl-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        overflow: hidden;
    }
    .wl-card-header {
        padding: 16px 20px;
        border-bottom: 1px solid #f0f0f0;
        font-weight: 700;
        font-size: 1rem;
        color: #1B2A4A;
    }
    .wl-table {
        width: 100%;
        border-collapse: collapse;
    }
    .wl-table thead th {
        background: #f9fafb;
        padding: 10px 16px;
        font-size: 0.82rem;
        font-weight: 600;
        color: #6b7280;
        text-align: right;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }
    .wl-table tbody td {
        padding: 12px 16px;
        font-size: 0.875rem;
        color: #374151;
        border-bottom: 1px solid #f3f4f6;
    }
    .wl-table tbody tr:hover { background: #f9fafb; }

    .wl-badge {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
    }
    .wl-badge-active { background: #d1fae5; color: #065f46; }
    .wl-badge-inactive { background: #fee2e2; color: #991b1b; }

    .wl-coords {
        font-family: monospace;
        font-size: 0.8rem;
        color: #6b7280;
        direction: ltr;
        text-align: left;
    }
    .wl-coords-missing {
        color: #f59e0b;
        font-size: 0.8rem;
    }

    .wl-empty {
        text-align: center;
        padding: 60px 20px;
        color: #9ca3af;
    }
    .wl-empty i { font-size: 3rem; margin-bottom: 12px; display: block; }

    .wl-actions {
        display: flex;
        gap: 6px;
        white-space: nowrap;
    }

    /* Modal */
    .wl-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1050;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
    }
    .wl-overlay.active { opacity: 1; pointer-events: auto; }
    .wl-modal {
        background: #fff;
        border-radius: 12px;
        width: 92%;
        max-width: 560px;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    }
    .wl-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid #e2e8f0;
    }
    .wl-modal-header h3 {
        margin: 0;
        font-size: 1.05rem;
        color: #1B2A4A;
    }
    .wl-modal-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #64748b;
        line-height: 1;
        padding: 0 4px;
    }
    .wl-modal-close:hover { color: #ef4444; }
    .wl-modal-body {
        padding: 20px;
        overflow-y: auto;
    }

    .wl-form-group {
        margin-bottom: 14px;
    }
    .wl-form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: 600;
        font-size: 0.9rem;
        color: #1B2A4A;
    }
    .wl-form-group label .wl-label-hint {
        font-weight: 400;
        font-size: 0.78rem;
        color: #9ca3af;
        margin-right: 4px;
    }
    .wl-input {
        width: 100%;
        padding: 9px 12px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 0.9rem;
        box-sizing: border-box;
        transition: border-color 0.15s, box-shadow 0.15s;
    }
    .wl-input:focus {
        outline: none;
        border-color: #E8502F;
        box-shadow: 0 0 0 3px rgba(232, 80, 47, 0.1);
    }

    .wl-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .wl-form-row-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12px;
    }
    .wl-geo-section {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 14px;
        margin-bottom: 14px;
    }
    .wl-geo-section h4 {
        margin: 0 0 10px 0;
        font-size: 0.9rem;
        font-weight: 700;
        color: #1B2A4A;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .wl-geo-detect {
        margin-top: 8px;
        font-size: 0.82rem;
    }
    .wl-radius-info {
        font-size: 0.78rem;
        color: #6b7280;
        margin-top: 4px;
    }

    @media (max-width: 768px) {
        .wl-form-row, .wl-form-row-3 {
            grid-template-columns: 1fr;
        }
    }
</style>
@endpush

@section('content')
<div class="wl-header">
    <h1><i class="fa-solid fa-location-dot" style="color:#E8502F;margin-left:8px"></i> مواقع العمل</h1>
    <button class="wl-btn wl-btn-primary" onclick="wlOpenModal('wl-add-modal')">
        <i class="fa-solid fa-plus"></i> إضافة موقع
    </button>
</div>

@if(session('success'))
<div class="wl-alert wl-alert-success">
    <i class="fa-solid fa-check-circle"></i> {{ session('success') }}
</div>
@endif
@if(session('error'))
<div class="wl-alert wl-alert-error">
    <i class="fa-solid fa-exclamation-circle"></i> {{ session('error') }}
</div>
@endif

<div class="wl-card">
    <div class="wl-card-header">
        <i class="fa-solid fa-list" style="margin-left:6px"></i> قائمة مواقع العمل
    </div>
    @if(isset($locations) && count($locations) > 0)
    <div style="overflow-x:auto">
        <table class="wl-table">
            <thead>
                <tr>
                    <th>اسم الموقع</th>
                    <th>العنوان</th>
                    <th>المدينة</th>
                    <th>الإحداثيات</th>
                    <th>نطاق السياج (م)</th>
                    <th>عدد الموظفين</th>
                    <th>الحالة</th>
                    <th>إجراءات</th>
                </tr>
            </thead>
            <tbody>
                @foreach($locations as $location)
                <tr>
                    <td style="font-weight:600">{{ $location->name ?? '-' }}</td>
                    <td>{{ $location->address ?? '-' }}</td>
                    <td>{{ $location->city ?? '-' }}</td>
                    <td>
                        @if(isset($location->latitude) && isset($location->longitude) && $location->latitude && $location->longitude)
                            <span class="wl-coords">{{ $location->latitude }}, {{ $location->longitude }}</span>
                        @else
                            <span class="wl-coords-missing"><i class="fa-solid fa-triangle-exclamation"></i> غير محدد</span>
                        @endif
                    </td>
                    <td>{{ $location->radius ?? 100 }} م</td>
                    <td>{{ $location->employees_count ?? 0 }}</td>
                    <td>
                        @if(($location->is_active ?? $location->status ?? '') == 1 || ($location->status ?? '') === 'active')
                            <span class="wl-badge wl-badge-active">نشط</span>
                        @else
                            <span class="wl-badge wl-badge-inactive">غير نشط</span>
                        @endif
                    </td>
                    <td>
                        <div class="wl-actions">
                            <button class="wl-btn wl-btn-sm wl-btn-edit" title="تعديل"
                                onclick="wlEditLocation({{ json_encode([
                                    'id' => $location->id,
                                    'name' => $location->name ?? '',
                                    'address' => $location->address ?? '',
                                    'city' => $location->city ?? '',
                                    'latitude' => $location->latitude ?? '',
                                    'longitude' => $location->longitude ?? '',
                                    'radius' => $location->radius ?? 100,
                                ]) }})">
                                <i class="fa-solid fa-pen"></i>
                            </button>
                            <form action="/settings/locations/{{ $location->id }}" method="POST" style="display:inline"
                                onsubmit="return confirm('هل أنت متأكد من حذف هذا الموقع؟')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="wl-btn wl-btn-sm wl-btn-delete" title="حذف">
                                    <i class="fa-solid fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @else
    <div class="wl-empty">
        <i class="fa-solid fa-location-dot"></i>
        <p>لا توجد مواقع عمل مسجلة — اضغط "إضافة موقع" للبدء</p>
    </div>
    @endif
</div>

{{-- Add Location Modal --}}
<div class="wl-overlay" id="wl-add-modal">
    <div class="wl-modal">
        <div class="wl-modal-header">
            <h3><i class="fa-solid fa-plus" style="color:#E8502F;margin-left:6px"></i> إضافة موقع عمل</h3>
            <button class="wl-modal-close" onclick="wlCloseModal('wl-add-modal')">&times;</button>
        </div>
        <div class="wl-modal-body">
            <form action="/settings/locations" method="POST">
                @csrf
                <div class="wl-form-group">
                    <label>اسم الموقع <span style="color:#ef4444">*</span></label>
                    <input type="text" name="name" class="wl-input" required placeholder="مثال: المقر الرئيسي">
                </div>
                <div class="wl-form-row">
                    <div class="wl-form-group">
                        <label>العنوان</label>
                        <input type="text" name="address" class="wl-input" placeholder="العنوان التفصيلي">
                    </div>
                    <div class="wl-form-group">
                        <label>المدينة</label>
                        <input type="text" name="city" class="wl-input" placeholder="مثال: الرياض">
                    </div>
                </div>

                <div class="wl-geo-section">
                    <h4><i class="fa-solid fa-satellite-dish" style="color:#E8502F"></i> إحداثيات الموقع الجغرافي</h4>
                    <div class="wl-form-row-3">
                        <div class="wl-form-group">
                            <label>خط العرض <span class="wl-label-hint">(Latitude)</span></label>
                            <input type="number" name="latitude" id="add-lat" class="wl-input" step="0.0000001" min="-90" max="90" placeholder="24.7136">
                        </div>
                        <div class="wl-form-group">
                            <label>خط الطول <span class="wl-label-hint">(Longitude)</span></label>
                            <input type="number" name="longitude" id="add-lng" class="wl-input" step="0.0000001" min="-180" max="180" placeholder="46.6753">
                        </div>
                        <div class="wl-form-group">
                            <label>نطاق السياج <span class="wl-label-hint">(بالمتر)</span></label>
                            <input type="number" name="radius" class="wl-input" min="10" max="10000" value="100" placeholder="100">
                            <div class="wl-radius-info">المسافة المسموحة لتسجيل الحضور</div>
                        </div>
                    </div>
                    <button type="button" class="wl-btn wl-btn-sm wl-btn-geo wl-geo-detect" onclick="wlDetectLocation('add-lat', 'add-lng')">
                        <i class="fa-solid fa-crosshairs"></i> تحديد موقعي الحالي تلقائياً
                    </button>
                </div>

                <button type="submit" class="wl-btn wl-btn-primary" style="width:100%;justify-content:center;margin-top:4px">
                    <i class="fa-solid fa-check"></i> حفظ الموقع
                </button>
            </form>
        </div>
    </div>
</div>

{{-- Edit Location Modal --}}
<div class="wl-overlay" id="wl-edit-modal">
    <div class="wl-modal">
        <div class="wl-modal-header">
            <h3><i class="fa-solid fa-pen" style="color:#1e40af;margin-left:6px"></i> تعديل موقع العمل</h3>
            <button class="wl-modal-close" onclick="wlCloseModal('wl-edit-modal')">&times;</button>
        </div>
        <div class="wl-modal-body">
            <form id="wl-edit-form" method="POST">
                @csrf
                @method('PUT')
                <div class="wl-form-group">
                    <label>اسم الموقع <span style="color:#ef4444">*</span></label>
                    <input type="text" name="name" id="edit-name" class="wl-input" required>
                </div>
                <div class="wl-form-row">
                    <div class="wl-form-group">
                        <label>العنوان</label>
                        <input type="text" name="address" id="edit-address" class="wl-input">
                    </div>
                    <div class="wl-form-group">
                        <label>المدينة</label>
                        <input type="text" name="city" id="edit-city" class="wl-input">
                    </div>
                </div>

                <div class="wl-geo-section">
                    <h4><i class="fa-solid fa-satellite-dish" style="color:#E8502F"></i> إحداثيات الموقع الجغرافي</h4>
                    <div class="wl-form-row-3">
                        <div class="wl-form-group">
                            <label>خط العرض <span class="wl-label-hint">(Latitude)</span></label>
                            <input type="number" name="latitude" id="edit-lat" class="wl-input" step="0.0000001" min="-90" max="90">
                        </div>
                        <div class="wl-form-group">
                            <label>خط الطول <span class="wl-label-hint">(Longitude)</span></label>
                            <input type="number" name="longitude" id="edit-lng" class="wl-input" step="0.0000001" min="-180" max="180">
                        </div>
                        <div class="wl-form-group">
                            <label>نطاق السياج <span class="wl-label-hint">(بالمتر)</span></label>
                            <input type="number" name="radius" id="edit-radius" class="wl-input" min="10" max="10000">
                        </div>
                    </div>
                    <button type="button" class="wl-btn wl-btn-sm wl-btn-geo wl-geo-detect" onclick="wlDetectLocation('edit-lat', 'edit-lng')">
                        <i class="fa-solid fa-crosshairs"></i> تحديد موقعي الحالي تلقائياً
                    </button>
                </div>

                <button type="submit" class="wl-btn wl-btn-primary" style="width:100%;justify-content:center;margin-top:4px">
                    <i class="fa-solid fa-check"></i> حفظ التعديلات
                </button>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function wlOpenModal(id) {
    document.getElementById(id).classList.add('active');
}
function wlCloseModal(id) {
    document.getElementById(id).classList.remove('active');
}

function wlEditLocation(loc) {
    document.getElementById('wl-edit-form').action = '/settings/locations/' + loc.id;
    document.getElementById('edit-name').value = loc.name || '';
    document.getElementById('edit-address').value = loc.address || '';
    document.getElementById('edit-city').value = loc.city || '';
    document.getElementById('edit-lat').value = loc.latitude || '';
    document.getElementById('edit-lng').value = loc.longitude || '';
    document.getElementById('edit-radius').value = loc.radius || 100;
    wlOpenModal('wl-edit-modal');
}

function wlDetectLocation(latId, lngId) {
    if (!navigator.geolocation) {
        alert('المتصفح لا يدعم تحديد الموقع الجغرافي');
        return;
    }
    navigator.geolocation.getCurrentPosition(
        function(pos) {
            document.getElementById(latId).value = pos.coords.latitude.toFixed(7);
            document.getElementById(lngId).value = pos.coords.longitude.toFixed(7);
        },
        function(err) {
            if (err.code === 1) {
                alert('تم رفض إذن الوصول للموقع. يرجى السماح بالوصول من إعدادات المتصفح.');
            } else {
                alert('تعذر تحديد الموقع: ' + err.message);
            }
        },
        { enableHighAccuracy: true, timeout: 10000 }
    );
}

// Close modal on Escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        document.querySelectorAll('.wl-overlay.active').forEach(function(m) {
            m.classList.remove('active');
        });
    }
});

// Close modal on overlay click
document.querySelectorAll('.wl-overlay').forEach(function(overlay) {
    overlay.addEventListener('click', function(e) {
        if (e.target === overlay) {
            overlay.classList.remove('active');
        }
    });
});
</script>
@endpush