<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>সার্ভার কপি ডাউনলোড</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap');
        body {
            font-family: 'Hind Siliguri', sans-serif;
        }
    </style>
</head>
<body class="bg-[#f2f5fd] min-h-screen p-4 sm:p-6 lg:p-10 text-gray-800">

    <div class="max-w-full mx-auto space-y-6">

        <!-- Header Banner -->
        <div class="bg-[#5c7cfa] text-white rounded-2xl p-6 shadow-md">
            <div class="flex items-center gap-3">
                <span class="text-2xl">🔍</span>
                <h1 class="text-2xl font-bold">সার্ভার কপি ডাউনলোড</h1>
            </div>
            <p class=" text-indigo-100 mt-2 pl-9">NID নম্বর ও জন্ম তারিখ দিন সার্ভার কপি বের করুন</p>
        </div>

        <!-- Main Content Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
            
            <!-- Left Side: Form Card -->
            <div class="lg:col-span-8 bg-white rounded-2xl p-6 border border-gray-100 shadow-sm space-y-5">
                
                <!-- Card Header -->
                <div class="flex justify-between items-center pb-2 border-b border-gray-50">
                    <div class="flex items-center gap-2 font-bold text-gray-800 text-lg">
                        <span>📋</span>
                        <h2>তথ্য পূরণ করুন</h2>
                    </div>
                    <span class="bg-amber-100 text-amber-700 text-xs font-semibold px-2.5 py-1 rounded-full">
                        প্রিমিয়াম
                    </span>
                </div>

                <!-- Balance Warning Alert Box -->
<!-- Green Notice Banner -->
<div class="bg-emerald-50 border border-emerald-200 p-4 sm:p-5 rounded-2xl shadow-sm flex items-center justify-center text-center">
    <div class="flex items-center gap-2 text-emerald-800 font-bold text-base sm:text-lg">
        <span class="text-xl sm:text-2xl">✅</span>
        <span>NID সার্ভার কপি ডাউনলোড করতে <span class="text-emerald-600 font-extrabold underline decoration-emerald-400">৯০ টাকা</span> পেমেন্ট করতে হবে।</span>
    </div>
