@extends('frontend.layouts.app')

@section('title')
    Our Services | Brokenshire Medical Center
@endsection

@section('seo')
    <style>
        .blank-banner {
            background: url('{{ url('/images/services/SERVICES AND CENTERS PHOTO.jpg') }}') !important;
            padding: 20em 0;
            background-size: cover !important;
            background-position: center !important;
        }
    </style>
    <meta property="og:locale" content="en_US" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Our Services | Brokenshire Medical Center" />
    <meta property="og:url" content="{{ url('/our-services') }}" />
    <meta property="og:site_name" content="Our Services | Brokenshire Medical Center" />
    <meta property="og:image" content="{{ asset('images/icons/meta-thumbnail.jpg') }}" />
    <meta property="og:thumbnail" content="{{ asset('images/icons/meta-thumbnail.jpg') }}" />
    <meta property="og:icon" content="{{ asset('images/icons/android-chrome-192x192.png') }}" />
    <link rel="icon" href="{{ asset('images/icons/android-chrome-192x192.png') }}">
    <meta property="og:description"
        content="Brokenshire Medical Center offers exceptional healthcare services in Davao City. We are committed to compassionate care, affordability, and excellence. Find a doctor, schedule an appointment, or learn more about our services." />
    <meta property="og:keywords"
        content="Davao City hospital, Philippines healthcare, Quality medical care, Affordable healthcare, Compassionate care, Medical specialties (Urinalysis, Fecalysis, Ova & Parasites, Amoeba, Complete Blood Count, Red Blood Cells, White Blood Cells, Platelet Count, Hemoglobin, Hemetocrit), Appointments, Patient portal, Medical records">
@endsection

