


<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-primary-100 rounded-2xl shadow-soft overflow-hidden flex flex-col group hover:shadow-glow hover:-translate-y-1 transition-all duration-300">

            
            <div class="relative bg-gradient-to-br from-primary-900 via-primary-800 to-primary-700 px-6 py-7 text-center overflow-hidden">
                <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->interest_rate)); ?>%
                    </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-secondary-500 rounded-full mx-auto mt-4"></div>
            </div>

            
            <div class="flex flex-col flex-1 p-5">
                <ul class="divide-y divide-primary-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-100">
                                <i data-lucide="lock" class="h-3 w-3 text-primary-600"></i>
                            </span>
                            <span class="text-sm text-primary-500"><?php echo app('translator')->get('Lock in Period'); ?></span>
                        </div>
                        <span class="text-sm font-bold text-primary-900"><?php echo e(__($plan->locked_days)); ?> <?php echo app('translator')->get('Days'); ?></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-100">
                                <i data-lucide="calendar-days" class="h-3 w-3 text-primary-600"></i>
                            </span>
                            <span class="text-sm text-primary-500"><?php echo app('translator')->get('Get Profit Every'); ?></span>
                        </div>
                        <span class="text-sm font-bold text-primary-900"><?php echo e(__($plan->installment_interval)); ?> <?php echo app('translator')->get('Days'); ?></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-100">
                                <i data-lucide="percent" class="h-3 w-3 text-primary-600"></i>
                            </span>
                            <span class="text-sm text-primary-500"><?php echo app('translator')->get('Profit Rate'); ?></span>
                        </div>
                        <span class="text-sm font-bold text-primary-900"><?php echo e(getAmount($plan->interest_rate)); ?>%</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-100">
                                <i data-lucide="arrow-down" class="h-3 w-3 text-primary-600"></i>
                            </span>
                            <span class="text-sm text-primary-500"><?php echo app('translator')->get('Minimum'); ?></span>
                        </div>
                        <span class="text-sm font-bold text-primary-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 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 data-lucide="arrow-up" class="h-3 w-3 text-emerald-600"></i>
                            </span>
                            <span class="text-sm font-semibold text-emerald-700"><?php echo app('translator')->get('Maximum'); ?></span>
                        </div>
                        <span class="text-sm font-extrabold text-emerald-600"><?php echo e(__($general->cur_sym)); ?><?php echo e(showAmount($plan->maximum_amount)); ?></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="fdrBtn w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary-800 hover:bg-primary-700 active:bg-primary-900 text-white font-semibold text-sm rounded-xl shadow-soft transition-colors duration-200">
                    <i data-lucide="send" class="h-4 w-4"></i>
                    <?php echo app('translator')->get('Apply Now'); ?>
                </button>
            </div>

        </div>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>






<div id="fdrModal" 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="fdr-modal-content relative w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden transform scale-95 transition-transform duration-300">
        <form id="fdrForm" action="" method="post">
            <?php echo csrf_field(); ?>

            <?php if(auth()->guard()->check()): ?>
                
                <div class="flex items-center justify-between px-6 py-4 border-b border-primary-100 bg-gradient-to-r from-primary-50 to-white">
                    <div class="flex items-center gap-2">
                        <i data-lucide="landmark" class="h-5 w-5 text-primary-600"></i>
                        <h5 class="text-base font-semibold text-primary-900"><?php echo app('translator')->get('Apply to Open an FDR'); ?></h5>
                    </div>
                    <button type="button" id="fdrCloseBtn"
                            class="p-1.5 rounded-lg hover:bg-primary-100 text-primary-500 hover:text-primary-800 transition-colors">
                        <i data-lucide="x" class="h-4 w-4"></i>
                    </button>
                </div>

                
                <div class="px-6 py-5 flex flex-col gap-5">

                    
                    <div class="flex flex-col gap-1">
                        <label class="text-sm font-semibold text-primary-800"><?php echo app('translator')->get('Amount'); ?></label>
                        <div class="flex items-center rounded-xl border border-primary-200 overflow-hidden focus-within:ring-2 focus-within:ring-primary-500 transition">
                            <input
                                type="number"
                                step="any"
                                name="amount"
                                placeholder="<?php echo app('translator')->get('Enter An Amount'); ?>"
                                required
                                class="flex-1 px-4 py-2.5 bg-primary-50/40 text-primary-900 text-sm focus:outline-none placeholder-primary-300">
                            <span class="px-4 py-2.5 bg-primary-900 text-white text-sm font-semibold shrink-0">
                                <?php echo e($general->cur_text); ?>

                            </span>
                        </div>

                        
                        <div class="flex flex-col gap-1 mt-1">
                            <div class="flex items-center gap-1.5 text-xs text-rose-500">
                                <i data-lucide="circle-alert" class="h-3.5 w-3.5 shrink-0"></i>
                                <span class="min-limit font-medium"></span>
                            </div>
                            <div class="flex items-center gap-1.5 text-xs text-rose-500">
                                <i data-lucide="circle-alert" class="h-3.5 w-3.5 shrink-0"></i>
                                <span class="max-limit font-medium"></span>
                            </div>
                        </div>
                    </div>

                    
                    <?php echo $__env->make($activeTemplate . 'partials.otp_field', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

                    
                    <button type="submit"
                            class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary-800 hover:bg-primary-700 active:bg-primary-900 text-white font-semibold text-sm rounded-xl shadow-soft transition-colors duration-200">
                        <i data-lucide="send" class="h-4 w-4"></i>
                        <?php echo app('translator')->get('Submit'); ?>
                    </button>

                </div>

            <?php else: ?>
                
                <div class="px-6 py-8 flex flex-col items-center gap-3 text-center">
                    <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-rose-100 mb-1">
                        <i data-lucide="circle-x" class="h-8 w-8 text-rose-500"></i>
                    </div>
                    <h3 class="text-lg font-bold text-primary-900"><?php echo app('translator')->get('You are not logged in!'); ?></h3>
                    <p class="text-sm text-primary-500"><?php echo app('translator')->get('Please log in to apply for an FDR plan.'); ?></p>
                </div>
                <div class="flex justify-end px-6 py-4 border-t border-primary-100 bg-primary-50/40">
                    <button type="button" id="fdrGuestCloseBtn"
                            class="inline-flex items-center gap-2 px-4 py-2 bg-primary-800 hover:bg-primary-700 text-white text-sm font-semibold rounded-xl transition-colors duration-150">
                        <i data-lucide="x" class="h-4 w-4"></i> <?php echo app('translator')->get('Close'); ?>
                    </button>
                </div>
            <?php endif; ?>

        </form>
    </div>
</div>


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

        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', '.fdrBtn', 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);
            $('#fdrForm').attr('action', "<?php echo e(route('user.fdr.apply', '')); ?>/" + id);

            openModal();
        });

        // Close — X button and Guest Close button
        $(document).on('click', '#fdrCloseBtn, #fdrGuestCloseBtn', 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/fdr_plans.blade.php ENDPATH**/ ?>