@extends('layouts.parent')

@section('title', 'Exams & Datesheets - Kidscholl')

@section('styles')
<style>
    .exams-header {
        background: linear-gradient(135deg, #FFE4E6 0%, #FFF1F2 100%);
        border-radius: 24px;
        padding: 30px;
        margin-bottom: 30px;
        border-bottom: 4px solid var(--primary);
    }

    .exam-card-custom {
        background: #ffffff;
        border: 2px solid #f1f5f9;
        border-radius: 20px;
        padding: 24px;
        transition: all 0.3s ease;
        margin-bottom: 20px;
    }

    .exam-card-custom:hover {
        transform: translateY(-2px);
        border-color: var(--primary);
        box-shadow: 0 10px 20px rgba(255, 107, 107, 0.04);
    }

    .btn-download-datesheet {
        font-family: 'Fredoka', sans-serif;
        font-weight: 700;
        font-size: 0.85rem;
        border-radius: 30px;
        padding: 8px 20px;
        transition: all 0.2s ease;
    }

    .btn-download-datesheet:hover {
        transform: translateY(-2px);
    }

    .guideline-list li {
        margin-bottom: 16px;
        display: flex;
        align-items: start;
        color: var(--dark);
    }

    .guideline-list li i {
        font-size: 1.25rem;
        margin-top: 2px;
    }
</style>
@endsection

@section('content')
<div class="exams-header">
    <div class="row align-items-center">
        <div class="col-md-9">
            <h2 class="text-danger mb-1"><i class="bi bi-journal-check me-2"></i> Exams & Datesheets</h2>
            <p class="text-secondary mb-0">Check upcoming assessment plans, download classroom datesheet schedules, and review policies.</p>
        </div>
        <div class="col-md-3 text-md-end mt-3 mt-md-0">
            <span class="badge bg-white text-danger border border-2 border-danger rounded-pill px-3 py-2 fw-bold font-monospace">
                Exam Center
            </span>
        </div>
    </div>
</div>

<div class="row">
    <!-- Exam Bulletins -->
    <div class="col-lg-7 mb-4">
        <div class="portal-card h-100">
            <h5 class="fw-bold text-dark mb-4"><i class="bi bi-bell-fill text-warning me-2"></i> Exam Bulletins & Datesheets</h5>
            
            @forelse($examAnnouncements as $ann)
                <div class="exam-card-custom border-start border-4 border-info">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="badge bg-danger text-white rounded-pill px-3 py-1.5 fw-bold small">Exam Notice</span>
                        <small class="text-muted fw-bold"><i class="bi bi-calendar3"></i> {{ \Carbon\Carbon::parse($ann->created_at)->format('d M Y') }}</small>
                    </div>
                    <h4 class="text-dark fw-bold mb-3 fs-5">{{ $ann->title }}</h4>
                    <p class="text-secondary small mb-4 lh-lg">{{ $ann->description }}</p>
                    @if($ann->attachment_path)
                        <div class="border-top pt-3">
                            <a href="{{ asset('storage/' . $ann->attachment_path) }}" class="btn btn-outline-danger btn-download-datesheet" download>
                                <i class="bi bi-file-earmark-pdf-fill me-1.5"></i> Download Datesheet PDF
                            </a>
                        </div>
                    @endif
                </div>
            @empty
                <div class="text-center py-5">
                    <i class="bi bi-clipboard2 text-muted fs-1 opacity-50 d-block mb-2"></i>
                    <p class="text-muted mt-2 small">No exam notices targeting your child's class.</p>
                </div>
            @endforelse
        </div>
    </div>

    <!-- Instructions / Prep Guidelines -->
    <div class="col-lg-5 mb-4">
        <div class="portal-card h-100" style="border-bottom-color: var(--primary);">
            <h5 class="fw-bold text-dark mb-4"><i class="bi bi-shield-fill-check text-success me-2"></i> Examination Guidelines</h5>
            <p class="text-secondary small mb-4">Make sure students follow the protocol lists to avoid disciplinary action during tests:</p>
            
            <ul class="list-unstyled guideline-list small">
                <li>
                    <i class="bi bi-clock-fill text-success me-3"></i>
                    <div>
                        <strong class="text-dark">Reporting Time:</strong> Students must arrive in full uniform at least 20 minutes before the examination starts. Late entries after 15 minutes are strictly prohibited.
                    </div>
                </li>
                <li>
                    <i class="bi bi-person-badge-fill text-success me-3"></i>
                    <div>
                        <strong class="text-dark">Admit Cards:</strong> Roll numbers and credentials cards must be worn and clearly visible. Duplicate tags are issued at branch manager desks.
                    </div>
                </li>
                <li>
                    <i class="bi bi-pencil-square text-success me-3"></i>
                    <div>
                        <strong class="text-dark">Allowed Stationery:</strong> Standard pencil boxes and cardboard rules are permitted. Electronic watches or calculators are banned unless specified by the math department.
                    </div>
                </li>
                <li>
                    <i class="bi bi-exclamation-triangle-fill text-success me-3"></i>
                    <div>
                        <strong class="text-dark">Absenteeism Policy:</strong> Excused absences are validated only with medical certificate submissions to the PrincipalRichardson Desk. No re-tests are organized without approvals.
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
@endsection