@extends('layouts.app')

@section('content')
<style>
    body {
        background-color: #f4fdf6;
    }

    .attendance-card {
        background-color: #ffffff;
        border-radius: 15px;
        box-shadow: 0 6px 20px rgba(46, 125, 50, 0.15);
        padding: 25px;
        margin-top: 30px;
    }

    h2 {
        color: #2e7d32;
        font-weight: 700;
    }

    .btn-success {
        background-color: #2e7d32;
        border-color: #2e7d32;
    }

    .btn-success:hover {
        background-color: #256a28;
        border-color: #256a28;
    }

    .btn-secondary {
        background-color: #9e9e9e;
        border-color: #9e9e9e;
    }

    .btn-secondary:hover {
        background-color: #757575;
        border-color: #757575;
    }

    .form-control, .form-select {
        border: 1px solid #c8e6c9;
    }

    .form-control:focus, .form-select:focus {
        border-color: #2e7d32;
        box-shadow: 0 0 0 0.2rem rgba(46, 125, 50, 0.25);
    }

    table {
        border-radius: 10px;
        overflow: hidden;
    }

    thead {
        background-color: #2e7d32;
        color: white;
    }

    tbody tr:hover {
        background-color: #e8f5e9;
    }

    .badge-success {
        background-color: #43a047;
    }

    .badge-warning {
        background-color: #ffb300;
    }

    .badge-danger {
        background-color: #e53935;
    }

    .filter-section {
        background: #e8f5e9;
        border: 1px solid #c8e6c9;
        border-radius: 10px;
        padding: 15px;
    }

    .loading-overlay {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(255,255,255,0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
        font-weight: 600;
        color: #2e7d32;
        z-index: 10;
        display: none;
    }
</style>

<div class="container position-relative">
    <div class="loading-overlay" id="loadingOverlay">Loading...</div>

    <div class="attendance-card">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="bi bi-list-check me-2"></i> Attendance Records</h2>
            <a href="{{ route('attendances.create') }}" class="btn btn-success">
                <i class="bi bi-plus-circle me-1"></i> Add Attendance
            </a>
        </div>

        <!-- Filter Section -->
        <div class="filter-section mb-4">
            <div class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label class="form-label">Classroom</label>
                    <select id="filterClass" class="form-select">
                        <option value="">All Classes</option>
                        @foreach($classes as $class)
                            <option value="{{ $class->id }}">
                                {{ $class->name ?? 'Class '.$class->id }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Date</label>
                    <input type="date" id="filterDate" class="form-control">
                </div>
                <div class="col-md-2">
                    <button class="btn btn-success w-100" id="btnFilter">
                        <i class="bi bi-funnel"></i> Filter
                    </button>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-secondary w-100" id="btnReset">
                        <i class="bi bi-arrow-clockwise"></i> Reset
                    </button>
                </div>
            </div>
        </div>

        <!-- Table -->
        <div class="table-responsive" id="attendanceTable">
            <table class="table table-bordered align-middle text-center">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Date</th>
                        <th>Trainee</th>
                        <th>Trainer</th>
                        <th>Classroom</th>
                        <th>Check In</th>
                        <th>Check Out</th>
                        <th>Status</th>
                        <th>Attendance Code</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="tableBody">
                    @forelse($attendances as $index => $attendance)
                        <tr>
                            <td>{{ $attendances->firstItem() + $index }}</td>
                            <td>{{ $attendance->attendance_date }}</td>
                            <td>{{ $attendance->trainee->name ?? 'N/A' }}</td>
                            <td>{{ $attendance->trainer->name ?? 'N/A' }}</td>
                            <td>{{ $attendance->classRoom->name ?? 'Class '.$attendance->class_room_id }}</td>
                            <td>{{ $attendance->check_in_time ?? '-' }}</td>
                            <td>{{ $attendance->check_out_time ?? '-' }}</td>
                            <td>
                                @if($attendance->status == 'present')
                                    <span class="badge badge-success">Present</span>
                                @elseif($attendance->status == 'late')
                                    <span class="badge badge-warning">Late</span>
                                @else
                                    <span class="badge badge-danger">Absent</span>
                                @endif
                            </td>
                            <td>
                                <span id="code-{{ $attendance->id }}">{{ $attendance->attendance_code ?? '-' }}</span>
                            </td>
                            <td>
                                <button class="btn btn-sm btn-success btn-generate-code" data-id="{{ $attendance->id }}">
                                    <i class="bi bi-key-fill"></i> Generate Code
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="10" class="text-center text-muted">No attendance records found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="d-flex justify-content-center mt-4" id="paginationLinks">
            {{ $attendances->appends(request()->query())->links('pagination::bootstrap-5') }}
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const filterClass = document.getElementById('filterClass');
    const filterDate = document.getElementById('filterDate');
    const btnFilter = document.getElementById('btnFilter');
    const btnReset = document.getElementById('btnReset');
    const tableBody = document.getElementById('tableBody');
    const paginationLinks = document.getElementById('paginationLinks');
    const loadingOverlay = document.getElementById('loadingOverlay');

    const fetchAttendances = () => {
        const classId = filterClass.value;
        const date = filterDate.value;

        loadingOverlay.style.display = 'flex';

        fetch(`/attendances?class_room_id=${classId}&attendance_date=${date}`, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(res => res.text())
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const newTableBody = doc.querySelector('#tableBody');
            const newPagination = doc.querySelector('#paginationLinks');

            tableBody.innerHTML = newTableBody.innerHTML;
            paginationLinks.innerHTML = newPagination.innerHTML;

            attachGenerateCodeListeners(); // Re-attach listeners after AJAX
        })
        .catch(err => console.error(err))
        .finally(() => loadingOverlay.style.display = 'none');
    };

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

    // Generate code functionality
    function attachGenerateCodeListeners() {
        document.querySelectorAll('.btn-generate-code').forEach(button => {
            button.addEventListener('click', () => {
                const attendanceId = button.dataset.id;
                fetch(`/attendances/${attendanceId}/generate-code`)
                    .then(res => res.json())
                    .then(data => {
                        document.getElementById(`code-${attendanceId}`).textContent = data.code;
                        alert(`Code generated: ${data.code} (expires at ${data.expires_at})`);
                    })
                    .catch(err => console.error(err));
            });
        });
    }

    attachGenerateCodeListeners(); // initial attach
});
</script>
@endsection