


<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-6">
    <?php $__currentLoopData = $plans; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $plan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <div class="bg-white border border-slate-200 rounded-2xl shadow-sm flex flex-col group hover:shadow-lg hover:-translate-y-1 transition-all duration-300">

            
            <div class="relative bg-gradient-to-br from-primary-900 to-primary-700 px-6 py-7 text-center overflow-hidden rounded-t-2xl">
                <div class="absolute -top-6 -right-6 w-24 h-24 rounded-full bg-white/5"></div>
                <div class="absolute -bottom-4 -left-4 w-16 h-16 rounded-full bg-white/5"></div>
                <p class="relative z-10 text-primary-200 text-xs font-semibold uppercase tracking-widest mb-2">
                    <?php echo e(__(@$plan->name)); ?>

                </p>
                <div class="relative z-10">
                    <span class="text-3xl font-extrabold text-white"><?php echo e(getAmount($plan->per_installment)); ?>%</span>
                    <span class="text-primary-300 text-xs font-medium ml-1">/ <?php echo e($plan->installment_interval); ?> <?php echo app('translator')->get('Days'); ?></span>
                </div>
                <div class="relative z-10 w-10 h-1 bg-amber-400 rounded-full mx-auto mt-4"></div>
            </div>

            
            <div class="flex flex-col flex-1 p-5">
                <ul class="divide-y divide-slate-100 flex-1 mb-5">
                    <li class="flex items-center justify-between py-2.5">
                        <div class="flex items-center gap-2">
                            <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary-50">
                                <i class="las la-arrow-down text-xs text-primary-600"></i>
                            </span>
                            <span class="text-sm text-slate-500"><?php echo app('translator')->get('Take Minimum'); ?></span>
                        </div>
                        <span class="text-sm font-bold text-slate-900"><?php echo e(__($general->cur_sym)); ?><?php echo e(__(showAmount($plan->minimum_amount))); ?></span>
                    </li>
                    <li class="flex items-center justify-between py-2.5">
                        <div class="flex items-center gap-2">
                            <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary-50">
                                <i class="las la-arrow-up text-xs text-primary-600"></i>
                            </span>
                            <span class="text-sm text-slate-500"><?php echo app('translator')->get('Take Maximum'); ?></span>
                        </div>
                        <span class="text-sm font-bold text-slate-900"><?php echo e(__($general->cur_sym)); ?><?php echo e(__(showAmount($plan->maximum_amount))); ?></span>
                    </li>
                    <li class="flex items-center justify-between py-2.5 mt-1 rounded-xl bg-emerald-50 px-3 -mx-3">
                        <div class="flex items-center gap-2">
                            <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-emerald-100">
                                <i class="las la-hashtag text-xs text-emerald-600"></i>
                            </span>
                            <span class="text-sm font-semibold text-emerald-700"><?php echo app('translator')->get('Total Installment'); ?></span>
                        </div>
                        <span class="text-sm font-extrabold text-emerald-600"><?php echo e(__($plan->total_installment)); ?></span>
                    </li>
                </ul>

                <button type="button"
                        data-id="<?php echo e($plan->id); ?>"
                        data-minimum="<?php echo e($general->cur_sym); ?><?php echo e(showAmount($plan->minimum_amount)); ?>"
                        data-maximum="<?php echo e($general->cur_sym); ?><?php echo e(showAmount($plan->maximum_amount)); ?>"
                        class="loanBtn w-full inline-flex items-center justify-center gap-2 py-3 rounded-xl text-sm font-semibold bg-primary-900 text-white hover:bg-primary-800 transition-all duration-200">
                    <i class="las la-paper-plane"></i> <?php echo app('translator')->get('Apply Now'); ?>
                </button>
            </div>
        </div>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>






