@extends('layouts.master')

@section('title', 'Crypto Payment - DigitalStore')

@section('content')
<div class="bg-slate-50 min-h-screen pt-28 pb-20" x-data="{ copied: false }">
    <div class="max-w-2xl mx-auto px-6">
        {{-- Header --}}
        <div class="text-center mb-12 space-y-4">
            <nav class="flex items-center justify-center gap-2 text-sm font-600 text-slate-400">
                <a href="{{ route('storefront.home') }}" class="hover:text-brand-500 transition-colors">Store</a>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                <span class="text-slate-600">Crypto Payment</span>
            </nav>
            <h1 class="text-3xl md:text-4xl font-900 text-slate-900 leading-tight">
                Awaiting Crypto Transfer
            </h1>
            <p class="text-slate-500 font-500">Please complete the payment below to finalize your order.</p>
        </div>

        <div class="bg-white rounded-[3rem] border border-slate-200 p-8 md:p-14 shadow-sm relative overflow-hidden text-center group mb-8">
            {{-- Decorative Accent --}}
            <div class="absolute -right-24 -top-24 w-72 h-72 bg-brand-50 rounded-full blur-[80px] pointer-events-none group-hover:bg-brand-100 transition-all duration-1000"></div>

            <div class="w-20 h-20 rounded-[2rem] bg-amber-50 text-amber-500 flex items-center justify-center border border-amber-100 mx-auto mb-10 shadow-sm relative z-10">
                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            </div>

            <p class="text-sm font-600 text-slate-500 mb-10 leading-relaxed relative z-10">
                Please transmit the exact cryptocurrency amount to the designated wallet address below. Your order will be activated automatically once the transaction is confirmed on the blockchain.
            </p>

            <div class="space-y-8 text-left relative z-10">
                {{-- Amount --}}
                <div class="space-y-3">
                    <label class="text-[11px] font-800 text-slate-400 uppercase tracking-widest ml-1">Amount Required</label>
                    <div class="bg-slate-50 border border-slate-200 rounded-2xl p-6 flex items-center justify-between group-hover:border-brand-500 transition-all">
                        <span class="text-2xl font-900 text-slate-900 tabular-nums tracking-tight">{{ $payment->amount_crypto }} BTC</span>
                        <span class="text-[11px] font-800 text-slate-400 uppercase tracking-widest bg-white border border-slate-200 px-4 py-2 rounded-xl">~ ${{ number_format($order->total, 2) }}</span>
                    </div>
                </div>

                {{-- Wallet Address --}}
                <div class="space-y-3">
                    <div class="flex items-center justify-between ml-1">
                        <label class="text-[11px] font-800 text-slate-400 uppercase tracking-widest">Destination Wallet</label>
                        <span x-show="copied" x-transition class="text-[10px] font-900 text-emerald-500 uppercase tracking-widest">Copied to Clipboard</span>
                    </div>
                    <div class="relative">
                        <input type="text" readonly value="{{ $payment->address }}" 
                            class="w-full h-16 bg-slate-50 border border-slate-200 rounded-2xl px-6 pr-32 text-slate-900 font-mono text-sm tracking-tighter focus:ring-0 outline-none hover:bg-slate-100 transition-all">
                        
                        <button @click="navigator.clipboard.writeText('{{ $payment->address }}'); copied = true; setTimeout(() => copied = false, 2000)"
                            class="absolute right-2 top-2 bottom-2 px-6 rounded-xl bg-white border border-slate-200 text-slate-600 text-[11px] font-800 uppercase tracking-widest hover:bg-brand-500 hover:text-white hover:border-brand-500 transition-all shadow-sm flex items-center gap-2">
                            <span x-show="!copied">Copy</span>
                            <span x-show="copied">Done</span>
                        </button>
                    </div>
                </div>
            </div>

            <div class="mt-12 pt-8 border-t border-slate-100 space-y-6 relative z-10">
                <div class="flex items-center justify-center gap-3 py-4 px-6 bg-slate-50 border border-slate-100 rounded-2xl">
                    <div class="w-2.5 h-2.5 rounded-full bg-brand-500 animate-ping"></div>
                    <span class="text-[11px] font-900 text-slate-600 uppercase tracking-widest">Awaiting Confirmation</span>
                </div>

                <p class="text-[10px] font-700 text-slate-400 uppercase tracking-widest leading-loose">
                    This page will update automatically upon transaction detection. <br>
                    You can safely close this window; we will email you once complete.
                </p>
            </div>
        </div>

        <div class="text-center">
            <a href="{{ route('customer.orders.show', $order->ulid) }}" class="inline-flex items-center gap-2 text-sm font-800 text-slate-400 hover:text-brand-500 transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                Return to Order Details
            </a>
        </div>
    </div>
</div>
@endsection