@extends('layouts.app')

@section('content')
    <div class="container">
        <h3 class="mb-4 text-success">🗺️ التقرير الهيكلي (الإحصائيات الجغرافية)</h3>

        <div class="card shadow-sm">
            <div class="card-body">
                <form action="{{ route('reports.hierarchy_print') }}" method="POST" target="_blank">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label fw-bold text-success">1. الإقليم / الولاية (إجباري)</label>
                            <select id="region" name="region_id" 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-primary">2. المحلية (اختياري)</label>
                            <select id="locality" name="locality_id" class="form-select" disabled>
                                <option value="">كل المحليات</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold text-info">3. الوحدة الإدارية (اختياري)</label>
                            <select name="admin_unit_id" id="admin_unit" class="form-select" disabled>
                                <option value="">كل الوحدات الإدارية</option>
                            </select>
                        </div>

                        <div class="col-12 mt-4">
                            <button type="submit" class="btn btn-success w-100 py-2 fs-5">عرض التقرير للطباعة</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <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