@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Students by Grade</x-page.header>
        @include('admin.errors.form-errors')
        <div class="row">
            <div class="col-12">
                <!-- Grade Navigation Buttons - Mobile Optimized -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-white border-bottom-0">
                        <h3 class="card-title mb-0">
                            <i class="fe fe-book me-2"></i>Select Grade
                        </h3>
                    </div>
                    <div class="card-body pt-0">
                        <div class="btn-group btn-group-sm btn-group-scroll" role="group" aria-label="Grade selection" style="overflow-x: auto; white-space: nowrap; display: block;">
                            @foreach([9, 10, 11, 12, 50] as $grade)
                                <button type="button" class="btn btn-outline-primary grade-btn d-inline-block @if($loop->first) active @endif" data-grade="{{ $grade }}">
                                    <i class="fe fe-book me-1"></i>
                                    <span class="d-none d-sm-inline">
                                        {{ $grade == 50 ? 'Graduated' : 'Grade ' . $grade }}
                                    </span>
                                </button>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Students List -->
                <div class="card shadow-sm">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center border-bottom-0 flex-wrap">
                        <h3 class="card-title mb-2 mb-md-0">
                            <i class="fe fe-users me-2"></i><span class="d-none d-md-inline">Students</span> List
                        </h3>
                        <div class="card-options">
                            <button type="button" class="btn btn-sm btn-outline-info" id="refreshBtn" title="Refresh data" data-bs-toggle="tooltip">
                                <i class="fe fe-refresh-cw"></i><span class="d-none d-sm-inline ms-1">Refresh</span>
                            </button>
                        </div>
                    </div>
                    <div class="card-body pt-0">
                        <!-- Enhanced Mobile-Friendly Search Box -->
                        <div class="mb-3 mb-md-4">
                            <div class="input-group input-group-lg">
                                <span class="input-group-text bg-white border-end-0">
                                    <i class="fe fe-search text-muted"></i>
                                </span>
                                <input type="text"
                                    id="studentSearch"
                                    class="form-control border-start-0"
                                    placeholder="Search students..."
                                    aria-label="Search students">
                                <button class="btn btn-outline-secondary d-none"
                                        type="button"
                                        id="clearSearch">
                                    <i class="fe fe-x"></i>
                                </button>
                            </div>
                        </div>

                        <form id="studentsForm" method="POST" action="{{ route('admin.students.postUpgrade') }}">
                            @csrf
                            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center mt-3 mt-md-4 px-2 gap-2 mb-4">
                                <div id="selectedCount" class="text-muted small order-2 order-sm-1">
                                    <i class="fe fe-check-circle me-1"></i> <span>0 students selected</span>
                                </div>
                                <div class="d-flex gap-2 order-1 order-sm-2">
                                    <button type="button" class="btn btn-outline-secondary btn-sm" id="deselectAllBtn" disabled>
                                        <i class="fe fe-x"></i><span class="d-none d-sm-inline ms-1">Deselect All</span>
                                    </button>
                                    <button type="submit" class="btn btn-primary btn-sm px-2 px-md-3" id="upgradeBtn" disabled>
                                        <i class="fe fe-arrow-up"></i><span class="d-none d-sm-inline ms-1">Upgrade</span>
                                    </button>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table id="studentsTable" class="table table-hover table-bordered table-vcenter text-nowrap">
                                    <thead class="table-primary">
                                        <tr>
                                            <th width="40" class="text-center align-middle">
                                                <div class="form-check d-inline-block">
                                                    <input type="checkbox" id="selectAll" class="form-check-input">
                                                </div>
                                            </th>
                                            <th class="text-center align-middle d-none d-sm-table-cell">Username</th>
                                            <th class="text-center align-middle">Student</th>
                                            <th class="text-center align-middle d-none d-md-table-cell">Contact</th>
                                            <th class="text-center align-middle">Grade</th>
                                            <th width="80" class="text-center align-middle">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- Loading Animation -->
                                        <tr id="loadingRow">
                                            <td colspan="6" class="text-center py-5">
                                                <div class="d-flex justify-content-center align-items-center">
                                                    <div class="spinner-border text-primary me-3" style="width: 2rem; height: 2rem;" role="status">
                                                        <span class="visually-hidden">Loading...</span>
                                                    </div>
                                                    <div>
                                                        <h4 class="mb-1 fs-6 fs-md-5">Loading Students</h4>
                                                        <p class="text-muted mb-0 small">Please wait while we fetch the records</p>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>

                                        <!-- Empty state (initially hidden) -->
                                        <tr id="emptyRow" style="display: none;">
                                            <td colspan="6" class="text-center py-5">
                                                <div class="d-flex flex-column align-items-center justify-content-center py-4">
                                                    <div class="bg-light rounded-circle p-3 p-md-4 mb-3">
                                                        <i class="fe fe-users fs-2 text-primary"></i>
                                                    </div>
                                                    <h4 class="text-muted mb-2 fs-6 fs-md-5">No Students Found</h4>
                                                    <p class="text-muted mb-4 small text-center">There are no students registered for this grade level</p>
                                                    <button class="btn btn-sm btn-outline-primary" id="refreshEmptyBtn">
                                                        <i class="fe fe-refresh-cw me-1"></i> Refresh
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>


                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('admin-js')
