@extends('layouts.master')
@section('page_title', 'Student Attendance')
@section('content')
<div class="card">
<div class="card-body">
<div class="row">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title"><i class="fa fa-search"></i> Select Criteria</h3>
            </div>
           
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="class_id">Class</label>
                                <select id="class_id" name="class_id" class="form-control">
                                    <option value="">Select</option>
                                    @if($user->user_type == 'teacher')
                                        @foreach($class_list as $class)
                                        <option value="{{ $class->my_class_id }}" {{ old('class_id') == $class->my_class_id ? 'selected' : '' }}>{{ $class->my_class->name }}</option>
                                        @endforeach
                                    @else
                                        @foreach($class_list as $class)
                                        <option value="{{ $class->id }}">{{ $class->name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="section_id">Section</label>
                                <select id="section_id" name="section_id" class="form-control">
                                    <option value="">Select</option>
                                    <!-- Assuming you have a way to populate sections based on old input -->
                                </select>
                            </div>
                        </div>
                        <!-- <div class="col-md-3">
                            <div class="form-group">
                                <label for="term_id">Term</label>
                                <select id="term_id" name="termnum" class="form-control termnum">
                                    <option value="">Select</option>
                                    @foreach($terms as $term)
                                    <option value="{{ $term->id }}" {{ old('termnum') == $term->id ? 'selected' : '' }}>{{ $term->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div> -->
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="date">Attendance Date</label>
                                <input id="date" name="attendace_date" type="date" class="form-control" value="{{ $attendance_date }}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-footer">
                    <button type="submit" class="btn btn-dark fetch-students">Search</button>
                </div>
           
        </div>

        <div class="box box-info mt-4">
            <div class="box-header with-border">
              
            </div>
            <div class="box-body">
                <form id="attendanceForm">
                    @csrf
                    <button type="button" class="btn btn-primary save-attendance">Save Attendance</button>
                    <input type="hidden" name="class_id" value="{{$class_id ?? '' }}">
                    <input type="hidden" name="section_id" value="{{ $section_id ?? '' }}">
                    <input type="hidden" name="attendance_date" value="{{ $attendance_date ?? '' }}">

                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Admission Number</th>
                                    <th>Name</th>
                                    <th>Attendance</th>
                                    <th>Note</th>
                                    
                                </tr>
                            </thead>
                            <tbody id="student-list">
                                
                            </tbody>
                        </table>
                    </div>

                   
                </form>
            </div>
        </div>
    </div>
</div>
</div>
</div>

@endsection

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {

        let dateInput = document.getElementById('date');
        if (!dateInput.value) {
            let today = new Date().toISOString().split('T')[0];
            dateInput.value = today;
        }

        $('#section_id').on('change',async function(){

            const selectedValue = $(event.target).val();
            $('input[name="section_id"]').val(selectedValue);
        });

        $('#termnum').on('change',async function(){

            const selectedValue = $(event.target).val();
            $('input[name="termnum"]').val(selectedValue);
        });
       
        $('#date').on('change',async function(){

            const selectedValue = $(event.target).val();
            $('input[name="attendance_date"]').val(selectedValue);
        });


        $('#class_id').on('change',async function(){

            const selectedValue = $(event.target).val();
            $('input[name="class_id"]').val(selectedValue);

            try {
                    let response = await fetch(`/attendance/get-class-section?class_id=${selectedValue}`);
                    let data = await response.json();
                    
                    let sectionSelect = $('#section_id');
                    
                    sectionSelect.empty();

                    sectionSelect.append(`<option value="">Select an option</option>`);
                    data.forEach(section => {
                        sectionSelect.append(`<option value="${section.id}">${section.name}</option>`);
                    });

                } catch (error) {
                    console.error('Error fetching data:', error);
                }

        });

        $('.save-attendance').on('click',async function(e){
           
            let formData = $('#attendanceForm').serialize();
           
            try {
                    let response = await $.ajax({
                        url: '/attendance/save-student-attendance',
                        type: 'POST',
                        data: formData,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    toastr.success('Attendance saved successfully');
                    
                } catch (error) {
                    // Handle the error
                    toastr.error('An error occurred while saving attendance');
                    console.error(error);
                }
           
        });

        $('.fetch-students').on('click',async function(){
            let class_id = $('#class_id').val();
            let section_id = $('#section_id').val();
            toastr.info('Fetching list');
            
            let isValid = validateForm();
            if (!isValid) {
                return;
            }

            try {
                let response = await fetch(`/attendance/search?class_id=${class_id}&section_id=${section_id}`);
                let data = await response.json();
                let studentList = $('#student-list');
                
                studentList.empty();

                data.forEach(student => {
                    studentList.append(`<tr>
                        <td>${student.id}
                            <input class="form-check-input" type="hidden" name="student_session_id[]" value="${student.id}" />
                            <input class="form-check-input" type="hidden" name="user_id[]" value="${student.user_id}" />
                        </td>
                        <td>${student.adm_no}</td>
                        <td>${student.user.name}</td>
                        <td>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="student_status_${student.id}" id="present_${student.id}" value="1" checked>
                                <label class="form-check-label" for="present_${student.id}">Present</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="student_status_${student.id}" id="late_${student.id}" value="2">
                                <label class="form-check-label" for="late_${student.id}">Late</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="student_status_${student.id}" id="absent_${student.id}" value="0">
                                <label class="form-check-label" for="absent_${student.id}">Absent</label>
                            </div>
                        </td>

                        <td><input type="text" name="notes[]" class="form-control"></td>
                    </tr>`);
                });


            } catch (error) {
                console.error('Error fetching data:', error);
            }
        });

        function validateForm() {
        
            let isValid = true;
            let errorMessage = '';

            // Validate class_id
            if (!$('input[name="class_id"]').val()) {
                isValid = false;
                errorMessage += 'Class ID is required.\n';
            }

            // Validate section_id
            if (!$('input[name="section_id"]').val()) {
                isValid = false;
                errorMessage += 'Section ID is required.\n';
            }
        
            if (!isValid) {
                toastr.error(errorMessage);
            }

            return isValid;
        }

    });
</script>