@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 active"><a href="javascript:void(0)">Attendance</a></li>
                <li class="breadcrumb-item"><a href="javascript:void(0)">Student Attendance</a></li>
            </ol>
        </div>

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

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

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="section_id">Section <span class="text-danger">*</span></label>
                                        <select class="form-control" id="section_id" name="section_id" required disabled>
                                            <option value="">Select Section</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="attendance_date">Date <span class="text-danger">*</span></label>
                                        <input type="date" class="form-control" id="attendance_date" 
                                            name="attendance_date" value="{{ date('Y-m-d') }}" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12 mt-3">
                                    <button type="button" class="btn btn-primary" id="loadStudentsBtn" disabled>
                                        <i class="fas fa-search"></i> Load Students
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Student List Card -->
        <div class="row" id="studentListCard" style="display: none;">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4 class="card-title">Student Attendance List</h4>
                        <div>
                            <button type="button" class="btn btn-sm btn-success" id="markAllPresent">
                                <i class="fas fa-check"></i> All Present
                            </button>
                            <button type="button" class="btn btn-sm btn-danger" id="markAllAbsent">
                                <i class="fas fa-times"></i> All Absent
                            </button>
                            <button type="button" class="btn btn-sm btn-secondary" id="markAllNotSet">
                                <i class="fas fa-minus"></i> All Not Set
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead class="thead-dark">
                                    <tr>
                                        <th width="5%">SL</th>
                                        <th width="25%">Student Name</th>
                                        <th width="10%">Class Roll</th>
                                        <th width="10%" class="text-center">Present</th>
                                        <th width="10%" class="text-center">Absent</th>
                                        <th width="10%" class="text-center">Not Set</th>
                                        <th width="30%">Remark</th>
                                    </tr>
                                </thead>
                                <tbody id="studentTableBody">
                                    <!-- Students will be loaded here -->
                                </tbody>
                            </table>
                        </div>

                        <div class="row mt-4">
                            <div class="col-md-12">
                                <div class="alert alert-info">
                                    <strong>Summary:</strong>
                                    <span class="ml-3">Total Students: <strong id="totalStudents">0</strong></span>
                                    <span class="ml-3">Present: <strong id="totalPresent">0</strong></span>
                                    <span class="ml-3">Absent: <strong id="totalAbsent">0</strong></span>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <button type="button" class="btn btn-primary btn-lg" id="saveAttendanceBtn">
                                    <i class="fas fa-save"></i> Save Attendance
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function() {
    // Load sections when class is selected
    $('#class_id').on('change', function() {
        const classId = $(this).val();
        const sessionId = $('#session_id').val();
        
        $('#section_id').prop('disabled', true).html('<option value="">Select Section</option>');
        $('#loadStudentsBtn').prop('disabled', true);
        
        if (classId && sessionId) {
            $.ajax({
                url: '{{ route("admin.student.attendance.getSections") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    class_id: classId,
                    session_id: sessionId
                },
                success: function(response) {
                    $('#section_id').prop('disabled', false);
                    
                    if (response.length > 0) {
                        response.forEach(function(section) {
                            $('#section_id').append(
                                `<option value="${section.id}">${section.name}</option>`
                            );
                        });
                    } else {
                        Swal.fire('Info', 'No sections found for this class', 'info');
                    }
                },
                error: function() {
                    Swal.fire('Error', 'Failed to load sections', 'error');
                }
            });
        }
    });

    // Enable load button when section is selected
    $('#section_id').on('change', function() {
        if ($(this).val()) {
            $('#loadStudentsBtn').prop('disabled', false);
        } else {
            $('#loadStudentsBtn').prop('disabled', true);
        }
    });

    // Load students
    $('#loadStudentsBtn').on('click', function() {
        const sessionId = $('#session_id').val();
        const classId = $('#class_id').val();
        const sectionId = $('#section_id').val();
        const date = $('#attendance_date').val();

        if (!sessionId || !classId || !sectionId || !date) {
            Swal.fire('Warning', 'Please fill all filter fields', 'warning');
            return;
        }

        $.ajax({
            url: '{{ route("admin.student.attendance.getStudents") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                session_id: sessionId,
                class_id: classId,
                section_id: sectionId,
                date: date
            },
            success: function(response) {
                if (response.students.length > 0) {
                    loadStudentTable(response.students);
                    $('#studentListCard').show();
                    updateSummary();
                } else {
                    Swal.fire('Info', 'No students found', 'info');
                    $('#studentListCard').hide();
                }
            },
            error: function() {
                Swal.fire('Error', 'Failed to load students', 'error');
            }
        });
    });

    // Load student table
    function loadStudentTable(students) {
        let html = '';
        students.forEach(function(student, index) {
            html += `
                <tr data-student-id="${student.id}">
                    <td>${index + 1}</td>
                    <td>${student.name}</td>
                    <td>${student.class_roll}</td>
                    <td class="text-center">
                        <input type="radio" name="status_${student.id}" value="present" 
                            class="attendance-radio" data-type="present" 
                            ${student.status === 'present' ? 'checked' : ''}>
                    </td>
                    <td class="text-center">
                        <input type="radio" name="status_${student.id}" value="absent" 
                            class="attendance-radio" data-type="absent" 
                            ${student.status === 'absent' ? 'checked' : ''}>
                    </td>
                    <td class="text-center">
                        <input type="radio" name="status_${student.id}" value="not_set" 
                            class="attendance-radio" data-type="not_set" 
                            ${student.status === 'not_set' ? 'checked' : ''}>
                    </td>
                    <td>
                        <input type="text" class="form-control form-control-sm remark-input" 
                            value="${student.remark || ''}" placeholder="Optional remark">
                    </td>
                </tr>
            `;
        });
        $('#studentTableBody').html(html);

        // Update summary on radio change
        $('.attendance-radio').on('change', updateSummary);
    }

    // Mark all present
    $('#markAllPresent').on('click', function() {
        $('input[value="present"]').prop('checked', true);
        updateSummary();
    });

    // Mark all absent
    $('#markAllAbsent').on('click', function() {
        $('input[value="absent"]').prop('checked', true);
        updateSummary();
    });

    // Mark all not set
    $('#markAllNotSet').on('click', function() {
        $('input[value="not_set"]').prop('checked', true);
        updateSummary();
    });

    // Update summary
    function updateSummary() {
        const total = $('#studentTableBody tr').length;
        const present = $('input[value="present"]:checked').length;
        const absent = $('input[value="absent"]:checked').length;

        $('#totalStudents').text(total);
        $('#totalPresent').text(present);
        $('#totalAbsent').text(absent);
    }

    // Save attendance
    $('#saveAttendanceBtn').on('click', function() {
        const sessionId = $('#session_id').val();
        const classId = $('#class_id').val();
        const sectionId = $('#section_id').val();
        const date = $('#attendance_date').val();

        const attendances = [];
        $('#studentTableBody tr').each(function() {
            const studentId = $(this).data('student-id');
            const status = $(this).find('input[type="radio"]:checked').val();
            const remark = $(this).find('.remark-input').val();

            attendances.push({
                student_id: studentId,
                status: status,
                remark: remark
            });
        });

        if (attendances.length === 0) {
            Swal.fire('Warning', 'No students to save attendance', 'warning');
            return;
        }

        Swal.fire({
            title: 'Save Attendance?',
            text: 'Do you want to save this attendance?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, Save it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ route("admin.student.attendance.store") }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        session_id: sessionId,
                        class_id: classId,
                        section_id: sectionId,
                        date: date,
                        attendances: attendances
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire('Success', response.message, 'success');
                        } else {
                            Swal.fire('Error', response.message, 'error');
                        }
                    },
                    error: function(xhr) {
                        Swal.fire('Error', 'Failed to save attendance', 'error');
                    }
                });
            }
        });
    });

    // Reload students when date changes
    $('#attendance_date').on('change', function() {
        if ($('#section_id').val()) {
            $('#loadStudentsBtn').click();
        }
    });
});
</script>

@endsection