@extends('layouts.frontend')

@section('title', 'Admissions & Enrollment - Kidscholl Academy')

@section('styles')
<style>
    /* Hero Section Redesign */
    .admission-hero {
        background: linear-gradient(135deg, #FFE8E8 0%, #E8F0FE 100%);
        padding: 90px 0 100px;
        position: relative;
        overflow: hidden;
        border-bottom-left-radius: 60px;
        border-bottom-right-radius: 60px;
    }

    .admission-hero::before {
        content: '';
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(78,205,196,0.15) 0%, rgba(255,255,255,0) 70%);
        top: -100px;
        right: -50px;
        animation: float-slow 8s ease-in-out infinite;
    }

    .admission-hero::after {
        content: '';
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,107,107,0.15) 0%, rgba(255,255,255,0) 70%);
        bottom: -50px;
        left: -50px;
        animation: float-slow 6s ease-in-out infinite alternate;
    }

    @keyframes float-slow {
        0% { transform: translateY(0) rotate(0deg); }
        100% { transform: translateY(-20px) rotate(10deg); }
    }

    .hero-floater {
        position: absolute;
        font-size: 2.5rem;
        opacity: 0.15;
        animation: floating 4s ease-in-out infinite;
    }

    @keyframes floating {
        0% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-15px) rotate(8deg); }
        100% { transform: translateY(0px) rotate(0deg); }
    }

    /* Stepper Redesign */
    .stepper-row {
        position: relative;
    }

    @media (min-width: 992px) {
        .stepper-row::before {
            content: '';
            position: absolute;
            top: 55px;
            left: 10%;
            width: 80%;
            height: 4px;
            background: dashed #e2e8f0;
            z-index: 1;
        }
    }

    .step-card {
        background: #ffffff;
        border: none;
        border-radius: 24px;
        padding: 30px 24px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        position: relative;
        z-index: 2;
        height: 100%;
        border-top: 5px solid transparent;
    }

    .step-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    }

    .step-icon-wrap {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        font-size: 2rem;
        box-shadow: 0 8px 20px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        position: relative;
    }

    .step-card:hover .step-icon-wrap {
        transform: scale(1.1) rotate(5deg);
    }

    .step-number {
        position: absolute;
        bottom: -5px;
        right: -5px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        font-size: 0.9rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        border: 2px solid white;
        box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    }

    /* Info Section Cards */
    .criteria-card {
        border-radius: 24px;
        background: var(--pastel-green);
        border: 2px solid #E8F5E9;
        transition: all 0.3s ease;
        height: 100%;
    }

    .docs-card {
        border-radius: 24px;
        background: var(--pastel-purple);
        border: 2px solid #F3E8FF;
        transition: all 0.3s ease;
        height: 100%;
    }

    .criteria-card:hover, .docs-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.04);
    }

    .custom-list-item {
        padding: 12px 16px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.75);
        margin-bottom: 12px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        transition: all 0.2s ease;
    }

    .custom-list-item:hover {
        background: #ffffff;
        transform: translateX(4px);
    }

    /* Pricing/Fee Redesign */
    .fee-card {
        border-radius: 28px;
        background: #ffffff;
        border: 2px solid #f1f5f9;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        height: 100%;
        box-shadow: 0 8px 25px rgba(0,0,0,0.02);
    }

    .fee-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
    }

    .fee-card.featured {
        border-color: var(--primary-color);
        position: relative;
    }

    .fee-card.featured::before {
        content: 'MOST POPULAR';
        position: absolute;
        top: 20px;
        right: -35px;
        background: var(--primary-color);
        color: white;
        font-weight: 700;
        font-size: 0.7rem;
        padding: 6px 40px;
        transform: rotate(45deg);
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        letter-spacing: 1px;
    }

    .fee-header {
        padding: 35px 25px 25px;
        text-align: center;
        border-bottom: 2px dashed #f1f5f9;
    }

    .fee-badge {
        font-size: 0.8rem;
        font-weight: 700;
        padding: 6px 16px;
        border-radius: 20px;
        margin-bottom: 12px;
        display: inline-block;
    }

    .fee-price {
        font-size: 2.8rem;
        color: var(--dark-color);
        margin: 15px 0;
    }

    .fee-price span {
        font-size: 1rem;
        color: #64748b;
    }

    .fee-body {
        padding: 30px 25px;
    }

    /* FAQ Section */
    .faq-accordion .accordion-item {
        border: none;
        margin-bottom: 15px;
        border-radius: 16px !important;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,0.02);
        transition: all 0.3s ease;
    }

    .faq-accordion .accordion-item:hover {
        box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    }

    .faq-accordion .accordion-button {
        font-weight: 700;
        color: var(--dark-color);
        font-family: 'Fredoka', sans-serif;
        padding: 20px 25px;
        border: none !important;
        background: #ffffff;
        box-shadow: none !important;
        transition: all 0.3s ease;
    }

    .faq-accordion .accordion-button:not(.collapsed) {
        color: var(--primary-color);
        background: var(--pastel-blue);
    }

    .faq-accordion .accordion-button::after {
        background-size: 1rem;
        transition: transform 0.3s ease;
    }

    .faq-accordion .accordion-body {
        padding: 25px;
        background-color: #ffffff;
        color: #556975;
        line-height: 1.6;
        border-top: 1px solid rgba(0,0,0,0.03);
    }

    /* Forms */
    .inquiry-card {
        border-radius: 30px;
        background: #ffffff;
        border: none;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
        overflow: hidden;
    }

    .inquiry-header {
        background: linear-gradient(135deg, var(--secondary-color) 0%, #3ca8a0 100%);
        color: white;
        padding: 40px;
        text-align: center;
        position: relative;
    }

    .inquiry-body {
        padding: 40px;
    }

    .form-control-custom {
        border-radius: 14px;
        padding: 14px 18px;
        border: 2px solid #e2e8f0;
        transition: all 0.3s ease;
        font-weight: 600;
    }

    .form-control-custom:focus {
        border-color: var(--secondary-color);
        box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.15);
    }

    .floating-label-wrap {
        position: relative;
        margin-bottom: 20px;
    }
