@extends('layouts.app')
@section('title', 'مواقع العمل - DOTS HR Pro')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">مواقع العمل (Geofence)</h1>
        <p class="page-subtitle">حدد مواقع المكاتب — الموظف يسجل حضور تلقائي لما يدخل النطاق</p>
    </div>
</div>

<div class="settings-layout">
    <div class="settings-nav">
        <a class="settings-nav-item" href="{{ route('settings.index') }}"><i class="fas fa-building"></i> بيانات الشركة</a>
        <a class="settings-nav-item" href="{{ route('settings.departments.index') }}"><i class="fas fa-sitemap"></i> الأقسام</a>
        <a class="settings-nav-item" href="{{ route('settings.shifts') }}"><i class="fas fa-clock"></i> ورديات العمل</a>
        <a class="settings-nav-item" href="{{ route('settings.leave-types') }}"><i class="fas fa-calendar"></i> أنواع الإجازات</a>
        <a class="settings-nav-item" href="{{ route('settings.roles.index') }}"><i class="fas fa-shield-alt"></i> الأدوار والصلاحيات</a>
        <a class="settings-nav-item active"><i class="fas fa-map-marker-alt"></i> مواقع العمل</a>
    </div>

    <div class="settings-content">
        {{-- Add Location --}}
        <div class="card" style="margin-bottom:24px;">
            <div class="card-header"><h3><i class="fas fa-plus-circle"></i> إضافة موقع عمل جديد</h3></div>
            <div class="card-body">
                <form method="POST" action="{{ route('settings.locations.store') }}">
                    @csrf
                    <div class="form-grid cols-2">
                        <div class="form-group">
                            <label class="form-label">اسم الموقع</label>
                            <input type="text" name="name" class="form-input" placeholder="مثال: المكتب الرئيسي" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">العنوان (اختياري)</label>
                            <input type="text" name="address" class="form-input" placeholder="مثال: شارع الملك فهد، الرياض">
                        </div>
                    </div>
                    <div class="form-grid cols-2">
                        <div class="form-group">
                            <label class="form-label">خط العرض (Latitude)</label>
                            <input type="number" name="latitude" class="form-input" step="0.0000001" placeholder="24.7136" required>
                            <small class="form-hint">افتح Google Maps واضغط على الموقع لنسخ الإحداثيات</small>
                        </div>
                        <div class="form-group">
                            <label class="form-label">خط الطول (Longitude)</label>
                            <input type="number" name="longitude" class="form-input" step="0.0000001" placeholder="46.6753" required>
                        </div>
                    </div>
                    <div class="form-group" style="max-width:400px;">
                        <label class="form-label">نطاق السياج الجغرافي (بالمتر)</label>
                        <input type="number" name="radius" class="form-input" value="100" min="50" max="5000" required>
                        <small class="form-hint">النطاق اللي لازم يكون الموظف داخله — الافتراضي 100 متر</small>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-plus"></i> إضافة الموقع</button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Existing Locations --}}
        <div class="card">
            <div class="card-header"><h3><i class="fas fa-map-marked-alt"></i> المواقع المسجلة ({{ $locations->count() }})</h3></div>
            @if($locations->count())
            <div class="table-responsive">
                <table class="data-table">
                    <thead>
                        <tr><th>الموقع</th><th>الإحداثيات</th><th>النطاق</th><th>الحالة</th><th>إجراءات</th></tr>
                    </thead>
                    <tbody>
                        @foreach($locations as $loc)
                        <tr>
                            <td>
                                <strong>{{ $loc->name }}</strong>
                                @if($loc->address)<br><small style="color:var(--text-secondary,#6b7280);">{{ $loc->address }}</small>@endif
                            </td>
                            <td style="font-family:monospace;font-size:13px;">{{ $loc->latitude }}, {{ $loc->longitude }}</td>
                            <td>{{ $loc->radius }} متر</td>
                            <td>
                                <span class="status-badge {{ $loc->is_active ? 'status-approved' : 'status-draft' }}">
                                    {{ $loc->is_active ? 'فعّال' : 'معطّل' }}
                                </span>
                            </td>
                            <td>
                                <div class="action-btns">
                                    <a href="https://www.google.com/maps?q={{ $loc->latitude }},{{ $loc->longitude }}" target="_blank" class="action-btn" title="عرض على الخريطة"><i class="fas fa-map"></i></a>
                                    <form method="POST" action="{{ route('settings.locations.destroy', $loc) }}" style="display:inline" onsubmit="return confirm('حذف هذا الموقع؟')">
                                        @csrf @method('DELETE')
                                        <button class="action-btn danger" title="حذف"><i class="fas fa-trash"></i></button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <div class="card-body">
                <div class="empty-state">
                    <i class="fas fa-map-marker-alt"></i>
                    <h3>لا توجد مواقع عمل</h3>
                    <p>أضف موقع عمل من الأعلى لتفعيل تسجيل الحضور التلقائي</p>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection