@extends('frontend.layouts.app')

@section('title')

@endsection

@section('seo')
@endsection

@section('content')
    <div class="container-fluid bg-dark blank-banner">
        <div class="container text-white">
            <div>
                <h3 class="fw-bold mb-2">Our Services</h3>
                <div>
                    <i class="fa-solid fa-angle-right"></i> <span></span>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid bg-light service-package">
        <div class="container py-5">
            <div class="service-label mb-5">
                <div class="bg-white rounded shadow-sm px-4 py-5">
                    <div class="row gy-3 align-items-center">
                        <div class="col-12 col-md-8">
                            <h2 class="green fw-bold mb-1">Plan A (Suite)</h2>
                            <p>w/ 3 Meals for 2 Pax</p>
                        </div>
                        <div class="col-12 col-md text-center">
                            <div class="d-flex flex-wrap">
                                <div class="border gender-border male-border col text-start py-2 p-2">
                                    <input type="radio" class="green gender-radio" value="male" name="gender" id="male">
                                    <label for="male">Male</label>
                                    <h6 class="green">₱22, 290.00</h6>
                                </div>
                                <div class="border gender-border female-border col text-start py-2 ms-2 p-2">
                                    <input type="radio" class="green gender-radio" value="female" name="gender" id="female">
                                    <label for="female">Female</label>
                                    <h6 class="green">₱22, 290.00</h6>
                                </div>
                                <script>
                                    $(".gender-radio").on("click", function() {
                                        // alert();
                                        if($(this).val() == "female") {
                                            $(".female-border").addClass("border-danger border-left-2");
                                            $(".male-border").removeClass("border-danger border-left-2");
                                        }
                                        if($(this).val() == "male") {
                                            $(".male-border").addClass("border-danger border-left-2");
                                            $(".female-border").removeClass("border-danger border-left-2");
                                        }
                                        console.log($(this).val());
                                    });
                                </script>
                                <div class="col-lg-12 p-0 mt-2">
                                    <button class="btn bg-green w-100 text-white"><i class="fa fa-cart-shopping"></i> <a href="{{url("cart")}}" class="text-white text-decoration-none">ADD TO CART</a></button>
                                </div>
                            </div>
                            {{-- <a href="" class="btn-quote rounded-1 px-5 py-3 w-100">REQUEST A QUOTE</a> --}}
                        </div>
                    </div>
                </div>
                <div class="bg-red rounded pt-1"></div>
            </div>

            <div class="row gx-5 gy-4 mb-5">
                <div class="col-12 col-md">
                    @include('frontend.layouts.info-sidebar')
                </div>
                <div class="col-12 col-md-8">
                    <h1 class="green py-2">Lab Exams</h1>
                    <div class="row">
                        <div class="bg-white d-flex justify-content-between col-lg-12 ps-3 mb-2">
                            <div class="col-5 py-1">
                                <h5 class="green">Urinalysis</h5>
                            </div>
                            <div class="col-4 py-1 d-flex justify-content-end align-items-center">
                                <a href="{{url('/services-single')}}" class="text-decoration-none green me-3">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a>
                            </div>
                            <div class="col-3">
                                <button class="bg-green btn text-white btn-success w-100 border-0 hover-green-opacity-80"><i class="fa fa-cart-shopping"></i> <a href="{{url("cart")}}" class="text-white text-decoration-none">ADD TO CART</a></button>
                            </div>
                        </div>
                        <div class="bg-white d-flex justify-content-between col-lg-12 ps-3 mb-2">
                            <div class="col-5 py-1">
                                <h5 class="green">Fecalysis</h5>
                            </div>
                            <div class="col-4 py-1 d-flex justify-content-end align-items-center">
                                <a href="{{url('/services-single')}}" class="text-decoration-none green me-3">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a>
                            </div>
                            <div class="col-3">
                                <button class="bg-green btn text-white btn-success w-100 border-0 hover-green-opacity-80"><i class="fa fa-cart-shopping"></i> <a href="{{url("cart")}}" class="text-white text-decoration-none">ADD TO CART</a></button>
                            </div>
                        </div>
                        <div class="bg-white d-flex justify-content-between col-lg-12 ps-3 mb-2">
                            <div class="col-5 py-1">
                                <h5 class="green">Lorem Ipsum</h5>
                            </div>
                            <div class="col-4 py-1 d-flex justify-content-end align-items-center">
                                <a href="{{url('/services-single')}}" class="text-decoration-none green me-3">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a>
                            </div>
                            <div class="col-3">
                                <button class="bg-green btn text-white btn-success w-100 border-0 hover-green-opacity-80"><i class="fa fa-cart-shopping"></i> <a href="{{url("cart")}}" class="text-white text-decoration-none">ADD TO CART</a></button>
                            </div>
                        </div>
                        <div class="bg-white d-flex justify-content-between col-lg-12 ps-3 mb-2">
                            <div class="col-5 py-1">
                                <h5 class="green">Lorem Ipsum</h5>
                            </div>
                            <div class="col-4 py-1 d-flex justify-content-end align-items-center">
                                <a href="{{url('/services-single')}}" class="text-decoration-none green me-3">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a>
                            </div>
                            <div class="col-3">
                                <button class="bg-green btn text-white btn-success w-100 border-0 hover-green-opacity-80"><i class="fa fa-cart-shopping"></i> <a href="{{url("cart")}}" class="text-white text-decoration-none">ADD TO CART</a></button>
                            </div>
                        </div>
                        <div class="bg-white d-flex justify-content-between col-lg-12 ps-3 mb-2">
                            <div class="col-5 py-1">
                                <h5 class="green">Lorem Ipsum</h5>
                            </div>
                            <div class="col-4 py-1 d-flex justify-content-end align-items-center">
                                <a href="{{url('/services-single')}}" class="text-decoration-none green me-3">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a>
                            </div>
                            <div class="col-3">
                                <button class="bg-green btn text-white btn-success w-100 border-0 hover-green-opacity-80"><i class="fa fa-cart-shopping"></i> <a href="{{url("cart")}}" class="text-white text-decoration-none">ADD TO CART</a></button>
                            </div>
                        </div>
                    </div>
                    <h1 class="green py-3">Blood Chemistry</h1>
                    <div class="row">
                        <div class="bg-white d-flex justify-content-between col-lg-12 ps-3 mb-2">
                            <div class="col-5 py-1">
                                <h5 class="green">(FBS) Fasting Blood Sugar Serum</h5>
                            </div>
                            <div class="col-4 py-1 d-flex justify-content-end align-items-center">
                                <a href="{{url('/services-single')}}" class="text-decoration-none green me-3">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a>
                            </div>
                            <div class="col-3">
                                <button class="bg-green btn text-white btn-success w-100 border-0 hover-green-opacity-80"><i class="fa fa-cart-shopping"></i> <a href="{{url("cart")}}" class="text-white text-decoration-none">ADD TO CART</a></button>
                            </div>
                        </div>
                        <div class="bg-white d-flex justify-content-between col-lg-12 ps-3 mb-2">
                            <div class="col-5 py-1">
                                <h5 class="green">Lorem Ipsum</h5>
                            </div>
                            <div class="col-4 py-1 d-flex justify-content-end align-items-center">
                                <a href="{{url('/services-single')}}" class="text-decoration-none green me-3">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a>
                            </div>
                            <div class="col-3">
                                <button class="bg-green btn text-white btn-success w-100 border-0 hover-green-opacity-80"><i class="fa fa-cart-shopping"></i> <a href="{{url("cart")}}" class="text-white text-decoration-none">ADD TO CART</a></button>
                            </div>
                        </div>
                        <div class="bg-white d-flex justify-content-between col-lg-12 ps-3 mb-2">
                            <div class="col-5 py-1">
                                <h5 class="green">Lorem Ipsum</h5>
                            </div>
                            <div class="col-4 py-1 d-flex justify-content-end align-items-center">
                                <a href="{{url('/services-single')}}" class="text-decoration-none green me-3">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a>
                            </div>
                            <div class="col-3">
                                <button class="bg-green btn text-white btn-success w-100 border-0 hover-green-opacity-80"><i class="fa fa-cart-shopping"></i> <a href="{{url("cart")}}" class="text-white text-decoration-none">ADD TO CART</a></button>
                            </div>
                        </div>
                        <div class="bg-white d-flex justify-content-between col-lg-12 ps-3 mb-2">
                            <div class="col-5 py-1">
                                <h5 class="green">Lorem Ipsum</h5>
                            </div>
                            <div class="col-4 py-1 d-flex justify-content-end align-items-center">
                                <a href="{{url('/services-single')}}" class="text-decoration-none green me-3">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a>
                            </div>
                            <div class="col-3">
                                <button class="bg-green btn text-white btn-success w-100 border-0 hover-green-opacity-80"><i class="fa fa-cart-shopping"></i> <a href="{{url("cart")}}" class="text-white text-decoration-none">ADD TO CART</a></button>
                            </div>
                        </div>
                        <div class="bg-white d-flex justify-content-between col-lg-12 ps-3 mb-2">
                            <div class="col-5 py-1">
                                <h5 class="green">Lorem Ipsum</h5>
                            </div>
                            <div class="col-4 py-1 d-flex justify-content-end align-items-center">
                                <a href="{{url('/services-single')}}" class="text-decoration-none green me-3">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a>
                            </div>
                            <div class="col-3">
                                <button class="bg-green btn text-white btn-success w-100 border-0 hover-green-opacity-80"><i class="fa fa-cart-shopping"></i> <a href="{{url("cart")}}" class="text-white text-decoration-none">ADD TO CART</a></button>
                            </div>
                        </div>
                    </div>
                    <h1 class="green py-3">Imaging Studies</h1>
                    <div class="row">
                        <div class="bg-white d-flex justify-content-between col-lg-12 ps-3 mb-2">
                            <div class="col-5 py-1">
                                <h5 class="green">Chest X - Ray</h5>
                            </div>
                            <div class="col-4 py-1 d-flex justify-content-end align-items-center">
                                <a href="{{url('/services-single')}}" class="text-decoration-none green me-3">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a>
                            </div>
                            <div class="col-3">
                                <button class="bg-green btn text-white btn-success w-100 border-0 hover-green-opacity-80"><i class="fa fa-cart-shopping"></i> <a href="{{url("cart")}}" class="text-white text-decoration-none">ADD TO CART</a></button>
                            </div>
                        </div>
                        <div class="bg-white d-flex justify-content-between col-lg-12 ps-3 mb-2">
                            <div class="col-5 py-1">
                                <h5 class="green">Lorem Ipsum</h5>
                            </div>
                            <div class="col-4 py-1 d-flex justify-content-end align-items-center">
                                <a href="{{url('/services-single')}}" class="text-decoration-none green me-3">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a>
                            </div>
                            <div class="col-3">
                                <button class="bg-green btn text-white btn-success w-100 border-0 hover-green-opacity-80"><i class="fa fa-cart-shopping"></i> <a href="{{url("cart")}}" class="text-white text-decoration-none">ADD TO CART</a></button>
                            </div>
                        </div>
                        <div class="bg-white d-flex justify-content-between col-lg-12 ps-3 mb-2">
                            <div class="col-5 py-1">
                                <h5 class="green">Lorem Ipsum</h5>
                            </div>
                            <div class="col-4 py-1 d-flex justify-content-end align-items-center">
                                <a href="{{url('/services-single')}}" class="text-decoration-none green me-3">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a>
                            </div>
                            <div class="col-3">
                                <button class="bg-green btn text-white btn-success w-100 border-0 hover-green-opacity-80"><i class="fa fa-cart-shopping"></i> <a href="{{url("cart")}}" class="text-white text-decoration-none">ADD TO CART</a></button>
                            </div>
                        </div>
                        <div class="bg-white d-flex justify-content-between col-lg-12 ps-3 mb-2">
                            <div class="col-5 py-1">
                                <h5 class="green">Lorem Ipsum</h5>
                            </div>
                            <div class="col-4 py-1 d-flex justify-content-end align-items-center">
                                <a href="{{url('/services-single')}}" class="text-decoration-none green me-3">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a>
                            </div>
                            <div class="col-3">
                                <button class="bg-green btn text-white btn-success w-100 border-0 hover-green-opacity-80"><i class="fa fa-cart-shopping"></i> <a href="{{url("cart")}}" class="text-white text-decoration-none">ADD TO CART</a></button>
                            </div>
                        </div>
                        <div class="bg-white d-flex justify-content-between col-lg-12 ps-3 mb-2">
                            <div class="col-5 py-1">
                                <h5 class="green">Lorem Ipsum</h5>
                            </div>
                            <div class="col-4 py-1 d-flex justify-content-end align-items-center">
                                <a href="{{url('/services-single')}}" class="text-decoration-none green me-3">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a>
                            </div>
                            <div class="col-3">
                                <button class="bg-green btn text-white btn-success w-100 border-0 hover-green-opacity-80"><i class="fa fa-cart-shopping"></i> <a href="{{url("cart")}}" class="text-white text-decoration-none">ADD TO CART</a></button>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- <div class="col-12 col-md">
                    <div class="rounded bg-white shadow-sm px-3 py-4">
                        <h4 class="fw-bold text-muted mb-3">Doctor's Schedule</h4>

                        <div class="vstack gap-0 mb-4">
                            <div class="border-bottom pb-2 mb-1">
                                <table class="w-100">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span>Monday</span>
                                            </td>
                                            <td class="text-end">
                                                <span>
                                                    8:00AM - 17:00PM
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="border-bottom pb-2 mb-1">
                                <table class="w-100">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span>Tuesday</span>
                                            </td>
                                            <td class="text-end">
                                                <span>
                                                    9:30AM - 22:00PM
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="border-bottom pb-2 mb-1">
                                <table class="w-100">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span>Wednesday</span>
                                            </td>
                                            <td class="text-end">
                                                <span>
                                                    8:00AM - 17:00PM
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="border-bottom pb-2 mb-1">
                                <table class="w-100">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span>Thursday</span>
                                            </td>
                                            <td class="text-end">
                                                <span>
                                                    8:00AM - 17:00PM
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="border-bottom pb-2 mb-1">
                                <table class="w-100">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span>Friday</span>
                                            </td>
                                            <td class="text-end">
                                                <span>
                                                    8:00AM - 17:00PM
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="border-bottom pb-2 mb-1">
                                <table class="w-100">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span>Saturday</span>
                                            </td>
                                            <td class="text-end">
                                                <span>
                                                    9:30AM - 17:30PM
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="pb-2">
                                <table class="w-100">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span>Sunday</span>
                                            </td>
                                            <td class="text-end">
                                                <span>
                                                    9:30AM - 17:30PM
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="rounded-5 bg-red pt-1"></div>
                </div> --}}
            </div>

            <div class="d-md-block d-none py-2">
            </div>

            <div class="text-center mb-5">
                <h2 class="fw-bold green">Doctors</h2>
            </div>

            <section class="splide mb-5" id="splide1" aria-label="Splide Basic HTML Example">
                <div class="splide__track">
                    <ul class="splide__list">
                        <li class="splide__slide">
                            <div class="rounded bg-white div-doctor position-relative overflow-hidden">
                                <div class="position-relative overflow-hidden mb-3">
                                    <img src="{{ asset('images/doctor1.png') }}" class="img-fluid" alt="">
                                    <div class="position-absolute translate-middle start-50 top-100 w-100 shadow-place">
                                        <div class="with-shadow bg-white pt-1"></div>
                                    </div>
                                </div>

                                <div class="p-3">
                                    <h4 class="fw-bold mb-1">Sol Mercurey</h4>
                                    <p class="green fw-bold">Osteopathic</p>

                                    <p class="text-muted mb-5">
                                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores maxime fugiat
                                        reiciendis
                                        vel totam? Ab, est ea quidem, molestiae quas quaerat incidunt saepe ad
                                        necessitatibus
                                        asperiores officia nam ratione aut?
                                    </p>

                                    <div class="d-flex gap-3 align-items-center">
                                        <i class="fa-solid fa-phone green"></i>
                                        <span class="fw-bold text-muted">+090 0000-00</span>
                                    </div>
                                </div>

                                <div class="position-absolute translate-middle links-place w-100">
                                    <div class="d-flex align-items-center gap-3">
                                        <a href="https://www.facebook.com/" target="_blank" rel="noopener"
                                            class="border-links">
                                            <img src="{{ asset('images/icon-fb.png') }}" class="img-icon-fb"
                                                alt="">
                                        </a>
                                        <a href="https://www.instagram.com/" target="_blank" rel="noopener"
                                            class="social-hover">
                                            <div class="border-links">
                                                <img src="{{ asset('images/icon-ig.png') }}" class="img-icon"
                                                    alt="">
                                            </div>
                                        </a>
                                        <a href="https://www.linkedin.com/feed/" target="_blank" rel="noopener"
                                            class="social-hover">
                                            <div class="border-links">
                                                <img src="{{ asset('images/icon-linkedin.png') }}" class="img-icon"
                                                    alt="">
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="splide__slide">
                            <div class="rounded bg-white div-doctor position-relative overflow-hidden">
                                <div class="position-relative overflow-hidden mb-3">
                                    <img src="{{ asset('images/doctor2.png') }}" class="img-fluid" alt="">
                                    <div class="position-absolute translate-middle start-50 top-100 w-100 shadow-place">
                                        <div class="with-shadow bg-white pt-1"></div>
                                    </div>
                                </div>

                                <div class="p-3">
                                    <h4 class="fw-bold mb-1">Ava Jupiterun</h4>
                                    <p class="green fw-bold">Pediatrician</p>

                                    <p class="text-muted mb-5">
                                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores maxime fugiat
                                        reiciendis
                                        vel totam? Ab, est ea quidem, molestiae quas quaerat incidunt saepe ad
                                        necessitatibus
                                        asperiores officia nam ratione aut?
                                    </p>

                                    <div class="d-flex gap-3 align-items-center">
                                        <i class="fa-solid fa-phone green"></i>
                                        <span class="fw-bold text-muted">+090 0000-00</span>
                                    </div>
                                </div>

                                <div class="position-absolute translate-middle links-place w-100">
                                    <div class="d-flex align-items-center gap-3">
                                        <a href="https://www.facebook.com/" target="_blank" rel="noopener"
                                            class="border-links">
                                            <img src="{{ asset('images/icon-fb.png') }}" class="img-icon-fb"
                                                alt="">
                                        </a>
                                        <a href="https://www.instagram.com/" target="_blank" rel="noopener"
                                            class="social-hover">
                                            <div class="border-links">
                                                <img src="{{ asset('images/icon-ig.png') }}" class="img-icon"
                                                    alt="">
                                            </div>
                                        </a>
                                        <a href="https://www.linkedin.com/feed/" target="_blank" rel="noopener"
                                            class="social-hover">
                                            <div class="border-links">
                                                <img src="{{ asset('images/icon-linkedin.png') }}" class="img-icon"
                                                    alt="">
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="splide__slide">
                            <div class="rounded bg-white div-doctor position-relative overflow-hidden">
                                <div class="position-relative overflow-hidden mb-3">
                                    <img src="{{ asset('images/doctor3.png') }}" class="img-fluid" alt="">
                                    <div class="position-absolute translate-middle start-50 top-100 w-100 shadow-place">
                                        <div class="with-shadow bg-white pt-1"></div>
                                    </div>
                                </div>

                                <div class="p-3">
                                    <h4 class="fw-bold mb-1">Ben Marsh</h4>
                                    <p class="green fw-bold">Specialist</p>

                                    <p class="text-muted mb-5">
                                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores maxime fugiat
                                        reiciendis
                                        vel totam? Ab, est ea quidem, molestiae quas quaerat incidunt saepe ad
                                        necessitatibus
                                        asperiores officia nam ratione aut?
                                    </p>

                                    <div class="d-flex gap-3 align-items-center">
                                        <i class="fa-solid fa-phone green"></i>
                                        <span class="fw-bold text-muted">+090 0000-00</span>
                                    </div>
                                </div>

                                <div class="position-absolute translate-middle links-place w-100">
                                    <div class="d-flex align-items-center gap-3">
                                        <a href="https://www.facebook.com/" target="_blank" rel="noopener"
                                            class="border-links">
                                            <img src="{{ asset('images/icon-fb.png') }}" class="img-icon-fb"
                                                alt="">
                                        </a>
                                        <a href="https://www.instagram.com/" target="_blank" rel="noopener"
                                            class="social-hover">
                                            <div class="border-links">
                                                <img src="{{ asset('images/icon-ig.png') }}" class="img-icon"
                                                    alt="">
                                            </div>
                                        </a>
                                        <a href="https://www.linkedin.com/feed/" target="_blank" rel="noopener"
                                            class="social-hover">
                                            <div class="border-links">
                                                <img src="{{ asset('images/icon-linkedin.png') }}" class="img-icon"
                                                    alt="">
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>

            <div class="d-flex gap-1 mb-2">
                <div class="border-bottom border-black" style="width: 90%"></div>
                <button class="rounded text-center border px-4 py-3 btn-slider" id="prevBtn">
                    <i class="fa-solid fa-angle-left"></i>
                </button>
                <button class="rounded text-center border px-4 py-3 btn-slider" id="nextBtn">
                    <i class="fa-solid fa-angle-right"></i>
                </button>
            </div>
        </div>
    </div>

    <div class="container-fluid bg-white">
        <div class="container py-5">
            <div class="row">
                <div class="col-lg-6 col-md-12 mb-4 mb-md-0 fifth-contact-bg p-5">
                    <form>
                        <h1 class="text-white pb-2">Get In Touch</h1>
                        <div class="my-3">
                            <div class="inputBox my-3">
                                <input type="text" required="">
                                <span>Full Name</span>
                            </div>
                            <div class="inputBox my-3">
                                <input type="tel" required="">
                                <span>Contact No.</span>
                            </div>
                            <div class="inputBox my-3">
                                <input type="email" required="required">
                                <span>Email</span>
                            </div>
                            <div class="inputBox my-3">
                                <input type="text" required="required">
                                <span>Message</span>
                            </div>
                            <button type="submit" class="btn fifth-button-bg">Submit<img class="mx-1"
                                    src="images/right-arrow.png" style="height:14px; width: 16px"></button>
                        </div>
                    </form>
                </div>
                <div class="col-lg-6 col-md-12 mb-4 mb-md-0 faq-container">
                    <h1 class="text-secondary pb-2">FAQs</h1>
                    <div>
                        <div class="accordion accordion-flush my-2" id="faqlist">
                            <div class="accordion-item" style="border: 1px solid #C0C0C0" data-bs-toggle="collapse"
                                data-bs-target="#faq-content-1">
                                <div class="accordion-header d-flex flex-row">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#faq-content-1"></button>
                                    <h6>How can I schedule an appointment?</h6>
                                </div>
                                <div id="faq-content-1" class="accordion-collapse collapse" data-bs-parent="#faqlist">
                                    <div class="accordion-body">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua.
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item my-2" style="border: 1px solid #C0C0C0" data-bs-toggle="collapse"
                                data-bs-target="#faq-content-2">
                                <div class="accordion-header d-flex flex-row">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#faq-content-2"></button>
                                    <h6>What form of payment do you accept?</h6>
                                </div>
                                <div id="faq-content-2" class="accordion-collapse collapse" data-bs-parent="#faqlist">
                                    <div class="accordion-body">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua.
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item my-2" style="border: 1px solid #C0C0C0" data-bs-toggle="collapse"
                                data-bs-target="#faq-content-3">
                                <div class="accordion-header d-flex flex-row">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#faq-content-3"></button>
                                    <h6>What emergency services do you provide?</h6>
                                </div>
                                <div id="faq-content-3" class="accordion-collapse collapse" data-bs-parent="#faqlist">
                                    <div class="accordion-body">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua.
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item my-2" style="border: 1px solid #C0C0C0" data-bs-toggle="collapse"
                                data-bs-target="#faq-content-4">
                                <div class="accordion-header d-flex flex-row">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#faq-content-4"></button>
                                    <h6>What should I do if I have a medical emergency?</h6>
                                </div>
                                <div id="faq-content-4" class="accordion-collapse collapse" data-bs-parent="#faqlist">
                                    <div class="accordion-body">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua.
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item my-2" style="border: 1px solid #C0C0C0" data-bs-toggle="collapse"
                                data-bs-target="#faq-content-5">
                                <div class="accordion-header d-flex flex-row">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#faq-content-5"></button>
                                    <h6>Can I get my test result online?</h6>
                                </div>
                                <div id="faq-content-5" class="accordion-collapse collapse" data-bs-parent="#faqlist">
                                    <div class="accordion-body">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            var splide1 = new Splide('#splide1', {
                type: 'loop',
                perPage: 3,
                perMove: 1,
                gap: 30,
                arrows: false,
                padding: 20,
                breakpoints: {
                    768: {
                        perPage: 1,
                        gap: 0,
                    }
                }
            });
            splide1.mount();

            $('#prevBtn').on('click', function() {
                splide1.go('-1');
            });

            $('#nextBtn').on('click', function() {
                splide1.go('+1');
            });
        });
    </script>
@endsection