@extends('frontend.layouts.app')

@section('title')
Gallery | 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="Gallery | Brokenshire Medical Center" />
<meta property="og:url" content="{{ url('/') }}" />
<meta property="og:site_name" content="Gallery | 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">About Us</h3>
                <div>
                    <i class="fa-solid fa-angle-right"></i> <span>Gallery</span>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid bg-light">
        <div class="container py-5">
            <h2 class="fw-bold green mb-4">{{$gallery->title}}</h2>

            <p class="mb-5">
                {{$gallery->content}}
            </p>

            <div class="row gy-4 justify-content-start">
                @foreach (json_decode($gallery->thumbnail) as $gallery)
                <div class="col-12 col-md-6" style="height: 300px; position: relative; overflow: hidden;">
                    <a href="{{ asset($gallery) }}" data-fancybox="gallery">
                        <img src="{{ asset($gallery) }}" class="img-fluid" alt="">
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        Fancybox.bind("[data-fancybox]", {});
    </script>
@endsection