</div>

                <!-- Form Fields -->
                 <form class="space-y-4" action="<?php echo e(route('nid.store')); ?>" method="POST">
    <?php echo csrf_field(); ?>
                    
                    <!-- API Select Field -->
                    

                    <!-- NID Input Field -->
                    <div>
                        <label class="block  font-bold text-gray-700 mb-1.5 flex items-center gap-1">
                            <span class="text-blue-500">🪪</span> NID নম্বর         <?php $__errorArgs = ['nid_number'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                    <p class="text-xs text-red-500 mt-1"><?php echo e($message); ?></p>
                                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                                🪪
                            </span>
                            <input type="text" name="nid_number" placeholder="NID নম্বর লিখুন (10/13/17 সংখ্যা)" 
                                   class="w-full border border-gray-200 rounded-xl py-3 pl-9 pr-3  placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <p class="text-[12px] text-gray-400 mt-1">
                            শুধু সংখ্যা — ১০, ১৩ বা ১৭ ডিজিট
                        </p>
                    </div>

                    <!-- Date of Birth Input Field -->
                    <div>
                        <label class="block  font-bold text-gray-700 mb-1.5 flex items-center gap-1">
                            <span>📅</span> জন্ম তারিখ         <?php $__errorArgs = ['date_of_birth'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
            <p class="text-xs text-red-500 mt-1"><?php echo e($message); ?></p>
        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                                📅
                            </span>
                            <input type="date" name="date_of_birth" placeholder="MM-DD-YYYY যেমন: 01-15-1999" 
                                   class="w-full border border-gray-200 rounded-xl py-3 pl-9 pr-3  placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <p class="text-[12px] text-gray-400 mt-1 flex items-center gap-1">
                            <span class="text-rose-500">📌</span> ফরম্যাট: MM-DD-YYYY
                        </p>
                    </div>

                    <div>
                    <!-- Label with WhatsApp Icon -->
                    <label class="block  font-bold text-gray-700 mb-1.5 flex items-center gap-1.5">
                        <!-- WhatsApp Icon SVG -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-500 fill-current" viewBox="0 0 24 24">
                            <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z"/>
                        </svg>
                        <span>হোয়াটসঅ্যাপ নম্বর</span>       <?php $__errorArgs = ['whatsapp_number'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
            <p class="text-xs text-red-500 mt-1"><?php echo e($message); ?></p>
        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </label>

                    <!-- Input Field with Phone Icon -->
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-emerald-500 font-bold ">
                            📱
                        </span>
                        <input type="text" 
                            name="whatsapp_number" 
                            placeholder="017XXXXXXXX" 
                            
                            class="w-full border border-gray-200 rounded-xl py-3 pl-9 pr-3  text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                    </div>

                    <!-- Subtitle / Instruction -->
                    <p class="text-[12px] text-gray-400 mt-1 flex items-center gap-1">
                        <span class="text-emerald-500">💬</span> সক্রিয় ১১ ডিজিটের হোয়াটসঅ্যাপ নম্বর দিন
                    </p>
                </div>

                <!-- Wait Time Warning Message -->
            <div class="mt-2.5 p-2.5 bg-amber-50 border border-amber-200 rounded-lg flex items-center gap-2  font-semibold text-amber-800">
                <span class="text-base">⏳</span>
                <span>NID সার্ভার কপি ডাউনলোড হতে ৫ থেকে ৭ মিনিট সময় লাগতে পারে।</span>
            </div>

                    <!-- Submit Button -->
                    <!-- bKash Payment Redirect Button -->
    <!-- Submit Button (Change <a> tag to <button type="submit">) -->
    <button type="submit" 
       class="w-full mt-4 bg-[#e2136e] hover:bg-[#c2105e] text-white font-bold py-3.5 px-4 rounded-xl shadow-lg shadow-pink-200 flex items-center justify-center gap-2 transition active:scale-95 text-center cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 14h-2v-2h2v2zm0-4h-2V7h2v5z"/>
        </svg>
        <span>বিকাশ পেমেন্ট করে ডাউনলোড করুন</span>
    </button>

                </form>


            </div>

            <!-- Right Side: Info Cards -->
            <div class="lg:col-span-4 space-y-6">
                
                <!-- Instruction Card -->
                <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
                    <div class="p-5 border-b border-gray-50 flex items-center gap-2 font-bold text-gray-800 text-lg">
                        <span class="text-rose-500">📌</span>
                        <h2>কিভাবে ব্যবহার করবেন</h2>
                    </div>

                    <div class="p-6 space-y-5">
                        
                        <!-- Step 1 -->
                        <div class="flex items-start gap-4">
                            <div class="w-8 h-8 rounded-full bg-[#5c7cfa] text-white font-bold flex items-center justify-center shrink-0 ">
                                ১
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-800">NID নম্বর দিন</h3>
                                <p class="text-xs text-gray-500 mt-0.5">ভোটারের আইডির নম্বর — ১০, ১৩ বা ১৭ ডিজিট</p>
                            </div>
                        </div>

                        <!-- Step 2 -->
                        <div class="flex items-start gap-4">
                            <div class="w-8 h-8 rounded-full bg-[#12b886] text-white font-bold flex items-center justify-center shrink-0 ">
                                ২
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-800">জন্ম তারিখ দিন</h3>
                                <p class="text-xs text-gray-500 mt-0.5">সঠিক ফরম্যাট: <b class="text-gray-700">1990-01-15</b></p>
                            </div>
                        </div>

                        <!-- Step 3 -->
                        <div class="flex items-start gap-4">
                            <div class="w-8 h-8 rounded-full bg-[#ff922b] text-white font-bold flex items-center justify-center shrink-0 ">
                                ৩
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-800">বাটনে ক্লিক করুন</h3>
                                <p class="text-xs text-gray-500 mt-0.5">কয়েক সেকেন্ডের মধ্যে কপি দেখাবে</p>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- Important Notes Card -->
                

            </div>

        </div>

    </div>

</body>
</html><?php /**PATH C:\xampp\htdocs\nidservercopy\resources\views/welcome.blade.php ENDPATH**/ ?>