</style>
@endsection

@section('content')
    <!-- Floating Icons for Hero Decor -->
    <div class="position-absolute d-none d-lg-block hero-floater" style="top: 180px; left: 8%; animation-delay: 0s;">
        <i class="bi bi-pencil-fill text-danger opacity-25"></i>
    </div>
    <div class="position-absolute d-none d-lg-block hero-floater" style="top: 250px; right: 10%; animation-delay: 1.5s;">
        <i class="bi bi-star-fill text-warning opacity-25"></i>
    </div>
    <div class="position-absolute d-none d-lg-block hero-floater" style="top: 450px; left: 5%; animation-delay: 0.8s;">
        <i class="bi bi-music-note-beamed text-success opacity-25"></i>
    </div>

    <!-- Page Header (Admissions Hero) -->
    <section class="admission-hero text-center mb-5">
        <div class="container">
            <span class="badge bg-danger kids-badge mb-3 px-3 py-2">ADMISSIONS OPEN</span>
            <h1 class="page-header-title mb-3 fs-1 text-primary">Admissions & Enrollment</h1>
            <p class="lead text-muted mx-auto" style="max-width: 650px;">
                Begin your child's journey of discovery and play. Join the Kidscholl family. Review our transparent process, criteria, and fee structures below.
            </p>
        </div>
    </section>

    <!-- Admission Process Timeline -->
    <section class="section-padding pt-0">
        <div class="container">
            <div class="text-center mb-5">
                <span class="badge bg-secondary kids-badge mb-2">How to Enroll</span>
                <h2 class="text-primary fs-2">The 4-Step Admission Journey</h2>
                <p class="text-muted">A clear, simple path from your first enquiry to onboarding.</p>
            </div>

            <div class="row stepper-row g-4">
                <!-- Step 1 -->
                <div class="col-lg-3 col-md-6">
                    <div class="step-card" style="border-top-color: var(--primary-color);">
                        <div class="step-icon-wrap" style="background-color: var(--pastel-pink); color: var(--primary-color);">
                            <i class="bi bi-file-earmark-text"></i>
                            <span class="step-number" style="background-color: var(--primary-color);">1</span>
                        </div>
                        <h5 class="text-dark fw-bold">1. Submit Inquiry</h5>
                        <p class="text-muted small mb-0">Fill out our online inquiry form below or download the offline registration PDF file. Visited parents will receive a detailed prospectus.</p>
                    </div>
                </div>

                <!-- Step 2 -->
                <div class="col-lg-3 col-md-6">
                    <div class="step-card" style="border-top-color: var(--secondary-color);">
                        <div class="step-icon-wrap" style="background-color: var(--pastel-blue); color: var(--secondary-color);">
                            <i class="bi bi-people"></i>
                            <span class="step-number" style="background-color: var(--secondary-color);">2</span>
                        </div>
                        <h5 class="text-dark fw-bold">2. Friendly Assessment</h5>
                        <p class="text-muted small mb-0">We arrange a playful interaction with the child (simple color recognition, alphabet puzzles) and parents to assess learning needs.</p>
                    </div>
                </div>

                <!-- Step 3 -->
                <div class="col-lg-3 col-md-6">
                    <div class="step-card" style="border-top-color: #FF9F43;">
                        <div class="step-icon-wrap" style="background-color: #FFF3E0; color: #FF9F43;">
                            <i class="bi bi-shield-check"></i>
                            <span class="step-number" style="background-color: #FF9F43;">3</span>
                        </div>
                        <h5 class="text-dark fw-bold">3. Verification</h5>
                        <p class="text-muted small mb-0">Submit birth certificates, passport photos, and mapping certificates. Pay registration fees to confirm enrollment and reserve seat.</p>
                    </div>
                </div>

                <!-- Step 4 -->
                <div class="col-lg-3 col-md-6">
                    <div class="step-card" style="border-top-color: #9b5de5;">
                        <div class="step-icon-wrap" style="background-color: #F3E8FF; color: #9b5de5;">
                            <i class="bi bi-laptop"></i>
                            <span class="step-number" style="background-color: #9b5de5;">4</span>
                        </div>
                        <h5 class="text-dark fw-bold">4. Portal Onboarding</h5>
                        <p class="text-muted small mb-0">Registered parents are added to the portal. You will receive login details to track daily updates, attendance, results and fee alerts.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Eligibility Criteria & Required Documents -->
    <section class="section-padding bg-light rounded-5 border-top border-bottom border-light">
        <div class="container">
            <div class="row g-4">
                <!-- Eligibility Criteria Column -->
                <div class="col-lg-6">
                    <div class="card criteria-card p-4">
                        <div class="d-flex align-items-center mb-4 gap-3">
                            <div class="fs-2 text-success"><i class="bi bi-check-square-fill"></i></div>
                            <div>
                                <h3 class="text-success mb-1">Eligibility Criteria</h3>
                                <p class="text-muted small mb-0">Age guidelines as of April 1st of the academic year.</p>
                            </div>
                        </div>

                        <div class="custom-list-item">
                            <span class="badge bg-success mt-1">Nursery</span>
                            <div>
                                <strong>Minimum 3 Years</strong>
                                <p class="text-muted small mb-0">Child must have completed 3 years of age.</p>
                            </div>
                        </div>

                        <div class="custom-list-item">
                            <span class="badge bg-success mt-1">LKG/UKG</span>
                            <div>
                                <strong>Minimum 4 to 5 Years</strong>
                                <p class="text-muted small mb-0">Age limits from 4 to 5 years completed.</p>
                            </div>
                        </div>

                        <div class="custom-list-item">
                            <span class="badge bg-success mt-1">Class 1</span>
                            <div>
                                <strong>Minimum 6 Years</strong>
                                <p class="text-muted small mb-0">Child must have completed 6 years of age.</p>
                            </div>
                        </div>

                        <div class="custom-list-item">
                            <span class="badge bg-success mt-1">Class 2-8</span>
                            <div>
                                <strong>Transfer Certificate</strong>
                                <p class="text-muted small mb-0">Requires a valid transfer certificate from a recognized school board.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Required Documents Column -->
                <div class="col-lg-6">
                    <div class="card docs-card p-4">
                        <div class="d-flex align-items-center mb-4 gap-3">
                            <div class="fs-2 text-primary"><i class="bi bi-file-earmark-text-fill"></i></div>
                            <div>
                                <h3 class="text-primary mb-1">Required Documents</h3>
                                <p class="text-muted small mb-0">Checklist of documents needed during registration.</p>
                            </div>
                        </div>

                        <div class="custom-list-item">
                            <div class="text-primary fs-5 mt-1"><i class="bi bi-check2-circle"></i></div>
                            <div>
                                <strong>Birth Certificate</strong>
                                <p class="text-muted small mb-0">Issued by Municipal Corporation or authorized registrar.</p>
                            </div>
                        </div>

                        <div class="custom-list-item">
                            <div class="text-primary fs-5 mt-1"><i class="bi bi-check2-circle"></i></div>
                            <div>
                                <strong>Passport-Size Photographs</strong>
                                <p class="text-muted small mb-0">4 photographs of the child and 2 photographs of each parent.</p>
                            </div>
                        </div>

                        <div class="custom-list-item">
                            <div class="text-primary fs-5 mt-1"><i class="bi bi-check2-circle"></i></div>
                            <div>
                                <strong>Address Proof</strong>
                                <p class="text-muted small mb-0">Copy of Aadhar Card, Utility Bill, or valid Rent Agreement.</p>
                            </div>
                        </div>

                        <div class="custom-list-item">
                            <div class="text-primary fs-5 mt-1"><i class="bi bi-check2-circle"></i></div>
                            <div>
                                <strong>Academic Records</strong>
                                <p class="text-muted small mb-0">Previous school report cards and official Transfer Certificate (if applicable).</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Fee Structure Cards -->
    <section class="section-padding">
        <div class="container">
            <div class="text-center mb-5">
                <span class="badge bg-danger kids-badge mb-2">Pricing Guide</span>
                <h2 class="text-primary fs-2">Annual Fee Structure (Mock)</h2>
                <p class="text-muted">Simple, clear, and transparent pricing levels with no hidden charges.</p>
            </div>

            <div class="row g-4 justify-content-center">
                <!-- Tier 1: Nursery to UKG -->
                <div class="col-lg-4 col-md-6">
                    <div class="fee-card">
                        <div class="fee-header">
                            <span class="fee-badge" style="background-color: var(--pastel-green); color: #2e7d32;">Pre-Primary</span>
                            <h4 class="fw-bold mb-0 text-dark">Nursery to UKG</h4>
                            <div class="fee-price">$180<span>/quarter</span></div>
                        </div>
                        <div class="fee-body">
                            <ul class="list-unstyled mb-4">
                                <li class="mb-3 text-muted"><i class="bi bi-check-circle-fill text-success me-2"></i> <strong>$250</strong> Admission Fee (One-Time)</li>
                                <li class="mb-3 text-muted"><i class="bi bi-check-circle-fill text-success me-2"></i> <strong>$120</strong> Activity & Security (Annual)</li>
                                <li class="mb-3 text-muted"><i class="bi bi-check-circle-fill text-success me-2"></i> Fun Learning Puzzles & Toy access</li>
                                <li class="mb-3 text-muted"><i class="bi bi-check-circle-fill text-success me-2"></i> Clean Playgrounds & Safety Care</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Tier 2: Class 1 to 3 (Featured) -->
                <div class="col-lg-4 col-md-6">
                    <div class="fee-card featured">
                        <div class="fee-header">
                            <span class="fee-badge" style="background-color: var(--pastel-pink); color: var(--primary-color);">Primary</span>
                            <h4 class="fw-bold mb-0 text-dark">Class 1 to 3</h4>
                            <div class="fee-price">$210<span>/quarter</span></div>
                        </div>
                        <div class="fee-body">
                            <ul class="list-unstyled mb-4">
                                <li class="mb-3 text-muted"><i class="bi bi-check-circle-fill text-danger me-2"></i> <strong>$300</strong> Admission Fee (One-Time)</li>
                                <li class="mb-3 text-muted"><i class="bi bi-check-circle-fill text-danger me-2"></i> <strong>$150</strong> Activity & Security (Annual)</li>
                                <li class="mb-3 text-muted"><i class="bi bi-check-circle-fill text-danger me-2"></i> Interactive Smart Class Syllabus</li>
                                <li class="mb-3 text-muted"><i class="bi bi-check-circle-fill text-danger me-2"></i> Arts, Craft & Computer Lab Access</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Tier 3: Class 4 to 8 -->
                <div class="col-lg-4 col-md-6">
                    <div class="fee-card">
                        <div class="fee-header">
                            <span class="fee-badge" style="background-color: var(--pastel-blue); color: #1565c0;">Middle School</span>
                            <h4 class="fw-bold mb-0 text-dark">Class 4 to 8</h4>
                            <div class="fee-price">$250<span>/quarter</span></div>
                        </div>
                        <div class="fee-body">
                            <ul class="list-unstyled mb-4">
                                <li class="mb-3 text-muted"><i class="bi bi-check-circle-fill text-primary me-2"></i> <strong>$350</strong> Admission Fee (One-Time)</li>
                                <li class="mb-3 text-muted"><i class="bi bi-check-circle-fill text-primary me-2"></i> <strong>$180</strong> Activity & Security (Annual)</li>
                                <li class="mb-3 text-muted"><i class="bi bi-check-circle-fill text-primary me-2"></i> Physics & Chemistry Lab Labs</li>
                                <li class="mb-3 text-muted"><i class="bi bi-check-circle-fill text-primary me-2"></i> Sport & Athletic Club Coaching</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Toggleable Full Details Table -->
            <div class="text-center mt-4">
                <button class="btn btn-outline-primary px-4 py-2 fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#tableCollapse" aria-expanded="false" aria-controls="tableCollapse">
                    <i class="bi bi-table me-2"></i> View Full Comparison Table
                </button>
            </div>

            <div class="collapse mt-4" id="tableCollapse">
                <div class="table-responsive bg-white rounded-3 shadow-sm border p-3">
                    <table class="table table-hover align-middle text-center mb-0">
                        <thead>
                            <tr class="table-danger">
                                <th>Class Level</th>
                                <th>Admission Fee (One-Time)</th>
                                <th>Tuition Fee (Quarterly)</th>
                                <th>Activity & Security Fee (Annual)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>Nursery to UKG</strong></td>
                                <td>$250</td>
                                <td>$180</td>
                                <td>$120</td>
                            </tr>
                            <tr>
                                <td><strong>Class 1 to 3</strong></td>
                                <td>$300</td>
                                <td>$210</td>
                                <td>$150</td>
                            </tr>
                            <tr>
                                <td><strong>Class 4 to 8</strong></td>
                                <td>$350</td>
                                <td>$250</td>
                                <td>$180</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="mt-4 text-center">
                <p class="text-muted small"><i class="bi bi-exclamation-triangle"></i> Note: Payments can be made via credit card, check, or online bank transfer at the school accounts section. Fee reminder alerts will be visible on parent dashboard portal.</p>
            </div>
        </div>
    </section>

    <!-- Admission Inquiry Form & Form Success Messages -->
    <section class="section-padding bg-light border-top">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show p-4 rounded-4 mb-4" role="alert">
                            <h4 class="alert-heading fw-bold"><i class="bi bi-check-circle-fill me-2"></i> Submitted Successfully!</h4>
                            <p class="mb-0">{{ session('success') }}</p>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <div class="inquiry-card card">
                        <div class="inquiry-header">
                            <h3 class="fw-bold mb-1">Online Admission Enquiry</h3>
                            <p class="text-white opacity-75 mb-0">Have questions? Fill out the details below, and our admissions officer will contact you within 24 hours.</p>
                        </div>
                        <div class="inquiry-body">
                            <form action="{{ route('contact.submit') }}" method="POST" class="needs-validation" novalidate>
                                @csrf
                                <!-- Hidden fields to format parent submission mapping to regular contact message -->
                                <input type="hidden" name="subject" value="Admissions Inquiry Form Submission">

                                <div class="row">
                                    <!-- Parent Name -->
                                    <div class="col-md-6 mb-3">
                                        <label for="name" class="form-label text-dark fw-bold small">Parent's Name *</label>
                                        <input type="text" class="form-control form-control-custom @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" placeholder="Enter full name" required>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Parent Email -->
                                    <div class="col-md-6 mb-3">
                                        <label for="email" class="form-label text-dark fw-bold small">Email Address *</label>
                                        <input type="email" class="form-control form-control-custom @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" placeholder="parent@email.com" required>
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Parent Phone (Embedded in message) -->
                                    <div class="col-md-6 mb-3">
                                        <label for="phone" class="form-label text-dark fw-bold small">Mobile Number *</label>
                                        <input type="tel" class="form-control form-control-custom" id="phone" name="phone" placeholder="e.g. +1 234 567 8900" required>
                                    </div>

                                    <!-- Child Name (Embedded in message) -->
                                    <div class="col-md-6 mb-3">
                                        <label for="child_name" class="form-label text-dark fw-bold small">Child's Full Name *</label>
                                        <input type="text" class="form-control form-control-custom" id="child_name" name="child_name" placeholder="Child's name" required>
                                    </div>

                                    <!-- Grade / Class Applied For (Embedded in message) -->
                                    <div class="col-md-6 mb-3">
                                        <label for="class_id" class="form-label text-dark fw-bold small">Grade / Class Applied For *</label>
                                        <select class="form-select form-control-custom" id="class_id" name="class_id" required>
                                            <option value="" disabled selected>Select target grade</option>
                                            @if(isset($classes) && count($classes) > 0)
                                                @foreach($classes as $c)
                                                    <option value="{{ $c->name }}">{{ $c->name }}</option>
                                                @endforeach
                                            @else
                                                <option value="Nursery">Nursery</option>
                                                <option value="LKG">LKG</option>
                                                <option value="UKG">UKG</option>
                                                <option value="Class 1">Class 1</option>
                                                <option value="Class 2">Class 2</option>
                                                <option value="Class 3">Class 3</option>
                                                <option value="Class 4">Class 4</option>
                                                <option value="Class 5">Class 5</option>
                                                <option value="Class 6">Class 6</option>
                                                <option value="Class 7">Class 7</option>
                                                <option value="Class 8">Class 8</option>
                                            @endif
                                        </select>
                                    </div>

                                    <!-- Target Branch (Embedded in message) -->
                                    <div class="col-md-6 mb-3">
                                        <label for="branch_id" class="form-label text-dark fw-bold small">Preferred Branch *</label>
                                        <select class="form-select form-control-custom" id="branch_id" name="branch_id" required>
                                            <option value="" disabled selected>Select school branch</option>
                                            @if(isset($branches) && count($branches) > 0)
                                                @foreach($branches as $b)
                                                    <option value="{{ $b->name }}">{{ $b->name }} - {{ $b->address }}</option>
                                                @endforeach
                                            @else
                                                <option value="Main Campus">Main Campus</option>
                                                <option value="North Branch">North Branch</option>
                                            @endif
                                        </select>
                                    </div>

                                    <!-- Custom message payload assembler -->
                                    <textarea id="message" name="message" class="d-none" required></textarea>

                                    <!-- Comments/Questions -->
                                    <div class="col-12 mb-4">
                                        <label for="comments" class="form-label text-dark fw-bold small">Comments or Specific Questions</label>
                                        <textarea class="form-control form-control-custom @error('message') is-invalid @enderror" id="comments" rows="4" placeholder="Any additional information or questions you have..."></textarea>
                                    </div>

                                    <div class="col-12 text-center">
                                        <button type="submit" class="btn btn-kids-secondary px-5 py-3 w-100" id="submitBtn">
                                            <i class="bi bi-send-fill me-2"></i> Submit Inquiry Details
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Accordion Section -->
    <section class="section-padding">
        <div class="container">
            <div class="text-center mb-5">
                <span class="badge bg-secondary kids-badge mb-2">FAQ Support</span>
                <h2 class="text-primary fs-2">Frequently Asked Questions</h2>
                <p class="text-muted">Quick answers to common questions about enrollment.</p>
            </div>

            <div class="row justify-content-center">
                <div class="col-lg-9">
                    <div class="accordion faq-accordion" id="admissionFaq">
                        <!-- FAQ 1 -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="faqHeading1">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse1" aria-expanded="true" aria-controls="faqCollapse1">
                                    What is the curriculum followed at Kidscholl Academy?
                                </button>
                            </h2>
                            <div id="faqCollapse1" class="accordion-collapse collapse show" aria-labelledby="faqHeading1" data-bs-parent="#admissionFaq">
                                <div class="accordion-body">
                                    We follow a child-centric interactive curriculum designed to develop cognitive, motor, and social skills in early years, transitioning to standard board guidelines for higher classes. Our methods combine play-based exploration with solid academic building blocks.
                                </div>
                            </div>
                        </div>

                        <!-- FAQ 2 -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="faqHeading2">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse2" aria-expanded="false" aria-controls="faqCollapse2">
                                    Are there school transport facilities?
                                </button>
                            </h2>
                            <div id="faqCollapse2" class="accordion-collapse collapse" aria-labelledby="faqHeading2" data-bs-parent="#admissionFaq">
                                <div class="accordion-body">
                                    Yes, we provide secure, GPS-enabled school bus facilities across major routes. All school buses are equipped with safety features and are accompanied by trained female attendants on board.
                                </div>
                            </div>
                        </div>

                        <!-- FAQ 3 -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="faqHeading3">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse3" aria-expanded="false" aria-controls="faqCollapse3">
                                    What is the student-to-teacher ratio?
                                </button>
                            </h2>
                            <div id="faqCollapse3" class="accordion-collapse collapse" aria-labelledby="faqHeading3" data-bs-parent="#admissionFaq">
                                <div class="accordion-body">
                                    We maintain a 15:1 student-to-teacher ratio in early years (Nursery, LKG, UKG) and a 20:1 ratio for higher primary classes to ensure personalized attention and optimal learning outcomes.
                                </div>
                            </div>
                        </div>

                        <!-- FAQ 4 -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="faqHeading4">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse4" aria-expanded="false" aria-controls="faqCollapse4">
                                    When does the academic session begin?
                                </button>
                            </h2>
                            <div id="faqCollapse4" class="accordion-collapse collapse" aria-labelledby="faqHeading4" data-bs-parent="#admissionFaq">
                                <div class="accordion-body">
                                    Our academic session begins in April and runs until March of the following year. Admissions for the new session typically open in late October of the preceding year.
                                </div>
                            </div>
                        </div>

                        <!-- FAQ 5 -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="faqHeading5">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse5" aria-expanded="false" aria-controls="faqCollapse5">
                                    How can parents monitor child progress?
                                </button>
                            </h2>
                            <div id="faqCollapse5" class="accordion-collapse collapse" aria-labelledby="faqHeading5" data-bs-parent="#admissionFaq">
                                <div class="accordion-body">
                                    Parents receive custom credentials to log in to our online Kidscholl Parent Portal. Once logged in, you can monitor daily attendance, view progress reports/results, read official circulars, and receive fee alerts.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Download PDF Center -->
    <section class="section-padding bg-light border-top">
        <div class="container text-center">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="p-5 bg-white rounded-4 border border-dashed border-danger shadow-sm">
                        <i class="bi bi-file-earmark-pdf-fill text-danger fs-1 mb-3 d-inline-block"></i>
                        <h3 class="text-dark fw-bold mb-2">Download Application Form</h3>
                        <p class="text-muted small mb-4">Would you prefer to apply offline? Download the offline registration PDF file, fill it out, and submit it directly at our admissions desk along with necessary credentials.</p>
                        <a href="#" class="btn btn-kids-primary py-3 px-4">
                            <i class="bi bi-download me-2"></i> Download Admission Form (PDF)
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const form = document.querySelector(".needs-validation");
        const submitBtn = document.getElementById("submitBtn");
        
        if (form) {
            form.addEventListener("submit", function (event) {
                // Compile inquiry details into the single "message" input for HomeController@submitContact
                const parentName = document.getElementById("name").value;
                const parentEmail = document.getElementById("email").value;
                const parentPhone = document.getElementById("phone").value;
                const childName = document.getElementById("child_name").value;
                const classApplied = document.getElementById("class_id").value;
                const preferredBranch = document.getElementById("branch_id").value;
                const comments = document.getElementById("comments").value;
                
                const compiledMessage = `Admission Enquiry Details:
------------------------------------------
Parent Name: ${parentName}
Parent Email: ${parentEmail}
Parent Phone: ${parentPhone}
Child Name: ${childName}
Grade/Class Applied For: ${classApplied}
Preferred Branch: ${preferredBranch}
------------------------------------------
Comments/Questions:
${comments}`;

                document.getElementById("message").value = compiledMessage;
                
                if (!form.checkValidity()) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                
                form.classList.add("was-validated");
            });
        }
    });
</script>
@endsection