@extends('dashlayouts.app')

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
    }
    th {
        background-color: #f4f4f4;
        text-align: center;
    }
    .subject-header {
        width: 200px; /* Adjust as needed */
    }
    .date-header {
        text-align: center;
    }
    .checkmark {
        text-align: center;
        font-size: 20px;
    }
    .empty-cell {
        text-align: center;
    }
</style>

@section('content')
<div class="pagetitle">
    <h1>Class Attendance</h1>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
            <li class="breadcrumb-item">Attendance Record</li>
            <li class="breadcrumb-item active">Detailed View</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <div class="container">
            <!-- Student Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-6 col-12">
                            <h2 class="card-title">Student Information</h2>
                        </div>
                        <div class="col-md-6 col-12 text-end pt-3">
                            <a href="{{ route('student.attendancelist') }}" class="btn btn-warning text-white">
                                <i class="bi bi-list"></i> List View
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p><strong>Student ID:</strong> {{ $student->student_id }}</p>
                    {{-- <p><strong>MARA No.:</strong> {{ $student->account_no }}</p> --}}
                    <p><strong>Student Name:</strong> {{ $student->student_name }}</p>
                    <p><strong>School:</strong> {{ $student->nama_pusat }}</p>
                    <p><strong>Form:</strong> {{ $student->tingkatan }}</p>
                    <p><strong>Attendance Status:</strong> 
                        @if ($student->attendance_status == 0)
                            <span class="badge bg-success">Active</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 - WARNING</span>
                        @endif
                    </p>
                </div>
            </div>

            <!-- Attendance Records -->
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">Attendance Records</h2>
                </div>
                <div class="card-body">
                    <table>
                        <thead>
                            <tr>
                                <th class="subject-header">Subject</th>
                                @foreach ($dates as $date)
                                    <th class="date-header">{{ \Carbon\Carbon::parse($date)->format('d M Y') }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($subjects as $subject)
                                <tr>
                                    <td>{{ $subject }}</td>
                                    @foreach ($dates as $date)
                                        @php
                                            $formattedDate = \Carbon\Carbon::parse($date)->format('d M Y');
                                        @endphp
                                        <td class="checkmark">
                                            @if (isset($attendanceMatrix[$subject][$formattedDate]))
                                                @if ($attendanceMatrix[$subject][$formattedDate] === true)
                                                    &#10004; <!-- Checkmark for attended -->
                                                @elseif ($attendanceMatrix[$subject][$formattedDate] === false)
                                                    X <!-- Cross mark for not attended -->
                                                @else
                                                    <!-- Empty cell if no class -->
                                                @endif
                                            @else
                                                <!-- Empty cell if no data -->
                                            @endif
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection