@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('/gallery') }}" />
<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-5">Journey Through Health</h2>

            <div class="row justify-content-center gy-3">
                @foreach ($galleries as $gallery)
                <div class="col-12 col-md-4">
                    <a href="{{ url('/gallery', $gallery->title) }}" class="div-link gallery-link">
                        <div class="position-relative text-center mb-3">
                            <img src="{{ asset('images/obj-bg.png') }}" class="img-fluid" alt="">
                            <div class="position-absolute translate-middle w-100 start-50 top-50">
                                <img src="{{ asset(json_decode($gallery->thumbnail)[0]) }}" class="gallery-thumbnail" alt="">
                            </div>
                        </div>

                        <div class="text-center">
                            <h4 class="green gallery-text">{{$gallery->title}}</h4>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection