@extends('layouts.master')

@section('title', __('لوحة التحكم - وحدة التسجيل'))

@section('content')
    <script>
        window.dashboardData = {
            paymentRate: {{ $paymentRate }},
            monthlyRegistrations: @json($monthlyRegistrationsData),
            monthlyPayments: @json($monthlyPaymentsData),
            monthlyDue: @json($monthlyDueData)
        };
    </script>

    <div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
        <!-- Metric Cards Group -->
        <div class="grid grid-cols-1 gap-4 mb-6 sm:grid-cols-2 lg:grid-cols-4 md:gap-6">
            <!-- Metric Item 1: Total Students -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
                    <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                    </svg>
                </div>
                <div class="mt-4 flex items-end justify-between">
                    <div>
                        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">إجمالي الطلاب</span>
                        <h4 class="mt-1 text-2xl font-bold text-gray-800 dark:text-white">
                            {{ number_format($totalStudents) }}
                        </h4>
                    </div>
                    <span class="text-xs font-semibold px-2.5 py-1 rounded-full bg-blue-50 text-blue-600 dark:bg-blue-500/15 dark:text-blue-400">
                        {{ $totalColleges }} كليات
                    </span>
                </div>
            </div>

            <!-- Metric Item 2: Total Registrations -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 dark:bg-indigo-900/30 dark:text-indigo-400">
                    <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
                    </svg>
                </div>
                <div class="mt-4 flex items-end justify-between">
                    <div>
                        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">تسجيلات الفصول</span>
                        <h4 class="mt-1 text-2xl font-bold text-gray-800 dark:text-white">
                            {{ number_format($totalRegistrations) }}
                        </h4>
                    </div>
                    <span class="text-xs font-semibold px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400">
                        {{ $paidRegistrations }} مسدد
                    </span>
                </div>
            </div>

            <!-- Metric Item 3: Total Payments Amount -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400">
                    <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/>
                    </svg>
                </div>
                <div class="mt-4 flex items-end justify-between">
                    <div>
                        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">إجمالي التحصيلات</span>
                        <h4 class="mt-1 text-2xl font-bold text-emerald-600 dark:text-emerald-400">
                            {{ number_format($totalPaymentsAmount, 2) }} <span class="text-xs font-normal">جنيه</span>
                        </h4>
                    </div>
                </div>
            </div>

            <!-- Metric Item 4: Total Due Amount -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400">
                    <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
                    </svg>
                </div>
                <div class="mt-4 flex items-end justify-between">
                    <div>
                        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">الرسوم المتبقية</span>
                        <h4 class="mt-1 text-2xl font-bold text-amber-600 dark:text-amber-400">
                            {{ number_format($totalDueAmount, 2) }} <span class="text-xs font-normal">جنيه</span>
                        </h4>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-12 gap-4 md:gap-6">
            <!-- Chart One: Monthly Registrations -->
            <div class="col-span-12 lg:col-span-7">
                <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white px-5 pt-5 pb-4 dark:border-gray-800 dark:bg-white/[0.03] sm:px-6 sm:pt-6">
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
                                التسجيلات الشهرية
                            </h3>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">عدد الطلاب المسجلين شهرياً للعام الحالي</p>
                        </div>
                    </div>

                    <div class="max-w-full overflow-x-auto custom-scrollbar">
                        <div class="-ml-5 min-w-[650px] pl-2 lg:min-w-full">
                            <div id="chartOne" class="-ml-5 h-full min-w-[650px] pl-2 lg:min-w-full"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Chart Two: Payment Completion Rate -->
            <div class="col-span-12 lg:col-span-5">
                <div class="rounded-2xl border border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-white/[0.03]">
                    <div class="shadow-default rounded-2xl bg-white px-5 pb-6 pt-5 dark:bg-gray-900 sm:px-6 sm:pt-6">
                        <div class="flex justify-between">
                            <div>
                                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
                                    نسبة إكمال السداد
                                </h3>
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    معدل تسديد رسوم التسجيل للفصل الدراسي
                                </p>
                            </div>
                        </div>
                        <div class="relative max-h-[195px] my-2">
                            <div id="chartTwo" class="h-full"></div>
                            <span class="absolute left-1/2 top-[85%] -translate-x-1/2 -translate-y-[85%] rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400">
                                {{ $paymentRate }}%
                            </span>
                        </div>
                        <p class="mx-auto mt-3 w-full max-w-[380px] text-center text-xs text-gray-500 sm:text-sm">
                            تم سداد {{ $paidRegistrations }} عملية تسجيل بالكامل من أصل {{ $totalRegistrations }} تسجيل.
                        </p>
                    </div>

                    <div class="flex items-center justify-center gap-4 px-4 py-3 sm:gap-6 sm:py-4">
                        <div class="text-center">
                            <p class="mb-0.5 text-xs text-gray-500 dark:text-gray-400">المطلوب</p>
                            <p class="text-sm font-semibold text-gray-800 dark:text-white/90">
                                {{ number_format($totalPaymentsAmount + $totalDueAmount, 0) }}
                            </p>
                        </div>

                        <div class="h-6 w-px bg-gray-200 dark:bg-gray-800"></div>

                        <div class="text-center">
                            <p class="mb-0.5 text-xs text-gray-500 dark:text-gray-400">المحصل</p>
                            <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-400">
                                {{ number_format($totalPaymentsAmount, 0) }}
                            </p>
                        </div>

                        <div class="h-6 w-px bg-gray-200 dark:bg-gray-800"></div>

                        <div class="text-center">
                            <p class="mb-0.5 text-xs text-gray-500 dark:text-gray-400">المتبقي</p>
                            <p class="text-sm font-semibold text-amber-600 dark:text-amber-400">
                                {{ number_format($totalDueAmount, 0) }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Chart Three: Financial & Registration Statistics -->
            <div class="col-span-12">
                <div class="rounded-2xl border border-gray-200 bg-white px-5 pt-5 pb-5 sm:px-6 sm:pt-6 dark:border-gray-800 dark:bg-white/[0.03]">
                    <div class="mb-6 flex flex-col gap-2 sm:flex-row sm:justify-between sm:items-center">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
                                إحصائيات التحصيلات والمستحقات الشهرية
                            </h3>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                                مقارنة بين الإيرادات المحصلة والرسوم المتبقية عبر الأشهر
                            </p>
                        </div>
                    </div>
                    <div class="custom-scrollbar max-w-full overflow-x-auto">
                        <div id="chartThree" class="-ml-4 min-w-[700px] pl-2"></div>
                    </div>
                </div>
            </div>

            <!-- Recent Registrations Table -->
            <div class="col-span-12">
                <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white px-4 pb-3 pt-4 dark:border-gray-800 dark:bg-white/[0.03] sm:px-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
                            أحدث عمليات التسجيل
                        </h3>
                        <a href="{{ route('registrations.index') }}" class="inline-flex items-center gap-1 text-xs font-semibold text-blue-600 hover:text-blue-800 dark:text-blue-400">
                            عرض الكل &rarr;
                        </a>
                    </div>

                    <div class="w-full overflow-x-auto">
                        <table class="min-w-full text-right">
                            <thead>
                                <tr class="border-gray-100 border-y dark:border-gray-800 text-xs font-medium text-gray-500 dark:text-gray-400">
                                    <th class="py-3 px-2">اسم الطالب</th>
                                    <th class="py-3 px-2">الكلية / البرنامج</th>
                                    <th class="py-3 px-2">الفصل الدراسي</th>
                                    <th class="py-3 px-2">المبلغ المدفوع</th>
                                    <th class="py-3 px-2">المبلغ المتبقي</th>
                                    <th class="py-3 px-2">حالة السداد</th>
                                    <th class="py-3 px-2">تاريخ التسجيل</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 dark:divide-gray-800 text-sm">
                                @forelse($recentRegistrations as $reg)
                                    <tr>
                                        <td class="py-3 px-2">
                                            <div class="font-medium text-gray-800 dark:text-white/90">
                                                {{ $reg->student_name ?? $reg->student?->student_name ?? '—' }}
                                            </div>
                                            <span class="text-xs text-gray-400">#{{ $reg->student_id }}</span>
                                        </td>
                                        <td class="py-3 px-2 text-gray-600 dark:text-gray-300">
                                            <div>{{ $reg->student?->college?->college_name ?? '—' }}</div>
                                            <span class="text-xs text-gray-400">{{ $reg->student?->program?->program_name ?? '' }}</span>
                                        </td>
                                        <td class="py-3 px-2 text-gray-600 dark:text-gray-300">
                                            {{ $reg->semester?->semester_name ?? '—' }}
                                        </td>
                                        <td class="py-3 px-2 font-semibold text-emerald-600 dark:text-emerald-400">
                                            {{ number_format($reg->payment_amount, 2) }}
                                        </td>
                                        <td class="py-3 px-2 font-semibold text-amber-600 dark:text-amber-400">
                                            {{ number_format($reg->due_amount, 2) }}
                                        </td>
                                        <td class="py-3 px-2">
                                            @if($reg->is_paid)
                                                <span class="inline-flex rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400">
                                                    مسدد بالكامل
                                                </span>
                                            @elseif($reg->payment_amount > 0)
                                                <span class="inline-flex rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-semibold text-amber-600 dark:bg-amber-500/15 dark:text-amber-400">
                                                    سداد جزئي
                                                </span>
                                            @else
                                                <span class="inline-flex rounded-full bg-rose-50 px-2.5 py-0.5 text-xs font-semibold text-rose-600 dark:bg-rose-500/15 dark:text-rose-400">
                                                    غير مسدد
                                                </span>
                                            @endif
                                        </td>
                                        <td class="py-3 px-2 text-xs text-gray-500 dark:text-gray-400">
                                            {{ $reg->created_at ? $reg->created_at->format('Y-m-d') : '—' }}
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="py-6 text-center text-gray-400 text-sm">
                                            لا توجد عمليات تسجيل حتى الآن.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection