<?php if (isset($component)) { $__componentOriginal01ba5f520775ea736a63d25ef8d075cf = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal01ba5f520775ea736a63d25ef8d075cf = $attributes; } ?>
<?php $component = App\View\Components\Layouts\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('layouts.app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\Layouts\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['page' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($page)]); ?>

    <!-- 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"><?php echo app('translator')->get('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">
            <?php $__currentLoopData = $facilities; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $facility): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="col-md-6 col-lg-4">
                    <div class="facility-card" data-bs-toggle="modal" data-bs-target="#imageModal"
                        data-image="<?php echo e(asset('storage/' . $facility->image)); ?>">
                        <img src="<?php echo e(asset('storage/' . $facility->image)); ?>" alt="<?php echo e($facility->title); ?>">
                        <div class="card-content">
                            <?php if($facility->icon): ?>
                                <i class="<?php echo e($facility->icon); ?> card-icon"></i>
                            <?php endif; ?>
                            <h3 class="text-white"><?php echo e($facility->title); ?></h3>
                        </div>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>


        </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>

 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal01ba5f520775ea736a63d25ef8d075cf)): ?>
<?php $attributes = $__attributesOriginal01ba5f520775ea736a63d25ef8d075cf; ?>
<?php unset($__attributesOriginal01ba5f520775ea736a63d25ef8d075cf); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal01ba5f520775ea736a63d25ef8d075cf)): ?>
<?php $component = $__componentOriginal01ba5f520775ea736a63d25ef8d075cf; ?>
<?php unset($__componentOriginal01ba5f520775ea736a63d25ef8d075cf); ?>
<?php endif; ?>
<?php /**PATH D:\work\logic\virginia\resources\views/front/pages/fasilities.blade.php ENDPATH**/ ?>