@extends('layouts.app')

@section('content')
    <div class="container">
        <!-- العنوان وأزرار التبديل بين النشطة والأرشيف -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h3 class="text-success m-0">🏥 إدارة المؤسسات الصيدلانية</h3>
            <div>
                <a href="{{ route('establishments.index') }}"
                    class="btn btn-outline-primary {{ !request('trashed') ? 'active' : '' }}">المؤسسات النشطة</a>
                <a href="{{ route('establishments.index', ['trashed' => 'true']) }}"
                    class="btn btn-outline-danger {{ request('trashed') ? 'active' : '' }}">الأرشيف (المحذوفة)</a>
            </div>
        </div>

        <!-- شريط البحث -->
        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <form action="{{ route('establishments.index') }}" method="GET" class="d-flex">
                    @if(request('trashed'))
                        <input type="hidden" name="trashed" value="true">
                    @endif
                    <input type="text" name="search" class="form-control me-2"
                        placeholder="ابحث باسم المؤسسة أو نوع الرخصة..." value="{{ request('search') }}">
                    <button type="submit" class="btn btn-primary px-4">🔍 بحث</button>
                    @if(request('search'))
                        <a href="{{ route('establishments.index', request('trashed') ? ['trashed' => 'true'] : []) }}"
                            class="btn btn-secondary ms-2">إلغاء</a>
                    @endif
                </form>
                    <!-- زر التصدير -->
                    <div class="text-end mb-3">
                        <a href="{{ route('establishments.export') }}" class="btn btn-success">
                            📥 تصدير إلى Excel
                        </a>
                    </div>
            </div>
        </div>

        <!-- نموذج إضافة مؤسسة (يظهر فقط في المؤسسات النشطة) -->
        @if(!request('trashed'))
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <form action="{{ route('establishments.store') }}" method="POST" class="row g-3">
                        @csrf
                        <!-- الهيكل الجغرافي أولاً -->
                        <div class="col-md-4">
                            <label class="form-label fw-bold text-success">1. الولاية</label>
                            <select id="region" class="form-select" required>
                                <option value="">اختر الولاية</option>
                                @foreach($regions as $region)
                                    <option value="{{ $region->id }}">{{ $region->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold text-success">2. المحلية</label>
                            <select id="locality" class="form-select" required disabled>
                                <option value="">اختر المحلية أولاً</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold text-success">3. الوحدة الإدارية</label>
                            <select name="admin_unit_id" id="admin_unit" class="form-select" required disabled>
                                <option value="">اختر الوحدة الإدارية</option>
                            </select>
                        </div>

                        <!-- بيانات المؤسسة ثانياً -->
                        <div class="col-md-6 mt-4">
                            <label class="form-label fw-bold text-primary">4. اسم المؤسسة</label>
                            <input type="text" name="name" class="form-control" placeholder="أدخل اسم المؤسسة..." required>
                        </div>
                        <div class="col-md-6 mt-4">
                            <label class="form-label fw-bold text-primary">5. نوع الرخصة</label>
                            <select name="type" class="form-select" required>
                                <option value="">-- اختر نوع الرخصة --</option>
                                @foreach($licenseTypes as $type)
                                    <option value="{{ $type->name }}">{{ $type->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- تفاصيل إضافية -->
                        <div class="col-md-6">
                            <label class="form-label">تفاصيل العنوان (الشارع، المربع)</label>
                            <input type="text" name="address_details" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">رقم الهاتف</label>
                            <input type="text" name="phone" class="form-control">
                        </div>

                        <div class="col-12 mt-4">
                            <button type="submit" class="btn btn-success px-5 w-100">حفظ المؤسسة</button>
                        </div>
                    </form>
                </div>
            </div>
        @endif

        <!-- جدول عرض المؤسسات -->
        <div class="card shadow-sm">
            <div class="card-body">
                <table class="table table-bordered text-center align-middle">
                    <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>اسم المؤسسة</th>
                            <th>النوع</th>
                            <th>الموقع الجغرافي</th>
                            <th>الهاتف</th>
                            <th>الحالة</th>
                            <th>الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($establishments as $index => $est)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $est->name }}</td>
                                <td><span class="badge bg-info text-dark">{{ $est->type }}</span></td>
                                <td>
                                    @if($est->adminUnit && $est->adminUnit->locality && $est->adminUnit->locality->region)
                                        {{ $est->adminUnit->locality->region->name }} -
                                        {{ $est->adminUnit->locality->name }} -
                                        {{ $est->adminUnit->name }}
                                    @else
                                        <span class="text-muted">غير محدد</span>
                                    @endif
                                </td>
                                <td>{{ $est->phone ?? 'غير مسجل' }}</td>
                                <td>
                                    @if($est->trashed())
                                        <span class="badge bg-secondary">مؤرشفة</span>
                                    @elseif($est->is_frozen)
                                        <span class="badge bg-danger">مجمّدة</span>
                                    @else
                                        <span class="badge bg-success">نشطة</span>
                                    @endif
                                </td>
                                <td>
                                    @if(request('trashed'))
                                        <!-- أزرار الأرشيف (استعادة فقط) -->
                                        <form action="{{ route('establishments.restore', $est->id) }}" method="POST"
                                            class="d-inline">
                                            @csrf
                                            @method('PATCH')
                                            <button type="submit" class="btn btn-sm btn-success">استعادة</button>
                                        </form>
                                    @else
                                        <!-- أزرار التحكم للمؤسسات النشطة -->
                                        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#editModal{{ $est->id }}">تعديل</button>

                                        <form action="{{ route('establishments.freeze', $est->id) }}" method="POST"
                                            class="d-inline">
                                            @csrf
                                            @method('PATCH')
                                            <button type="submit"
                                                class="btn btn-sm {{ $est->is_frozen ? 'btn-warning' : 'btn-secondary' }}">
                                                {{ $est->is_frozen ? 'إلغاء التجميد' : 'تجميد' }}
                                            </button>
                                        </form>

                                        <form action="{{ route('establishments.destroy', $est->id) }}" method="POST"
                                            class="d-inline"
                                            onsubmit="return confirm('هل أنت متأكد من حذف المؤسسة؟ (ستُنقل للأرشيف)');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger">حذف</button>
                                        </form>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-muted">لا توجد مؤسسات مسجلة.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
                            <!-- أزرار ترقيم الصفحات -->
            <div class="d-flex justify-content-center mt-3">
                {{ $establishments->appends(request()->query())->links('pagination::bootstrap-5') }}
            </div>
            </div>
        </div>
    </div>

    <!-- ========================================== -->
    <!-- النوافذ المنبثقة للتعديل (خارج الجدول) -->
    <!-- ========================================== -->
    @if(!request('trashed'))
        @foreach($establishments as $est)
            <div class="modal fade" id="editModal{{ $est->id }}" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <form action="{{ route('establishments.update', $est->id) }}" method="POST">
                            @csrf
                            @method('PUT')
                            <div class="modal-header bg-primary text-white">
                                <h5 class="modal-title">تعديل بيانات المؤسسة</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label class="form-label">اسم المؤسسة</label>
                                    <input type="text" name="name" class="form-control" value="{{ $est->name }}" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">نوع الرخصة</label>
                                    <select name="type" class="form-select" required>
                                        @foreach($licenseTypes as $type)
                                            <option value="{{ $type->name }}" {{ $est->type == $type->name ? 'selected' : '' }}>
                                                {{ $type->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">تفاصيل العنوان</label>
                                    <input type="text" name="address_details" class="form-control"
                                        value="{{ $est->address_details }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">رقم الهاتف</label>
                                    <input type="text" name="phone" class="form-control" value="{{ $est->phone }}">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-success">حفظ التعديلات</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endforeach
    @endif

    <!-- كود الجافاسكريبت للقوائم المنسدلة الذكية -->
    <script>
        document.getElementById('region')?.addEventListener('change', function () {
            let regionId = this.value;
            let localitySelect = document.getElementById('locality');
            let adminUnitSelect = document.getElementById('admin_unit');

            localitySelect.innerHTML = '<option value="">جاري التحميل...</option>';
            adminUnitSelect.innerHTML = '<option value="">اختر الوحدة الإدارية</option>';
            adminUnitSelect.disabled = true;

            if (regionId) {
                fetch(`/api/localities/${regionId}`)
                    .then(response => response.json())
                    .then(data => {
                        localitySelect.innerHTML = '<option value="">اختر المحلية</option>';
                        localitySelect.disabled = false;
                        data.forEach(locality => {
                            localitySelect.innerHTML += `<option value="${locality.id}">${locality.name}</option>`;
                        });
                    });
            }
        });

        document.getElementById('locality')?.addEventListener('change', function () {
            let localityId = this.value;
            let adminUnitSelect = document.getElementById('admin_unit');

            adminUnitSelect.innerHTML = '<option value="">جاري التحميل...</option>';

            if (localityId) {
                fetch(`/api/admin-units/${localityId}`)
                    .then(response => response.json())
                    .then(data => {
                        adminUnitSelect.innerHTML = '<option value="">اختر الوحدة الإدارية</option>';
                        adminUnitSelect.disabled = false;
                        data.forEach(unit => {
                            adminUnitSelect.innerHTML += `<option value="${unit.id}">${unit.name}</option>`;
                        });
                    });
            }
        });
    </script>
@endsection