@extends('admin.layouts.app')
@section('title', 'Mark Attendance')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.attendance.index') }}">Attendance</a></li>
    <li class="breadcrumb-item active">Mark Attendance</li>
@endsection
@section('content')
    <div class="page-header">
        <div>
            <h1 class="page-title">Mark Attendance</h1>
            <p class="page-subtitle">Record daily student attendance by subject</p>
        </div>
    </div>
    <!-- FILTER FORM -->
    <div class="card mb-4">
        <div class="card-header"><i class="bi bi-funnel me-2 text-primary"></i>Select Class & Subject</div>
        <div class="card-body">
            <form method="GET" class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label class="form-label">Class <span class="text-danger">*</span></label>
                    <select name="class_id" id="class_id" class="form-select" required>
                        <option value="">— Select Class —</option>
                        @foreach ($classes as $class)
                            <option value="{{ $class->id }}" {{ request('class_id') == $class->id ? 'selected' : '' }}>
                                {{ $class->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Semester <span class="text-danger">*</span></label>
                    <select name="semester_id" id="semester_id" class="form-select">
                        @if (request('class_id'))
                            <option value="">— Select Semester —</option>
                            @foreach ($semesters as $semester)
                                <option value="{{ $semester->id }}"
                                    {{ request('semester_id') == $semester->id ? 'selected' : '' }}>{{ $semester->name }}
                                </option>
                            @endforeach
                        @endif
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Subject <span class="text-danger">*</span></label>
                    <select name="subject_id" id="subject_id" class="form-select" required>
                        <option value="">— Select Subject —</option>
                        @if (request()->semester_id)
                            @foreach ($subjects as $sub)
                                <option value="{{ $sub->id }}"
                                    {{ request('subject_id') == $sub->id ? 'selected' : '' }}>{{ $sub->name }}
                                    ({{ $sub->category }})</option>
                            @endforeach
                        @endif
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Date</label>
                    <input type="date" name="date" class="form-control"
                        value="{{ request('date', today()->toDateString()) }}" onchange="this.form.submit()">
                </div>
                <div class="col-md-1">
                    <label class="form-label"></label>
                    <input type="submit" class="btn btn-success" value="Search">
                </div>
            </form>
        </div>
    </div>

    @if ($students->count() && request('subject_id'))
        <form method="POST" action="{{ route('admin.attendance.save') }}">
            @csrf
            <input type="hidden" name="class_id" value="{{ request('class_id') }}">
            <input type="hidden" name="subject_id" value="{{ request('subject_id') }}">
            <input type="hidden" name="date" value="{{ request('date', today()->toDateString()) }}">

            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>
                        <i class="bi bi-clipboard-check me-2 text-success"></i>
                        Students — {{ $students->count() }} total
                    </span>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-sm btn-success" onclick="markAll('present')">
                            <i class="bi bi-check-all me-1"></i>All Present
                        </button>
                        <button type="button" class="btn btn-sm btn-danger" onclick="markAll('absent')">
                            <i class="bi bi-x-circle me-1"></i>All Absent
                        </button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0" id="attendance-table">
                        <thead>
                            <tr>
                                <th style="width:60px">#</th>
                                <th>Roll No.</th>
                                <th>Student Name</th>
                                <th style="min-width:280px">Attendance</th>
                                <th>Remarks</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($students as $i => $student)
                                <tr>
                                    <td class="text-muted" style="font-size:0.82rem">{{ $i + 1 }}</td>
                                    <td>
                                        <span
                                            style="font-size:0.83rem; font-weight:500">{{ $student->roll_no ?? '—' }}</span>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <div
                                                style="width:30px;height:30px;border-radius:7px;background:#f1f5f9;color:#475569;font-weight:600;font-size:0.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0">
                                                {{ strtoupper(substr($student->student_name, 0, 2)) }}
                                            </div>
                                            <span style="font-size:0.87rem">{{ $student->student_name }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        @php $status = $existing[$student->id] ?? 'present'; @endphp
                                        <div class="btn-group attendance-btn-group" role="group">
                                            <input type="radio" class="btn-check" name="attendance[{{ $student->id }}]"
                                                id="p_{{ $student->id }}" value="present"
                                                {{ $status === 'present' ? 'checked' : '' }}>
                                            <label class="btn btn-sm btn-outline-success" for="p_{{ $student->id }}">
                                                <i class="bi bi-check-circle"></i> Present
                                            </label>

                                            <input type="radio" class="btn-check" name="attendance[{{ $student->id }}]"
                                                id="a_{{ $student->id }}" value="absent"
                                                {{ $status === 'absent' ? 'checked' : '' }}>
                                            <label class="btn btn-sm btn-outline-danger" for="a_{{ $student->id }}">
                                                <i class="bi bi-x-circle"></i> Absent
                                            </label>

                                            <input type="radio" class="btn-check"
                                                name="attendance[{{ $student->id }}]" id="l_{{ $student->id }}"
                                                value="late" {{ $status === 'late' ? 'checked' : '' }}>
                                            <label class="btn btn-sm btn-outline-warning" for="l_{{ $student->id }}">
                                                <i class="bi bi-clock"></i> Late
                                            </label>

                                            <input type="radio" class="btn-check"
                                                name="attendance[{{ $student->id }}]" id="e_{{ $student->id }}"
                                                value="excused" {{ $status === 'excused' ? 'checked' : '' }}>
                                            <label class="btn btn-sm btn-outline-info" for="e_{{ $student->id }}">
                                                <i class="bi bi-shield-check"></i> Excused
                                            </label>
                                        </div>
                                    </td>
                                    <td>
                                        <input type="text" name="remarks[{{ $student->id }}]"
                                            class="form-control form-control-sm" placeholder="Optional..."
                                            style="width:140px">
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="card-body d-flex justify-content-between align-items-center pt-3">
                    <div id="attendance-summary" class="d-flex gap-3" style="font-size:0.83rem">
                        <span class="text-success fw-600"><span id="cnt-present">0</span> Present</span>
                        <span class="text-danger fw-600"><span id="cnt-absent">0</span> Absent</span>
                        <span class="text-warning fw-600"><span id="cnt-late">0</span> Late</span>
                        <span class="text-info fw-600"><span id="cnt-excused">0</span> Excused</span>
                    </div>
                    <button type="submit" class="btn btn-primary px-4">
                        <i class="bi bi-save me-2"></i>Save Attendance
                    </button>
                </div>
            </div>
        </form>
    @elseif(request('class_id') && request('subject_id'))
        <div class="card">
            <div class="card-body text-center py-5 text-muted">
                <i class="bi bi-people" style="font-size:2.5rem; opacity:0.3"></i>
                <p class="mt-2">No active students found for this class.</p>
            </div>
        </div>
    @endif
@endsection

@push('scripts')
    <script>
        function markAll(status) {
            document.querySelectorAll(`input[value="${status}"]`).forEach(r => r.checked = true);
            updateCounts();
        }

        function updateCounts() {
            ['present', 'absent', 'late', 'excused'].forEach(s => {
                document.getElementById('cnt-' + s).textContent =
                    document.querySelectorAll(`input[type=radio][value="${s}"]:checked`).length;
            });
        }

        document.querySelectorAll('input[type=radio]').forEach(r => r.addEventListener('change', updateCounts));
        updateCounts();
    </script>
    <script>
        $(document).on('change', '#class_id', function(e) {
            e.preventDefault();
            var class_id = $(this).val()
            var response;
            $('#semester_id').html('');
            $('#subject_id').html('');
            $('#semester_id').append($('<option>', {
                value: '',
                text: '— Select Semester —'
            }));
            $('#subject_id').append($('<option>', {
                value: '',
                text: '— Select Subject —'
            }));
            $.ajax({
                url: "{{ route('admin.classWiseSemester') }}",
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: {
                    class_id: class_id
                },
                cache: false,
                success(data) {
                    if (data.status) {
                        response = data.data;
                        var $dropdown = $("#semester_id");
                        $.each(response, function() {
                            $dropdown.append($("<option />").val(this.id)
                                .text(this.name));
                        });
                    }
                }
            });
        });

        $(document).on('change', '#semester_id', function(e) {
            e.preventDefault();
            var semester_id = $(this).val()
            var response;
            $('#subject_id').html('');
            $('#subject_id').append($('<option>', {
                value: '',
                text: '— Select Subject —'
            }));
            $.ajax({
                url: "{{ route('admin.semesterWiseSubject') }}",
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: {
                    semester_id: semester_id
                },
                cache: false,
                success(data) {
                    if (data.status) {
                        response = data.data;
                        var $dropdown = $("#subject_id");
                        $.each(response, function() {
                            $dropdown.append($("<option />").val(this.id)
                                .text(this.name + '(' + this.category + ')'));
                        });
                    }
                }
            });
        });
    </script>
@endpush