@extends('admin.admin_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($classes as $class)
                                    <option value="{{ $class->id }}">{{ $class->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="6" class="text-center">No data available.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </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 () {
                $('#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();
                });

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

                    if (classId) {
                        $.get(`/get-sections/${classId}`, function (data) {
                            let html = '<option value="">Select</option>';

                            data.forEach(function (item) {
                                if (item.section && item.section.name) {
                                    html += `<option value="${item.section_id}">${item.section.name}</option>`;
                                }
                            });

                            $('#section_id').html(html);
                        }).fail(function () {
                            alert('Failed to load sections!');
                            $('#section_id').html('<option value="">Select</option>');
                        });
                    } else {
                        $('#section_id').html('<option value="">Select</option>');
                    }
                });

                $('#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('admin.attendance.dailyData') }}", {
                        _token: '{{ csrf_token() }}',
                        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="6" 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) {
                                    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 () {
                        alert('Failed to load daily attendance!');
                    });
                });
            });
        </script>
    @endsection