@extends('layouts.app')
@section('title', 'لوحة التحكم')
@section('content')
<style>
    .bg-label-info { background-color: #e1f5fe; color: #01579b; }
    .bg-label-success { background-color: #e8f5e9; color: #2e7d32; }
    .extra-small { font-size: 0.7rem; }
</style>
@if($hasActiveYear && $hasChurches)
<div class="container-fluid py-4" dir="rtl">

    {{-- رأس الصفحة والفلتر --}}
    <div class="row mb-4 align-items-center">
        <div class="col-md-6 text-right">
            <h2 class="h3 mb-0 text-gray-800 fw-bold">لوحة تحكم المنظومة</h2>
            <p class="text-muted small" id="active_church_name">
                عرض إحصائيات: {{ request('church_id') && request('church_id') != 'all' && isset($churches) && ($selectedChurch = $churches->firstWhere('id', request('church_id'))) ? $selectedChurch->name . ' (' . $selectedChurch->address . ')' : 'كل الكنائس المتاحة' }}
            </p>
        </div>

        <div class="col-md-6">
            <div class="d-flex justify-content-md-end align-items-center mt-2 mt-md-0">
                <select name="church_id" id="church_filter" class="form-select" style="max-width: 100%;">
                    @if(auth()->user()->hasRole('Super Admin') || auth()->user()->hasRole('Admin') || auth()->user()->can('view_all_churches') || $churches->count() > 1)
                        <option value="all" {{ !request('church_id') || request('church_id') == 'all' ? 'selected' : '' }}>كل الكنائس</option>
                    @endif
                    
                    @foreach($churches as $church)
                        <option value="{{ $church->id }}" {{ request('church_id') == $church->id ? 'selected' : '' }}>
                            {{ $church->name . ' (' . $church->address . ')' ?? '' }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    {{-- قسم الكروت السريعة (Quick Stats) --}}
    <div class="row g-2 mb-4"> {{-- تم تقليل المسافات لـ g-2 ليعطي مظهراً ملموماً --}}
    
        <div class="col-lg-2 col-md-4 col-6">
            <a href="{{ route('students.index', ['church_id' => request('church_id')]) }}" class="text-decoration-none h-100 d-block">
                <div class="card border-0 shadow-sm text-white h-100" style="background: linear-gradient(45deg, #4e73df, #224abe); transition: transform 0.2s ease-in-out;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
                    <div class="card-body p-2 d-flex flex-column justify-content-between" style="min-height: 95px;">
                        
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-white-50 small mb-0" style="font-size: 0.75rem;">إجمالي الطلاب</h6>
                                <h4 class="fw-bold mb-0 mt-1">{{ $stats['total_students'] ?? 0 }}</h4>
                            </div>
                            <div class="fs-3 opacity-25">
                                <i class="fas fa-user-graduate"></i>
                            </div>
                        </div>

                        <div class="pt-1 mt-1 d-flex justify-content-around align-items-center" style="font-size: 0.68rem; border-top: 1px solid rgba(255, 255, 255, 0.15); opacity: 0.9;">
                            <div>
                                <span class="text-white-50">مركزي:</span> 
                                <strong class="text-white fw-bold">{{ $stats['registered_students'] ?? 0 }}</strong>
                            </div>
                            <div>
                                <span class="text-white-50">غير مسجل:</span> 
                                <strong class="text-white fw-bold">{{ $stats['unregistered_students'] ?? 0 }}</strong>
                            </div>
                        </div>

                    </div>
                </div>
            </a>
        </div>

        <div class="col-lg-2 col-md-4 col-6">
            <div class="card border-0 shadow-sm bg-white h-100 border-top border-3 border-info">
                <div class="card-body p-2 d-flex flex-column justify-content-center" style="min-height: 85px;">
                    <h6 class="text-muted small mb-1 text-center" style="font-size: 0.75rem;">توزيع النوع</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="text-center w-50 border-end">
                            <div class="fw-bold text-info h5 mb-0">{{ $stats['males_count'] ?? 0 }}</div>
                            <small class="text-muted" style="font-size: 0.65rem;">ذكر</small>
                        </div>
                        <div class="text-center w-50">
                            <div class="fw-bold text-danger h5 mb-0">{{ $stats['females_count'] ?? 0 }}</div>
                            <small class="text-muted" style="font-size: 0.65rem;">أنثى</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-2 col-md-4 col-6">
            <a href="{{ route('students.archive', ['church_id' => request('church_id')]) }}" class="text-decoration-none h-100 d-block">
                <div class="card border-0 shadow-sm text-white h-100" style="background-color: #5a5c69; transition: transform 0.2s ease-in-out;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
                    <div class="card-body p-2 d-flex flex-column justify-content-center" style="min-height: 85px;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-white-50 small mb-0" style="font-size: 0.75rem;">في الأرشيف</h6>
                                <h4 class="fw-bold mb-0 mt-1">{{ $stats['archive_count'] ?? 0 }}</h4>
                            </div>
                            <div class="fs-3 opacity-25">
                                <i class="fas fa-box-archive"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-lg-2 col-md-4 col-6">
            <div class="card border-0 shadow-sm h-100 border-start border-danger border-4 bg-white">
                <div class="card-body p-2 d-flex flex-column justify-content-center" style="min-height: 85px;">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-danger fw-bold small mb-0" style="font-size: 0.75rem;">الخصومات</h6>
                            <h4 class="fw-bold text-danger mb-0 mt-1">{{ $stats['discount_percent'] ?? 0 }}%</h4>
                        </div>
                        <div class="text-danger opacity-25 fs-3">
                            <i class="fas fa-tags"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-2 col-md-4 col-6">
            <div class="card border-0 shadow-sm h-100 border-top border-3 border-success bg-white">
                <div class="card-body p-2 d-flex flex-column justify-content-center" style="min-height: 85px;">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-success fw-bold small mb-0" style="font-size: 0.75rem;">طلاب (آخر ٧ أيام)</h6>
                            <h4 class="fw-bold text-success mb-0 mt-1">{{ $stats['new_students_7_days'] ?? 0 }}</h4>
                        </div>
                        <div class="text-success opacity-25 fs-3">
                            <i class="fas fa-user-plus"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-2 col-md-4 col-6">
            <div class="card border-0 shadow-sm h-100 border-top border-3 border-warning bg-white">
                <div class="card-body p-2 d-flex flex-column justify-content-center" style="min-height: 85px;">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-warning fw-bold small mb-0" style="font-size: 0.75rem;">مدرسين (آخر ٧ أيام)</h6>
                            <h4 class="fw-bold text-warning mb-0 mt-1">{{ $stats['new_teachers_7_days'] ?? 0 }}</h4>
                        </div>
                        <div class="text-warning opacity-25 fs-3">
                            <i class="fas fa-chalkboard-teacher"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    {{-- بداية الأكورديون --}}
    <div class="accordion shadow-sm" id="mainDashboardAccordion">

        {{-- 1. تفاصيل أنواع المدارس --}}
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSchools">
                    <i class="fas fa-school ms-2 text-primary"></i> تفاصيل أنواع المدارس والتعليم
                </button>
            </h2>
            <div id="collapseSchools" class="accordion-collapse collapse" data-bs-parent="#mainDashboardAccordion">
                <div class="accordion-body bg-light">
                    <div class="row g-3">
                        @php
                            $school_mapping = [
                                'حكومة عربي' => ['key' => 'school_public', 'icon' => 'fa-university', 'color' => 'text-primary'],
                                'حكومة تجريبي' => ['key' => 'school_private', 'icon' => 'fa-flask', 'color' => 'text-info'],
                                'خاص عربي' => ['key' => 'school_experimental', 'icon' => 'fa-building', 'color' => 'text-success'],
                                'خاص تجريبي' => ['key' => 'school_languages', 'icon' => 'fa-language', 'color' => 'text-warning']
                            ];
                        @endphp

                        @forelse($school_mapping as $label => $data)
                        <div class="col-md-3 col-6">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-body p-3">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <i class="fas {{ $data['icon'] }} {{ $data['color'] }} fs-4"></i>
                                        </div>
                                        <div class="flex-grow-1 me-3 text-end">
                                            <small class="text-muted d-block small">{{ $label }}</small>
                                            <h5 class="fw-bold mb-0">{{ $stats[$data['key']] ?? 0 }}</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="col-md-3 col-6">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-body p-3">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <i class="fas fa-university text-primary fs-4"></i>
                                        </div>
                                        <div class="flex-grow-1 me-3 text-end">
                                            <small class="text-muted d-block small">حكومة عربي</small>
                                            <h5 class="fw-bold mb-0">0</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        {{-- 2. تفاصيل المراحل الدراسية --}}
        <div class="accordion-item border-top-0">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStages">
                    <i class="fas fa-layer-group ms-2 text-primary"></i> تفاصيل المراحل الدراسية (إحصائيات شاملة)
                </button>
            </h2>
            <div id="collapseStages" class="accordion-collapse collapse" data-bs-parent="#mainDashboardAccordion">
                <div class="accordion-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0 text-right">
                            <thead class="table-dark">
                                <tr>
                                    <th class="ps-3">المرحلة</th>
                                    <th class="text-center">العدد</th>
                                    <th class="text-center text-warning">إمتحن تأسيس</th>
                                    <th class="text-center d-none d-lg-table-cell">النوع (ذ/أ)</th>
                                    <th class="text-center d-none d-lg-table-cell">أرشيف / خصم</th>
                                    <th class="text-center d-none d-xl-table-cell">حكومة (ع/ت)</th>
                                    <th class="text-center d-none d-xl-table-cell">خاص (ع/ت)</th>
                                    <th class="text-center">إجراء</th>
                                </tr>
                            </thead>
                            <tbody>
                                @isset($stats['stages'])
                                    @forelse($stats['stages'] as $stage)
                                    <tr>
                                        <td class="ps-3">
                                            <div class="fw-bold text-primary">{{ $stage['name'] ?? ''}}</div>
                                            <small class="text-muted d-lg-none">انقر للبيانات</small>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge bg-primary rounded-pill px-3">{{ $stage['count'] ?? ''}}</span>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge bg-warning text-dark rounded-pill px-3 fw-bold">
                                                {{ $stage['placement_tests_count'] ?? 0 }}
                                            </span>
                                        </td>
                                        <td class="text-center d-none d-lg-table-cell">
                                            <span class="text-info">{{ $stage['males_count'] ?? ''}}</span> / 
                                            <span class="text-danger">{{ $stage['females_count'] ?? ''}}</span>
                                        </td>
                                        <td class="text-center d-none d-lg-table-cell">
                                            <span class="text-secondary small">{{ $stage['archive_count'] ?? ''}}</span>
                                            <span class="mx-1 text-muted">|</span>
                                            <span class="text-danger fw-bold small">{{ $stage['discount_count'] ?? ''}}</span>
                                        </td>
                                        <td class="text-center d-none d-xl-table-cell">
                                            <small class="fw-bold">{{ $stage['school_public'] ?? 0 }}</small> / <small>{{ $stage['school_private'] ?? 0 }}</small>
                                        </td>
                                        <td class="text-center d-none d-xl-table-cell">
                                            <small class="fw-bold text-success">{{ $stage['school_experimental'] ?? 0 }}</small> / <small>{{ $stage['school_languages'] ?? 0 }}</small>
                                        </td>
                                        <td class="text-center">
                                            <button class="btn btn-sm btn-light border shadow-sm px-3" data-bs-toggle="modal" data-bs-target="#stageModal{{ $loop->index }}">
                                                <i class="fas fa-chart-pie text-primary"></i>
                                            </button>
                                        </td>
                                    </tr>

                                    {{-- Modal التفاصيل المحدث --}}
                                    <div class="modal fade text-right" id="stageModal{{ $loop->index }}" tabindex="-1" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content border-0 shadow-lg">
                                                <div class="modal-header bg-primary text-white" dir="ltr">
                                                    <h5 class="modal-title fw-bold">إحصائيات: {{ $stage['name'] ?? ''}}</h5>
                                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body p-0">
                                                    <ul class="list-group list-group-flush">
                                                        <li class="list-group-item d-flex justify-content-between align-items-center py-3 bg-light-warning">
                                                            <span class="fw-bold"><i class="fas fa-file-signature ms-2 text-warning"></i>إمتحنوا التأسيس:</span>
                                                            <span class="badge bg-warning text-dark fs-6 px-3">
                                                                {{ $stage['placement_tests_count'] ?? 0 }} طالب
                                                            </span>
                                                        </li>
                                                        <li class="list-group-item d-flex justify-content-between align-items-center py-3">
                                                            <span>توزيع النوع:</span>
                                                            <span class="badge bg-light text-dark border p-2">
                                                                <span class="text-info">{{ $stage['males_count'] ?? ''}} ذكور</span> - 
                                                                <span class="text-danger">{{ $stage['females_count'] ?? ''}} إناث</span>
                                                            </span>
                                                        </li>
                                                        <li class="list-group-item d-flex justify-content-between align-items-center py-3">
                                                            <span>في الأرشيف:</span>
                                                            <strong class="text-secondary">{{ $stage['archive_count'] ?? ''}} طالب</strong>
                                                        </li>
                                                        <li class="list-group-item d-flex justify-content-between align-items-center py-3">
                                                            <span>عدد الخصومات:</span>
                                                            <div class="text-end">
                                                                <strong class="text-danger d-block">{{ $stage['discount_count'] ?? ''}} طالب</strong>
                                                                <small class="text-muted">نسبة: {{ $stage['discount_percent'] ?? ''}}%</small>
                                                            </div>
                                                        </li>
                                                        <li class="list-group-item bg-light fw-bold text-center py-2 small text-uppercase">تفاصيل المدارس</li>
                                                        <li class="list-group-item d-flex justify-content-between py-3">
                                                            <span>حكومة (عربي / تجريبي):</span>
                                                            <span class="fw-bold text-dark">
                                                                {{ $stage['school_public'] ?? 0 }} <small class="text-muted">/</small> {{ $stage['school_private'] ?? 0 }}
                                                            </span>
                                                        </li>
                                                        <li class="list-group-item d-flex justify-content-between py-3">
                                                            <span>خاص (عربي / تجريبي):</span>
                                                            <span class="fw-bold text-dark">
                                                                {{ $stage['school_experimental'] ?? 0 }} <small class="text-muted">/</small> {{ $stage['school_languages'] ?? 0 }}
                                                            </span>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="modal-footer bg-light py-2">
                                                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">إغلاق</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @empty
                                    <tr>
                                        <td colspan="8" class="text-center text-muted small py-3">لا توجد بيانات للمراحل</td>
                                    </tr>
                                    @endforelse
                                @endisset
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- 3. إحصائيات الشهر الحالي --}}
        <div class="accordion-item border-top-0">
            <h2 class="accordion-header">
                <button class="accordion-button fw-bold text-success bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMonthlyStats">
                    <i class="fas fa-calendar-check ms-2"></i> إحصائيات الشهر الحالي ({{ now()->translatedFormat('F Y') }})
                </button>
            </h2>
            <div id="collapseMonthlyStats" class="accordion-collapse collapse show" data-bs-parent="#mainDashboardAccordion">
                <div class="accordion-body bg-white">
                    
                    <div class="row g-2 mb-4">
                        <div class="col-md-4 col-12">
                            <div class="p-3 border rounded-3 bg-light d-flex align-items-center">
                                <div class="icon-box bg-white shadow-sm rounded-circle p-2 text-primary me-3" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-chalkboard-teacher"></i>
                                </div>
                                <div class="me-3">
                                    <small class="text-muted d-block">حصص تمت هذا الشهر</small>
                                    <span class="fw-bold h5 mb-0">{{ $stats['monthly_stats']['total_lessons'] ?? 0 }} حصة</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-6">
                            <div class="p-3 border rounded-3 bg-light d-flex align-items-center">
                                <div class="icon-box bg-white shadow-sm rounded-circle p-2 text-success me-3" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-user-check"></i>
                                </div>
                                <div class="me-3">
                                    <small class="text-muted d-block">متوسط الحضور</small>
                                    <span class="fw-bold h5 mb-0 text-success">{{ $stats['monthly_stats']['attendance_rate'] ?? 0 }}%</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-6">
                            <div class="p-3 border rounded-3 bg-light d-flex align-items-center">
                                <div class="icon-box bg-white shadow-sm rounded-circle p-2 text-warning me-3" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <div class="me-3">
                                    <small class="text-muted d-block">التزام المدرسين</small>
                                    <span class="fw-bold h5 mb-0 text-warning">{{ $stats['monthly_stats']['teacher_commitment'] ?? 0 }}%</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row g-4">
                        {{-- جدول أداء المجموعات --}}
                        <div class="col-lg-7">
                            <h6 class="fw-bold mb-3 small"><i class="fas fa-users-class me-1"></i> أداء المجموعات (الأكثر حضوراً)</h6>
                            <div class="table-responsive border rounded">
                                <table class="table table-sm table-hover align-middle mb-0 text-center">
                                    <thead class="bg-light">
                                        <tr class="extra-small">
                                            <th class="ps-3 py-2 text-end">المجموعة</th>
                                            <th class="py-2">الحضور</th>
                                            <th class="text-center py-2">نسبة</th>
                                        </tr>
                                    </thead>
                                    <tbody class="small">
                                        @if(isset($stats['monthly_stats']['top_groups']))
                                            @forelse($stats['monthly_stats']['top_groups'] as $group)
                                            <tr>
                                                <td class="ps-3 py-3 text-end">
                                                    <div class="fw-bold">{{ $group['name'] }}</div>
                                                    <div class="text-muted extra-small">{{ $group['teacher'] }}</div>
                                                </td>
                                                <td style="min-width: 80px;">
                                                    <div class="progress rounded-pill" style="height: 5px;">
                                                        <div class="progress-bar {{ $group['rate'] > 80 ? 'bg-success' : 'bg-primary' }}" style="width: {{ $group['rate'] }}%"></div>
                                                    </div>
                                                </td>
                                                <td class="text-center fw-bold">{{ $group['rate'] }}%</td>
                                            </tr>
                                            @empty
                                            <tr>
                                                <td colspan="3" class="text-muted py-3">لا توجد بيانات لهذا الشهر</td>
                                            </tr>
                                            @endforelse
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        {{-- نشاط المدرسين --}}
                        <div class="col-lg-5">
                            <h6 class="fw-bold mb-3 small"><i class="fas fa-star me-1 text-warning"></i> المدرسين الأكثر نشاطاً</h6>
                            <div class="list-group list-group-flush border rounded">
                                @if(isset($stats['monthly_stats']['active_teachers']))
                                    @forelse($stats['monthly_stats']['active_teachers'] as $teacher)
                                    <div class="list-group-item d-flex align-items-center py-3">
                                        <div class="avatar-circle text-info rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; min-width:35px; background-color: #e7f1ff;">
                                            <i class="fas fa-user-tie"></i>
                                        </div>
                                        <div class="flex-grow-1 overflow-hidden me-3 text-end">
                                            <div class="small fw-bold text-truncate">{{ $teacher['name'] }}</div>
                                            <div class="extra-small text-muted">{{ $teacher['groups_count'] }} مجموعة | {{ $teacher['lessons_count'] }} حصة</div>
                                        </div>
                                        <div class="ms-2">
                                            <span class="badge bg-light text-primary border rounded-pill small">
                                                {{ $teacher['lessons_count'] >= 10 ? 'نشط جداً' : 'منتظم' }}
                                            </span>
                                        </div>
                                    </div>
                                    @empty
                                    <div class="list-group-item text-center text-muted small">لا يوجد نشاط للمدرسين</div>
                                    @endforelse
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@else
<div class="container py-5 text-center">
    <div class="card border-0 shadow-sm mx-auto" style="max-width: 500px;">
        <div class="card-body">
            <div class="mb-3">
                <i class="fas fa-exclamation-triangle text-warning fs-1"></i>
            </div>
            <h4 class="card-title fw-bold mb-2">لا توجد بيانات لعرضها</h4>
            <p class="card-text text-muted mb-3">يبدو أنه لا يوجد سنة دراسية نشطة أو كنائس مرتبطة بحسابك. يرجى التواصل مع الإدارة لتحديث البيانات.</p>
        </div>
    </div>
</div>
@endif
<script>
    // كود جافا سكريبت فانيلا (Vanilla JS) نقي ومباشر
    var filterSelect = document.getElementById('church_filter');
    
    if (filterSelect) {
        filterSelect.addEventListener('change', function() {
            var selectedValue = this.value;
            var currentUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
            
            // إعادة التوجيه بالرابط المباشر لتحديث البيانات بشكل قطعي ومستقر
            if (selectedValue && selectedValue !== 'all') {
                window.location.href = currentUrl + '?church_id=' + selectedValue;
            } else {
                window.location.href = currentUrl;
            }
        });
    }
</script>
@endsection