<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Plans - Ahoj Ministries</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 text-gray-800">


<?php echo $__env->make('partials.navbar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

<!-- Hero Section -->
<!-- <section class="relative bg-cover bg-center h-[400px] flex items-center justify-center" 
         style="background-image: url('<?php echo e($heroImage ?? '/images/hero.jpg'); ?>');">
    <div class="absolute inset-0 bg-black bg-opacity-40"></div>
    <h1 class="relative text-4xl md:text-5xl lg:text-6xl font-extrabold text-white text-center">
        Plans
    </h1>
</section> -->

<!-- Plans List Section -->
<section class="max-w-4xl mx-auto py-16 px-6 lg:px-12">
    <h2 class="text-3xl font-extrabold text-gray-800 mb-6 text-center">Our Plans</h2>
    <div class="w-24 h-1 bg-red-700 rounded-full mx-auto mb-10"></div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <?php $__currentLoopData = $plans; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $plan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <div class="flex justify-between items-center p-4 bg-white rounded-lg shadow hover:shadow-lg cursor-pointer transition duration-300"
             onclick="openModal('<?php echo e($plan->image_url); ?>', '<?php echo e($plan->title); ?>')">
            <span class="text-lg font-semibold text-gray-800"><?php echo e($plan->title); ?></span>
            <i class="fa fa-calendar-alt text-3xl text-blue-600"></i>
        </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>
</section>

<!-- Image Modal -->
<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-70 items-center justify-center z-50 hidden">
    <div class="relative bg-white rounded-lg max-w-3xl w-full max-h-[90vh] overflow-auto p-4 shadow-lg flex flex-col">
        <!-- Close Button -->
        <button onclick="closeModal()" class="absolute top-2 right-2 text-gray-700 hover:text-gray-900 text-2xl font-bold">&times;</button>

        <!-- Modal Title -->
        <h2 id="modalTitle" class="text-xl font-semibold text-gray-800 mb-4 text-center"></h2>

        <!-- Modal Image -->
        <img id="modalImage" src="" alt="Plan Image" class="w-full h-auto object-contain mx-auto">
    </div>
</div>

<script>
    function openModal(imageUrl, title) {
        const modal = document.getElementById('imageModal');
        document.getElementById('modalImage').src = imageUrl;
        document.getElementById('modalTitle').innerText = title;
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        document.body.classList.add('overflow-hidden');
    }

    function closeModal() {
        const modal = document.getElementById('imageModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        document.getElementById('modalImage').src = '';
        document.body.classList.remove('overflow-hidden');
    }
</script>


<?php echo $__env->make('partials.footer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

</body>
</html>
<?php /**PATH /home/dawoodik/Documents/x/ahoj/resources/views/plans.blade.php ENDPATH**/ ?>