@extends('front.layouts.layout')
@section('content')
    <!-- Page Header Start -->
    <div class="container-fluid page-header py-6 my-6 mt-0 wow fadeIn" data-wow-delay="0.1s">
        <div class="container text-center">
            <h1 class="display-4 text-white animated slideInDown mb-4">Fasilities</h1>
            <nav aria-label="breadcrumb animated slideInDown">
                <!-- <ol class="breadcrumb justify-content-center mb-0">
                    <li class="breadcrumb-item"><a class="text-white" href="#">Home</a></li>
                    <li class="breadcrumb-item"><a class="text-white" href="#">Pages</a></li>
                    <li class="breadcrumb-item text-primary active" aria-current="page">About</li>
                </ol> -->
            </nav>
        </div>
    </div>
    <!-- Page Header End -->
    <div class="container py-5">
        <div class="row g-4">
            <div class="col-md-6 col-lg-4">
                <div class="facility-card" data-bs-toggle="modal" data-bs-target="#imageModal" data-image="{{ asset('images/9.jpeg') }}">
                    <img src="{{ asset('images/9.jpeg') }}" alt="Conference Room">
                    <div class="card-content">
                        <i class="fas fa-users card-icon"></i>
                        <h3 class="text-white">Conference Room</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="facility-card" data-bs-toggle="modal" data-bs-target="#imageModal" data-image="{{ asset('images/9.jpeg') }}">
                    <img src="{{ asset('images/9.jpeg') }}" alt="Gym">
                    <div class="card-content">
                        <i class="fas fa-dumbbell card-icon"></i>
                        <h3 class="text-white">Fitness Center</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="facility-card" data-bs-toggle="modal" data-bs-target="#imageModal" data-image="{{ asset('images/9.jpeg') }}">
                    <img src="{{ asset('images/9.jpeg') }}" alt="Library">
                    <div class="card-content">
                        <i class="fas fa-book card-icon"></i>
                        <h3 class="text-white">Library</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="facility-card" data-bs-toggle="modal" data-bs-target="#imageModal" data-image="{{ asset('images/9.jpeg') }}">
                    <img src="{{ asset('images/9.jpeg') }}" alt="Cafeteria">
                    <div class="card-content">
                        <i class="fas fa-utensils card-icon"></i>
                        <h3 class="text-white">Cafeteria</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="modalImage" src="" alt="Facility Image" style="max-width: 100%; max-height: 400px; object-fit: contain;">
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript to handle modal image -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const facilityCards = document.querySelectorAll('.facility-card');
            const modalImage = document.getElementById('modalImage');

            facilityCards.forEach(card => {
                card.addEventListener('click', function () {
                    const imageSrc = this.getAttribute('data-image');
                    modalImage.setAttribute('src', imageSrc);
                });
            });
        });
    </script>

    <!-- CSS to ensure modal image dimensions -->
    <style>
        .modal-body {
            width: 100% !important;
            height: 80vh;
        }
        .modal-body img {
            width: 100%;
            max-height: 90vh;
            object-fit: contain;
        }
    </style>
@endsection