@extends('committee.layout.master')

@section('content')
    <div class="page-header mb-5">
        <h2 class="fw-bold text-dark border-bottom pb-3" 
            style="color: #1a3a5f; border-color: #d4af37 !important;">
            <i class="fas fa-chart-line me-2"></i>لوحة تحكم اللجنة
        </h2>
    </div>

    <!-- ====================================================================== -->
    <!-- SECTION: STATISTICS CARDS -->
    <!-- ====================================================================== -->
    <div class="row mb-5 g-4">
        <!-- CARD: ALL REQUESTS -->
        <div class="col-md-3">
            <div class="card text-white shadow rounded-3 border-0" 
                 style="background: linear-gradient(135deg, #1a3a5f, #2c5282); 
                        border-left: 4px solid #d4af37;">
                <div class="card-body position-relative">
                    <div class="position-absolute top-0 start-0 p-3" style="color: #d4af37; opacity: 0.0;">
                        <i class="fas fa-list-alt fa-2x"></i>
                    </div>
                    <h5 class="card-title fw-bold" style="color: #faf9f6ff;">
                        <i class="fas fa-list-alt me-2"></i>جميع الطلبات
                    </h5>
                    <p class="card-text display-5 fw-bold mb-0" style="color: #d4af37;">{{ $total }}</p>
                    <small class="d-block mt-1 opacity-75">إجمالي الطلبات المقدمة</small>
                </div>
            </div>
        </div>

        <!-- CARD: APPROVED -->
        <div class="col-md-3">
            <div class="card text-white shadow rounded-3 border-0" 
                 style="background: linear-gradient(135deg, #1a3a5f, #2c5282); 
                        border-left: 4px solid #d4af37;">
                <div class="card-body position-relative">
                    <div class="position-absolute top-0 start-0 p-2" style="color: #c79f1aff;opacity: 0.0; ">
                        <i class="fas fa-check-circle fa-2x"></i>
                    </div>
                    <h5 class="card-title fw-bold" style="color: #f7f6f3ff;">
                        <i class="fas fa-check-circle me-2"></i>الموافقة عليها
                    </h5>
                    <p class="card-text display-5 fw-bold mb-0" style="color: #d4af37;">{{ $approved }}</p>
                    <a href="{{ route('committee.licenses.status', 'approved') }}" 
                       class="btn btn-sm fw-bold mt-2" style="background: #d4af37; color: #1a3a5f;">
                        <i class="fas fa-eye me-1"></i> عرض التفاصيل
                    </a>
                </div>
            </div>
        </div>

        <!-- CARD: REJECTED -->
        <div class="col-md-3">
            <div class="card text-white shadow rounded-3 border-0" 
                 style="background: linear-gradient(135deg, #1a3a5f, #2c5282); 
                        border-left: 4px solid #d4af37;">
                <div class="card-body position-relative">
                    <div class="position-absolute" style="color: #0e0d0cff; opacity: 0.0;">
                        <i class="fas fa-times-circle fa-2x"></i>
                    </div>
                    <h5 class="card-title fw-bold" style="color: #f8f7f5ff;">
                        <i class="fas fa-times-circle me-2"></i>المرفوضة
                    </h5>
                    <p class="card-text display-5 fw-bold mb-0" style="color: #d4af37;">{{ $rejected }}</p>
                    <a href="{{ route('committee.licenses.status', 'rejected') }}" 
                       class="btn btn-sm fw-bold mt-2" style="background: #d4af37; color: #1a3a5f;">
                        <i class="fas fa-eye me-1"></i> عرض التفاصيل
                    </a>
                </div>
            </div>
        </div>

        <!-- CARD: UNDER REVIEW -->
        <div class="col-md-3">
            <div class="card text-white shadow rounded-3 border-0" 
                 style="background: linear-gradient(135deg, #1a3a5f, #2c5282); 
                        border-left: 4px solid #d4af37;">
                <div class="card-body position-relative">
                    <div class="position-absolute top-0 start-0 p-3" style="color: #d4af37; opacity: 0.0;">
                        <i class="fas fa-sync-alt fa-2x"></i>
                    </div>
                    <h5 class="card-title fw-bold" style="color: #fcfbf9ff;">
                        <i class="fas fa-sync-alt me-2"></i>قيد المراجعة
                    </h5>
                    <p class="card-text display-5 fw-bold mb-0" style="color: #d4af37;">{{ $under_review }}</p>
                    <a href="{{ route('committee.licenses.status', 'under_review') }}" 
                       class="btn btn-sm fw-bold mt-2" style="background: #d4af37; color: #1a3a5f;">
                        <i class="fas fa-eye me-1"></i> عرض التفاصيل
                    </a>
                </div>
            </div>
        </div>
    </div>


    <!-- ====================================================================== -->
    <!-- SECTION: GOVERNORATES LIST -->
    <!-- ====================================================================== -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="fw-bold text-dark" style="color: #1a3a5f;">
                    <i class="fas fa-map-marker-alt me-2"></i>قائمة المحافظات
                </h4>
                <span class="badge fs-6 p-2" style="background: #1a3a5f; color: #fff;">
                    عدد المحافظات: {{ $cities->count() }}
                </span>
            </div>
            
            <div class="row g-4">
                @forelse ($cities as $city)
                    <div class="col-md-4">
                        <div class="card shadow-sm text-center p-4 border-0 rounded-3 h-100" 
                             style="background: linear-gradient(to bottom, #f8f9fa, #e9ecef); 
                                    border-left: 4px solid #1a3a5f !important;">
                            <div class="city-icon mb-3">
                                <i class="fas fa-city fa-2x" style="color: #1a3a5f;"></i>
                            </div>
                            <h5 class="fw-bold mb-2" style="color: #1a3a5f;">{{ $city->name }}</h5>
                            <div class="city-meta d-flex justify-content-center gap-3">
                                
                             
                                <span class="badge fs-6 p-2" style="background: #2b6cb0;">
                                    <i class="fas fa-school me-1"></i> 
                                </span>
                            </div>
                        
                            <div class="mt-3">
                                <a href=" {{ route('committee.licenses.byCity', $city->id) }} " class="btn btn-sm fw-bold" 
                                   style="background: #1a035aff; color: #fff;">
                                    <i class="fas fa-eye me-1"></i> عرض التفاصيل
                                </a>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="alert alert-warning text-center p-4 fs-5 rounded-3">
                            <i class="fas fa-exclamation-triangle me-2"></i>لا توجد محافظات متاحة
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- ====================================================================== -->
    <!-- SECTION: RECENT REQUESTS TABLE -->
    <!-- ====================================================================== -->
    <!-- <div class="card shadow rounded-3 border-0 mt-5">
        <div class="card-header text-white py-3 rounded-top" 
             style="background: linear-gradient(to right, #1a3a5f, #2c5282);">
            <h5 class="mb-0 fw-bold">
                <i class="fas fa-file-alt me-2"></i>آخر طلبات الترخيص
            </h5>
        </div> -->
        
        <!-- <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover m-0 text-center align-middle">
                    <thead style="background: linear-gradient(to right, #edf2f7, #e2e8f0);">
                        <tr>
                            <th class="py-3 fw-bold border-bottom">الرقم</th>
                            <th class="py-3 fw-bold border-bottom">اسم الفرع</th>
                            <th class="py-3 fw-bold border-bottom">اسم المدرسة</th>
                            <th class="py-3 fw-bold border-bottom">الحالة</th>
                            <th class="py-3 fw-bold border-bottom">ملاحظات</th>
                            <th class="py-3 fw-bold border-bottom">الإجراءات</th>
                        </tr>
                    </thead>
                    
                    <tbody>
                        @foreach ($recent_licenses as $license)
                            <tr class="border-bottom">
                                <td class="py-3 fw-semibold">{{ $loop->iteration }}</td>
                                <td class="py-3">{{ $license->branch->name ?? 'غير معروف' }}</td>
                                <td class="py-3">{{ $license->branch->school->school_name ?? 'غير معروف' }}</td>
                                <td class="py-3">
                                    @switch($license->status)
                                        @case('under_review')
                                            <span class="badge rounded-pill py-2 px-3 fw-bold" 
                                                  style="background: linear-gradient(135deg, #d69e2e, #ecc94b); color: #000;">
                                                <i class="fas fa-sync-alt me-1"></i> قيد المراجعة
                                            </span>
                                        @break
                                        @case('approved')
                                            <span class="badge rounded-pill py-2 px-3 fw-bold" 
                                                  style="background: linear-gradient(135deg, #2d7d46, #38a169);">
                                                <i class="fas fa-check-circle me-1"></i> تمت الموافقة
                                            </span>
                                        @break
                                        @case('rejected')
                                            <span class="badge rounded-pill py-2 px-3 fw-bold" 
                                                  style="background: linear-gradient(135deg, #c53030, #e53e3e);">
                                                <i class="fas fa-times-circle me-1"></i> مرفوض
                                            </span>
                                        @break
                                        @default
                                            <span class="badge rounded-pill py-2 px-3 fw-bold" 
                                                  style="background: #718096;">
                                                <i class="fas fa-question-circle me-1"></i> غير معروف
                                            </span>
                                    @endswitch
                                </td>
                                <td class="py-3">
                                    @if($license->note)
                                        <span class="d-inline-block text-truncate" style="max-width: 150px;">
                                            {{ $license->note }}
                                        </span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td class="py-3">
                                    <div class="d-flex justify-content-center gap-2">
                                        <a href="{{ route('committee.licenses.show', $license->id) }}" 
                                           class="btn btn-sm fw-bold"
                                           style="background: #2b6cb0; color: #fff;"
                                           title="عرض التفاصيل">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('committee.licenses.add', $license->id) }}" 
                                           class="btn btn-sm fw-bold"
                                           style="background: #38a169; color: #fff;"
                                           title="التفاصيل الإضافية">
                                            <i class="fas fa-info-circle"></i>
                                        </a>
                                        <a href="{{ route('committee.licenses.edit', $license->id) }}" 
                                           class="btn btn-sm fw-bold"
                                           style="background: #d69e2e; color: #fff;"
                                           title="تعديل الطلب">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div> -->
        
        <div class="card-footer bg-light py-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <a href="{{ route('committee.licenses.index') }}" 
                       class="btn fw-bold"
                       style="background: #1a3a5f; color: #fff;">
                        <i class="fas fa-list me-1"></i> عرض جميع الطلبات
                    </a>
                </div>
                <div>
             
                </div>
            </div>
        </div>
    </div>
</div>


@endsection