@extends('frontend.layouts.app')

@section('title')
About Us - Facility | Brokenshire Medical Center
@endsection

@section('seo')
<style>
    .blank-banner {
        background: url('{{url("/images/banners/about-us.jpg")}}') !important; 
        
    }
</style>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="About Us - Facility | Brokenshire Medical Center" />
<meta property="og:url" content="{{ url('/about-facilities') }}" />
<meta property="og:site_name" content="About Us - Facility | 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="fw-bold mb-2">Our Services</h3>
                <div>
                    <i class="fa-solid fa-angle-right"></i> <span>Facility</span>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid bg-light">
        <div class="container py-5">
            <div class="service-label mb-5">
                <div class="bg-white rounded shadow-sm px-4 py-5">
                    <div class="row gy-3 align-items-center">
                        <div class="col-12 col-md-8">
                            <h2 class="green fw-bold mb-1">{{$facility->title}}</h2>
                            {{-- <p>Erat pellenmtesque adipscing commodo elit at. Ultrices mi tempus imperdiet</p> --}}
                        </div>
                        <div class="ol-12 col-md text-center">
                            <a href="" class="btn-quote rounded-1 px-5 py-3 w-100">REQUEST A QUOTE</a>
                        </div>
                    </div>
                </div>
                <div class="bg-red rounded pt-1"></div>
            </div>

            <div class="row gx-5 gy-4 mb-5">
                <div class="col-12 col-md-8">
                    {!! $facility->content !!}
                    {{-- <p class="justify mb-5">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos error itaque soluta maiores molestias
                        cum,
                        dolorem voluptatem fugit mollitia quis est iure optio eum accusantium eaque. Placeat minima
                        inventore saepe. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos error itaque soluta
                        maiores molestias
                        cum,
                        dolorem voluptatem fugit mollitia quis est iure optio eum accusantium eaque. Placeat minima
                        inventore saepe. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos error itaque soluta
                        maiores molestias
                        cum,
                        dolorem voluptatem fugit mollitia quis est iure optio eum accusantium eaque. Placeat minima
                        inventore saepe.
                    </p>

                    <div class="row gy-3 mb-5">
                        <div class="col-12 col-md">
                            <img src="{{ asset('images/services-1.png') }}" class="img-fluid" alt="">
                        </div>
                        <div class="col-12 col-md">
                            <img src="{{ asset('images/services-2.png') }}" class="img-fluid" alt="">
                        </div>
                    </div>

                    <p class="mb-4">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, doloremque atque? Quod iusto
                        optio nam possimus modi dignissimos quibusdam sunt cum quasi quia. Minus molestiae error, neque
                        dolore blanditiis impedit!
                    </p>

                    <p class="fw-bold mb-4">Among the many elite programs and procedires are:</p>

                    <div class="row mb-4">
                        <div class="col">
                            <div class="d-flex gap-2 mb-1">
                                <i class="bi bi-check2-square green"></i>
                                <span class="fw-bold">Tristique nulla aliquet enim</span>
                            </div>
                            <div class="d-flex gap-2 mb-1">
                                <i class="bi bi-check2-square green"></i>
                                <span class="fw-bold">Tristique nulla aliquet enim</span>
                            </div>
                            <div class="d-flex gap-2">
                                <i class="bi bi-check2-square green"></i>
                                <span class="fw-bold">Tristique nulla aliquet enim</span>
                            </div>
                        </div>
                        <div class="col">
                            <div class="d-flex gap-2 mb-1">
                                <i class="bi bi-check2-square green"></i>
                                <span class="fw-bold">Tristique nulla aliquet enim</span>
                            </div>
                            <div class="d-flex gap-2 mb-1">
                                <i class="bi bi-check2-square green"></i>
                                <span class="fw-bold">Tristique nulla aliquet enim</span>
                            </div>
                            <div class="d-flex gap-2">
                                <i class="bi bi-check2-square green"></i>
                                <span class="fw-bold">Tristique nulla aliquet enim</span>
                            </div>
                        </div>
                    </div>

                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea eum eveniet tenetur nemo asperiores nisi
                        quo ratione hic dignissimos neque sequi officiis perferendis provident placeat repellendus, at ipsum
                        vero voluptate?
                    </p> --}}
                </div>
                <div class="col-12 col-md">
                    <div class="rounded bg-white shadow-sm px-3 py-4">
                        <h4 class="fw-bold text-muted mb-3">Doctor's Schedule</h4>

                        <div class="vstack gap-0 mb-4">
                            <div class="border-bottom pb-2 mb-1">
                                <table class="w-100">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span>Monday</span>
                                            </td>
                                            <td class="text-end">
                                                <span>
                                                    8:00AM - 17:00PM
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="border-bottom pb-2 mb-1">
                                <table class="w-100">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span>Tuesday</span>
                                            </td>
                                            <td class="text-end">
                                                <span>
                                                    9:30AM - 22:00PM
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="border-bottom pb-2 mb-1">
                                <table class="w-100">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span>Wednesday</span>
                                            </td>
                                            <td class="text-end">
                                                <span>
                                                    8:00AM - 17:00PM
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="border-bottom pb-2 mb-1">
                                <table class="w-100">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span>Thursday</span>
                                            </td>
                                            <td class="text-end">
                                                <span>
                                                    8:00AM - 17:00PM
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="border-bottom pb-2 mb-1">
                                <table class="w-100">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span>Friday</span>
                                            </td>
                                            <td class="text-end">
                                                <span>
                                                    8:00AM - 17:00PM
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="border-bottom pb-2 mb-1">
                                <table class="w-100">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span>Saturday</span>
                                            </td>
                                            <td class="text-end">
                                                <span>
                                                    9:30AM - 17:30PM
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="pb-2">
                                <table class="w-100">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span>Sunday</span>
                                            </td>
                                            <td class="text-end">
                                                <span>
                                                    9:30AM - 17:30PM
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="rounded-5 bg-red pt-1"></div>
                </div>
            </div>

            <div class="d-md-block d-none py-2">
            </div>
        </div>
        <section class="pb-5">
            <div class="container">
                <div>
                    <div class="splide" id="splide2" role="group" aria-label="Splide Basic HTML Example">
                        <div class="splide__track">
                            <ul class="splide__list">
                                @foreach (json_decode($facility->thumbnail) as $image)
                                <li class="splide__slide second-hover-card" style="position: relative; overflow: hidden;">
                                    <img src="{{ url($image) }}" class="img-fluid" />
                                </li>
                                @endforeach
                                {{-- <li class="splide__slide second-hover-card" style="position: relative; overflow: hidden;">
                                    <img src="{{ url('/uploads/662b5a24246f1.jpg') }}" class="img-fluid" />
                                </li>
                                <li class="splide__slide second-hover-card" style="position: relative; overflow: hidden;">
                                    <img src="{{ url('/uploads/662b5a24246f1.jpg') }}" class="img-fluid" />
                                </li>
                                <li class="splide__slide second-hover-card" style="position: relative; overflow: hidden;">
                                    <img src="{{ url('/uploads/662b5a24246f1.jpg') }}" class="img-fluid" />
                                </li>
                                <li class="splide__slide second-hover-card" style="position: relative; overflow: hidden;">
                                    <img src="{{ url('/uploads/662b5a24246f1.jpg') }}" class="img-fluid" />
                                </li> --}}
                                {{-- @endforeach --}}
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-lg-11 border-bottom">
    
                    </div>
                    <div class="col-lg-1">
                        {{-- <div class="border-bottom"></div> --}}
                        <div class="d-flex align-items-center justify-content-end">
                            <button id="btnPrev" class="btn btn-white border px-3 green hover-white-opacity-80 splide__arrow--prev">
                                <i class="fa-solid fa-chevron-left"></i>
                            </button>
                            <div class="mx-1"></div>
                            {{-- <div class="vl" style="border-left: 1px solid gray; height: 30px;"></div> --}}
                            <button id="btnNext" class="btn btn-white border px-3 green hover-white-opacity-80 splide__arrow--next">
                                <i class="fa-solid fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <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>
    </div>
    <div class="container py-5">
        <div class="row">
            <div class="col-lg-6 col-md-12 mb-4 mb-md-0 fifth-contact-bg p-5">
                <form>
                    <h1 class="text-white pb-2">Make an Appointment</h1>
                    <div class="my-3">
                        <div class="inputBox my-3">
                            <input type="text" required>
                            <span>Full Name</span>
                        </div>
                        <div class="inputBox my-3">
                            <input type="tel" required>
                            <span>Contact No.</span>
                        </div>
                        <div class="inputBox my-3">
                            <input type="email" required="required">
                            <span>Email</span>
                        </div>
                        <div class="inputBox my-3">
                            <input type="text" required="required">
                            <span>Message</span>
                        </div>
                        <button type="submit" class="btn fifth-button-bg">Submit<img class="mx-1"
                                src="images/right-arrow.png" style="height:14px; width: 16px" /></button>
                    </div>
                </form>
            </div>
            <div class="col-lg-6 col-md-12 mb-4 mb-md-0 faq-container">
                <h1 class="text-secondary pb-2">FAQs</h1>
                <div>
                    <div class="accordion accordion-flush my-2" id="faqlist">
                        <div class="accordion-item" style="border: 1px solid #C0C0C0" data-bs-toggle="collapse"
                            data-bs-target="#faq-content-1">
                            <div class="accordion-header d-flex flex-row">
                                <button class="accordion-button collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#faq-content-1"></button>
                                <h6>How can I schedule an appointment?</h6>
                            </div>
                            <div id="faq-content-1" class="accordion-collapse collapse"
                                data-bs-parent="#faqlist">
                                <div class="accordion-body">
                                    To schedule an appointment, please contact us at (082) 282 1908 or send an email to info@brokenshire.org.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item my-2" style="border: 1px solid #C0C0C0"
                            data-bs-toggle="collapse" data-bs-target="#faq-content-2">
                            <div class="accordion-header d-flex flex-row">
                                <button class="accordion-button collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#faq-content-2"></button>
                                <h6>What form of payment do you accept?</h6>
                            </div>
                            <div id="faq-content-2" class="accordion-collapse collapse"
                                data-bs-parent="#faqlist">
                                <div class="accordion-body">
                                    When it comes to payment, we accept cash, online payments, card payments, or bank transfers.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item my-2" style="border: 1px solid #C0C0C0"
                            data-bs-toggle="collapse" data-bs-target="#faq-content-3">
                            <div class="accordion-header d-flex flex-row">
                                <button class="accordion-button collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#faq-content-3"></button>
                                <h6>What emergency services do you provide?</h6>
                            </div>
                            <div id="faq-content-3" class="accordion-collapse collapse"
                                data-bs-parent="#faqlist">
                                <div class="accordion-body">
                                    We offer an emergency room, operating room, delivery room, intensive care unit, neonatal care unit, PICU, renal dialysis unit, and acute stroke unit.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item my-2" style="border: 1px solid #C0C0C0"
                            data-bs-toggle="collapse" data-bs-target="#faq-content-4">
                            <div class="accordion-header d-flex flex-row">
                                <button class="accordion-button collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#faq-content-4"></button>
                                <h6>What should I do if I have a medical emergency?</h6>
                            </div>
                            <div id="faq-content-4" class="accordion-collapse collapse"
                                data-bs-parent="#faqlist">
                                <div class="accordion-body">
                                    In case of an emergency, please proceed directly to the Emergency Room. Early diagnosis and treatment are crucial in preventing serious complications. Brokenshire Medical Center's ER operates 24/7 to offer immediate assistance. Feel free to visit or contact us at (082) 282-1908 (local 4109).
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item my-2" style="border: 1px solid #C0C0C0"
                            data-bs-toggle="collapse" data-bs-target="#faq-content-5">
                            <div class="accordion-header d-flex flex-row">
                                <button class="accordion-button collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#faq-content-5"></button>
                                <h6>Can I get my test result online?</h6>
                            </div>
                            <div id="faq-content-5" class="accordion-collapse collapse"
                                data-bs-parent="#faqlist">
                                <div class="accordion-body">
                                    Yes, you can view your test results online. Simply await an email notification.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            var splide1 = new Splide('#splide1', {
                type: 'loop',
                perPage: 3,
                perMove: 1,
                gap: 30,
                arrows: false,
                padding: 20,
                breakpoints: {
                    768: {
                        perPage: 1,
                        gap: 0,
                    }
                }
            });
            splide1.mount();

            $('#prevBtn').on('click', function() {
                splide1.go('-1');
            });

            $('#nextBtn').on('click', function() {
                splide1.go('+1');
            });
        });
    </script>
@endsection