@extends('layouts.app')
@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-3 align-items-center">
            <div class="col-md-6">
                <h3 class="m-0 font-weight-bold text-primary"><i class="fas fa-map-marked-alt mr-2"></i> إدارة المدن والمناطق</h3>
            </div>
            <div class="col-md-6 text-md-right mt-2 mt-md-0">
                <a class="btn btn-success" href="{{ route('tblZones.create') }}">
                    <i class="fas fa-plus"></i> إضافة مدينة أو منطقة جديدة
                </a>
            </div>
        </div>
        <!-- KPI Cards -->
        <div class="row">
            <div class="col-lg-3 col-6">
                <div class="small-box bg-info shadow-sm">
                    <div class="inner">
                        <h3>{{ $totalCities ?? 0 }}</h3>
                        <p>إجمالي المدن (نشط)</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-city"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box bg-primary shadow-sm">
                    <div class="inner">
                        <h3>{{ $totalZones ?? 0 }}</h3>
                        <p>إجمالي المناطق (نشط)</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-map-pin"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box bg-danger shadow-sm">
                    <div class="inner">
                        <h3>{{ $trashedCities ?? 0 }}</h3>
                        <p>مدن في سلة المحذوفات</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-trash-alt"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box bg-warning shadow-sm">
                    <div class="inner">
                        <h3 class="text-white">{{ $trashedZones ?? 0 }}</h3>
                        <p class="text-white">مناطق في سلة المحذوفات</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-trash"></i>
                    </div>
                </div>
            </div>
        </div>
        <!-- Search and Filters -->
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-body bg-light rounded">
                <form method="GET" action="{{ route('tblZones.index') }}">
                    <div class="row align-items-end">
                        <div class="col-md-3 mb-2">
                            <label class="text-muted font-weight-bold">حالة العرض</label>
                            <select name="status" class="form-control" onchange="this.form.submit()">
                                <option value="active" {{ ($status ?? 'active') == 'active' ? 'selected' : '' }}>العناصر النشطة</option>
                                <option value="trashed" {{ ($status ?? 'active') == 'trashed' ? 'selected' : '' }}>المدن المحذوفة</option>
                                <option value="trashed_zones" {{ ($status ?? 'active') == 'trashed_zones' ? 'selected' : '' }}>المناطق المحذوفة (مستقلة)</option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-2">
                            <label class="text-muted font-weight-bold">ابحث باسم المدينة</label>
                            <input type="text" name="city_name" class="form-control" placeholder="اسم المدينة" value="{{ request('city_name') }}">
                        </div>
                        <div class="col-md-3 mb-2">
                            <label class="text-muted font-weight-bold">ابحث باسم المنطقة</label>
                            <input type="text" name="zone_name" class="form-control" placeholder="اسم المنطقة" value="{{ request('zone_name') }}">
                        </div>
                        <div class="col-md-3 mb-2">
                            <button class="btn btn-primary mr-1" type="submit">
                                <i class="fas fa-search"></i> بحث
                            </button>
                            <a href="{{ route('tblZones.index') }}" class="btn btn-secondary mr-1">
                                <i class="fas fa-sync"></i> إعادة ضبط
                            </a>
                            <div class="btn-group">
                                <a class="btn btn-outline-primary {{ request('sort', 'asc') == 'asc' ? 'active' : '' }}" href="{{ route('tblZones.index', array_merge(request()->query(), ['sort' => 'asc'])) }}" title="ترتيب أبجدي تصاعدي"><i class="fas fa-sort-alpha-down"></i></a>
                                <a class="btn btn-outline-primary {{ request('sort') == 'desc' ? 'active' : '' }}" href="{{ route('tblZones.index', array_merge(request()->query(), ['sort' => 'desc'])) }}" title="ترتيب أبجدي تنازلي"><i class="fas fa-sort-alpha-up"></i></a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<div class="content px-3">
    @include('flash::message')
    <div class="card shadow-sm border-0">
        <div class="card-header bg-white">
            <h3 class="card-title text-secondary font-weight-bold">
                <i class="fas fa-sitemap mr-1"></i> الهيكل التنظيمي للمدن والمناطق
                @if(($status ?? 'active') == 'trashed' || ($status ?? 'active') == 'trashed_zones')
                    <span class="badge badge-danger ml-2">سلة المحذوفات</span>
                @endif
            </h3>
        </div>
        <div class="card-body p-0">
            @if($cities->isEmpty())
                <div class="text-center py-5 text-muted">
                    <i class="fas fa-folder-open fa-3x mb-3 text-light"></i>
                    <h5>لا توجد بيانات تطابق بحثك</h5>
                </div>
            @else
                <div class="accordion" id="citiesAccordion">
                    @foreach($cities as $city)
                        @php
                            $isCityTrashed = $city->trashed();
                        @endphp
                        <div class="card mb-0 shadow-none border-bottom">
                            <div class="card-header bg-white d-flex justify-content-between align-items-center" id="heading{{ $city->id }}">
                                <h2 class="mb-0 w-100 d-flex justify-content-between align-items-center">
                                    <button class="btn btn-link text-dark font-weight-bold text-left d-flex align-items-center text-decoration-none" type="button" data-toggle="collapse" data-target="#collapse{{ $city->id }}" aria-expanded="true" aria-controls="collapse{{ $city->id }}" style="font-size: 1.1rem; width: 100%;">
                                        <i class="fas fa-chevron-down mr-2 text-muted" style="font-size: 0.8rem;"></i>
                                        <i class="fas fa-city text-primary mr-2"></i> 
                                        {{ $city->name }}
                                        <span class="badge badge-info badge-pill ml-3">{{ $city->tblZones->count() }} مناطق</span>
                                        @if($isCityTrashed)
                                            <span class="badge badge-danger ml-2"><i class="fas fa-trash"></i> محذوفة مؤقتاً</span>
                                        @endif
                                    </button>
                                    <div class="btn-group text-nowrap" dir="rtl">
                                        @if($isCityTrashed)
                                            <form action="{{ route('tblCities.restore', $city->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                <button type="submit" class="btn btn-sm btn-success ml-2" onclick="return confirm('هل أنت متأكد من استرداد المدينة؟')">
                                                    <i class="fas fa-undo"></i> استرداد المدينة
                                                </button>
                                            </form>
                                        @else
                                            <a href="{{ route('tblZones.editCity', ['city_id' => $city->id]) }}" class="btn btn-sm btn-outline-warning ml-2 rounded">
                                                <i class="fas fa-edit"></i> تعديل
                                            </a>
                                            <form action="{{ route('tblCities.destroy', $city->id) }}" method="POST" style="display:inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger rounded" onclick="return confirm('سيتم نقل المدينة ومناطقها إلى سلة المحذوفات. هل تريد الاستمرار؟')">
                                                    <i class="fas fa-trash"></i> حذف
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </h2>
                            </div>
                            <div id="collapse{{ $city->id }}" class="collapse {{ $loop->first && request('city_name') ? 'show' : '' }}" aria-labelledby="heading{{ $city->id }}" data-parent="#citiesAccordion">
                                <div class="card-body bg-light p-3 border-top">
                                    @if($city->tblZones->isEmpty())
                                        <p class="text-muted text-center mb-0 small">لا توجد مناطق مدرجة تحت هذه المدينة.</p>
                                    @else
                                        <div class="row" dir="rtl">
                                            @foreach($city->tblZones as $zone)
                                                @php
                                                    $isZoneTrashed = $zone->trashed();
                                                @endphp
                                                <div class="col-md-6 col-lg-4 mb-3">
                                                    <div class="card shadow-sm h-100 {{ $isZoneTrashed ? 'border-danger' : 'border-primary' }}" style="border-top: 3px solid; border-radius: 8px;">
                                                        <div class="card-body p-3 d-flex justify-content-between align-items-center">
                                                            <div>
                                                                <h6 class="mb-0 font-weight-bold text-dark">
                                                                    <i class="fas fa-map-marker-alt text-danger mr-1"></i> {{ $zone->name }}
                                                                </h6>
                                                                @if($isZoneTrashed)
                                                                    <small class="text-danger"><i class="fas fa-times-circle"></i> محذوفة مؤقتاً</small>
                                                                @endif
                                                            </div>
                                                            <div class="btn-group-vertical btn-group-sm text-nowrap">
                                                                @if($isZoneTrashed)
                                                                    <form action="{{ route('tblZones.restore', $zone->id) }}" method="POST">
                                                                        @csrf
                                                                        <button type="submit" class="btn btn-success btn-sm w-100" onclick="return confirm('هل أنت متأكد من استرداد المنطقة؟')">
                                                                            <i class="fas fa-undo"></i> استرداد
                                                                        </button>
                                                                    </form>
                                                                @else
                                                                    <a href="{{ route('tblZones.edit', ['tblZone' => $zone->id]) }}" class="btn btn-outline-warning btn-sm mb-1">
                                                                        <i class="fas fa-edit"></i> تعديل
                                                                    </a>
                                                                    <form action="{{ route('tblZones.destroy', $zone->id) }}" method="POST">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <button type="submit" class="btn btn-outline-danger btn-sm w-100" onclick="return confirm('هل أنت متأكد من نقل هذه المنطقة إلى سلة المحذوفات؟')">
                                                                            <i class="fas fa-trash"></i> حذف
                                                                        </button>
                                                                    </form>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</div>
@endsection