<div id="loanModal" class="fixed inset-0 z-[1000] hidden items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm opacity-0 transition-opacity duration-300">
    <div class="modal-content-container relative w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden transform scale-95 transition-transform duration-300">
        <form action="" method="post">
            <?php echo csrf_field(); ?>
            <?php if(auth()->guard()->check()): ?>
                
                <div class="bg-gradient-to-br from-primary-900 to-primary-700 px-6 py-4 flex items-center justify-between">
                    <h5 class="text-white font-semibold uppercase tracking-wide text-sm"><?php echo app('translator')->get('Apply for Loan'); ?></h5>
                    <button type="button" id="closeModalBtn" class="text-white/70 hover:text-white transition-colors">
                        <i class="las la-times text-xl"></i>
                    </button>
                </div>

                
                <div class="p-6 space-y-4">
                    <div class="space-y-2">
                        <label class="text-xs font-bold text-slate-500 uppercase"><?php echo app('translator')->get('Amount'); ?></label>
                        <div class="flex rounded-xl border-2 border-slate-100 focus-within:border-primary-500 transition-all overflow-hidden bg-slate-50">
                            <input type="number" step="any" name="amount" placeholder="0.00" required
                                   class="w-full px-4 py-3 bg-transparent text-slate-900 focus:outline-none">
                            <span class="bg-slate-200 px-4 py-3 text-slate-600 font-bold text-sm border-l border-slate-200">
                                <?php echo e($general->cur_text); ?>

                            </span>
                        </div>
                        <div class="flex flex-col gap-0.5 mt-2">
                            <p class="text-[11px] font-bold text-primary-600 min-limit uppercase tracking-tight"></p>
                            <p class="text-[11px] font-bold text-primary-600 max-limit uppercase tracking-tight"></p>
                        </div>
                    </div>
                </div>

                
                <div class="px-6 py-4 bg-slate-50 flex items-center justify-end gap-3 border-t border-slate-100">
                    <button type="button" id="cancelModalBtn" class="px-5 py-2.5 rounded-xl text-sm font-bold text-slate-500 hover:bg-slate-200 transition-all">
                        <?php echo app('translator')->get('Cancel'); ?>
                    </button>
                    <button type="submit" class="px-6 py-2.5 rounded-xl text-sm font-bold bg-primary-900 text-white hover:bg-primary-800 shadow-md">
                        <?php echo app('translator')->get('Confirm'); ?>
                    </button>
                </div>
            <?php else: ?>
                
                <div class="p-8 text-center space-y-4">
                    <div class="w-16 h-16 bg-amber-100 text-amber-600 rounded-full flex items-center justify-center mx-auto">
                        <i class="las la-exclamation-triangle text-3xl"></i>
                    </div>
                    <div>
                        <h5 class="text-lg font-bold text-slate-900"><?php echo app('translator')->get('Authentication Required'); ?></h5>
                        <p class="text-sm text-slate-500"><?php echo app('translator')->get('Please log in to your account to apply for this loan plan.'); ?></p>
                    </div>
                    <button type="button" id="guestCloseBtn" class="w-full py-3 bg-slate-900 text-white rounded-xl font-bold">
                        <?php echo app('translator')->get('Okay, Got it'); ?>
                    </button>
                </div>
            <?php endif; ?>
        </form>
    </div>
</div>


<?php $__env->startPush('script'); ?>
<script>
    $(document).ready(function () {
        var $modal   = $('#loanModal');
        var $content = $('#loanModal .modal-content-container');

        function openModal() {
            $modal.removeClass('hidden').addClass('flex');
            setTimeout(function () {
                $modal.addClass('opacity-100');
                $content.removeClass('scale-95').addClass('scale-100');
            }, 10);
            $('body').addClass('overflow-hidden');
        }

        function closeModal() {
            $modal.removeClass('opacity-100');
            $content.removeClass('scale-100').addClass('scale-95');
            setTimeout(function () {
                $modal.removeClass('flex').addClass('hidden');
            }, 300);
            $('body').removeClass('overflow-hidden');
        }

        // Open
        $(document).on('click', '.loanBtn', function () {
            var id      = $(this).data('id');
            var minimum = $(this).data('minimum');
            var maximum = $(this).data('maximum');

            $modal.find('.min-limit').text('Minimum Amount: ' + minimum);
            $modal.find('.max-limit').text('Maximum Amount: ' + maximum);
            $modal.find('form').attr('action', "<?php echo e(route('user.loan.apply', '')); ?>/" + id);

            openModal();
        });

        // Close — X button, Cancel button, Guest close button
        $(document).on('click', '#closeModalBtn, #cancelModalBtn, #guestCloseBtn', function () {
            closeModal();
        });

        // Close — backdrop click
        $modal.on('click', function (e) {
            if ($(e.target).is($modal)) closeModal();
        });

        // Close — Escape key
        $(document).on('keydown', function (e) {
            if (e.key === 'Escape') closeModal();
        });
    });
</script>
<?php $__env->stopPush(); ?><?php /**PATH C:\laragon\www\itrevosbank\core\resources\views/templates/crystal_sky/partials/loan_plans.blade.php ENDPATH**/ ?>