@extends('admin.admin_dashboard')
@section('admin')

<div class="content-body">
    <div class="container-fluid">
        <div class="row page-titles">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Student</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Update Student Information</a></li>
            </ol>
        </div>

        <!-- Filter Card -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Filter Students</h4>
                    </div>
                    <div class="card-body">
                        <form id="filterForm">
                            <div class="row">
                                <!-- Session -->
                                <div class="col-md-4 mb-3">
                                    <label for="session_id" class="form-label">Session <span class="text-danger">*</span></label>
                                    <select class="form-control form-select" id="session_id" name="session_id" required>
                                        <option value="" selected>Select Session</option>
                                        @foreach($sessions as $session)
                                            <option value="{{ $session->id }}">{{ $session->session_name ?? $session->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Class -->
                                <div class="col-md-4 mb-3">
                                    <label for="class_id" class="form-label">Class <span class="text-danger">*</span></label>
                                    <select class="form-control form-select" id="class_id" name="class_id" required>
                                        <option value="" selected>Select Class</option>
                                        @foreach($classes as $class)
                                            <option value="{{ $class->id }}">{{ $class->class_name ?? $class->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Section (Optional) -->
                                <div class="col-md-4 mb-3">
                                    <label for="section_id" class="form-label">Section <span class="text-muted">(Optional)</span></label>
                                    <select class="form-control form-select" id="section_id" name="section_id">
                                        <option value="" selected>All Sections</option>
                                    </select>
                                </div>

                                <!-- Filter Button -->
                                <div class="col-12">
                                    <button type="button" class="btn btn-primary" id="filterBtn">
                                        <i class="fas fa-filter"></i> Filter Students
                                    </button>
                                    <button type="button" class="btn btn-secondary" id="resetBtn">
                                        <i class="fas fa-redo"></i> Reset
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Student List Card -->
        <div class="row" id="studentListCard" style="display: none;">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Student List</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped" id="studentTable">
                                <thead class="table-primary">
                                    <tr>
                                        <th style="width: 50px;">SL</th>
                                        <th>Name</th>
                                        <th style="width: 100px;">ID</th>
                                        <th style="width: 120px;">Class</th>
                                        <th style="width: 100px;">Group</th>
                                        <th style="width: 100px;">Section</th>
                                        <th style="width: 120px;">Class Roll</th>
                                    </tr>
                                </thead>
                                <tbody id="studentTableBody">
                                    <!-- Dynamic rows will be inserted here -->
                                </tbody>
                            </table>
                        </div>
                        <div id="noDataMessage" class="alert alert-info" style="display: none;">
                            <i class="fas fa-info-circle"></i> No students found with the selected filters.
                        </div>
                        <div class="text-end mt-3">
                            <button type="button" class="btn btn-success btn-lg" id="saveRollsBtn">
                                <i class="fas fa-save"></i> Save All Changes
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

@section('customcss')
<style>
    .table-responsive {
        overflow-x: auto;
    }
    
    .roll-input {
        width: 100%;
        padding: 6px 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        text-align: center;
    }
    
    .roll-input:focus {
        border-color: #886CC0;
        outline: none;
        box-shadow: 0 0 5px rgba(136, 108, 192, 0.3);
    }
    
    .roll-input.is-invalid {
        border-color: #dc3545;
    }
    
    .duplicate-error {
        color: #dc3545;
        font-size: 12px;
        margin-top: 3px;
    }
    
    .card-header {
        background: linear-gradient(135deg, #886CC0 0%, #6c5a94 100%);
        color: white;
    }
    
    .card-header .card-title {
        color: white;
        margin-bottom: 0;
    }
</style>
@endsection

@section('customjs')

<script>
$(document).ready(function() {
    let originalRolls = {}; // Store original rolls for comparison
    let currentStudents = []; // Store current student data

    // Load sections when class changes
    $('#class_id').on('change', function() {
        const classId = $(this).val();
        $('#section_id').html('<option value="">Loading...</option>');
        
        if (classId) {
            $.ajax({
                url: `/admin/get-sections-by-class/${classId}`,
                type: 'GET',
                success: function(response) {
                    let options = '<option value="" selected>All Sections</option>';
                    if (response.sections && response.sections.length > 0) {
                        response.sections.forEach(section => {
                            options += `<option value="${section.id}">${section.name}</option>`;
                        });
                    }
                    $('#section_id').html(options);
                },
                error: function() {
                    $('#section_id').html('<option value="" selected>All Sections</option>');
                    toastr.error('Failed to load sections');
                }
            });
        } else {
            $('#section_id').html('<option value="" selected>All Sections</option>');
        }
    });

    // Filter students
    $('#filterBtn').on('click', function() {
        const sessionId = $('#session_id').val();
        const classId = $('#class_id').val();
        const sectionId = $('#section_id').val();

        if (!sessionId || !classId) {
            toastr.warning('Please select Session and Class');
            return;
        }

        // Show loading
        $('#studentTableBody').html('<tr><td colspan="7" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading students...</td></tr>');
        $('#studentListCard').show();
        $('#noDataMessage').hide();

        $.ajax({
            url: '{{ route("admin.student.update.get") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                session_id: sessionId,
                class_id: classId,
                section_id: sectionId
            },
            success: function(response) {
                if (response.success && response.students.length > 0) {
                    currentStudents = response.students;
                    displayStudents(response.students);
                    originalRolls = {};
                    response.students.forEach(student => {
                        originalRolls[student.id] = student.class_roll;
                    });
                } else {
                    $('#studentTableBody').html('');
                    $('#noDataMessage').show();
                }
            },
            error: function(xhr) {
                $('#studentTableBody').html('');
                toastr.error(xhr.responseJSON?.message || 'Failed to load students');
            }
        });
    });

    // Display students in table
    function displayStudents(students) {
        let html = '';
        students.forEach((student, index) => {
            html += `
                <tr data-id="${student.id}">
                    <td class="text-center">${index + 1}</td>
                    <td>${student.name}</td>
                    <td class="text-center">${student.admission_roll}</td>
                    <td>${student.class_name}</td>
                    <td>${student.group_name || 'N/A'}</td>
                    <td>${student.section_name || 'N/A'}</td>
                    <td>
                        <input type="number" 
                               class="roll-input" 
                               data-id="${student.id}" 
                               data-section="${student.section_name || ''}"
                               value="${student.class_roll || ''}" 
                               min="1"
                               placeholder="Enter Roll">
                        <div class="duplicate-error" id="error-${student.id}"></div>
                    </td>
                </tr>
            `;
        });
        $('#studentTableBody').html(html);
    }

    // Validate duplicate rolls on input change
    $(document).on('input', '.roll-input', function() {
        const currentInput = $(this);
        const currentId = currentInput.data('id');
        const currentRoll = currentInput.val();
        const currentSection = currentInput.data('section');
        
        // Clear previous error
        $(`#error-${currentId}`).text('');
        currentInput.removeClass('is-invalid');

        if (!currentRoll) return;

        // Check for duplicates in the same section
        let duplicate = false;
        $('.roll-input').each(function() {
            const otherId = $(this).data('id');
            const otherRoll = $(this).val();
            const otherSection = $(this).data('section');
            
            if (otherId !== currentId && 
                otherRoll === currentRoll && 
                otherSection === currentSection) {
                duplicate = true;
                return false; // break loop
            }
        });

        if (duplicate) {
            currentInput.addClass('is-invalid');
            $(`#error-${currentId}`).text('Duplicate roll in this section!');
        }
    });

    // Save all changes
    $('#saveRollsBtn').on('click', function() {
        // Check for validation errors
        if ($('.roll-input.is-invalid').length > 0) {
            toastr.error('Please fix duplicate roll errors before saving');
            return;
        }

        // Collect only changed rolls
        let rolls = [];
        $('.roll-input').each(function() {
            const id = $(this).data('id');
            const newRoll = $(this).val();
            
            if (!newRoll) {
                toastr.warning('All students must have a class roll');
                rolls = [];
                return false;
            }

            // Only include if roll has changed
            if (originalRolls[id] != newRoll) {
                rolls.push({
                    id: id,
                    class_roll: parseInt(newRoll)
                });
            }
        });

        if (rolls.length === 0) {
            toastr.info('No changes to save');
            return;
        }

        // Confirm before saving
        if (!confirm(`Are you sure you want to update ${rolls.length} student roll(s)?`)) {
            return;
        }

        // Disable button during save
        const saveBtn = $(this);
        saveBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');

        $.ajax({
            url: '{{ route("admin.student.update.rolls") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                rolls: rolls
            },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message);
                    // Update original rolls
                    rolls.forEach(roll => {
                        originalRolls[roll.id] = roll.class_roll;
                    });
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                toastr.error(xhr.responseJSON?.message || 'Failed to update rolls');
            },
            complete: function() {
                saveBtn.prop('disabled', false).html('<i class="fas fa-save"></i> Save All Changes');
            }
        });
    });

    // Reset form
    $('#resetBtn').on('click', function() {
        $('#filterForm')[0].reset();
        $('#section_id').html('<option value="" selected>All Sections</option>');
        $('#studentListCard').hide();
        $('#studentTableBody').html('');
        currentStudents = [];
        originalRolls = {};
    });
});
</script>
@endsection

@endsection