@extends('layouts.frontend')

@section('title', 'Frequently Asked Questions - Kidscholl Academy')

@section('content')
    <!-- Page Header -->
    <section class="page-header text-center">
        <div class="container">
            <h1 class="page-header-title">Frequently Asked Questions</h1>
            <p class="lead text-muted">Answers regarding school admissions, portal credentials, and guidelines.</p>
        </div>
    </section>

    <!-- FAQ Accordion -->
    <section class="section-padding bg-white pt-0">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <!-- Admission FAQs -->
                    <h3 class="text-primary mb-4"><i class="bi bi-person-fill-add me-2 text-danger"></i> Admissions & Eligibility</h3>
                    <div class="accordion mb-5" id="faqAdmissions">
                        <div class="accordion-item border-0 shadow-sm mb-3 rounded-3 overflow-hidden">
                            <h2 class="accordion-header">
                                <button class="accordion-button fw-bold text-dark bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#adFaq1">
                                    What is the minimum age criteria for preschool?
                                </button>
                            </h2>
                            <div id="adFaq1" class="accordion-collapse collapse show" data-bs-parent="#faqAdmissions">
                                <div class="accordion-body text-muted small bg-white">
                                    For Nursery, the child should complete 3 years of age as of April 1st of that academic year. For LKG and UKG, the criteria is 4 and 5 years respectively.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item border-0 shadow-sm mb-3 rounded-3 overflow-hidden">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed fw-bold text-dark bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#adFaq2">
                                    Can we schedule a campus visit before enrolling?
                                </button>
                            </h2>
                            <div id="adFaq2" class="accordion-collapse collapse" data-bs-parent="#faqAdmissions">
                                <div class="accordion-body text-muted small bg-white">
                                    Absolutely. You can schedule a tour by filling out the Contact form or calling our front desk office during working hours (Mon-Fri, 9:00 AM - 2:00 PM).
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Parent Portal FAQs -->
                    <h3 class="text-primary mb-4"><i class="bi bi-people-fill me-2 text-success"></i> Parent Portal & OTP login</h3>
                    <div class="accordion mb-5" id="faqPortal">
                        <div class="accordion-item border-0 shadow-sm mb-3 rounded-3 overflow-hidden">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed fw-bold text-dark bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#ptFaq1">
                                    How do I login to the Parent Portal?
                                </button>
                            </h2>
                            <div id="ptFaq1" class="accordion-collapse collapse" data-bs-parent="#faqPortal">
                                <div class="accordion-body text-muted small bg-white">
                                    Navigate to the "Parent Portal" link at the top. Enter your child's Roll Number (e.g. ROLL001) and your registered mobile phone number. You will receive a mock verification OTP code instantly on screen (in sandbox debug mode) to verify and login.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item border-0 shadow-sm mb-3 rounded-3 overflow-hidden">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed fw-bold text-dark bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#ptFaq2">
                                    Can I view metrics of multiple children with one mobile login?
                                </button>
                            </h2>
                            <div id="ptFaq2" class="accordion-collapse collapse" data-bs-parent="#faqPortal">
                                <div class="accordion-body text-muted small bg-white">
                                    Yes! If multiple students are mapped to your parent record, a green child selector dropdown will be displayed at the top header of your parent dashboard. You can switch student profiles instantly with a single click.
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Policy & Uniform FAQs -->
                    <h3 class="text-primary mb-4"><i class="bi bi-shield-lock-fill me-2 text-warning"></i> School Policies & Guidelines</h3>
                    <div class="accordion" id="faqPolicies">
                        <div class="accordion-item border-0 shadow-sm mb-3 rounded-3 overflow-hidden">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed fw-bold text-dark bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#poFaq1">
                                    Where can I download the holiday calendar or uniforms circular?
                                </button>
                            </h2>
                            <div id="poFaq1" class="accordion-collapse collapse" data-bs-parent="#faqPolicies">
                                <div class="accordion-body text-muted small bg-white">
                                    Visit the public "Download Center" tab. All prospectus files, syllabus circulars, and annual holiday sheets are listed there for simple download access.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item border-0 shadow-sm mb-3 rounded-3 overflow-hidden">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed fw-bold text-dark bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#poFaq2">
                                    What is the school policy during severe weather forecasts?
                                </button>
                            </h2>
                            <div id="poFaq2" class="accordion-collapse collapse" data-bs-parent="#faqPolicies">
                                <div class="accordion-body text-muted small bg-white">
                                    During severe heavy rain or heat advisories, the school management publishes an emergency announcement notice on the dashboard and triggers portal notification status. Holiday announcements will also be logged under notifications.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection