@extends('layouts.app')

@section('content')
<div class="container py-5">
    <h2 class="mb-4">Trainer Attendance Dashboard</h2>

    <!-- Filters -->
    <div class="row mb-3">
        <div class="col-md-4">
            <label>Classroom</label>
            <select id="filterClass" class="form-select">
                <option value="">All Classes</option>
                @foreach($classes as $class)
                    <option value="{{ $class->class_room_id }}">{{ $class->classRoom->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <label>Date</label>
            <input type="date" id="filterDate" class="form-control">
        </div>
        <div class="col-md-2">
            <button id="btnFilter" class="btn btn-success w-100 mt-4">Filter</button>
        </div>
        <div class="col-md-2">
            <button id="btnReset" class="btn btn-secondary w-100 mt-4">Reset</button>
        </div>
    </div>

    <!-- Attendance Table -->
    <div id="attendanceTable">
        @include('trainers.partials.attendance_table', ['attendances' => $attendances])
        @include('trainers.partials.attendance_pagination', ['attendances' => $attendances])
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const filterClass = document.getElementById('filterClass');
    const filterDate = document.getElementById('filterDate');
    const btnFilter = document.getElementById('btnFilter');
    const btnReset = document.getElementById('btnReset');
    const tableContainer = document.getElementById('attendanceTable');

    const fetchAttendances = (url = '/trainer/attendances') => {
        const params = new URLSearchParams({
            class_room_id: filterClass.value,
            attendance_date: filterDate.value
        });

        fetch(`${url}?${params.toString()}`, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(res => res.json())
            .then(data => {
                tableContainer.innerHTML = data.table + data.pagination;

                // Rebind generate code buttons
                bindGenerateCodeButtons();
            });
    };

    const bindGenerateCodeButtons = () => {
        document.querySelectorAll('.btn-generate-code').forEach(btn => {
            btn.onclick = function() {
                const id = this.dataset.id;
                fetch(`/trainer/attendances/${id}/generate-code`, { method: 'POST', headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'X-Requested-With': 'XMLHttpRequest'
                }})
                .then(res => res.json())
                .then(data => {
                    document.getElementById(`code-${id}`).textContent = data.code;
                    alert(`Attendance code generated: ${data.code} (expires at ${data.expires_at})`);
                });
            }
        });
    };

    // Initial bind
    bindGenerateCodeButtons();

    btnFilter.addEventListener('click', e => { e.preventDefault(); fetchAttendances(); });
    btnReset.addEventListener('click', e => {
        e.preventDefault();
        filterClass.value = '';
        filterDate.value = '';
        fetchAttendances();
    });

    // Handle pagination clicks
    tableContainer.addEventListener('click', function(e) {
        if (e.target.matches('.pagination a')) {
            e.preventDefault();
            fetchAttendances(e.target.href);
        }
    });
});
</script>
@endsection