@extends('teacher.teacher_dashboard')

@section('admin')
<div class="content-body">
    <div class="container-fluid">
        <div class="row page-titles">
            <div class="col-md-9">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Daily Attendance</a></li>
                </ol>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3>Daily Attendance</h3>
            </div>
            <div class="card-body">
                <div class="row g-3 mb-2">
                    <div class="col-md-3">
                        <label>Session</label>
                        <select id="session_id" class="form-control">
                            <option value="">Select</option>
                            @foreach($sessions as $session)
                                <option value="{{ $session->id }}" {{ $session->is_current == 1 ? 'selected' : '' }}>
                                    {{ $session->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label>Class</label>
                        <select id="class_id" class="form-control">
                            <option value="">Select</option>
                            @foreach($classList as $classItem)
                                <option value="{{ $classItem->id }}">{{ $classItem->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label>Section</label>
                        <select id="section_id" class="form-control">
                            <option value="">Select</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label>Date</label>
                        <input type="date" id="date" class="form-control" value="{{ now()->format('Y-m-d') }}">
                    </div>
                </div>

                <button id="loadDailyAttendance" class="btn btn-primary mb-4">Load Daily Attendance</button>
                <button id="printDailyAttendance" class="btn btn-success mb-4 ms-2" style="display: none;">Print Report</button>
            </div>
        </div>

        <div class="card" id="selectedInfoCard" style="display: none;">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <strong>Session:</strong> <span id="selectedSession">-</span>
                    </div>
                    <div class="col-md-3">
                        <strong>Class:</strong> <span id="selectedClass">-</span>
                    </div>
                    <div class="col-md-3">
                        <strong>Section:</strong> <span id="selectedSection">-</span>
                    </div>
                    <div class="col-md-3">
                        <strong>Date:</strong> <span id="selectedDate">-</span>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-md-12">
                        <strong>First Class (from routine):</strong>
                        <span id="selectedFirstClass">-</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="card" id="attendanceCard">
            <div class="card-header">
                <h3>Daily Student Attendance</h3>
            </div>
            <div class="card-body">

                <div id="printHeader" style="display: none;">
                    <table style="width: 100%; border-bottom: 2px solid #333; margin-bottom: 10px; padding-bottom: 10px;">
                        <tr>
                            <td style="width: 80px; text-align: center; vertical-align: middle;"></td>
                            <td style="text-align: center; vertical-align: middle;">
                                @if($schoolProfile && $schoolProfile->school_logo)
                                    <img id="printSchoolLogo" src="{{ asset('core/storage/app/public/' . $schoolProfile->school_logo) }}" alt="Logo" style="height: 60px; width: 60px; object-fit: contain;">
                                @else
                                    <img id="printSchoolLogo" src="" alt="Logo" style="height: 60px; width: 60px; object-fit: contain;">
                                @endif

                                <h2 id="printSchoolName" style="margin: 0; font-size: 20px; font-weight: bold;">
                                    {{ $schoolProfile->school_name ?? 'School Name' }}
                                </h2>
                                <div style="margin: 3px 0 8px 0; font-size: 14px; font-weight: bold;">Daily Attendance Report</div>
                                <div style="font-size: 11px;">
                                    <strong>Session:</strong> <span id="printSession">-</span> &nbsp;&nbsp;|&nbsp;&nbsp;
                                    <strong>Class:</strong> <span id="printClass">-</span> &nbsp;&nbsp;|&nbsp;&nbsp;
                                    <strong>Section:</strong> <span id="printSection">-</span> &nbsp;&nbsp;|&nbsp;&nbsp;
                                    <strong>Date:</strong> <span id="printDate">-</span>
                                </div>
                                <div style="font-size: 11px; margin-top:3px;">
                                    <strong>First Class (routine):</strong>
                                    <span id="printFirstClass">-</span>
                                </div>
                            </td>
                            <td style="width: 80px;"></td>
                        </tr>
                    </table>
                </div>

                <div id="printContainer">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="dailyAttendanceTable">
                            <thead id="attendanceHead">
                                <tr>
                                    <th>SL</th>
                                    <th>Name</th>
                                    <th>Roll</th>
                                    <th>Status</th>
                                    <th>Comment</th>
                                    <th>Taken By</th>
                                    <th>Update Time</th>
                                </tr>
                            </thead>
                            <tbody id="attendanceBody">
                                <tr>
                                    <td colspan="7" class="text-center">No data available.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

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

@section('customjs')
<style>
    @media print {
        @page {
            size: A4 portrait;
            margin: 5mm 5mm;
        }

        html,
        body {
            margin: 0 !important;
            padding: 0 !important;
            background: #fff !important;
            overflow: visible !important;
            height: auto !important;
        }

        * {
            box-sizing: border-box;
        }

        body * {
            visibility: hidden;
        }

        #printHeader,
        #printHeader *,
        #printContainer,
        #printContainer *,
        #attendanceCard,
        #attendanceCard *,
        .table-responsive,
        .table-responsive * {
            visibility: visible !important;
        }

        .content-body,
        .container-fluid {
            margin: 0 !important;
            padding: 0 !important;
        }

        #attendanceCard {
            position: static !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            box-shadow: none !important;
        }

        #attendanceCard .card-body {
            margin: 0 !important;
            padding: 0 !important;
        }

        #printHeader {
            display: block !important;
            width: 100% !important;
            margin: 0 0 4px 0 !important;
            padding: 0 !important;
        }

        #printContainer {
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .table-responsive {
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: visible !important;
        }

        #dailyAttendanceTable {
            width: 100% !important;
            margin: 0 !important;
            border-collapse: collapse !important;
            table-layout: auto !important;
            font-size: 10px !important;
        }

        #dailyAttendanceTable th,
        #dailyAttendanceTable td {
            border: 1px solid #000 !important;
            padding: 4px 3px !important;
            font-size: 10px !important;
            text-align: center !important;
            vertical-align: middle !important;
            word-wrap: break-word !important;
        }

        #dailyAttendanceTable th {
            background-color: #e0e0e0 !important;
            font-weight: bold !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }

        thead {
            display: table-header-group !important;
        }

        tbody {
            display: table-row-group !important;
        }

        tr {
            page-break-inside: avoid !important;
            page-break-after: auto !important;
        }

        .page-titles,
        .breadcrumb,
        #selectedInfoCard,
        .card:not(#attendanceCard),
        .card-header,
        button,
        .btn,
        .row.g-3 {
            display: none !important;
        }
    }
