@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">Outpatient Services
                    </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">

                                    </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="row gy-2">
                                        <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="headingDentistry">
                                                            <button
                                                                class="bg-transparent border-0 w-100 d-flex align-items-center"
                                                                type="button" data-bs-toggle="collapse"
                                                                data-bs-target="#collapseDentistry" aria-expanded="true"
                                                                aria-controls="collapseDentistry">
                                                                <div class="w-100 ps-2 text-start responsive-nowrap">
                                                                    <h6 class="m-0 green">Doctors Consultation</h6>
                                                                </div>
                                                            </button>
                                                        </h2>

                                                        <div id="collapseDentistry" class="accordion-collapse collapse "
                                                            aria-labelledby="headingDentistry"
                                                            data-bs-parent="#dentistryAccordion">
                                                            <div class="p-3 accordion-body">
                                                                <!--<ul class="custom-bullets fs-5 ms-4">-->
                                                                <!--    <li><a class="dropdown-item" href="#">Oral-->
                                                                <!--            Surgery & Hospital Dentistry</a></li>-->
                                                                <!--    <li><a class="dropdown-item"-->
                                                                <!--            href="#">Orthodontics</a></li>-->
                                                                <!--    <li><a class="dropdown-item" href="#">TMJ-->
                                                                <!--            Management</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="#collapseDentistry1" aria-expanded="true"
                                                                aria-controls="collapseDentistry1">
                                                                <div class="w-100 ps-2 text-start responsive-nowrap">
                                                                    <h6 class="m-0 green">Includes various minor services
                                                                        and consultations.

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

                                                        <div id="collapseDentistry1" 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="#">Palliative
                                                                            & Hospice
                                                                        </a></li>
                                                                    <li><a class="dropdown-item"
                                                                            href="#">Geriatric</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="#collapseDentistry2" aria-expanded="true"
                                                                aria-controls="collapseDentistry2">
                                                                <div class="w-100 ps-2 text-start responsive-nowrap">
                                                                    <h6 class="m-0 green">Available Monday to Saturday, 8
                                                                        AM – 5 PM


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

                                                        <div id="collapseDentistry2" class="accordion-collapse collapse "
                                                            aria-labelledby="headingDentistry"
                                                            data-bs-parent="#dentistryAccordion1">
                                                            <div class="p-3 accordion-body">

                                                            </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>
    </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