@extends('school.layouts.app')

@section('content')
<div class="max-w-7xl mx-auto space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-slate-800">Admissions Reports</h1>
            <p class="text-sm text-slate-500 mt-1">Generate comprehensive reports for Enquiries, Registrations & Admissions</p>
        </div>
        <div class="flex gap-2">
            @php
                $exportParams = request()->all(); // Get all current filter params
                $exportParams['type'] = 'pdf';    // Add type as route param
            @endphp
            <a href="{{ route('school.admissions.export', $exportParams) }}" 
            class="inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-xl font-bold text-sm hover:bg-red-700 transition-all shadow-lg shadow-red-200">
                <i class="fa-solid fa-file-pdf"></i> PDF
            </a>

            @php
                $exportParams['type'] = 'excel';
            @endphp
            <a href="{{ route('school.admissions.export', $exportParams) }}" 
            class="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 text-white rounded-xl font-bold text-sm hover:bg-emerald-700 transition-all shadow-lg shadow-emerald-200">
                <i class="fa-solid fa-file-excel"></i> Excel
            </a>
        </div>

    </div>

    <!-- Top Filter Bar -->
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-5">
        <!-- Added overflow-x-auto to handle small screens, and flex-nowrap to keep one row -->
        <form id="reportFilterForm" class="flex flex-nowrap items-end gap-3 overflow-x-auto pb-2 scrollbar-hide">
            
            <!-- Report Type -->
            <div class="shrink-0 min-w-[160px]">
                <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Report Type</label>
                <select name="report_type" id="reportType" onchange="this.form.submit()" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none bg-white">
                    <option value="enquiry" {{ request('report_type') == 'enquiry' ? 'selected' : '' }}>Enquiry Report</option>
                    <option value="registration" {{ request('report_type') == 'registration' ? 'selected' : '' }}>Registration Report</option>
                    <option value="admission" {{ request('report_type') == 'admission' ? 'selected' : '' }}>Admission Report</option>
                </select>
            </div>

            <!-- Session -->
            <div class="shrink-0 min-w-[160px]">
                <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Session</label>
                <select name="session_id" onchange="this.form.submit()" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none bg-white">
                    <option value="" {{ (request()->has('session_id') && request('session_id') == '') ? 'selected' : '' }}>All Sessions</option>
                    @foreach($sessions as $session)
                        <option value="{{ $session->id }}" {{ (request('session_id') == $session->id || (!request()->has('session_id') && $session->is_current == 1)) ? 'selected' : '' }}>
                            {{ $session->session_name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Class -->
            <div class="shrink-0 min-w-[140px]">
                <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Class</label>
                <select name="class_filter" onchange="this.form.submit()" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none bg-white">
                    <option value="">All Classes</option>
                    @foreach($classes as $class)
                        <option value="{{ $class }}" {{ request('class_filter') == $class ? 'selected' : '' }}>{{ $class }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Gender -->
            <div class="shrink-0 min-w-[130px]">
                <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Gender</label>
                <select name="gender_filter" onchange="this.form.submit()" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none bg-white">
                    <option value="">All</option>
                    <option value="Male" {{ request('gender_filter') == 'Male' ? 'selected' : '' }}>Male</option>
                    <option value="Female" {{ request('gender_filter') == 'Female' ? 'selected' : '' }}>Female</option>
                    <option value="Other" {{ request('gender_filter') == 'Other' ? 'selected' : '' }}>Other</option>
                </select>
            </div>

            <!-- From Date -->
            <div class="shrink-0 min-w-[140px]">
                <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">From</label>
                <input type="date" name="date_from" value="{{ request('date_from') }}" onchange="this.form.submit()" onclick="this.showPicker()" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none cursor-pointer">
            </div>

            <!-- To Date -->
            <div class="shrink-0 min-w-[140px]">
                <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">To</label>
                <input type="date" name="date_to" value="{{ request('date_to') }}" onchange="this.form.submit()" onclick="this.showPicker()" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none cursor-pointer">
            </div>

            <!-- Reset Button -->
            <div class="shrink-0">
                <a href="{{ route('school.admissions.report') }}" class="px-4 py-2 bg-slate-100 text-slate-600 rounded-lg font-bold text-sm hover:bg-slate-200 transition-all border border-slate-200">
                    <i class="fa-solid fa-rotate-left"></i>
                </a>
            </div>
        </form>
</div>  


    <!-- Summary Count Tabs -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-2xl p-5 text-white shadow-lg shadow-indigo-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[11px] font-bold uppercase opacity-80">Total Records</p>
                    <p class="text-3xl font-bold mt-1">{{ $summary['total'] ?? 0 }}</p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center backdrop-blur-sm">
                    <i class="fa-solid fa-users text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl p-5 text-white shadow-lg shadow-blue-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[11px] font-bold uppercase opacity-80">Male Students</p>
                    <p class="text-3xl font-bold mt-1">{{ $summary['male'] ?? 0 }}</p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center backdrop-blur-sm">
                    <i class="fa-solid fa-mars text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-gradient-to-br from-pink-500 to-pink-600 rounded-2xl p-5 text-white shadow-lg shadow-pink-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[11px] font-bold uppercase opacity-80">Female Students</p>
                    <p class="text-3xl font-bold mt-1">{{ $summary['female'] ?? 0 }}</p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center backdrop-blur-sm">
                    <i class="fa-solid fa-venus text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-2xl p-5 text-white shadow-lg shadow-emerald-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[11px] font-bold uppercase opacity-80">This Month</p>
                    <p class="text-3xl font-bold mt-1">{{ $summary['this_month'] ?? 0 }}</p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center backdrop-blur-sm">
                    <i class="fa-solid fa-calendar-check text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Status Distribution -->
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
            <h3 class="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
                <i class="fa-solid fa-chart-pie text-indigo-500"></i> Status Distribution
            </h3>
            <div class="relative h-64">
                <canvas id="statusChart"></canvas>
            </div>
        </div>
        <!-- Class Distribution -->
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
            <h3 class="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
                <i class="fa-solid fa-chart-column text-indigo-500"></i> Class-wise Count
            </h3>
            <div class="relative h-64">
                <canvas id="classChart"></canvas>
            </div>
        </div>
        <!-- Gender Distribution -->
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
            <h3 class="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
                <i class="fa-solid fa-chart-simple text-indigo-500"></i> Gender Ratio
            </h3>
            <div class="relative h-64">
                <canvas id="genderChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Source Breakdown (Enquiry Only) -->
    @if(request('report_type') == 'enquiry' && isset($sourceBreakdown) && count($sourceBreakdown) > 0)
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
        <h3 class="text-sm font-bold text-slate-700 mb-4 flex items-center gap-2">
            <i class="fa-solid fa-bullseye text-indigo-500"></i> Enquiry Source Breakdown
        </h3>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            @foreach($sourceBreakdown as $source => $count)
            <div class="bg-gradient-to-br from-slate-50 to-slate-100 rounded-xl p-4 text-center border border-slate-200 hover:border-indigo-300 transition-all">
                <p class="text-2xl font-bold text-indigo-600">{{ $count }}</p>
                <p class="text-[11px] font-bold text-slate-500 uppercase mt-1">{{ $source }}</p>
            </div>
            @endforeach
        </div>
    </div>
    @endif

   <!-- Data Table -->
<div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
    <div class="bg-slate-50 px-6 py-4 border-b border-slate-200 flex items-center justify-between">
        <!-- Left Side: Title -->
        <h2 class="text-sm font-bold text-slate-700 flex items-center gap-2">
            <i class="fa-solid fa-table-list text-indigo-500"></i>
            {{ ucfirst(request('report_type', 'enquiry')) }} Records
        </h2>

        <!-- Right Side: Controls -->
        <div class="flex items-center gap-3">
            <!-- Per Page Dropdown (Optimized) -->
            <div class="flex items-center gap-2">
                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Show</span>
                <select name="per_page" onchange="this.form.submit()" 
                    class="px-2 py-1 rounded-lg border border-slate-200 text-xs focus:ring-2 focus:ring-indigo-500 outline-none bg-white cursor-pointer font-medium text-slate-600">
                    <option value="25" {{ request('per_page') == '25' ? 'selected' : '' }}>25</option>
                    <option value="50" {{ request('per_page') == '50' ? 'selected' : '' }}>50</option>
                    <option value="100" {{ request('per_page') == '100' ? 'selected' : '' }}>100</option>
                </select>
            </div>

            <!-- Total Count Pill -->
            <span class="text-xs font-bold text-slate-500 bg-white px-3 py-1 rounded-full border border-slate-200 shadow-sm">
                Total: {{ $records->total() ?? 0 }}
            </span>
        </div>
    </div>
    
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-slate-50 text-[11px] font-bold text-slate-500 uppercase tracking-wider">
                    <tr>
                        <th class="px-4 py-3 text-left w-16">#</th>
                        <th class="px-4 py-3 text-left">Student Name</th>
                        <th class="px-4 py-3 text-left">Father Name</th>
                        <th class="px-4 py-3 text-left">Class</th>
                        <th class="px-4 py-3 text-center w-20">Gender</th>
                        <th class="px-4 py-3 text-left">Contact</th>
                        @if(request('report_type') == 'enquiry')
                            <th class="px-4 py-3 text-left">Source</th>
                            <th class="px-4 py-3 text-center w-24">Status</th>
                        @elseif(request('report_type') == 'registration')
                            <th class="px-4 py-3 text-left">Reg. No</th>
                            <th class="px-4 py-3 text-center w-24">Status</th>
                        @elseif(request('report_type') == 'admission')
                            <th class="px-4 py-3 text-left">Adm. No</th>
                            <th class="px-4 py-3 text-left">Section</th>
                        @endif
                        <th class="px-4 py-3 text-left w-28">Date</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($records as $index => $record)
                    <tr class="hover:bg-slate-50 transition-colors">
                        <td class="px-4 py-3 text-slate-400 font-mono text-xs">{{ $records->firstItem() + $index }}</td>
                        <td class="px-4 py-3 font-semibold text-slate-700">{{ $record->student_name }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $record->father_name }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $record->seeking_class }}</td>
                        <td class="px-4 py-3 text-center">
                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-bold {{ $record->gender == 'Male' ? 'bg-blue-100 text-blue-700' : ($record->gender == 'Female' ? 'bg-pink-100 text-pink-700' : 'bg-slate-100 text-slate-700') }}">
                                {{ $record->gender }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-slate-600 font-mono text-xs">{{ $record->contact_number }}</td>
                        @if(request('report_type') == 'enquiry')
                            <td class="px-4 py-3 text-slate-600">{{ $record->enquiry_source }}</td>
                            <td class="px-4 py-3 text-center">
                                @php
                                    $status = $record->status;
                                    $badgeClass = 'bg-slate-100 text-slate-700'; // Default
                                    if($status == 'New') $badgeClass = 'bg-blue-100 text-blue-700';
                                    elseif($status == 'Registered') $badgeClass = 'bg-indigo-100 text-indigo-700';
                                    elseif($status == 'Admitted' || $status == 'Approved' || $status == 'Active') $badgeClass = 'bg-emerald-100 text-emerald-700';
                                    elseif($status == 'Pending') $badgeClass = 'bg-amber-100 text-amber-700';
                                    elseif($status == 'Rejected') $badgeClass = 'bg-red-100 text-red-700';
                                    elseif($status == 'Follow-up' || str_contains($status, 'Follow-up')) $badgeClass = 'bg-purple-100 text-purple-700';
                                @endphp
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold {{ $badgeClass }}">
                                    {{ $status }}
                                </span>
                            </td>

                        @elseif(request('report_type') == 'registration')
                            <td class="px-4 py-3 font-mono text-slate-600 text-xs">{{ $record->registration_no }}</td>
                            <td class="px-4 py-3 text-center">
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-bold {{ $record->status == 'Approved' ? 'bg-emerald-100 text-emerald-700' : ($record->status == 'Rejected' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700') }}">
                                    {{ $record->status }}
                                </span>
                            </td>
                        @elseif(request('report_type') == 'admission')
                            <td class="px-4 py-3 font-mono text-slate-600 text-xs">{{ $record->admission_no }}</td>
                            <td class="px-4 py-3 text-slate-600">{{ $record->section }}</td>
                        @endif
                        <td class="px-4 py-3 text-slate-500 text-xs font-mono">
                            @if(request('report_type') == 'admission')
                                {{ $record->joining_date ? \Carbon\Carbon::parse($record->joining_date)->format('d M Y') : 'N/A' }}
                            @elseif(request('report_type') == 'registration')
                                {{ $record->registration_date ? \Carbon\Carbon::parse($record->registration_date)->format('d M Y') : 'N/A' }}
                            @else
                                {{ $record->created_at ? \Carbon\Carbon::parse($record->created_at)->format('d M Y') : 'N/A' }}
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="px-4 py-12 text-center text-slate-400">
                            <div class="flex flex-col items-center gap-2">
                                <i class="fa-solid fa-inbox text-4xl text-slate-300"></i>
                                <p class="font-medium">No records found for selected filters</p>
                                <p class="text-xs">Try adjusting your filter criteria</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($records->hasPages())
        <div class="px-6 py-4 border-t border-slate-200 bg-slate-50">
            {{ $records->appends(request()->all())->links() }}
        </div>
        @endif
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Chart.js defaults
    Chart.defaults.font.family = "'Inter', sans-serif";
    Chart.defaults.font.size = 11;
    Chart.defaults.color = '#64748b';

    // Status Distribution - Doughnut
    const statusCtx = document.getElementById('statusChart').getContext('2d');
    new Chart(statusCtx, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode(array_keys($statusBreakdown ?? [])) !!},
            datasets: [{
                data: {!! json_encode(array_values($statusBreakdown ?? [])) !!},
                backgroundColor: ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#64748b'],
                borderWidth: 2,
                borderColor: '#ffffff',
                hoverOffset: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '65%',
            plugins: {
                legend: { 
                    position: 'bottom', 
                    labels: { 
                        padding: 15, 
                        usePointStyle: true,
                        pointStyle: 'circle',
                        font: { size: 11 }
                    } 
                }
            }
        }
    });

    // Class Distribution - Bar (Fixed height)
    const classCtx = document.getElementById('classChart').getContext('2d');
    new Chart(classCtx, {
        type: 'bar',
        data: {
            labels: {!! json_encode(array_keys($classBreakdown ?? [])) !!},
            datasets: [{
                label: 'Students',
                data: {!! json_encode(array_values($classBreakdown ?? [])) !!},
                backgroundColor: '#6366f1',
                borderRadius: 6,
                borderSkipped: false,
                barThickness: 24,
                maxBarThickness: 32
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { 
                legend: { display: false },
                tooltip: {
                    backgroundColor: '#1e293b',
                    padding: 10,
                    cornerRadius: 8,
                    displayColors: false
                }
            },
            scales: {
                y: { 
                    beginAtZero: true, 
                    ticks: { stepSize: 1, precision: 0 },
                    grid: { color: '#f1f5f9' }
                },
                x: { 
                    grid: { display: false },
                    ticks: { font: { size: 10 } }
                }
            }
        }
    });

    // Gender Ratio - Bar
    const genderCtx = document.getElementById('genderChart').getContext('2d');
    new Chart(genderCtx, {
        type: 'bar',
        data: {
            labels: ['Male', 'Female', 'Other'],
            datasets: [{
                label: 'Count',
                data: [
                    {{ $summary['male'] ?? 0 }}, 
                    {{ $summary['female'] ?? 0 }}, 
                    {{ ($summary['total'] ?? 0) - ($summary['male'] ?? 0) - ($summary['female'] ?? 0) }}
                ],
                backgroundColor: ['#3b82f6', '#ec4899', '#94a3b8'],
                borderRadius: 8,
                borderSkipped: false,
                barThickness: 40
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { 
                legend: { display: false },
                tooltip: {
                    backgroundColor: '#1e293b',
                    padding: 10,
                    cornerRadius: 8
                }
            },
            scales: {
                y: { 
                    beginAtZero: true, 
                    ticks: { stepSize: 1, precision: 0 },
                    grid: { color: '#f1f5f9' }
                },
                x: { grid: { display: false } }
            }
        }
    });
</script>

<style>
    @media print {
        .shadow-lg, .shadow-sm, .shadow-md { box-shadow: none !important; }
        .bg-gradient-to-br { background: #f8fafc !important; color: #1e293b !important; }
        .print:hidden { display: none !important; }
        .max-w-7xl { max-width: 100% !important; }
        canvas { max-height: 200px !important; }
    }
</style>
@endsection