<script>
    $(document).ready(function() {
        // Initialize tooltips
        $('[data-bs-toggle="tooltip"]').tooltip();

        // Initialize variables
        let currentGrade = 9;
        let studentData = []; // Cache student data for search

        // Activate Grade 9 button on page load and load its data
        $('.grade-btn[data-grade="9"]').addClass('active');
        loadStudents(currentGrade);

        // Grade button click handler
        $('.grade-btn').on('click', function() {
            // Remove active class from all buttons
            $('.grade-btn').removeClass('active');
            // Add active class to clicked button
            $(this).addClass('active');

            currentGrade = $(this).data('grade');
            loadStudents(currentGrade);
        });

        // Refresh button click handlers
        $('#refreshBtn, #refreshEmptyBtn').on('click', function() {
            $(this).find('i').addClass('fa-spin');
            setTimeout(() => {
                $(this).find('i').removeClass('fa-spin');
            }, 500);
            loadStudents(currentGrade);
        });

        // Select/Deselect all students
        $('#selectAll').on('change', function() {
            const isChecked = $(this).prop('checked');
            $('.student-checkbox').prop('checked', isChecked);
            updateSelectedCount();
        });

        // Deselect all button functionality
        $('#deselectAllBtn').on('click', function() {
            $('.student-checkbox, #selectAll').prop('checked', false);
            updateSelectedCount();
        });

        // Update selected count when individual checkboxes change
        $(document).on('change', '.student-checkbox', function() {
            updateSelectedCount();
        });

        // Search functionality with mobile optimizations
        $('#studentSearch').on('input', function() {
            const searchTerm = $(this).val().trim().toLowerCase();
            const clearBtn = $('#clearSearch');

            // Toggle clear button
            if (searchTerm.length > 0) {
                clearBtn.removeClass('d-none');
            } else {
                clearBtn.addClass('d-none');
            }

            // Search logic
            if (searchTerm.length === 0) {
                $('.student-row').removeClass('d-none');
                $('#emptyRow').addClass('d-none');
                return;
            }

            let found = false;
            $('.student-row').each(function() {
                const rowText = $(this).text().toLowerCase();
                if (rowText.includes(searchTerm)) {
                    $(this).removeClass('d-none');
                    found = true;
                } else {
                    $(this).addClass('d-none');
                }
            });

            // Toggle empty state
            if (!found) {
                $('#emptyRow').removeClass('d-none').find('h4').text('No matching students found');
            } else {
                $('#emptyRow').addClass('d-none');
            }
        });

        // Clear search
        $('#clearSearch').on('click', function() {
            $('#studentSearch').val('').trigger('input').focus();
        });

        // Load students function with mobile optimizations
        function loadStudents(grade) {
            // Show loading animation and hide empty row
            $('#loadingRow').show();
            $('#emptyRow').hide();
            $('#studentSearch').val(''); // Clear search on load
            const tbody = $('#studentsTable tbody');

            // Keep the loading and empty rows, remove others
            tbody.children().not('#loadingRow, #emptyRow').remove();

            $.ajax({
                url: "{{ route('admin.students.getGrades') }}",
                method: "GET",
                data: { grade: grade },
                success: function(response) {
                    // Hide loading animation
                    $('#loadingRow').hide();

                    if (response.students && response.students.length > 0) {
                        // Cache student data for search
                        studentData = response.students;

                        response.students.forEach(student => {
                            const fullName = [student.first_name, student.middle_name, student.last_name].filter(Boolean).join(' ');
                            const initials = (student.first_name ? student.first_name.charAt(0) : '') +
                                          (student.last_name ? student.last_name.charAt(0) : '') || '?';
                            const url = "{{ route('admin.students.show', ':id') }}".replace(':id', student.id);

                            tbody.append(`
                                <tr class="student-row">
                                    <td class="text-center align-middle">
                                        <div class="form-check d-inline-block">
                                            <input type="checkbox" class="form-check-input student-checkbox" name="student_ids[]" value="${student.id}">
                                        </div>
                                    </td>
                                    <td class="text-center align-middle d-none d-sm-table-cell">
                                        <span class="badge bg-primary bg-opacity-10 text-white px-2 px-sm-3 py-1 py-sm-2">${student.username || 'N/A'}</span>
                                    </td>
                                    <td class="align-middle">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0 me-2 me-sm-3">
                                                <div class="avatar avatar-sm avatar-md-sm rounded-circle bg-primary text-white d-flex align-items-center justify-content-center">
                                                    ${initials}
                                                </div>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h6 class="mb-0 mb-sm-1 fs-6 fs-sm-5">${fullName}</h6>
                                                <small class="text-muted d-block d-sm-none">${student.username || 'N/A'}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="align-middle d-none d-md-table-cell">
                                        <div>
                                            <div class="d-flex align-items-center mb-1">
                                                <i class="fe fe-mail me-2 text-muted"></i>
                                                <a href="mailto:${student.email}" class="text-reset small">${student.email || 'N/A'}</a>
                                            </div>
                                            <div class="d-flex align-items-center">
                                                <i class="fe fe-phone me-2 text-muted"></i>
                                                <span class="small">${student.phone || 'Not available'}</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center align-middle">
                                        <span class="badge bg-success text-white px-2 px-sm-3 py-1 py-sm-2">
                                            <i class="fe fe-book d-none d-sm-inline me-1"></i>${student.grade || 'N/A'}
                                        </span>
                                    </td>
                                    <td class="text-center align-middle">
                                        <div class="btn-group btn-group-sm" role="group" aria-label="Student actions">
                                            <a href="${url}" class="btn btn-outline-primary" data-bs-toggle="tooltip" title="View Profile">
                                                <i class="fe fe-eye"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            `);
                        });
                    } else {
                        $('#emptyRow').show();
                    }

                    // Reset select all and count
                    $('#selectAll').prop('checked', false);
                    updateSelectedCount();
                    $('[data-bs-toggle="tooltip"]').tooltip('update');
                },
                error: function(xhr) {
                    $('#loadingRow').hide();
                    $('#emptyRow').show();
                    console.error('Error loading students:', xhr.responseText);
                    toastr.error('Failed to load students. Please try again.');
                }
            });
        }

        // Update selected count function
        function updateSelectedCount() {
            const selectedCount = $('.student-checkbox:checked').length;
            const countText = selectedCount === 0 ? 'No students selected' :
                            `${selectedCount} student${selectedCount !== 1 ? 's' : ''} selected`;

            $('#selectedCount').html(`
                <i class="fe fe-check-circle me-1"></i> ${countText}
            `);
            $('#upgradeBtn').prop('disabled', selectedCount === 0);
            $('#deselectAllBtn').prop('disabled', selectedCount === 0);

            // Update button text if more than one student is selected
            if (selectedCount > 0) {
                $('#upgradeBtn').html(`
                    <i class="fe fe-arrow-up"></i><span class="d-none d-sm-inline ms-1">Upgrade ${selectedCount}</span>
                `);
            } else {
                $('#upgradeBtn').html(`
                    <i class="fe fe-arrow-up"></i><span class="d-none d-sm-inline ms-1">Upgrade</span>
                `);
            }
        }

        // Submit form handler
        $('#studentsForm').on('submit', function(e) {
            e.preventDefault();
            const selectedStudents = $('.student-checkbox:checked').map(function() {
                return $(this).val();
            }).get();

            if (selectedStudents.length === 0) {
                toastr.warning('Please select at least one student.');
                return;
            }

                let title = 'Confirm Student Upgrade';
                let htmlMessage = '';

                if (currentGrade == 12) {
                    title = 'Confirm Graduation';
                    htmlMessage = `You are about to mark <strong>${selectedStudents.length}</strong> student${selectedStudents.length !== 1 ? 's' : ''} as <span class="text-success fw-bold">Graduated</span> from Grade 12.<br><br>Are you sure you want to proceed?`;
                } else {
                    htmlMessage = `You are about to upgrade <strong>${selectedStudents.length}</strong> student${selectedStudents.length !== 1 ? 's' : ''} from Grade ${currentGrade} to Grade ${currentGrade + 1}.<br><br>Are you sure you want to proceed?`;
                }

            // Show confirmation dialog
            Swal.fire({
                title: title,
                html: htmlMessage,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes, upgrade',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    // Show processing state on button
                    const submitBtn = $('#upgradeBtn');
                    const originalText = submitBtn.html();
                    submitBtn.prop('disabled', true);
                    submitBtn.html(`
                        <span class="spinner-border spinner-border-sm me-1"></span>
                        <span class="d-none d-sm-inline">Processing</span>
                    `);

                    // Submit the form normally after confirmation
                    this.submit();
                }
            });
        });
    });
</script>
@endsection