@extends('layouts.print.potrait')

@section('content')

<style>
    @media screen {
        #print-report {
            display: none;
        }
    }

    @media print {
        @page {
            size: portrait; /* Set the page orientation to portrait */
        }
        #print-display {
            display: none !important; /* Ensure #print-display is hidden during print */
        }
        #print-report {
            display: block;
        }
    }

    .spinner {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

<section class="print w-100" id="print-report">
    <div class="row">
        <div class="container">
            @include('errors')
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col">
                            <h5 class="card-title">Attendance Report</h5>
                        </div>
                    </div>
                    <div class="row" style="font-size: 12px;">
                        <div class="col-6">
                            <p><b>School : </b>{{ $teacher->mrsm_name }}</p>
                            <p><b>Teacher : </b>{{ $teacher->name }}</p>
                            <p><b>Subject : </b>{{ $classsession->subjek }}</p>
                        </div>
                        <div class="col-6" style="font-size: 12px;">
                            <p><b>Class : </b>{{ $class }}</p>
                            <p><b>Total Student : </b>{{ $classsession->total_murid }}</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="card-body">
                            <div class="fdb-box mb-3">
                                <div class="tab-content">
                                    <div class="tab-pane active overflow-auto" id="attendancelist">
                                        @php
                                            $currentDate = null;
                                        @endphp

                                        @foreach($attendance as $att)
                                            @if ($currentDate !== $att->class_date)
                                                @php
                                                    $currentDate = $att->class_date;
                                                    $attendanceCountForDate = $attendanceCounts[$currentDate] ?? 0;
                                                @endphp
                                                <div>
                                                    <p class="text-center font-weight-bold bg-warning" style="font-size: 14px;">
                                                        Class Date:
                                                        {{ \Carbon\Carbon::parse($currentDate)->format('d-m-Y') ?? '-' }}
                                                        ({{ \Carbon\Carbon::parse($currentDate)->format('l') ?? '-' }})
                                                        |
                                                        Attendance recorded:
                                                        {{ $attendanceCountForDate }} /
                                                        {{ $classsession->total_murid }}
                                                    </p>
                                                    <table class="table table-sm table-hover">
                                                        <thead class="thead-light">
                                                            <tr style="font-size: 12px;">
                                                                <th scope="col" class="text-center">No.</th>
                                                                <th scope="col" class="text-center">Session</th>
                                                                <th scope="col" class="text-justify">Student</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody style="font-size: 10px;">
                                                            @php
                                                                $counter = 1;
                                                            @endphp

                                                            @foreach($attendance->where('class_date', $currentDate) as $dateAtt)
                                                                <tr>
                                                                    <td class="text-center">{{ $counter++ }}.</td>
                                                                    <td class="text-center">
                                                                        {{ \Carbon\Carbon::parse($dateAtt->class_start)->format('h:i A') }}
                                                                        -
                                                                        {{ \Carbon\Carbon::parse($dateAtt->class_end)->format('h:i A') }}
                                                                    </td>
                                                                    <td class="text-justify">{{ $dateAtt->student_name }}</td>
                                                                    <td class="text-left">{{ $dateAtt->student_id }}</td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                    <!-- Absent List for the Current Date -->
                                                    @if(isset($studentsNotInAttendanceByDate[$currentDate]))
                                                        <table class="table table-sm table-hover">
                                                            <thead class="thead-light" style="font-size: 12px;">
                                                                <tr>
                                                                    <th scope="col" colspan="3" class="text-justify">Absent List</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody style="font-size: 10px;">
                                                                @php
                                                                    $counter = 1;
                                                                @endphp
                                                                @foreach ($studentsNotInAttendanceByDate[$currentDate] as $student)
                                                                    <tr>
                                                                        <td class="text-center">{{ $counter++ }}.</td>
                                                                        <td>{{ $student->student_id }}</td>
                                                                        <td>{{ $student->student_name }}</td>
                                                                        <td class="text-center">
                                                                            @if ($student->attendance_status == 0)
                                                                                <span class="badge bg-success">0/3</span>
                                                                            @elseif ($student->attendance_status == 1)
                                                                                <span class="badge bg-warning">1/3</span>
                                                                            @elseif ($student->attendance_status == 2)
                                                                                <span class="badge bg-warning">2/3</span>
                                                                            @elseif ($student->attendance_status == 3)
                                                                                <span class="badge bg-danger">3/3</span>
                                                                            @endif
                                                                        </td>
                                                                    </tr>
                                                                @endforeach
                                                            </tbody>
                                                        </table>
                                                    @endif
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="print-display" class="d-flex align-items-center justify-content-center text-center py-5" style="height: 100vh;">
        <div class="container">
            <div class="d-flex justify-content-center">
                <i class="bi bi-printer fs-1 text-primary"></i>
            </div>
            <h2 class="mt-3">Attendance Report generated!</h2>
            <a href="{{ url()->previous() }}" class="btn btn-secondary mt-4">
                <i class="bi bi-arrow-left"></i> Return
            </a>
        </div>
    </section>

        <!-- Main JS File -->
        <script src="{{ asset('js/parsley.min.js') }}"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                window.print();
            });

            document.getElementById('back-button')?.addEventListener('click', function() {
                window.history.back();
            });
        </script>
@endsection