@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"> Renal Dialysis 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">The Renal Dialysis Unit specializes in providing
                                            life-sustaining care for patients with kidney failure. Equipped with advanced
                                            technology and staffed by skilled professionals, it ensures safe and efficient
                                            dialysis treatments tailored to individual needs.

                                            <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 responsive-nowrap">
                                            <h6 class="m-0 green ps-2">Hemodialysis

                                            </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">Emergency Dialysis (On Call Basis)


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


                                            </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">Open from 7:00AM until 11:00PM


                                            </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>
                    <br><br>
                    <div class="">
                        <div class="">
                            <div class="row g-4">
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <h5 class="fw-bold green">PHIC Package Rate for PHIC Members:


                                        </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 responsive-nowrap">
                                            <h6 class="m-0 green ps-2">Free dialyzer, autubings, Laboratory Exams every
                                                quarter.


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




                        <br><br>
                        <div class="">
                            <div class="">
                                <div class="row g-4">
                                    <div class="col-lg-12">
                                        <div class="mb-3">
                                            <h5 class="fw-bold green">Non-PHIC Members:


                                            </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 responsive-nowrap">
                                                <h6 class="m-0 green ps-2">Exclusive of dialyzer, autubings, erythropoietin
                                                    injections.



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