<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>

<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-100 to-slate-200 p-6">

    <div class="w-full max-w-4xl bg-white rounded-2xl shadow-xl grid md:grid-cols-2 overflow-hidden">

        <!-- LEFT SIDE -->
        <div class="p-10">

            <!-- Logo -->
            <div class="text-center mb-10">
                <img src="<?= base_url(get_brand_data($brand_id, $uid)->brand_logo); ?>"
                     class="h-20 mx-auto mb-4">
                <h2 class="text-2xl font-bold text-gray-800">Secure Payment</h2>
                <p class="text-gray-500 text-sm">Fast • Safe • Trusted</p>
            </div>

            <?= form_open("", 'class="space-y-6 actionForm"') ?>

            <!-- Full Name -->
            <div>
                <label class="block text-sm font-medium text-gray-600 mb-2">Full Name</label>
                <input type="text"
                       name="customer_name"
                       placeholder="Enter your full name"
                       class="w-full h-12 px-4 text-base text-gray-800 bg-gray-50 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition"
                       <?= !empty($customer_name) ? 'readonly value="' . $customer_name . '"' : ''; ?>
                       required>
            </div>

            <!-- Email -->
            <div>
                <label class="block text-sm font-medium text-gray-600 mb-2">Email</label>
                <input type="email"
                       name="customer_email"
                       placeholder="Enter your email"
                       class="w-full h-12 px-4 text-base text-gray-800 bg-gray-50 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition"
                       <?= !empty($customer_email) ? 'readonly value="' . $customer_email . '"' : ''; ?>
                       required>
            </div>

            <!-- Phone -->
            <div>
                <label class="block text-sm font-medium text-gray-600 mb-2">Phone Number</label>
                <input type="text"
                       name="customer_number"
                       placeholder="Enter phone number"
                       class="w-full h-12 px-4 text-base text-gray-800 bg-gray-50 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition"
                       required>
            </div>

            <!-- Amount -->
            <div>
                <label class="block text-sm font-medium text-gray-600 mb-2">Amount</label>
                <input type="text"
                       name="customer_amount"
                       placeholder="Enter amount"
                       class="w-full h-12 px-4 text-base font-semibold text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition"
                       <?= !empty($customer_amount) ? 'readonly value="' . $customer_amount . '"' : ''; ?>
                       required>
            </div>

            <!-- Button -->
            <button type="submit"
                    class="w-full h-12 mt-4 bg-teal-600 text-white font-semibold rounded-lg hover:bg-teal-700 transition shadow-md">
                Pay Now
            </button>

            <?= form_close(); ?>

        </div>


        <!-- RIGHT SIDE (clean design panel) -->
        <div class="hidden md:flex flex-col items-center justify-center bg-teal-600 text-white p-10">

            <img src="<?= base_url("/public/assets/plat/123123-1.png") ?>"
                 class="max-h-60 mb-6">

            <h3 class="text-xl font-semibold mb-2">100% Secure Payment</h3>
            <p class="text-sm opacity-90 text-center">
                Your transactions are encrypted and protected.  
                Pay safely with confidence.
            </p>

        </div>

    </div>
</div>