@extends('layouts.master')
@section('page_title', 'Teacher Attendance')
@section('content')
<div class="card">
    <div class="card-body">
    <form id="attendanceForm">
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="class_id">User Type</label>
                <select id="user_type" name="user_type" class="form-control">
                    <option value="">Select</option>
                    <option value="teacher">Teacher</option>
                    <option value="non-teacher">Non-Teacher</option>
                </select>
            </div>
            
        </div>

        <div class="col-md-3">
                <div class="form-group">
                    <label for="date">Date</label>
                    <input type="date" id="date" name="date" class="form-control">
                </div>
        </div> 

        <div class="box-footer">
            <button  class="btn btn-dark fetch-staff mt-4">Search</button>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="table-responsive">
                
                    @csrf
                    <button type="button" class="btn btn-primary save-attendance">Save Attendance</button>
                    <input type="hidden" name="attendance_date" value="{{ $attendance_date ?? '' }}">

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

                   
                
            </div>
        </div>
        </form>
    </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;
        }

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


        $('.save-attendance').on('click',async function(e){
           
            let formData = $('#attendanceForm').serialize();
           
            try {
                    let response = await $.ajax({
                        url: '/attendance/save-staff-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-staff').on('click',async function(e){
            let user_type = $('#user_type').val();
            e.preventDefault();
            
            toastr.info('Fetching list');
            
            // let isValid = validateForm();
            // if (!isValid) {
            //     return;
            // }

            try {
                let response = await fetch(`/attendance/staff-list?user_type=teacher`);
                let data = await response.json();
                let staffList = $('#staff-list');

                staffList.empty();

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

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

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="student_status_${user.id}" id="absent_${user.id}" value="0">
                                <label class="form-check-label" for="absent_${user.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 (!$('#user_type').val()) {
                isValid = false;
                errorMessage += 'User Type is required.\n';
            }

        
        
            if (!isValid) {
                toastr.error(errorMessage);
            }

            return isValid;
        }

    });
</script>