@extends(template() . 'layout.master2')

@section('content2')
<div class="min-h-screen bg-zinc-50 dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 p-4 md:p-8">
    <div class="max-w-6xl mx-auto">
        
        <div class="flex items-center justify-between mb-8">
            <div>
                <h1 class="text-2xl font-black uppercase italic tracking-tight">
                    <span class="text-[#1a55e0]">{{ __('Payment') }}</span> {{ __('Information') }}
                </h1>
                <p class="text-[10px] font-bold uppercase tracking-widest text-zinc-500 mt-1">Pending Confirmation</p>
            </div>
            <a href="{{ route('user.deposit') }}" class="px-4 py-2 rounded-xl bg-zinc-200 dark:bg-zinc-900 text-zinc-600 dark:text-zinc-400 text-xs font-black uppercase tracking-widest hover:bg-[#1a55e0] hover:text-white transition-all flex items-center gap-2">
                <i class="fas fa-arrow-left"></i> {{ __('Back') }}
            </a>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            
            <div class="lg:col-span-7 space-y-6">
                
                <div class="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-[2.5rem] p-8 shadow-sm">
                    <div class="flex flex-col md:flex-row items-center gap-8">
                        <div class="flex-shrink-0">
                            <div class="p-4 bg-white rounded-3xl shadow-inner inline-block">
                                <div id="walletQR"></div>
                            </div>
                            <p class="text-[10px] font-black text-center text-zinc-400 uppercase mt-4 tracking-widest">Scan to Pay</p>
                        </div>

                        <div class="flex-grow w-full">
                            <label class="text-[10px] font-black text-[#1a55e0] uppercase tracking-widest block mb-2">Your Deposit Address</label>
                            <div class="relative group mb-4">
                                   <!--<input type="text" id="myInput" -->
                                   <!-- class="w-full bg-zinc-50 dark:bg-zinc-950 border-2 border-zinc-100 dark:border-zinc-800 p-4 rounded-2xl text-sm font-mono font-bold text-zinc-600 dark:text-zinc-300 outline-none pr-12 focus:border-emerald-500 transition-all" -->
                                   <!-- value="{{ $decryptWalletAddress }}" readonly>-->
                                    
                                    
                                    <textarea id="myInput" rows="2" readonly
    class="w-full bg-zinc-50 dark:bg-zinc-950 border-2 border-zinc-100 dark:border-zinc-800 p-4 rounded-2xl text-xs font-mono font-bold text-zinc-600 dark:text-zinc-300 outline-none pr-12 focus:border-emerald-500 transition-all resize-none break-all"
>{{ $decryptWalletAddress }}</textarea>
                                <button onclick="copyWallet()" class="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-[#1a55e0] transition-colors">
                                    <i class="fas fa-copy text-lg"></i>
                                </button>
                            </div>
                            
                            <button onclick="copyWallet()" class="w-full py-3 rounded-xl bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 font-black uppercase text-[10px] tracking-widest hover:bg-[#1a55e0] dark:hover:bg-[#1a55e0] dark:hover:text-white transition-all">
                                <i class="fas fa-clone mr-2"></i> Copy Wallet Address
                            </button>




<div id="copyModal" class="fixed bottom-10 left-1/2 -translate-x-1/2 z-[99999] opacity-0 translate-y-10 pointer-events-none transition-all duration-500">
    <div class="bg-zinc-900 dark:bg-[#1a55e0] text-white px-6 py-3 rounded-2xl shadow-2xl flex items-center gap-3 border border-white/10">
     <div class="flex-shrink-0 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-white">
        <path d="M20 6 9 17l-5-5"/>
    </svg>
</div>
        <div>
            <p class="text-[10px] font-black uppercase tracking-widest leading-none">Copied!</p>
            <p class="text-xs font-bold opacity-80 mt-1">Wallet address saved to clipboard</p>
        </div>
    </div>
