@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>
                <h3 class="mb-2 fw-bold">Services & Centers</h3>
            </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"> Endoscopy Unit




                    </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">
                                        <h5 class="fw-bold green">The Endoscopy Unit is a specialized facility focused on
                                            diagnosing conditions of the digestive tract and other internal organs using
                                            minimally invasive procedures. With advanced technology and skilled
                                            professionals, it provides accurate and efficient diagnostic services in a safe
                                            and patient-centered environment.


                                            <br><br>
                                            Services Offered:



                                        </h5>
                                    </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">
                                                                <h5 class="m-0 green">Upper Gastrointestinal Endoscopy

                                                                </h5>
                                                            </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="#">With Biopsy

                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With Polypectomy
                                                                        Snare (Cold or Hot Technique)


                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With PEG Tube
                                                                        Insertion or Change </a></li>
                                                                <li><a class="dropdown-item" href="#">With Esophageal
                                                                        or Achalasia Balloon Dilatation
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With Gastric or
                                                                        Duodenal Dilatation </a></li>
                                                                <li><a class="dropdown-item" href="#">With Rubber Band
                                                                        Ligation</a></li>
                                                                <li><a class="dropdown-item" href="#">With Injection
                                                                        Hemostasis
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With
                                                                        Hemoclipping </a></li>
                                                                <li><a class="dropdown-item" href="#">With
                                                                        Endoloop/Polyloop Ligation
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With Histoacryl
                                                                        Injection
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With Foreign
                                                                        Body Removal
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With Volvulus
                                                                        Decompression/Reversal

                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With
                                                                        Self-Expanding Metal Stent Insertion


                                                                    </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">
                                                                <h5 class="m-0 green">Lower Gastrointestinal Endoscopy



                                                                </h5>
                                                            </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="#">GProctosigmoidoscopy (Flexible or
                                                                        Rigid)
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With Biopsy or
                                                                        Specimen Collection
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With Rectal
                                                                        Smear/Imprint
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With
                                                                        Polypectomy Snare (Cold or Hot Technique)
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With Injection
                                                                        Hemostasis </a></li>
                                                                <li><a class="dropdown-item" href="#">With
                                                                        Hemoclipping
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With
                                                                        Endoloop/Polyloop Ligation
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With Foreign
                                                                        Body Removal </a></li>
                                                                <li><a class="dropdown-item" href="#">With Volvulus
                                                                        Decompression/Reversal
                                                                    </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">
                                                                <h5 class="m-0 green">Endoscopic Retrograde
                                                                    Cholangiopancreatography (ERCP)
                                                                </h5>
                                                            </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="#">With Biopsy or
                                                                        Specimen Collection

                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With Stone
                                                                        Removal or Destruction

                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With Plastic
                                                                        Stent Insertion or Change
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With
                                                                        Self-Expanding Metal Stent Insertion
                                                                    </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">
                                                                <h5 class="m-0 green">Spyglass Cholangioscopy

                                                                </h5>
                                                            </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="#">With Spybite
                                                                        Max Forcep Biopsy
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">With Laser
                                                                        Lithotripsy

                                                                    </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">
                                                                <h5 class="m-0 green">Offering Soon


                                                                </h5>
                                                            </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="#">Argon Plasma
                                                                        Coagulation
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Endoscopic
                                                                        Submucosal Dissection
                                                                    </a></li>
                                                                <li><a class="dropdown-item" href="#">Endoscopic
                                                                        Mucosal Resection
                                                                    </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