


<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($general->cur_sym . 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-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="percent" class="h-3 w-3 text-primary-600"></i>
                            </span>
                            <span class="text-sm text-primary-500"><?php echo app('translator')->get('Interest 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="wallet" class="h-3 w-3 text-primary-600"></i>
                            </span>
                            <span class="text-sm text-primary-500"><?php echo app('translator')->get('Per Installment'); ?></span>
                        </div>
                        <span class="text-sm font-bold text-primary-900"><?php echo e($general->cur_sym . showAmount($plan->per_installment)); ?></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('Installment Interval'); ?></span>
                        </div>
                        <span class="text-sm font-bold text-primary-900"><?php echo e(getAmount(@$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="hash" class="h-3 w-3 text-primary-600"></i>
                            </span>
                            <span class="text-sm text-primary-500"><?php echo app('translator')->get('Total Installment'); ?></span>
                        </div>
                        <span class="text-sm font-bold text-primary-900"><?php echo e(@$plan->total_installment); ?></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-to-line" class="h-3 w-3 text-primary-600"></i>
                            </span>
                            <span class="text-sm text-primary-500"><?php echo app('translator')->get('Deposit'); ?></span>
                        </div>
                        <span class="text-sm font-bold text-primary-900"><?php echo e($general->cur_sym . showAmount(@$plan->total_installment * @$plan->per_installment)); ?></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="trending-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('You Will Get'); ?></span>
                        </div>
                        <span class="text-sm font-extrabold text-emerald-600"><?php echo e($general->cur_sym . showAmount($plan->final_amount)); ?></span>
                    </li>

                </ul>

                <button type="button"
                        data-id="<?php echo e($plan->id); ?>"
                        class="dpsBtn 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="dpsModal" 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="dps-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="dpsForm" action="" method="post">
            <?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 a DPS'); ?></h5>
                    </div>
                    <button type="button" id="dpsCloseBtn"
                            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>

                <?php echo csrf_field(); ?>

                <?php if(checkIsOtpEnable()): ?>
                    
                    <div class="px-6 py-5 flex flex-col gap-5">
                        <?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 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-6 flex flex-col items-center gap-3 text-center">
                        <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-primary-100 mb-1">
                            <i data-lucide="circle-help" class="h-7 w-7 text-primary-600"></i>
                        </div>
                        <p class="text-sm font-medium text-primary-700"><?php echo app('translator')->get('Are you sure you want to apply for this plan?'); ?></p>
                    </div>
                    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-primary-100 bg-primary-50/40">
                        <button type="button" id="dpsCancelBtn"
                                class="inline-flex items-center gap-2 px-4 py-2 border border-primary-300 text-primary-700 text-sm font-semibold rounded-xl hover:bg-primary-100 transition-colors duration-150">
                            <i data-lucide="x" class="h-4 w-4"></i> <?php echo app('translator')->get('No'); ?>
                        </button>
                        <button type="submit"
                                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 shadow-soft transition-colors duration-150">
                            <i data-lucide="check" class="h-4 w-4"></i> <?php echo app('translator')->get('Yes, Apply'); ?>
                        </button>
                    </div>
                <?php endif; ?>

            <?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 a DPS 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="dpsGuestCloseBtn"
                            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   = $('#dpsModal');
        var $content = $('#dpsModal .dps-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', '.dpsBtn', function () {
            var id = $(this).data('id');
            $('#dpsForm').attr('action', "<?php echo e(route('user.dps.apply', '')); ?>/" + id);
            openModal();
        });

        // Close — X, No, Guest Close buttons
        $(document).on('click', '#dpsCloseBtn, #dpsCancelBtn, #dpsGuestCloseBtn', 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/dps_plans.blade.php ENDPATH**/ ?>