 

<?php $__env->startSection('content'); ?>
<div class=" mx-auto py-8 px-4 sm:px-6 lg:px-8">

    <!-- Alert Messages -->
    <?php if(session('success')): ?>
        <div class="mb-6 p-4 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 rounded-xl flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span><?php echo e(session('success')); ?></span>
        </div>
    <?php endif; ?>

    <?php if(session('error')): ?>
        <div class="mb-6 p-4 bg-rose-500/10 border border-rose-500/20 text-rose-600 rounded-xl flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span><?php echo e(session('error')); ?></span>
        </div>
    <?php endif; ?>

    <!-- Banner Header -->
    <div class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 p-6 lg:p-8 text-white mb-8 shadow-xl">
        <div class="relative z-10 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <p class="text-indigo-100 text-sm font-medium mb-1">Account Balance</p>
                <h1 class="text-2xl lg:text-3xl font-extrabold tracking-tight">অ্যাকাউন্ট রিচার্জ করুন</h1>
                <p class="mt-1 text-indigo-100/90 text-sm">সহজেই টাকা জমা করে আপনার সেবা সচল রাখুন</p>
            </div>
            <!-- Current Balance Card -->
            <div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-xl p-4 min-w-[160px]">
                <span class="text-xs text-indigo-100 uppercase tracking-wider font-semibold">বর্তমান ব্যালেন্স</span>
                <h3 class="text-2xl font-bold mt-1">৳ <?php echo e(number_format(auth()->user()->balance ?? 0, 2)); ?></h3>
            </div>
        </div>
        <!-- Decorative Background Circles -->
        <div class="absolute -right-10 -top-20 w-64 h-64 rounded-full bg-white/10 blur-xl pointer-events-none"></div>
    </div>

    <!-- Main Form Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Payment Instructions & Numbers (Left Column) -->
        <div class="lg:col-span-1 space-y-4">
            <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm">
                <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-4 flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    পেমেন্ট নিয়মাবলি
                </h3>
                <ul class="text-sm text-gray-600 dark:text-gray-300 space-y-3">
                    <li class="flex items-start gap-2">
                        <span class="font-bold text-indigo-600">১.</span> 
                        নিচের পছন্দের মেথডের নাম্বারে <strong>Send Money</strong> করুন।
                    </li>
                    <li class="flex items-start gap-2">
                        <span class="font-bold text-indigo-600">২.</span> 
                        অ্যামাউন্ট, নাম্বার ও TrxID সঠিক দিন।
                    </li>
                    <li class="flex items-start gap-2">
                        <span class="font-bold text-indigo-600">৩.</span> 
                        রিকোয়েস্ট পাঠানোর ৫-১০ মিনিটের মধ্যে ব্যালেন্স যুক্ত হবে।
                    </li>
                </ul>

                <hr class="my-5 border-gray-100 dark:border-gray-700">

                <h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">আমাদের মার্চেন্ট/পার্সোনাল নম্বর</h4>
                <div class="space-y-2">
                    <div class="flex justify-between items-center p-2.5 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                        <span class="text-sm font-semibold text-pink-600">bKash (Personal)</span>
                        <span class="text-sm font-mono font-bold text-gray-700 dark:text-gray-200">01700000000</span>
                    </div>
                    <div class="flex justify-between items-center p-2.5 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                        <span class="text-sm font-semibold text-orange-500">Nagad (Personal)</span>
                        <span class="text-sm font-mono font-bold text-gray-700 dark:text-gray-200">01700000000</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recharge Form (Right Column) -->
        <div class="lg:col-span-2">
            <div class="bg-white dark:bg-gray-800 p-6 lg:p-8 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm">
                
                <form action="<?php echo e(route('recharge.store')); ?>" method="POST">
                    <?php echo csrf_field(); ?>

                    <!-- Payment Gateway Selection -->
                    <div class="mb-6">
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">পেমেন্ট মেথড সিলেক্ট করুন</label>
                        <div class="grid grid-cols-3 gap-3">
                            <label class="cursor-pointer">
                                <input type="radio" name="payment_method" value="bkash" class="peer sr-only" checked>
                                <div class="p-3 text-center rounded-xl border-2 border-gray-200 dark:border-gray-700 peer-checked:border-pink-500 peer-checked:bg-pink-50 dark:peer-checked:bg-pink-950/20 transition">
                                    <span class="block font-bold text-pink-600 text-sm">bKash</span>
                                </div>
                            </label>

                            <label class="cursor-pointer">
                                <input type="radio" name="payment_method" value="nagad" class="peer sr-only">
                                <div class="p-3 text-center rounded-xl border-2 border-gray-200 dark:border-gray-700 peer-checked:border-orange-500 peer-checked:bg-orange-50 dark:peer-checked:bg-orange-950/20 transition">
                                    <span class="block font-bold text-orange-500 text-sm">Nagad</span>
                                </div>
                            </label>

                            <label class="cursor-pointer">
                                <input type="radio" name="payment_method" value="rocket" class="peer sr-only">
                                <div class="p-3 text-center rounded-xl border-2 border-gray-200 dark:border-gray-700 peer-checked:border-purple-600 peer-checked:bg-purple-50 dark:peer-checked:bg-purple-950/20 transition">
                                    <span class="block font-bold text-purple-600 text-sm">Rocket</span>
                                </div>
                            </label>
                        </div>
                        <?php $__errorArgs = ['payment_method'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="text-xs text-rose-500 mt-1 block"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <!-- Quick Amount Selector -->
                    <div class="mb-6">
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">দ্রুত অ্যামাউন্ট সিলেক্ট করুন</label>
                        <div class="grid grid-cols-4 gap-2 mb-3">
                            <button type="button" onclick="setAmount(100)" class="py-2 px-3 text-sm bg-gray-100 hover:bg-indigo-50 hover:text-indigo-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg font-medium transition">৳১০০</button>
                            <button type="button" onclick="setAmount(500)" class="py-2 px-3 text-sm bg-gray-100 hover:bg-indigo-50 hover:text-indigo-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg font-medium transition">৳৫০০</button>
                            <button type="button" onclick="setAmount(1000)" class="py-2 px-3 text-sm bg-gray-100 hover:bg-indigo-50 hover:text-indigo-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg font-medium transition">৳১০০০</button>
                            <button type="button" onclick="setAmount(2000)" class="py-2 px-3 text-sm bg-gray-100 hover:bg-indigo-50 hover:text-indigo-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg font-medium transition">৳২০০০</button>
                        </div>

                        <!-- Custom Amount Input -->
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500 font-bold">৳</span>
                            <input type="number" id="amount" name="amount" value="<?php echo e(old('amount')); ?>" placeholder="টাকার পরিমাণ লিখুন" required
                                class="w-pl-8 pl-8 w-full rounded-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900 text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 p-3">
                        </div>
                        <?php $__errorArgs = ['amount'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="text-xs text-rose-500 mt-1 block"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <!-- Sender Phone Number -->
                    <div class="mb-6">
                        <label for="sender_number" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">যে নাম্বার থেকে টাকা পাঠিয়েছেন</label>
                        <input type="text" id="sender_number" name="sender_number" value="<?php echo e(old('sender_number')); ?>" placeholder="017XXXXXXXX" required
                            class="w-full rounded-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900 text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 p-3">
                        <?php $__errorArgs = ['sender_number'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="text-xs text-rose-500 mt-1 block"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <!-- Transaction ID -->
                    <div class="mb-6">
                        <label for="transaction_id" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">ট্রানজেকশন আইডি (TrxID)</label>
                        <input type="text" id="transaction_id" name="transaction_id" value="<?php echo e(old('transaction_id')); ?>" placeholder="যেমন: 9J76XXYYZZ" required
                            class="w-full rounded-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900 text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 p-3 uppercase">
                        <?php $__errorArgs = ['transaction_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="text-xs text-rose-500 mt-1 block"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <!-- Submit Button -->
                    <button type="submit" class="w-full py-3.5 px-6 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-bold shadow-lg shadow-indigo-500/30 transition transform active:scale-95">
                        রিচার্জ করুন
                    </button>
                </form>

            </div>
        </div>

    </div>
</div>

<!-- Quick Amount Set Script -->
<script>
    function setAmount(val) {
        document.getElementById('amount').value = val;
    }
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.layout', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\nidservercopy\resources\views/user/recharge.blade.php ENDPATH**/ ?>