@extends('frontend.layouts.app')

@section('title')
Our Services | Brokenshire Medical Center
@endsection

@section('seo')
<style>
    .blank-banner {
        background: url('{{url("/images/banners/services.jpg")}}') !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="fw-bold mb-2">Our Services</h3>
                <div>
                    <i class="fa-solid fa-angle-right"></i> <span></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">Urinalysis</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"><i class="fa fa-shopping-cart me-2"></i> ADD TO CART</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">
                    <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">
                    @include('frontend.layouts.info-sidebar')
                    {{-- <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 class="text-center mb-5">
                <h2 class="fw-bold green">Doctors</h2>
            </div>

            <section class="splide mb-5" id="splide1" aria-label="Splide Basic HTML Example">
                <div class="splide__track">
                    <ul class="splide__list">
                        <li class="splide__slide">
                            <div class="rounded bg-white div-doctor position-relative overflow-hidden">
                                <div class="position-relative overflow-hidden mb-3">
                                    <img src="{{ asset('images/doctor1.png') }}" class="img-fluid" alt="">
                                    <div class="position-absolute translate-middle start-50 top-100 w-100 shadow-place">
                                        <div class="with-shadow bg-white pt-1"></div>
                                    </div>
                                </div>

                                <div class="p-3">
                                    <h4 class="fw-bold mb-1">Sol Mercurey</h4>
                                    <p class="green fw-bold">Osteopathic</p>

                                    <p class="text-muted mb-5">
                                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores maxime fugiat
                                        reiciendis
                                        vel totam? Ab, est ea quidem, molestiae quas quaerat incidunt saepe ad
                                        necessitatibus
                                        asperiores officia nam ratione aut?
                                    </p>

                                    <div class="d-flex gap-3 align-items-center">
                                        <i class="fa-solid fa-phone green"></i>
                                        <span class="fw-bold text-muted">+090 0000-00</span>
                                    </div>
                                </div>

                                <div class="position-absolute translate-middle links-place w-100">
                                    <div class="d-flex align-items-center gap-3">
                                        <a href="https://www.facebook.com/" target="_blank" rel="noopener"
                                            class="border-links">
                                            <img src="{{ asset('images/icon-fb.png') }}" class="img-icon-fb"
                                                alt="">
                                        </a>
                                        <a href="https://www.instagram.com/" target="_blank" rel="noopener"
                                            class="social-hover">
                                            <div class="border-links">
                                                <img src="{{ asset('images/icon-ig.png') }}" class="img-icon"
                                                    alt="">
                                            </div>
                                        </a>
                                        <a href="https://www.linkedin.com/feed/" target="_blank" rel="noopener"
                                            class="social-hover">
                                            <div class="border-links">
                                                <img src="{{ asset('images/icon-linkedin.png') }}" class="img-icon"
                                                    alt="">
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="splide__slide">
                            <div class="rounded bg-white div-doctor position-relative overflow-hidden">
                                <div class="position-relative overflow-hidden mb-3">
                                    <img src="{{ asset('images/doctor2.png') }}" class="img-fluid" alt="">
                                    <div class="position-absolute translate-middle start-50 top-100 w-100 shadow-place">
                                        <div class="with-shadow bg-white pt-1"></div>
                                    </div>
                                </div>

                                <div class="p-3">
                                    <h4 class="fw-bold mb-1">Ava Jupiterun</h4>
                                    <p class="green fw-bold">Pediatrician</p>

                                    <p class="text-muted mb-5">
                                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores maxime fugiat
                                        reiciendis
                                        vel totam? Ab, est ea quidem, molestiae quas quaerat incidunt saepe ad
                                        necessitatibus
                                        asperiores officia nam ratione aut?
                                    </p>

                                    <div class="d-flex gap-3 align-items-center">
                                        <i class="fa-solid fa-phone green"></i>
                                        <span class="fw-bold text-muted">+090 0000-00</span>
                                    </div>
                                </div>

                                <div class="position-absolute translate-middle links-place w-100">
                                    <div class="d-flex align-items-center gap-3">
                                        <a href="https://www.facebook.com/" target="_blank" rel="noopener"
                                            class="border-links">
                                            <img src="{{ asset('images/icon-fb.png') }}" class="img-icon-fb"
                                                alt="">
                                        </a>
                                        <a href="https://www.instagram.com/" target="_blank" rel="noopener"
                                            class="social-hover">
                                            <div class="border-links">
                                                <img src="{{ asset('images/icon-ig.png') }}" class="img-icon"
                                                    alt="">
                                            </div>
                                        </a>
                                        <a href="https://www.linkedin.com/feed/" target="_blank" rel="noopener"
                                            class="social-hover">
                                            <div class="border-links">
                                                <img src="{{ asset('images/icon-linkedin.png') }}" class="img-icon"
                                                    alt="">
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="splide__slide">
                            <div class="rounded bg-white div-doctor position-relative overflow-hidden">
                                <div class="position-relative overflow-hidden mb-3">
                                    <img src="{{ asset('images/doctor3.png') }}" class="img-fluid" alt="">
                                    <div class="position-absolute translate-middle start-50 top-100 w-100 shadow-place">
                                        <div class="with-shadow bg-white pt-1"></div>
                                    </div>
                                </div>

                                <div class="p-3">
                                    <h4 class="fw-bold mb-1">Ben Marsh</h4>
                                    <p class="green fw-bold">Specialist</p>

                                    <p class="text-muted mb-5">
                                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores maxime fugiat
                                        reiciendis
                                        vel totam? Ab, est ea quidem, molestiae quas quaerat incidunt saepe ad
                                        necessitatibus
                                        asperiores officia nam ratione aut?
                                    </p>

                                    <div class="d-flex gap-3 align-items-center">
                                        <i class="fa-solid fa-phone green"></i>
                                        <span class="fw-bold text-muted">+090 0000-00</span>
                                    </div>
                                </div>

                                <div class="position-absolute translate-middle links-place w-100">
                                    <div class="d-flex align-items-center gap-3">
                                        <a href="https://www.facebook.com/" target="_blank" rel="noopener"
                                            class="border-links">
                                            <img src="{{ asset('images/icon-fb.png') }}" class="img-icon-fb"
                                                alt="">
                                        </a>
                                        <a href="https://www.instagram.com/" target="_blank" rel="noopener"
                                            class="social-hover">
                                            <div class="border-links">
                                                <img src="{{ asset('images/icon-ig.png') }}" class="img-icon"
                                                    alt="">
                                            </div>
                                        </a>
                                        <a href="https://www.linkedin.com/feed/" target="_blank" rel="noopener"
                                            class="social-hover">
                                            <div class="border-links">
                                                <img src="{{ asset('images/icon-linkedin.png') }}" class="img-icon"
                                                    alt="">
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section> --}}

            {{-- <div class="d-flex gap-1 mb-2">
                <div class="border-bottom border-black" style="width: 90%"></div>
                <button class="rounded text-center border px-4 py-3 btn-slider" id="prevBtn">
                    <i class="fa-solid fa-angle-left"></i>
                </button>
                <button class="rounded text-center border px-4 py-3 btn-slider" id="nextBtn">
                    <i class="fa-solid fa-angle-right"></i>
                </button>
            </div> --}}
        </div>
    </div>

    <div class="container-fluid bg-white">
        <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">Get In Touch</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">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua.
                                    </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">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua.
                                    </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">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua.
                                    </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">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua.
                                    </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">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua.
                                    </div>
                                </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