@extends('layouts.master')
@section('page_title', 'Student Attendance Report')

<style>
    #attendance-report table {
        font-size: 0.8rem;
    }
    #attendance-report th, 
    #attendance-report td {
        text-align: center;
        padding: 0.3rem !important;
    }
    #attendance-report td:first-child {
        text-align: left;
    }
    .bg-success {
        background-color: #28a745 !important;
    }
    .bg-danger {
        background-color: #dc3545 !important;
    }
    .text-white {
        color: #fff !important;
    }
</style>
@section('content')
<div class="card">
<div class="card-body">
<div class="mt-5">
        <h2 class="mb-4">Generate Attendance Report</h2>
        
        <!-- Form for filtering the attendance report -->
        <form id="attendanceForm">
            <div class="row mb-3">
                <div class="col-md-3">
                    <label for="class_id" class="form-label">Select Class:</label>
                    <select id="class_id" class="form-control">
                        <option value="">Select Class</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 class="col-md-3">
                    <label for="section_id" class="form-label">Select Section:</label>
                    <select id="section_id" class="form-control">
                        <option value="">Select Section</option>
                        <!-- Add dynamic section options -->
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="month" class="form-label">Select Month:</label>
                    <select id="selected_month" class="form-control">
                        <option value="">Select Month</option>
                        <option value="01">January</option>
                        <option value="02">February</option>
                        <option value="03">March</option>
                        <option value="04">April</option>
                        <option value="05">May</option>
                        <option value="06">June</option>
                        <option value="07">July</option>
                        <option value="08">August</option>
                        <option value="09">September</option>
                        <option value="10">October</option>
                        <option value="11">November</option>
                        <option value="12">December</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="year" class="form-label">Select Year:</label>
                    <select id="year" class="form-control">
                        <option value="">Select Year</option>
                        @for($year = date('Y'); $year >= date('Y') - 10; $year--)
                            <option value="{{ $year }}">{{ $year }}</option>
                        @endfor
                    </select>
                </div>
            </div>
            <button type="button" class="btn btn-dark generate-report">Generate Report</button>
        </form>

        <div id="attendance-report"></div>
    </div>
@endsection

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#attendanceForm').on('submit',  function(e) {
            e.preventDefault();
            // Fetch form data and send to server
            var formData = $(this).serialize();
            console.log(formData);
        });

        $('#class_id').on('change',async function() {
            var classId = $(this).val();
            // Fetch sections for the selected class
            try {
                let sectionSelect = $('#section_id');
                let response = await fetch(`/attendance/get-class-section?class_id=${classId}`);
                let data = await response.json();
                    
                    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);
            }
        });

        $('.generate-report').on('click', function() {
            const classId = $('#class_id').val();
            const sectionId = $('#section_id').val();
            const month = $('#selected_month').val();
            const year = $('#year').val();

            $.ajax({
                url: '/api/report/fetch-attendance-report',
                method: 'GET',
                data: {
                    class_id: classId,
                    section_id: sectionId,
                    month: month,
                    year: year
                },
                success: function(response) {
                    generateAttendanceTable(response);
                    console.log(response);
                },
                error: function() {
                    alert('Error fetching attendance data');
                }
            });
        });

        
        // Function to format the attendance status
        function formatAttendanceIcon(attendance) {
                if (attendance === 'Present') {
                    return '✔️';
                } else if (attendance === 'Absent') {
                    return '❌';
                } else {
                    return '-';
                }
        }

        function generateAttendanceTable(data) {
            const { attendanceReport, daysInMonth, className, sectionName, monthName, year } = data;
            
            let exportButtons = `
            <div class="d-flex justify-content-end mb-2">
                <a target="_blank" href="{{ route('attendance.export_pdf') }}?export=true&class_id=${$('#class_id').val()}&section_id=${$('#section_id').val()}&month=${$('#selected_month').val()}&year=${$('#year').val()}" class="btn btn-danger">Export to PDF</a>
            </div>
        `;
            
            let tableHtml = `
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Attendance Sheet Of ${className}: Section ${sectionName}, ${monthName} ${year}</h3>
                      
                    </div>
                    <div class="card-body">
                     ${exportButtons}
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Students</th>
            `;

            for (let i = 1; i <= daysInMonth; i++) {
                tableHtml += `<th>${i}</th>`;
            }

            tableHtml += `
                                    </tr>
                                </thead>
                                <tbody>
            `;

            for (const [studentName, attendance] of Object.entries(attendanceReport)) {
                tableHtml += `
                    <tr>
                        <td>${studentName}</td>
                `;

                for (let i = 1; i <= daysInMonth; i++) {
                    const status = attendance[i];
                    let cellClass = '';
                    if (status === '✓') cellClass = 'text-success';
                    else if (status === '✗') cellClass = 'text-danger';
                    
                    tableHtml += `<td class="${cellClass}">${status}</td>`;
                }

                tableHtml += `
                    </tr>
                `;
            }

            tableHtml += `
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            `;

        
            // Add export buttons
        
            
            $('#attendance-report').html(tableHtml);
        }
   
        function validateForm() {
        
            let isValid = true;
            let errorMessage = '';

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

            // Validate section_id
            if (!$('#section_id').val()) {
                isValid = false;
                errorMessage += 'Section ID is required.\n';
            }

            if (!$('#selected_month').val()) {
                isValid = false;
                errorMessage += 'Month is required.\n';
            }

            if (!$('#year').val()) {
                isValid = false;
                errorMessage += 'Session is required.\n';
            }
        
            if (!isValid) {
                    toastr.error(errorMessage);
                }

            return isValid;
        }
   
    });

</script>