@section('content')
    <div class="container-fluid bg-dark blank-banner">
        <div class="container text-white">
            <div>
                <h2 class="fw-bold mb-2">Services & Centers</h2>
            </div>
        </div>
    </div>

    <div class="container-fluid bg-light">
        <div class="container py-5">
            <div class="service-label">
                <div class="px-4 py-5 bg-white rounded shadow-sm">
                    <h2 class="py-3 green fw-bold service-title"> Brokenshire WomanCenter



                    </h2>
                </div>
                <div style="background-color: #f5f5dc;" class="pt-1 mb-5 rounded "></div>
            </div>
            <div class="row">
                @include('frontend.pages.services.sidebar.index')
                <div class="col-12 col-md-8">
                    <div class="">
                        <div class="">
                            <div class="row g-4">
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <h6 class="fw-bold green">This specialized center offers medical, surgical, and
                                            nursing services pertaining to Obstetrics and Gynecological cases.

                                            <br><br>
                                            Services Offered:



                                        </h6>
                                    </div>
                                    <div>

                                    </div>

                                    <style>
                                        .custom-bullets {
                                            list-style-type: disc;
                                            /* Add bullets */
                                        }

                                        .custom-bullets li {
                                            margin-bottom: 0.5rem;
                                            /* Add space between list items */
                                        }

                                        .custom-bullets a {
                                            font-size: 1rem;
                                            /* Adjust font size */
                                        }

                                        .responsive-nowrap {
                                            white-space: normal;
                                            /* Default wrapping for small screens */
                                        }

                                        @media (min-width: 768px) {

                                            /* Medium screens and larger */
                                            .responsive-nowrap {
                                                white-space: nowrap;
                                            }
                                        }
                                    </style>

                                    <div class="p-0 bg-white d-flex border-left-2 justify-content-between col-lg-12">
                                        <div class="col-5 d-flex align-items-center">
                                            <div class="accordion w-100" id="dentistryAccordion">
                                                <div class="border-0 accordion-item">
                                                    <h2 class="accordion-header" id="headingDentistry1">
                                                        <button
                                                            class="bg-transparent border-0 w-100 d-flex align-items-center"
                                                            type="button" data-bs-toggle="collapse"
                                                            data-bs-target="#collapseDentistry4" aria-expanded="true"
                                                            aria-controls="collapseDentistry4">
                                                            <div class="w-100 ps-2 text-start responsive-nowrap">
                                                                <h6 class="m-0 green">Obstetrics Services:

                                                                </h6>
                                                            </div>
                                                        </button>
                                                    </h2>

                                                    <div id="collapseDentistry4" class="accordion-collapse collapse "
                                                        aria-labelledby="headingDentistry"
                                                        data-bs-parent="#dentistryAccordion1">
                                                        <div class="p-3 accordion-body">
                                                            <ul class="custom-bullets fs-5 ms-4">
                                                                <li><a class="dropdown-item" href="#">Normal Delivery
                                                                        (Lying-in and expanded packages)

                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Caesarian
                                                                        Section Delivery

                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Birthing Package


                                                                    </a></li>
                                                                <li><a class="dropdown-item"
                                                                        href="#">Imminent/Emergency Delivery (NSVD/CS)


                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Labor
                                                                        Watch/Monitoring (20 Weeks Age of Gestation and
                                                                        above)

                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">High Risk
                                                                        Pregnancy Monitoring (20 Weeks Age of Gestation and
                                                                        above)
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Fetal Death in
                                                                        Utero (25 Weeks Age of Gestation and below)

                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Clinic: Prenatal
                                                                        examination and counseling, Family planning services
                                                                        and counseling

                                                                    </a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="py-4 col-4 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="py-2 text-white border-0 rounded bg-green btn btn-success w-100 hover-green-opacity-80"><a href="{{url("services-single")}}" class="text-white text-decoration-none">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a></button> --}}
                                        </div>
                                    </div>





                                    <div class="p-0 bg-white d-flex border-left-2 justify-content-between col-lg-12">
                                        <div class="col-5 d-flex align-items-center">
                                            <div class="accordion w-100" id="dentistryAccordion">
                                                <div class="border-0 accordion-item">
                                                    <h2 class="accordion-header" id="headingDentistry1">
                                                        <button
                                                            class="bg-transparent border-0 w-100 d-flex align-items-center"
                                                            type="button" data-bs-toggle="collapse"
                                                            data-bs-target="#collapseDentistry4" aria-expanded="true"
                                                            aria-controls="collapseDentistry4">
                                                            <div class="w-100 ps-2 text-start responsive-nowrap">
                                                                <h6 class="m-0 green">Gynecology Services:


                                                                </h6>
                                                            </div>
                                                        </button>
                                                    </h2>

                                                    <div id="collapseDentistry4" class="accordion-collapse collapse "
                                                        aria-labelledby="headingDentistry"
                                                        data-bs-parent="#dentistryAccordion1">
                                                        <div class="p-3 accordion-body">
                                                            <ul class="custom-bullets fs-5 ms-4">
                                                                <li><a class="dropdown-item" href="#">Gynecologic
                                                                        Package - Ward


                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Care and
                                                                        treatment of gynecological cases


                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Women’s
                                                                        ultrasound


                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Colposcopy
                                                                        Package



                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Cervical
                                                                        Cancer screening and diagnosis


                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Menopausal
                                                                        Clinic

                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Dilatation and
                                                                        Curettage (D&C)
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Total
                                                                        Abdominal Hysterectomy Salphyngo Operectomy (TAHSBO)

                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Total
                                                                        Abdominal Hysterectomy

                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Colposcopy
                                                                        (Visualization of cervix, Biopsy, Cryosurgery, LEEP
                                                                        - Loop Electrosurgical Excision Procedure)

                                                                    </a></li>

                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="py-4 col-4 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="py-2 text-white border-0 rounded bg-green btn btn-success w-100 hover-green-opacity-80"><a href="{{url("services-single")}}" class="text-white text-decoration-none">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a></button> --}}
                                        </div>
                                    </div>






                                    <div class="p-0 bg-white d-flex border-left-2 justify-content-between col-lg-12">
                                        <div class="col-5 d-flex align-items-center">
                                            <div class="accordion w-100" id="dentistryAccordion">
                                                <div class="border-0 accordion-item">
                                                    <h2 class="accordion-header" id="headingDentistry1">
                                                        <button
                                                            class="bg-transparent border-0 w-100 d-flex align-items-center"
                                                            type="button" data-bs-toggle="collapse"
                                                            data-bs-target="#collapseDentistry4" aria-expanded="true"
                                                            aria-controls="collapseDentistry4">
                                                            <div class="w-100 ps-2 text-start responsive-nowrap">
                                                                <h6 class="m-0 green">Other
                                                                    Services:


                                                                </h6>
                                                            </div>
                                                        </button>
                                                    </h2>

                                                    <div id="collapseDentistry4" class="accordion-collapse collapse "
                                                        aria-labelledby="headingDentistry"
                                                        data-bs-parent="#dentistryAccordion1">
                                                        <div class="p-3 accordion-body">
                                                            <ul class="custom-bullets fs-5 ms-4">

                                                                <li><a class="dropdown-item" href="#">Program for
                                                                        Teens
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">HIV Screening
                                                                        (with CHO-RHWCC and DOH-RO XI)
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">BWC
                                                                        teleconsultation – Reachhealth Davao
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Outreach
                                                                        Services - Community and surgical missions
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Emergency Care

                                                                    </a></li>


                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="py-4 col-4 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="py-2 text-white border-0 rounded bg-green btn btn-success w-100 hover-green-opacity-80"><a href="{{url("services-single")}}" class="text-white text-decoration-none">VIEW DETAILS <i class="fa fa-arrow-right view-details-icon"></i></a></button> --}}
                                        </div>
                                    </div>









                                </div>
                            </div>
                        </div>
                    </div>









                </div>





            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            var splide2 = new Splide('#splide2', {
                type: 'loop',
                perPage: 3,
                perMove: 1,
                gap: 30,
                breakpoints: {
                    768: {
                        perPage: 1,
                        padding: 20,
                    }
                },
                classes: {
                    arrows: 'splide__arrows your-class-arrows',
                    arrow: 'splide__arrow your-class-arrow',
                    prev: 'splide__arrow--prev d-none',
                    next: 'splide__arrow--next d-none',
                },
            });

            splide2.mount();

            $('#btnNext').on('click', function() {
                console.log("Next button clicked!"); // Debugging statement
                splide2.go('+1'); // Go to the next slide
            });

            $('#btnPrev').on('click', function() {
                console.log("Prev button clicked!"); // Debugging statement
                splide2.go('-1'); // Go to the previous slide
            });
        });
    </script>
@endsection