<?php $__env->startSection('title', session('locale') == 'bn' ? 'নতুন সাইট কিনুন' : 'Buy New Site'); ?>
<?php $lang = session('locale', 'en'); ?>

<?php $__env->startSection('content'); ?>

    <div class="mb-8">
        <h1 class="text-3xl font-extrabold text-slate-800 dark:text-white tracking-tight"><?php echo e($lang == 'bn' ? 'নতুন ডোমেইন কিনুন' : 'Get a New Domain'); ?></h1>
        <p class="text-sm text-slate-500 dark:text-slate-400 mt-1"><?php echo e($lang == 'bn' ? 'আপনার পছন্দের ওয়েব এড্রেসটি বেছে নিন' : 'Choose your perfect web address'); ?></p>
    </div>

    <?php if(session('success')): ?>
        <div class="bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-200 dark:border-emerald-500/20 text-emerald-600 dark:text-emerald-400 px-4 py-3 rounded-xl mb-6 flex items-center gap-3 shadow-sm">
            <i class="fas fa-check-circle text-lg"></i> <?php echo session('success'); ?>

        </div>
    <?php endif; ?>
    <?php if(session('error')): ?>
        <div class="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 px-4 py-3 rounded-xl mb-6 flex items-center gap-3 shadow-sm">
            <i class="fas fa-exclamation-triangle text-lg"></i> <?php echo e(session('error')); ?>

        </div>
    <?php endif; ?>

    <div class="bg-white dark:bg-[#0f172a] border border-slate-200 dark:border-[#1e293b] rounded-2xl p-6 md:p-8 shadow-sm mb-8">
        <h2 class="text-lg font-bold text-slate-800 dark:text-white mb-6 flex items-center gap-2">
            <span class="bg-blue-100 dark:bg-blue-500/20 text-blue-600 dark:text-blue-400 w-8 h-8 rounded-lg flex items-center justify-center">1</span>
            <?php echo e($lang == 'bn' ? 'এভেইলেবিলিটি চেক করুন' : 'Check Availability'); ?>

        </h2>
        
        <form action="<?php echo e(route('user.domain.check')); ?>" method="POST">
            <?php echo csrf_field(); ?>
            <div class="flex flex-col md:flex-row gap-4 relative">
                <div class="flex-1 flex bg-slate-50 dark:bg-[#1e293b] border-2 border-slate-200 dark:border-[#334155] rounded-xl overflow-hidden focus-within:border-blue-500 dark:focus-within:border-blue-500 transition-colors">
                    <input type="text" name="desired_subdomain" id="searchInput" 
                           placeholder="<?php echo e($lang == 'bn' ? 'আপনার সাইটের নাম (যেমন: myshop)' : 'Enter site name (e.g. myshop)'); ?>" required
                           pattern="[a-zA-Z0-9-]+" 
                           oninput="this.value = this.value.toLowerCase().replace(/[^a-z0-9-]/g, '')"
                           value="<?php echo e(session('checked_domain') ?? old('desired_subdomain')); ?>"
                           class="flex-1 bg-transparent text-slate-800 dark:text-white px-4 py-3 outline-none w-full">
                    
                    <div class="hidden md:flex items-center justify-center px-4 bg-slate-200 dark:bg-[#334155] text-slate-600 dark:text-slate-300 font-bold border-l border-slate-300 dark:border-[#0f172a]" id="extDisplay">
                        .<?php echo e(session('checked_ext') ?? ($subdomains->first()->domain_name ?? 'select')); ?>

                    </div>
                </div>
                
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-8 py-3 rounded-xl shadow-lg shadow-blue-500/30 transition-all hover:scale-[1.02] flex items-center justify-center gap-2 whitespace-nowrap">
                    <i class="fas fa-search"></i> <?php echo e($lang == 'bn' ? 'চেক করুন' : 'Check'); ?>

                </button>
            </div>
            <p class="text-xs text-slate-500 mt-2"><i class="fas fa-info-circle"></i> <?php echo e($lang == 'bn' ? 'শুধুমাত্র অক্ষর, সংখ্যা এবং হাইফেন ব্যবহার করা যাবে।' : 'Only letters, numbers, and hyphens allowed. No spaces.'); ?></p>

            <h3 class="text-sm font-bold text-slate-700 dark:text-slate-300 mt-8 mb-4 uppercase tracking-wider"><?php echo e($lang == 'bn' ? 'এক্সটেনশন সিলেক্ট করুন:' : 'Select Extension:'); ?></h3>
            
            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                <?php $__currentLoopData = $subdomains; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $sub): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php 
                        $isSelected = session('checked_ext') ? (session('checked_ext') == $sub->domain_name) : ($index == 0); 
                    ?>
                    <label class="cursor-pointer group relative">
                        <input type="radio" name="selected_domain" value="<?php echo e($sub->domain_name); ?>" class="peer hidden" <?php echo e($isSelected ? 'checked' : ''); ?> onchange="document.getElementById('extDisplay').innerText = '.' + this.value">
                        <div class="bg-slate-50 dark:bg-[#1e293b] border-2 border-slate-200 dark:border-[#334155] rounded-xl p-4 text-center peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-500/10 transition-all hover:border-blue-400">
                            <i class="fas fa-check-circle absolute top-2 right-2 text-blue-500 opacity-0 peer-checked:opacity-100 transition-opacity"></i>
                            <div class="font-bold text-slate-800 dark:text-white text-lg">.<?php echo e($sub->domain_name); ?></div>
                            <div class="text-xs text-slate-500 dark:text-slate-400 font-medium mt-1">৳<?php echo e($sub->price_per_month); ?>/mo</div>
                        </div>
                    </label>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </form>
    </div>

    <?php if(session('checked_domain') && session('success')): ?>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8 animate-[fadeIn_0.5s_ease-in-out]">
        
        <div class="lg:col-span-2 bg-white dark:bg-[#0f172a] border border-slate-200 dark:border-[#1e293b] rounded-2xl p-6 md:p-8 shadow-sm h-fit">
            <h2 class="text-lg font-bold text-slate-800 dark:text-white mb-6 flex items-center gap-2">
                <span class="bg-blue-100 dark:bg-blue-500/20 text-blue-600 dark:text-blue-400 w-8 h-8 rounded-lg flex items-center justify-center">2</span>
                <?php echo e($lang == 'bn' ? 'বিলিং সাইকেল সিলেক্ট করুন' : 'Choose Billing Cycle'); ?>

            </h2>

            <form action="<?php echo e(route('user.domain.purchase')); ?>" method="POST" id="purchaseForm">
                <?php echo csrf_field(); ?>
                <input type="hidden" name="desired_subdomain" value="<?php echo e(session('checked_domain')); ?>">
                <input type="hidden" name="selected_domain" value="<?php echo e(session('checked_ext')); ?>">
                <input type="hidden" name="selected_subdomain_id" value="<?php echo e(session('domain_id')); ?>">

                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <label class="cursor-pointer">
                        <input type="radio" name="months" value="1" class="peer hidden" checked onchange="calculateTotal()">
                        <div class="bg-slate-50 dark:bg-[#1e293b] border-2 border-slate-200 dark:border-[#334155] rounded-xl p-4 text-center h-full flex flex-col justify-center peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-500/10 transition-all">
                            <span class="block font-bold text-slate-800 dark:text-white text-lg">1 <?php echo e($lang == 'bn' ? 'মাস' : 'Month'); ?></span>
                            <span class="block text-xs text-slate-500 dark:text-slate-400 mt-1">Standard</span>
                        </div>
                    </label>
                    <label class="cursor-pointer relative">
                        <input type="radio" name="months" value="3" class="peer hidden" onchange="calculateTotal()">
                        <div class="bg-slate-50 dark:bg-[#1e293b] border-2 border-slate-200 dark:border-[#334155] rounded-xl p-4 text-center h-full flex flex-col justify-center peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-500/10 transition-all mt-3">
                            <span class="absolute -top-2 left-1/2 -translate-x-1/2 bg-rose-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full shadow-sm">SAVE 10%</span>
                            <span class="block font-bold text-slate-800 dark:text-white text-lg">3 <?php echo e($lang == 'bn' ? 'মাস' : 'Months'); ?></span>
                            <span class="block text-xs text-emerald-500 font-bold mt-1">Best Value</span>
                        </div>
                    </label>
                    <label class="cursor-pointer relative">
                        <input type="radio" name="months" value="6" class="peer hidden" onchange="calculateTotal()">
                        <div class="bg-slate-50 dark:bg-[#1e293b] border-2 border-slate-200 dark:border-[#334155] rounded-xl p-4 text-center h-full flex flex-col justify-center peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-500/10 transition-all mt-3">
                            <span class="absolute -top-2 left-1/2 -translate-x-1/2 bg-rose-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full shadow-sm">SAVE 15%</span>
                            <span class="block font-bold text-slate-800 dark:text-white text-lg">6 <?php echo e($lang == 'bn' ? 'মাস' : 'Months'); ?></span>
                            <span class="block text-xs text-emerald-500 font-bold mt-1">Popular</span>
                        </div>
                    </label>
                    <label class="cursor-pointer relative">
                        <input type="radio" name="months" value="12" class="peer hidden" onchange="calculateTotal()">
                        <div class="bg-slate-50 dark:bg-[#1e293b] border-2 border-slate-200 dark:border-[#334155] rounded-xl p-4 text-center h-full flex flex-col justify-center peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-500/10 transition-all mt-3">
                            <span class="absolute -top-2 left-1/2 -translate-x-1/2 bg-rose-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full shadow-sm">SAVE 40%</span>
                            <span class="block font-bold text-slate-800 dark:text-white text-lg">1 <?php echo e($lang == 'bn' ? 'বছর' : 'Year'); ?></span>
                            <span class="block text-xs text-emerald-500 font-bold mt-1">Mega Deal</span>
                        </div>
                    </label>
                </div>
            </form>
        </div>

        <div class="bg-white dark:bg-[#0f172a] border border-slate-200 dark:border-[#1e293b] rounded-2xl p-6 md:p-8 shadow-sm h-fit sticky top-20">
            <h3 class="text-lg font-bold text-slate-800 dark:text-white mb-6 border-b border-slate-200 dark:border-slate-700 pb-4">Order Summary</h3>
            
            <div class="space-y-4 text-sm">
                <div class="flex justify-between">
                    <span class="text-slate-500 dark:text-slate-400">Domain</span>
                    <span class="font-bold text-blue-600 dark:text-blue-400"><?php echo e(session('checked_domain')); ?>.<?php echo e(session('checked_ext')); ?></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-500 dark:text-slate-400">Duration</span>
                    <span class="font-bold text-slate-800 dark:text-white" id="summaryDuration">1 Month</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-500 dark:text-slate-400">Base Price</span>
                    <span class="font-bold text-slate-800 dark:text-white" id="summaryBasePrice">৳<?php echo e(number_format(session('monthly_price'), 2)); ?></span>
                </div>
                <div class="flex justify-between text-emerald-500 hidden" id="discountRow">
                    <span>Discount</span>
                    <span class="font-bold" id="summaryDiscount">-৳0.00</span>
                </div>
            </div>

            <div class="mt-6 pt-4 border-t border-dashed border-slate-300 dark:border-slate-700 flex justify-between items-center">
                <span class="text-base font-bold text-slate-800 dark:text-white">Total</span>
                <span class="text-2xl font-black text-blue-600 dark:text-blue-400" id="summaryTotal">৳<?php echo e(number_format(session('monthly_price'), 2)); ?></span>
            </div>

            <button type="submit" form="purchaseForm" id="payButton" class="w-full mt-6 bg-emerald-500 hover:bg-emerald-600 text-white font-bold py-3.5 rounded-xl shadow-lg shadow-emerald-500/30 transition-all hover:scale-[1.02] flex items-center justify-center gap-2">
                <?php echo e($lang == 'bn' ? 'পেমেন্ট করুন' : 'Pay Now'); ?> <i class="fas fa-arrow-right"></i>
            </button>
        </div>
    </div>
    <?php endif; ?>

    <script>
        const currentPrice = <?php echo e(session('monthly_price', 0)); ?>;
        const userBalance = <?php echo e(Auth::user()->balance); ?>;
        const lang = "<?php echo e($lang); ?>";

        function calculateTotal() {
            const radios = document.getElementsByName('months');
            let months = 1;
            for (const radio of radios) {
                if (radio.checked) { months = parseInt(radio.value); break; }
            }

            if (currentPrice === 0) return;

            let baseTotal = currentPrice * months;
            let discountPercent = 0;
            
            if (months === 3) discountPercent = 0.10;
            else if (months === 6) discountPercent = 0.15;
            else if (months === 12) discountPercent = 0.40;

            let discountAmount = baseTotal * discountPercent;
            let finalTotal = baseTotal - discountAmount;

            document.getElementById('summaryDuration').innerText = months + (months > 1 ? (lang=='bn'?' মাস':' Months') : (lang=='bn'?' মাস':' Month'));
            document.getElementById('summaryBasePrice').innerText = '৳' + currentPrice.toFixed(2) + ' x ' + months;
            
            const discRow = document.getElementById('discountRow');
            if (discountAmount > 0) {
                discRow.classList.remove('hidden');
                document.getElementById('summaryDiscount').innerText = '-৳' + discountAmount.toFixed(2);
            } else {
                discRow.classList.add('hidden');
            }

            document.getElementById('summaryTotal').innerText = '৳' + finalTotal.toFixed(2);

            const payBtn = document.getElementById('payButton');
            if (userBalance < finalTotal) {
                payBtn.disabled = true;
                payBtn.innerHTML = lang=='bn' ? `পর্যাপ্ত ব্যালেন্স নেই (৳${(finalTotal - userBalance).toFixed(2)} প্রয়োজন)` : `Insufficient Funds (Need ৳${(finalTotal - userBalance).toFixed(2)})`;
                payBtn.className = "w-full mt-6 bg-slate-300 dark:bg-slate-700 text-slate-500 dark:text-slate-400 font-bold py-3.5 rounded-xl cursor-not-allowed transition-all";
            } else {
                payBtn.disabled = false;
                payBtn.innerHTML = lang=='bn' ? `পেমেন্ট করুন <i class="fas fa-arrow-right ml-1"></i>` : `Pay Now <i class="fas fa-arrow-right ml-1"></i>`;
                payBtn.className = "w-full mt-6 bg-emerald-500 hover:bg-emerald-600 text-white font-bold py-3.5 rounded-xl shadow-lg shadow-emerald-500/30 transition-all hover:scale-[1.02] flex items-center justify-center gap-2";
            }
        }

        // Run on load if purchase section exists
        if(document.getElementById('purchaseForm')) {
            calculateTotal();
        }
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('user.layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/hhhnbari/public_html/resources/views/user/buy-domain.blade.php ENDPATH**/ ?>