</div>

                            <div class="mt-6 grid grid-cols-2 gap-4">
                                <div class="p-4 rounded-2xl bg-zinc-50 dark:bg-zinc-950 border border-zinc-100 dark:border-zinc-800 text-center">
                                    <p class="text-[10px] font-black text-zinc-400 uppercase tracking-tighter">Currency</p>
                                    <p class="font-black text-[#1a55e0]">{{ $gateway['gateway_parameters']['gateway_currency'] }}</p>
                                </div>
                                <div class="p-4 rounded-2xl bg-zinc-50 dark:bg-zinc-950 border border-zinc-100 dark:border-zinc-800 text-center">
                                    <p class="text-[10px] font-black text-zinc-400 uppercase tracking-tighter">Network</p>
                                    <p class="font-black text-zinc-900 dark:text-white uppercase">{{ str_replace('_', ' ', $gateway['charge']) }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-8 p-4 bg-amber-500/10 border border-amber-500/20 rounded-2xl">
                        <p class="text-xs font-bold text-amber-600 dark:text-amber-400 flex items-start gap-3">
                            <i class="fas fa-exclamation-triangle mt-0.5"></i>
                            <span>{{ __('Important: Only send') }} {{ $gateway['gateway_parameters']['gateway_currency'] }} {{ __('to this address. Upload your proof of payment below.') }}</span>
                        </p>
                    </div>
                </div>

                <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
                    @php
                        $exchanges = [
                            ['name' => 'MoonPay', 'url' => 'https://buy.moonpay.com/', 'color' => 'text-blue-500'],
                            ['name' => 'Kraken', 'url' => 'https://www.kraken.com/', 'color' => 'text-purple-500'],
                            ['name' => 'Coinbase', 'url' => 'https://coinbase.com/', 'color' => 'text-[#1a55e0]'],
                        ];
                    @endphp
                    @foreach($exchanges as $ex)
                    <a href="{{ $ex['url'] }}" target="_blank" class="p-4 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl flex flex-col items-center justify-center gap-2 hover:border-emerald-500 transition-all group">
                        <i class="fas fa-external-link-alt text-xs text-zinc-300 group-hover:text-[#1a55e0]"></i>
                        <span class="text-[10px] font-black uppercase tracking-widest text-zinc-500">{{ $ex['name'] }}</span>
                    </a>
                    @endforeach
                </div>
            </div>

            <div class="lg:col-span-5 space-y-6">
                
                <div class="bg-zinc-900 dark:bg-[#1a55e0] p-8 rounded-[2.5rem] text-white shadow-xl">
                    <div class="flex justify-between items-start">
                        <h3 class="text-[10px] font-black uppercase tracking-[0.2em] opacity-60">Payment Summary</h3>
                        <div class="bg-black/20 px-3 py-1 rounded-full flex items-center gap-2 border border-white/10">
                            <i class="fas fa-clock text-xs"></i>
                            <span id="countdown" class="text-xs font-mono font-bold tracking-tighter">60:00</span>
                        </div>
                    </div>
                    
                    <div class="mt-4 flex items-end justify-between border-b border-white/10 pb-6">
                        <p class="text-4xl font-black italic uppercase">
                            <span class="text-[20px] align-top font-normal">{{ @Auth::user()->currency }}</span>{{ number_format($deposit->amount, 2) }}
                        </p>
                        <p class="text-xs font-black uppercase opacity-60">{{ str_replace('_', ' ', $gateway['gateway_name']) }}</p>
                    </div>
                    <ul class="mt-6 space-y-3 text-sm font-bold">
                        <li class="flex justify-between opacity-80">
                            <span>Status</span>
                            <span class="text-amber-400 italic">Waiting for Proof</span>
                        </li>
                    </ul>
                </div>

                <div class="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-[2.5rem] p-8">
                    <h5 class="text-sm font-black uppercase tracking-widest mb-6 text-zinc-900 dark:text-white">Upload Payment Proof</h5>
                    
                    <form action="" method="post" enctype="multipart/form-data" class="space-y-5">
                        @csrf
                        @if ($gateway['user_proof_param'] != null)
                            @foreach ($gateway['user_proof_param'] as $proof)
                                <div class="flex flex-col">
                                    <label class="text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-2 ml-1">
                                        {{ __($proof['field_name']) }} @if($proof['validation'] == 'required') <span class="text-red-500">*</span> @endif
                                    </label>
                                    
                                    @if ($proof['type'] == 'text')
                                        <input type="text" name="{{ strtolower(str_replace(' ', '_', $proof['field_name'])) }}" 
                                            class="w-full bg-zinc-50 dark:bg-zinc-950 border-2 border-zinc-100 dark:border-zinc-800 p-4 rounded-2xl text-zinc-900 dark:text-white font-bold outline-none focus:border-emerald-500 transition-all"
                                            {{ $proof['validation'] == 'required' ? 'required' : '' }}>
                                    
                                    @elseif ($proof['type'] == 'textarea')
                                        <textarea name="{{ strtolower(str_replace(' ', '_', $proof['field_name'])) }}" 
                                            rows="3"
                                            class="w-full bg-zinc-50 dark:bg-zinc-950 border-2 border-zinc-100 dark:border-zinc-800 p-4 rounded-2xl text-zinc-900 dark:text-white font-bold outline-none focus:border-emerald-500 transition-all"
                                            {{ $proof['validation'] == 'required' ? 'required' : '' }}></textarea>
                                    
                                    @elseif ($proof['type'] == 'file')
                                        <div class="relative">
                                            <input type="file" name="{{ strtolower(str_replace(' ', '_', $proof['field_name'])) }}" 
                                                class="w-full bg-zinc-50 dark:bg-zinc-950 border-2 border-zinc-100 dark:border-zinc-800 p-3 rounded-2xl text-xs font-bold file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-[10px] file:font-black file:uppercase file:bg-[#1a55e0] file:text-white hover:file:bg-emerald-600 transition-all"
                                                {{ $proof['validation'] == 'required' ? 'required' : '' }}>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        @endif

                        <button type="submit" class="w-full py-5 rounded-2xl bg-[#1a55e0] hover:bg-emerald-600 text-white font-black uppercase tracking-[0.2em] shadow-xl shadow-text-[#1a55e0] transition-all active:scale-95 mt-4">
                            Submit Proof
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // QR Code Initialization
            const walletAddress = "{{ $decryptWalletAddress }}";
            new QRCode(document.getElementById("walletQR"), {
                text: walletAddress,
                width: 140,
                height: 140,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });

            // 1 Hour Countdown Logic
            let time = 3600; // 60 minutes in seconds
            const display = document.getElementById('countdown');
            
            const timer = setInterval(function() {
                let minutes = Math.floor(time / 60);
                let seconds = time % 60;

                minutes = minutes < 10 ? '0' + minutes : minutes;
                seconds = seconds < 10 ? '0' + seconds : seconds;

                display.innerText = minutes + ':' + seconds;

                if (--time < 0) {
                    clearInterval(timer);
                    display.innerText = "EXPIRED";
                    display.classList.add('text-red-500');
                }
            }, 1000);
        });

        // function copyWallet() {
        //     const copyText = document.getElementById("myInput");
        //     copyText.select();
        //     copyText.setSelectionRange(0, 99999);
        //     navigator.clipboard.writeText(copyText.value).then(() => {
        //         alert("Address Copied: " + copyText.value);
        //     });
        // }
        
        function copyWallet() {
    const copyText = document.getElementById("myInput");
    const modal = document.getElementById("copyModal");

    // Select the text for fallback
    copyText.select();
    copyText.setSelectionRange(0, 99999); 

    // Use the Clipboard API
    navigator.clipboard.writeText(copyText.value).then(() => {
        // Show Modal (Animate In)
        modal.classList.remove('opacity-0', 'translate-y-10', 'pointer-events-none');
        modal.classList.add('opacity-100', 'translate-y-0');

        // Hide Modal (Animate Out after 2 seconds)
        setTimeout(() => {
            modal.classList.add('opacity-0', 'translate-y-10', 'pointer-events-none');
            modal.classList.remove('opacity-100', 'translate-y-0');
        }, 2000);
    }).catch(err => {
        console.error('Failed to copy: ', err);
    });
}
        
    </script>
</div>
@endsection