@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">Acute Stroke 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">
                                        <h6 class="fw-bold green">This unit focuses on the treatment and management of
                                            respiratory issues:

                                        </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 responsive-nowrap">
                                            <h6 class="m-0 green ps-2"><strong>Arterial Blood Gas:</strong> Measures the
                                                levels of oxygen and carbon dioxide in the blood.
                                            </h6>
                                        </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 responsive-nowrap">
                                            <h6 class="m-0 green ps-2">
                                                <strong>Invasive and Non-Invasive Ventilation:</strong> Breathing assistance
                                                for
                                                patients with severe respiratory distress.
                                            </h6>
                                        </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 responsive-nowrap">
                                            <h6 class="m-0 green ps-2"><strong>CPAP/BiPAP:</strong> Machines that help
                                                patients with sleep
                                                apnea or respiratory failure.

                                            </h6>
                                        </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 responsive-nowrap">
                                            <h6 class="m-0 green ps-2"><strong>Nebulization:</strong> Provides medication to
                                                the lungs
                                                through a mist inhalation to treat asthma, COPD, and other conditions.


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