@extends('admin.admin_dashboard')

@section('admin')
    <div class="content-body">
        <div class="container-fluid">
            <!-- Page Header -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="page-header">
                        <h3 class="page-title mb-0">Class-wise Student Statistics</h3>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                                <li class="breadcrumb-item"><a href="{{ route('admin.accounting.dashboard') }}">Accounting</a></li>
                                <li class="breadcrumb-item active">Class-wise Statistics</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

            <!-- Filter Card -->
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-white py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-filter me-2 text-primary"></i>
                            Filters
                        </h5>
                    </div>
                </div>
                <div class="card-body">
                    <form method="GET" action="{{ route('admin.accounting.student-statistics.classwise') }}" id="filterForm">
                        <div class="row g-3">
                            <!-- Session Filter -->
                            <div class="col-lg-6 col-md-6">
                                <label class="form-label fw-semibold">
                                    <i class="fas fa-calendar-alt me-1 text-muted"></i>Session
                                </label>
                                <select name="session_id" class="form-select">
                                    @foreach($sessions as $s)
                                        <option value="{{ $s->id }}" {{ request('session_id') == $s->id || (!request('session_id') && $s->is_current) ? 'selected' : '' }}>
                                            {{ $s->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Class Filter -->
                            <div class="col-lg-6 col-md-6">
                                <label class="form-label fw-semibold">
                                    <i class="fas fa-users me-1 text-muted"></i>Class
                                </label>
                                <select name="class_id" class="form-select">
                                    <option value="">All Classes</option>
                                    @foreach($classes as $c)
                                        <option value="{{ $c->id }}" {{ request('class_id') == $c->id ? 'selected' : '' }}>
                                            {{ $c->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <!-- Filter Actions -->
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="d-flex gap-2 justify-content-end">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-search me-1"></i>Apply Filters
                                    </button>
                                    <a href="{{ route('admin.accounting.student-statistics.classwise') }}" class="btn btn-outline-secondary">
                                        <i class="fas fa-refresh me-1"></i>Reset
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Session Info -->
            @if($selectedSessionData)
            <div class="alert alert-info mb-4">
                <i class="fas fa-info-circle me-2"></i>
                Showing statistics for: <strong>{{ $selectedSessionData->name }}</strong>
            </div>
            @endif

            <!-- Summary Cards -->
            <div class="row g-4 mb-4">
                @php
                    $totalAll = collect($classWiseData)->sum('total');
                    $totalNew = collect($classWiseData)->sum('new_admissions');
                    $totalReturning = collect($classWiseData)->sum('returning');
                    $totalPromoted = collect($classWiseData)->sum('promoted');
                @endphp

                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body text-center">
                            <div class="mb-3">
                                <div class="icon-circle bg-purple mx-auto">
                                    <i class="fas fa-users text-white"></i>
                                </div>
                            </div>
                            <h6 class="text-muted mb-2 fw-normal">Total Students</h6>
                            <h3 class="text-purple fw-bold mb-0">{{ number_format($totalAll) }}</h3>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body text-center">
                            <div class="mb-3">
                                <div class="icon-circle bg-success bg-opacity-10 mx-auto">
                                    <i class="fas fa-user-plus text-success"></i>
                                </div>
                            </div>
                            <h6 class="text-muted mb-2 fw-normal">New Admissions</h6>
                            <h3 class="text-success fw-bold mb-0">{{ number_format($totalNew) }}</h3>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body text-center">
                            <div class="mb-3">
                                <div class="icon-circle bg-warning bg-opacity-10 mx-auto">
                                    <i class="fas fa-redo-alt text-warning"></i>
                                </div>
                            </div>
                            <h6 class="text-muted mb-2 fw-normal">Returning Students</h6>
                            <h3 class="text-warning fw-bold mb-0">{{ number_format($totalReturning) }}</h3>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body text-center">
                            <div class="mb-3">
                                <div class="icon-circle bg-info bg-opacity-10 mx-auto">
                                    <i class="fas fa-level-up-alt text-info"></i>
                                </div>
                            </div>
                            <h6 class="text-muted mb-2 fw-normal">Promoted Students</h6>
                            <h3 class="text-info fw-bold mb-0">{{ number_format($totalPromoted) }}</h3>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Class-wise Data Table -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white py-3">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-table me-2 text-primary"></i>
                        Class-wise Breakdown
                    </h5>
                </div>

                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 50px;">#</th>
                                    <th>Class Name</th>
                                    <th class="text-center">Total Students</th>
                                    <th class="text-center">New Admissions</th>
                                    <th class="text-center">Returning Students</th>
                                    <th class="text-center">Promoted Students</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($classWiseData as $index => $data)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>
                                        <i class="fas fa-graduation-cap text-primary me-1"></i>
                                        <strong>{{ $data['class_name'] }}</strong>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-purple fs-6">{{ number_format($data['total']) }}</span>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-success fs-6">{{ number_format($data['new_admissions']) }}</span>
                                        @if($data['total'] > 0)
                                            <div class="small text-muted mt-1">
                                                {{ number_format(($data['new_admissions'] / $data['total']) * 100, 1) }}%
                                            </div>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-warning fs-6">{{ number_format($data['returning']) }}</span>
                                        @if($data['total'] > 0)
                                            <div class="small text-muted mt-1">
                                                {{ number_format(($data['returning'] / $data['total']) * 100, 1) }}%
                                            </div>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-info fs-6">{{ number_format($data['promoted']) }}</span>
                                        @if($data['total'] > 0)
                                            <div class="small text-muted mt-1">
                                                {{ number_format(($data['promoted'] / $data['total']) * 100, 1) }}%
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center py-4 text-muted">
                                        <i class="fas fa-inbox fa-3x mb-3 d-block"></i>
                                        No data available for the selected filters
                                    </td>
                                </tr>
                                @endforelse

                                @if(count($classWiseData) > 0)
                                <tr class="table-secondary fw-bold">
                                    <td colspan="2" class="text-end">Total:</td>
                                    <td class="text-center">
                                        <span class="badge bg-purple fs-6">{{ number_format($totalAll) }}</span>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-success fs-6">{{ number_format($totalNew) }}</span>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-warning fs-6">{{ number_format($totalReturning) }}</span>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-info fs-6">{{ number_format($totalPromoted) }}</span>
                                    </td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Custom Styles -->
    <style>
        .page-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1.5rem;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
        }

        .page-title {
            font-size: 1.75rem;
            font-weight: 600;
        }

        .breadcrumb {
            background: transparent;
            margin-bottom: 0;
        }

        .breadcrumb-item+.breadcrumb-item::before {
            color: rgba(255, 255, 255, 0.7);
        }

        .breadcrumb-item a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: white;
        }

        .icon-circle {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .card {
            transition: all 0.3s ease;
            border-radius: 0.75rem;
        }

        .card:hover {
            transform: translateY(-2px);
        }

        .form-label {
            font-size: 0.875rem;
            margin-bottom: 0.5rem;
        }

        .btn {
            border-radius: 0.5rem;
            font-weight: 500;
        }

        .shadow-sm {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
        }

        .badge {
            padding: 0.5rem 0.75rem;
        }

        .text-purple {
            color: #9333ea !important;
        }

        .bg-purple {
            background-color: #9333ea !important;
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .loading-overlay.active {
            display: flex;
        }

        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>

    <!-- Loading Overlay -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="spinner"></div>
    </div>

    <!-- JavaScript for AJAX Filtering -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const filterForm = document.getElementById('filterForm');
            const loadingOverlay = document.getElementById('loadingOverlay');

            // Handle form submission
            filterForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // Show loading overlay
                loadingOverlay.classList.add('active');
                
                // Get form data
                const formData = new FormData(filterForm);
                const params = new URLSearchParams(formData);
                
                // Make AJAX request
                fetch(`{{ route('admin.accounting.student-statistics.classwise') }}?${params.toString()}`, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                    }
                })
                .then(response => response.text())
                .then(html => {
                    // Parse the HTML response
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');
                    
                    // Update summary cards
                    const currentCards = document.querySelector('.row.g-4.mb-4');
                    const newCards = doc.querySelector('.row.g-4.mb-4');
                    if (currentCards && newCards) {
                        currentCards.innerHTML = newCards.innerHTML;
                    }
                    
                    // Update table
                    const currentTable = document.querySelector('.table-responsive');
                    const newTable = doc.querySelector('.table-responsive');
                    if (currentTable && newTable) {
                        currentTable.innerHTML = newTable.innerHTML;
                    }
                    
                    // Update session info alert
                    const currentAlert = document.querySelector('.alert.alert-info');
                    const newAlert = doc.querySelector('.alert.alert-info');
                    if (currentAlert && newAlert) {
                        currentAlert.innerHTML = newAlert.innerHTML;
                    } else if (currentAlert && !newAlert) {
                        currentAlert.remove();
                    } else if (!currentAlert && newAlert) {
                        const filterCard = document.querySelector('.card.mb-4.shadow-sm');
                        filterCard.insertAdjacentHTML('afterend', newAlert.outerHTML);
                    }
                    
                    // Update URL without page reload
                    const url = new URL(window.location);
                    url.search = params.toString();
                    window.history.pushState({}, '', url);
                    
                    // Hide loading overlay
                    loadingOverlay.classList.remove('active');
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred while filtering. Please try again.');
                    loadingOverlay.classList.remove('active');
                });
            });

            // Handle filter changes (auto-submit)
            const filterInputs = filterForm.querySelectorAll('select');
            filterInputs.forEach(input => {
                input.addEventListener('change', function() {
                    filterForm.dispatchEvent(new Event('submit'));
                });
            });

            // Handle reset button
            const resetBtn = filterForm.querySelector('a[href*="student-statistics.classwise"]');
            if (resetBtn) {
                resetBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // Clear form inputs
                    filterForm.reset();
                    
                    // Submit to load default data
                    filterForm.dispatchEvent(new Event('submit'));
                });
            }
        });
    </script>
@endsection