@extends('layouts.app')

@section('css')
@endsection

@section('breadcrumb')
<nav aria-label="breadcrumb">
    <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
        <li class="breadcrumb-item text-sm">
            <a class="opacity-5 text-white" href="javascript:;">Pages</a>
        </li>
        <li class="breadcrumb-item text-sm text-white active" aria-current="page">
            Warning Letters
        </li>
    </ol>
    <h6 class="font-weight-bolder text-white mb-0">Warning Letters</h6>
</nav>
@endsection

@section('content')
<div class="container-fluid py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="mb-0 text-white">Classes (Latest Batch: {{ $latestBatch->name ?? 'N/A' }})</h1>
    </div>

    <div class="row">
        @forelse($classes as $class)
            <div class="col-md-3 mb-3">
                <a href="{{ route('admin.warning_letters.class', $class->id) }}" class="text-decoration-none">
                    <div class="card text-center shadow-sm h-100">
                        <div class="card-body">
                            <i class="ni ni-folder-17 text-warning" style="font-size:50px;"></i>
                            <p class="mt-2 mb-0 fw-bold">{{ $class->code }}</p>
                            <small class="text-muted">
                                {{ $class->students()->role('student')->count() }} Students
                            </small>
                        </div>
                    </div>
                </a>
            </div>
        @empty
            <div class="col-12">
                <div class="alert alert-info text-center">
                    No classes available for the latest batch.
                </div>
            </div>
        @endforelse
    </div>


</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var uploadModal = document.getElementById('uploadModal');
    uploadModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        document.getElementById('student_id').value = button.getAttribute('data-student');
        document.getElementById('type').value = button.getAttribute('data-type');
    });
});
</script>
@endsection