@extends('layouts.app')

@section('content')

    <!-- Page Title -->
    <div class="page-title">
        <nav class="breadcrumbs">
            <div class="container">
                <ol>
                    <li><a href="{{ route('index') }}">Home</a></li>
                    <li class="current">Faq</li>
                </ol>
            </div>
        </nav>
    </div><!-- End Page Title -->

    <!-- Faq Section -->
    <section id="faq" class="faq section">

        <div class="container" data-aos="fade-up" data-aos-delay="100">

            <div class="row justify-content-center">
                <div class="col-lg-9">

                    <div class="faq-wrapper">

                        <div class="faq-item faq-active" data-aos="fade-up" data-aos-delay="150">
                            <div class="faq-header">
                                <span class="faq-number">01</span>
                                <h4>How do I book an appointment?</h4>
                                <div class="faq-toggle">
                                    <i class="bi bi-plus"></i>
                                    <i class="bi bi-dash"></i>
                                </div>
                            </div>
                            <div class="faq-content">
                                <div class="content-inner">
                                    <p>Go to the Appointment page, fill in your details, select a department and doctor, choose a date, and submit your request. You will receive a confirmation once the appointment is approved.</p>
                                </div>
                            </div>
                        </div><!-- End FAQ Item -->

                        <div class="faq-item" data-aos="fade-up" data-aos-delay="200">
                            <div class="faq-header">
                                <span class="faq-number">02</span>
                                <h4>Do I need an account to use the system?</h4>
                                <div class="faq-toggle">
                                    <i class="bi bi-plus"></i>
                                    <i class="bi bi-dash"></i>
                                </div>
                            </div>
                            <div class="faq-content">
                                <div class="content-inner">
                                    <p>Yes. Patients need an account to manage appointments, update profile details, and view medical history. Doctors and admin also log in to manage schedules and system records.</p>
                                </div>
                            </div>
                        </div><!-- End FAQ Item -->

                        <div class="faq-item" data-aos="fade-up" data-aos-delay="250">
                            <div class="faq-header">
                                <span class="faq-number">03</span>
                                <h4>Can I cancel an appointment after booking?</h4>
                                <div class="faq-toggle">
                                    <i class="bi bi-plus"></i>
                                    <i class="bi bi-dash"></i>
                                </div>
                            </div>
                            <div class="faq-content">
                                <div class="content-inner">
                                    <p>Yes. Patients can cancel an upcoming appointment from their dashboard. If the appointment was already accepted, the system will update the status and notify the doctor.</p>
                                </div>
                            </div>
                        </div><!-- End FAQ Item -->

                        <div class="faq-item" data-aos="fade-up" data-aos-delay="300">
                            <div class="faq-header">
                                <span class="faq-number">04</span>
                                <h4>How does doctor availability work?</h4>
                                <div class="faq-toggle">
                                    <i class="bi bi-plus"></i>
                                    <i class="bi bi-dash"></i>
                                </div>
                            </div>
                            <div class="faq-content">
                                <div class="content-inner">
                                    <p>Doctors can set their available days and time slots from their dashboard. Patients can then request appointments based on those available slots.</p>
                                </div>
                            </div>
                        </div><!-- End FAQ Item -->

                        <div class="faq-item" data-aos="fade-up" data-aos-delay="350">
                            <div class="faq-header">
                                <span class="faq-number">05</span>
                                <h4>What information is stored in medical history?</h4>
                                <div class="faq-toggle">
                                    <i class="bi bi-plus"></i>
                                    <i class="bi bi-dash"></i>
                                </div>
                            </div>
                            <div class="faq-content">
                                <div class="content-inner">
                                    <p>Medical history can include past appointments and consultation notes added by doctors. This helps doctors review previous visits and provide better follow-up care.</p>
                                </div>
                            </div>
                        </div><!-- End FAQ Item -->

                    </div>

                </div>
            </div>

        </div>

    </section><!-- /Faq Section -->

@endsection