</style>

<script>
    $(document).ready(function () {
        const csrf = $('meta[name="csrf-token"]').attr('content');

        $('#session_id').on('change', function () {
            $('#section_id').html('<option value="">Select</option>');
        });

        $('#class_id').on('change', function () {
            const classId = $(this).val();
            $('#section_id').html('<option value="">Loading...</option>');

            if (classId) {
                $.ajax({
                    url: '{{ route("teacher.attendance.daily.sections") }}',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },
                    data: {
                        class_id: classId
                    },
                    success: function (data) {
                        let html = '<option value="">Select</option>';
                        data.forEach(function (item) {
                            html += `<option value="${item.id}">${item.name}</option>`;
                        });
                        $('#section_id').html(html);
                    },
                    error: function () {
                        alert('Failed to load sections!');
                        $('#section_id').html('<option value="">Select</option>');
                    }
                });
            } else {
                $('#section_id').html('<option value="">Select</option>');
            }
        });

        $('#printDailyAttendance').click(function () {
            $('#printSession').text($('#selectedSession').text());
            $('#printClass').text($('#selectedClass').text());
            $('#printSection').text($('#selectedSection').text());
            $('#printDate').text($('#selectedDate').text());
            $('#printFirstClass').text($('#selectedFirstClass').text());
            window.print();
        });

        $('#loadDailyAttendance').click(function () {
            const sessionId = $('#session_id').val();
            const classId = $('#class_id').val();
            const sectionId = $('#section_id').val();
            const date = $('#date').val();

            if (!sessionId || !classId || !sectionId || !date) {
                alert('All fields are required!');
                return;
            }

            const sessionText = $('#session_id option:selected').text();
            const classText = $('#class_id option:selected').text();
            const sectionText = $('#section_id option:selected').text();

            const jsDate = new Date(date);
            const options = { year: 'numeric', month: 'long', day: 'numeric' };
            const dateText = jsDate.toLocaleDateString('en-US', options);

            $('#selectedSession').text(sessionText);
            $('#selectedClass').text(classText);
            $('#selectedSection').text(sectionText);
            $('#selectedDate').text(dateText);
            $('#selectedInfoCard').show();

            $.post('{{ route("teacher.attendance.dailyData") }}', {
                _token: csrf,
                session_id: sessionId,
                class_id: classId,
                section_id: sectionId,
                date: date
            }, function (res) {
                let tbody = '';

                if (res.first_class) {
                    const fc = res.first_class;
                    const infoText = `${fc.day_name} - ${classText} (${sectionText}) first class: ${fc.subject_name || ''} - ${fc.teacher_name || ''} (${fc.start_time} - ${fc.end_time})`;
                    $('#selectedFirstClass').text(infoText);
                } else {
                    $('#selectedFirstClass').text('No class found in routine for this date and section.');
                }

                if (!res.students || res.students.length === 0) {
                    tbody = '<tr><td colspan="7" class="text-center">No attendance data found for the selected date.</td></tr>';
                } else {
                    res.students.forEach(function (stu, index) {
                        let symbol = '';
                        const status = stu.status;

                        if (status === 'present' || status === 'P' || status === '1' || status === 1) {
                            symbol = '<span style="color: green; font-size: 16px;">✓</span>';
                        } else if (status === 'absent' || status === 'A' || status === '0' || status === 0 || status === 'a') {
                            symbol = '<span style="color: red; font-size: 16px;">✗</span>';
                        } else {
                            symbol = '-';
                        }

                        tbody += `
                            <tr>
                                <td>${index + 1}</td>
                                <td>${stu.name || '-'}</td>
                                <td>${stu.student_id || '-'}</td>
                                <td style="text-align: center;">${symbol}</td>
                                <td>${stu.remark || '-'}</td>
                                <td>${stu.taken_by_name || '-'}</td>
                                <td>${stu.updated_at || '-'}</td>
                            </tr>
                        `;
                    });
                }

                $('#attendanceBody').html(tbody);
                $('#printDailyAttendance').show();
            }).fail(function (xhr) {
                const message = xhr.responseJSON?.message || 'Failed to load daily attendance!';
                alert(message);
            });
        });
    });
</script>
@endsection