@extends('index')
@section('content')
<div class="page-wrapper">
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-title-box d-md-flex justify-content-md-between align-items-center">
                        <h4 class="page-title">{{ $title }}</h4>
                        <div class="">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="#">Admin</a></li>
                                <li class="breadcrumb-item active">View Attendance</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            @if(session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif
            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            <div class="row card">
                <div class="card-body">
                    <form id="attendanceForm" method="POST" action="{{ route('staffs.viewAttendance', ['id' => $TTID]) }}">
                    @csrf

                    <input type="hidden" id="classNameInput" name="class">
                    <input type="hidden" id="divisionNameInput" name="division">

                    <div class="row justify-content-center">
                        <div class="col-sm-3">
                            <label for="date" class="form-label">Date</label>
                            <input type="date" class="form-control" id="date" name="date" value="{{ date('Y-m-d') }}" required>
                        </div>

                        <div class="col-sm-3">
                            <label for="classSelect" class="form-label">Class</label>
                            <select class="form-select" id="classSelect" required>
                                <option value="">Select Class</option>
                                @foreach($classes as $class)
                                    <option value="{{ $class->classId }}" data-name="{{ $class->className }}">{{ $class->className }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-sm-3">
                            <label for="divisionSelect" class="form-label">Division</label>
                            <select class="form-select" id="divisionSelect" onchange="fetchAcademicYears()" required>
                                <option value="">Select Division</option>
                            </select>
                        </div>

                        <div class="col-sm-3">
                            <label for="accYr" class="form-label">Academic Year</label>
                            <select class="form-select" id="accYr" name="accYr" required>
                                <option value="">Select Academic Year</option>
                            </select>
                        </div>
                        <div class="col-sm-3">
                            <button type="button" class="btn btn-primary mt-4" id="viewAttendanceBtn">View Attendance</button>
                        </div>
                    </div>
                    </form>
                </div>
            </div>

            @if($attendanceData->isNotEmpty())
            <div class="row card mt-3">
                <div class="card-body">
                    <form id="updateAttendanceForm" method="POST" action="{{ route('staffs.updateAttendance', ['id' => $TTID]) }}">
                        @csrf
                        <h5 class="mb-3">Attendance Records</h5>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped align-middle text-center">
                                <thead class="table-light">
                                    <tr>
                                        <th>Roll No</th>
                                        <th>Adm No</th>
                                        <th>Student Name</th>
                                        <th>P1</th><th>P2</th><th>P3</th><th>P4</th><th>P5</th><th>P6</th><th>P7</th><th>P8</th><th>P9</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($attendanceData as $row)
                                    <tr>
                                        <td>{{ $row->rollno }}</td>
                                        <td>{{ $row->AdmsNo }}</td>
                                        <td class="text-start">{{ $row->Name }}</td>
                                        @foreach(['P1','P2','P3','P4','P5','P6','P7','P8','P9'] as $p)
                                            @php $val = strtolower($row->$p ?? 'nm'); @endphp
                                            <td>
                                                <div class="d-flex flex-column align-items-center gap-1">
                                                    <div class="form-check form-check-inline m-0">
                                                        <input class="form-check-input" type="radio"
                                                            name="attendance[{{ $row->AID }}][{{ $p }}]"
                                                            id="{{ $row->AID }}_{{ $p }}_p"
                                                            value="p"
                                                            {{ $val === 'p' ? 'checked' : '' }}>
                                                        <label class="form-check-label small" for="{{ $row->AID }}_{{ $p }}_p">P</label>
                                                    </div>
                                                    <div class="form-check form-check-inline m-0">
                                                        <input class="form-check-input" type="radio"
                                                            name="attendance[{{ $row->AID }}][{{ $p }}]"
                                                            id="{{ $row->AID }}_{{ $p }}_a"
                                                            value="a"
                                                            {{ $val === 'a' ? 'checked' : '' }}>
                                                        <label class="form-check-label small" for="{{ $row->AID }}_{{ $p }}_a">A</label>
                                                    </div>
                                                </div>
                                            </td>
                                        @endforeach
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="text-end mt-3">
                            <button type="submit" class="btn btn-success" id="updateAttendanceBtn">Update Attendance</button>
                        </div>
                    </form>
                </div>
            </div>
            @elseif(request()->isMethod('post'))
            <div class="row card mt-3">
                <div class="card-body">
                    <p class="text-muted mb-0">No attendance records found for the selected class, division, and date.</p>
                </div>
            </div>
            @endif

        </div>
    </div>
</div>
@endsection

@section('contentjs')
<script>
    const classDivisionMap = @json($classDivisionMap ?? []);
    const allDivisions = @json($divisions->pluck('secName', 'secId'));

    const classSelect = document.getElementById('classSelect');
    const divisionSelect = document.getElementById('divisionSelect');
    const classNameInput = document.getElementById('classNameInput');
    const divisionNameInput = document.getElementById('divisionNameInput');

    classSelect.addEventListener('change', function () {
        const classId = this.value;
        const selectedOption = this.options[this.selectedIndex];
        classNameInput.value = selectedOption ? (selectedOption.dataset.name || '') : '';

        divisionSelect.innerHTML = '<option value="">Select Division</option>';
        divisionNameInput.value = '';
        document.getElementById('accYr').innerHTML = '<option value="">Select Academic Year</option>';

        if (classId && classDivisionMap[classId]) {
            classDivisionMap[classId].forEach(function (divId) {
                if (allDivisions[divId] !== undefined) {
                    const opt = document.createElement('option');
                    opt.value = divId;
                    opt.textContent = allDivisions[divId];
                    opt.dataset.name = allDivisions[divId];
                    divisionSelect.appendChild(opt);
                }
            });
        }
    });

    divisionSelect.addEventListener('change', function () {
        const selectedOption = this.options[this.selectedIndex];
        divisionNameInput.value = selectedOption ? (selectedOption.dataset.name || '') : '';
    });

    function fetchAcademicYears() {
        const classId = classSelect.value;
        const divisionId = divisionSelect.value;
        const accYrSelect = document.getElementById('accYr');

        accYrSelect.innerHTML = '<option value="">Select Academic Year</option>';

        if (classId && divisionId) {
            fetch(`/getAccYr?class_name=${classId}&section_name=${divisionId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        data.data.forEach(function (year) {
                            const opt = document.createElement('option');
                            opt.value = year.accId;
                            opt.textContent = year.accYear;
                            accYrSelect.appendChild(opt);
                        });
                    }
                })
                .catch(function (err) {
                    console.error('Failed to fetch academic years:', err);
                });
        }
    }

    document.getElementById('viewAttendanceBtn').addEventListener('click', function () {
        const form = document.getElementById('attendanceForm');
        if (!classNameInput.value || !divisionNameInput.value) {
            alert('Please select both class and division.');
            return;
        }
        if (form.reportValidity()) {
            form.requestSubmit();
        }
    });
</script>
@endsection