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

<!-- Hero Section with Gradient Background -->
<div class="relative bg-gradient-to-br from-blue-600 to-indigo-700 dark:from-blue-900 dark:to-indigo-900">
    <div class="absolute inset-0 bg-grid-white/[0.05]"></div>
    <div class="relative px-4 py-12 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-3xl font-bold tracking-tight text-white sm:text-4xl lg:text-5xl">
                Complete Your Payment
            </h1>
            <p class="mx-auto mt-4 max-w-2xl text-lg text-blue-100">
                Secure your transaction with <?php echo e($payment_mode->name); ?>

            </p>
        </div>
    </div>

    <!-- Curved bottom -->
    <div class="absolute bottom-0 left-0 right-0 h-12 bg-gray-50 dark:bg-gray-900
                [clip-path:polygon(0_100%,100%_100%,100%_0,50%_100%,0_0)]">
    </div>
</div>

<!-- Main Content Container -->
<div class="px-4 py-12 mx-auto max-w-7xl sm:px-6 lg:px-8">
    <!-- Alerts -->
    <div class="space-y-4 mb-8">
        <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.danger-alert','data' => []]); ?>
<?php $component->withName('danger-alert'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>
        <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.success-alert','data' => []]); ?>
<?php $component->withName('success-alert'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>
    </div>

    <!-- Transaction Timer -->
    <div class="mb-8 text-center">
        <p class="text-sm text-gray-500 dark:text-gray-400">
            Transaction initiated on: <?php echo e(\Carbon\Carbon::now()->toDayDateTimeString()); ?>

        </p>
    </div>

    <!-- Breadcrumb -->
    <nav class="flex mb-8" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li class="inline-flex items-center">
                    <a href="<?php echo e(route('dashboard')); ?>" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                        <svg class="w-3 h-3 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                            <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
                        </svg>
                        Home
                    </a>
                </li>
                <li aria-current="page">
                    <div class="flex items-center">
                        <svg class="w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                        </svg>
                        <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">Dashboard</span>
                    </div>
                </li>
            </ol>
        </nav>
<form method="POST" enctype="multipart/form-data" action="<?php echo e(route('savedeposit')); ?>" class="space-y-8">
    <?php echo csrf_field(); ?>
    <div class="relative group">
        <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-25
                   group-hover:opacity-40 transition duration-200"></div>
        <div class="relative bg-white dark:bg-gray-900 rounded-2xl shadow-xl">
            <!-- Payment Status Steps -->
            <div class="px-8 py-6 border-b border-gray-200 dark:border-gray-700">
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/50">
                            <i data-lucide="wallet" class="w-5 h-5 text-blue-600 dark:text-blue-400"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                Payment Details
                            </h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                Complete your <?php echo e($payment_mode->name); ?> deposit
                            </p>
                        </div>
                    </div>
                    <div class="hidden sm:block">
                        <div class="flex items-center gap-4">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-300">
                                <i data-lucide="shield-check" class="w-4 h-4 mr-1"></i>
                                Secure Transaction
                            </span>
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-300">
                                <i data-lucide="clock" class="w-4 h-4 mr-1"></i>
                                24/7 Support
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="px-8 py-6 space-y-8">
                <!-- Currency Selection -->
                
<type="hidden" name="method" value="<?php echo e($payment_mode->name); ?>">
                <!-- Amount Display -->
                <div class="relative p-6 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20">
                    <div class="absolute top-0 right-0 -mt-4 -mr-4">
                        <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-600 text-white">
                            <i data-lucide="trending-up" class="w-4 h-4"></i>
                        </div>
                    </div>
                    <div class="flex flex-col items-center space-y-3">
                        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Amount to Pay</span>
                        <span class="text-3xl font-bold text-gray-900 dark:text-white">
                            <?php echo e($amount); ?><?php echo e(Auth::user()->currency); ?>

                        </span>
                        <div class="flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400">
                            <i data-lucide="info" class="w-4 h-4"></i>
                            <span>Please send the exact amount to avoid delays</span>
                        </div>
                    </div>
                </div>

                <!-- Payment Instructions -->
                <div class="rounded-xl bg-blue-50 dark:bg-blue-900/30 p-6 border border-blue-100 dark:border-blue-800">
                    <div class="flex items-start gap-4">
                        <div class="flex-shrink-0">
                            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/50">
                                <i data-lucide="info" class="w-5 h-5 text-blue-600 dark:text-blue-400"></i>
                            </div>
                        </div>
                        <div class="flex-1">
                            <h4 class="text-lg font-semibold text-blue-900 dark:text-blue-100 mb-2">
                                Payment Instructions
                            </h4>
                            <p class="text-blue-800 dark:text-blue-200">
                                Please follow these steps to complete your deposit:
                            </p>
                            <ol class="mt-4 space-y-3 text-sm text-blue-700 dark:text-blue-300">
                                <li class="flex items-center gap-2">
                                    <div class="flex-shrink-0 w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 font-medium">
                                        1
                                    </div>
                                    <span>Send <?php echo e($amount); ?><?php echo e(Auth::user()->currency); ?> to the address below</span>
                                </li>
                                <li class="flex items-center gap-2">
                                    <div class="flex-shrink-0 w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 font-medium">
                                        2
                                    </div>
                                    <span>Upload screenshot/proof of your payment</span>
                                </li>
                                <li class="flex items-center gap-2">
                                    <div class="flex-shrink-0 w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 font-medium">
                                        3
                                    </div>
                                    <span>Click "Send Proof of Deposit" to complete</span>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>

                <!-- Payment Details Grid -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <!-- QR Code Section -->
                    <div class="flex flex-col items-center space-y-4">
                        <div class="relative group">
                            <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-25
                                       group-hover:opacity-40 transition duration-200"></div>
                            <div class="relative p-6 bg-white dark:bg-gray-800 rounded-2xl shadow-xl">
                                <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=<?php echo e($payment_mode->wallet_address); ?>"
                                     alt="Payment QR Code"
                                     class="w-full h-auto rounded-lg">
                                <div class="absolute top-2 right-2">
                                    <button onclick="downloadQR()"
                                            class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300
                                                   hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200">
                                        <i data-lucide="download" class="w-4 h-4"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <p class="text-sm text-center text-gray-500 dark:text-gray-400">
                            Scan QR code with your wallet app
                        </p>
                    </div>

                    <!-- Payment Details Section -->
                    <div class="lg:col-span-2 space-y-6">
                        <!-- Wallet Address -->
                        <div class="space-y-3">
                            <label class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                                <i data-lucide="wallet" class="w-5 h-5 text-gray-400"></i>
                                Wallet Address
                            </label>
                            <div class="relative group">
                                <div class="flex rounded-xl shadow-sm">
                                    <input type="text"
                                           value="<?php echo e($payment_mode->wallet_address); ?>"
                                           class="flex-1 min-w-0 block w-full px-4 py-3 rounded-l-xl border border-r-0
                                                  border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800
                                                  text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500
                                                  focus:border-transparent text-sm"
                                           readonly>
                                    <button type="button"
                                            onclick="copyFunction('<?php echo e($payment_mode->wallet_address); ?>')"
                                            class="relative inline-flex items-center gap-2 px-4 py-3 border border-gray-200
                                                   dark:border-gray-700 text-sm font-medium rounded-r-xl text-gray-700
                                                   dark:text-gray-200 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100
                                                   dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500
                                                   focus:border-transparent transition-all duration-200">
                                        <i data-lucide="copy" class="w-4 h-4"></i>
                                        <span class="hidden sm:inline">Copy Address</span>
                                    </button>
                                </div>
                                <div class="absolute inset-y-0 right-12 flex items-center pointer-events-none opacity-0
                                            group-hover:opacity-100 transition-opacity duration-200">
                                    <span class="px-2 py-1 text-xs text-gray-600 dark:text-gray-400 bg-gray-100
                                               dark:bg-gray-700 rounded-md">
                                        Click to copy
                                    </span>
                                </div>
                            </div>
                        </div>

                        <!-- File Upload -->
                        <div class="space-y-3">
                            <label class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                                <i data-lucide="upload" class="w-5 h-5 text-gray-400"></i>
                                Upload Proof of Payment
                            </label>
                            <div class="relative group">
                                <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl blur opacity-25
                                           group-hover:opacity-40 transition duration-200"></div>
                                <div class="relative flex flex-col items-center justify-center px-6 py-8 border-2
                                            border-dashed border-gray-300 dark:border-gray-600 rounded-xl
                                            bg-white dark:bg-gray-800 transition-all duration-200
                                            hover:border-blue-500 dark:hover:border-blue-400">
                                    <div class="flex flex-col items-center space-y-4">
                                        <div class="p-3 rounded-full bg-blue-50 dark:bg-blue-900/30">
                                            <i data-lucide="upload-cloud" class="w-8 h-8 text-blue-600 dark:text-blue-400"></i>
                                        </div>
                                        <div class="text-center">
                                            <label for="proof" class="relative cursor-pointer">
                                                <div class="flex flex-col items-center gap-1">
                                                    <span class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">
                                                        Click to upload
                                                    </span>
                                                    <span class="text-xs text-gray-500 dark:text-gray-400">
                                                        or drag and drop your file here
                                                    </span>
                                                </div>
                                                <input id="proof" name="proof" type="file" class="sr-only" required
                                                       accept="image/*"
                                                       onchange="updateFileName(this)">
                                            </label>
                                            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400" id="file-info">
                                                PNG, JPG, GIF up to 10MB
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Hidden Fields -->
                        <input type="hidden" name="amount" value="<?php echo e($amount); ?>">
                        <input type="hidden" name="paymethd_method" value="<?php echo e($payment_mode->name); ?>">
                        <?php if($asset): ?>
                        <input type="hidden" name="asset" value="<?php echo e($asset); ?>">
                        <?php endif; ?>

                        <!-- Submit Button -->
                        <div class="pt-6">
                            <button type="submit" class="group relative w-full">
                                <div class="absolute -inset-0.5 bg-gradient-to-r from-green-600 to-emerald-600 rounded-xl
                                           blur opacity-40 group-hover:opacity-60 transition duration-200 animate-pulse"></div>
                                <div class="relative flex items-center justify-center gap-2 bg-green-600 text-white px-8 py-4
                                           rounded-xl transition-all duration-200 group-hover:bg-green-700">
                                    <i data-lucide="upload" class="w-5 h-5"></i>
                                    <span class="font-semibold">Submit Proof of Deposit</span>
                                </div>
                            </button>

                            <!-- Security Notice -->
                            <div class="mt-6 flex items-center justify-center gap-2 text-sm text-gray-500 dark:text-gray-400">
                                <i data-lucide="shield-check" class="w-5 h-5 text-green-500"></i>
                                Your transaction is protected by our secure payment system
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Initialize scripts -->
<script>
    function copyFunction(text) {
        navigator.clipboard.writeText(text).then(() => {
            // Show success message
            const button = event.currentTarget;
            const originalContent = button.innerHTML;
            button.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i><span class="sm:inline">Copied!</span>';
            lucide.createIcons();

            setTimeout(() => {
                button.innerHTML = originalContent;
                lucide.createIcons();
            }, 2000);
        });
    }

    function downloadQR() {
        const img = document.querySelector('img[alt="Payment QR Code"]');
        const link = document.createElement('a');
        link.href = img.src;
        link.download = 'payment-qr-code.png';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    function updateFileName(input) {
        const fileInfo = document.getElementById('file-info');
        if (input.files && input.files[0]) {
            const file = input.files[0];
            const fileSize = (file.size / 1024 / 1024).toFixed(2);
            fileInfo.textContent = `${file.name} (${fileSize}MB)`;
        } else {
            fileInfo.textContent = 'PNG, JPG, GIF up to 10MB';
        }
    }

    // Initialize Lucide icons
    document.addEventListener('DOMContentLoaded', function() {
        lucide.createIcons();
    });
</script>

<style>
    @keyframes  pulse-border {
        0% { border-color: transparent; }
        50% { border-color: rgb(37, 99, 235); }
        100% { border-color: transparent; }
    }

    .bg-grid-white\/\[0\.05\] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.05)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E");
    }

    /* Drag and drop styles */
    .drag-active {
        border-color: #3b82f6 !important;
        background-color: #eff6ff !important;
    }

    .dark .drag-active {
        border-color: #3b82f6 !important;
        background-color: rgba(59, 130, 246, 0.1) !important;
    }
</style>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.dasht', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\bluetrade\resources\views/user/payment.blade.php ENDPATH**/ ?>