@extends('layouts.app')

@section('title', 'Razorpay Payment Simulator')

@section('content')

<!-- Header Breadcrumb & Progress Stepper -->
<div class="mb-8 max-w-lg mx-auto">
    <div class="grid grid-cols-3 gap-2 text-center text-xs font-heading font-bold mb-6">
        <div class="p-2 rounded-xl bg-ink-card text-slate-400 border border-white/10">
            ✓ 1. Address
        </div>
        <div class="p-2 rounded-xl bg-brand text-white border border-brand shadow-glow">
            2. Payment
        </div>
        <div class="p-2 rounded-xl bg-ink-card text-slate-400 border border-white/10">
            3. Confirmation
        </div>
    </div>
</div>

<div class="max-w-lg mx-auto" x-data="{ 
    method: 'upi',
    upiApp: 'gpay',
    cardNumber: '4532 •••• •••• 8921',
    cardExpiry: '08/28',
    cardCvv: '•••',
    isProcessing: false,
    simulatePayment() {
        this.isProcessing = true;
        setTimeout(() => {
            document.getElementById('paymentForm').submit();
        }, 1200);
    }
}">

    <!-- Razorpay Branded Simulator Box -->
    <div class="bg-ink-card rounded-3xl border border-white/15 overflow-hidden shadow-2xl">
        
        <!-- Header -->
        <div class="bg-gradient-to-r from-[#0d2b52] to-[#091b35] text-white p-5 flex items-center justify-between border-b border-white/10">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 rounded-lg bg-blue-500/20 text-blue-400 font-bold flex items-center justify-center text-xs">
                    R
                </div>
                <div>
                    <span class="font-heading font-black text-sm text-white">Razorpay Secure</span>
                    <span class="text-[10px] bg-amber-400 text-black px-2 py-0.5 rounded-full font-black ml-2 uppercase">TEST MODE</span>
                </div>
            </div>
            <img src="{{ asset('images/logo.jpg') }}" class="h-9 w-9 rounded-full object-cover ring-2 ring-brand-light">
        </div>

        <!-- Body -->
        <div class="p-6 sm:p-7">
            
            <div class="flex items-center justify-between mb-4 border-b border-white/10 pb-4">
                <div>
                    <p class="text-xs text-slate-400">Merchant</p>
                    <p class="font-heading font-bold text-sm text-white">2Brother.Hub Footwear Store</p>
                    <p class="text-[10px] text-slate-500 font-mono">{{ $order->order_number }}</p>
                </div>
                <div class="text-right">
                    <p class="text-xs text-slate-400">Total Payable</p>
                    <p class="font-display font-black text-2xl text-brand-light">₹{{ number_format($order->grand_total, 2) }}</p>
                </div>
            </div>

            <!-- Payment Method Tabs -->
            <div class="grid grid-cols-3 gap-2 mb-6">
                <button type="button" @click="method = 'upi'" 
                        :class="method === 'upi' ? 'bg-brand text-white border-brand shadow-glow' : 'bg-ink text-slate-400 border-white/10 hover:text-white'"
                        class="p-2.5 rounded-xl border text-xs font-bold transition flex flex-col items-center gap-1">
                    <span>📱 UPI</span>
                    <span class="text-[10px] font-normal opacity-80">Instant App / QR</span>
                </button>

                <button type="button" @click="method = 'card'" 
                        :class="method === 'card' ? 'bg-brand text-white border-brand shadow-glow' : 'bg-ink text-slate-400 border-white/10 hover:text-white'"
                        class="p-2.5 rounded-xl border text-xs font-bold transition flex flex-col items-center gap-1">
                    <span>💳 Card</span>
                    <span class="text-[10px] font-normal opacity-80">Debit / Credit</span>
                </button>

                <button type="button" @click="method = 'netbanking'" 
                        :class="method === 'netbanking' ? 'bg-brand text-white border-brand shadow-glow' : 'bg-ink text-slate-400 border-white/10 hover:text-white'"
                        class="p-2.5 rounded-xl border text-xs font-bold transition flex flex-col items-center gap-1">
                    <span>🏦 Banking</span>
                    <span class="text-[10px] font-normal opacity-80">All Major Banks</span>
                </button>
            </div>

            <!-- TAB 1: UPI Options -->
            <div x-show="method === 'upi'" class="space-y-3 mb-6">
                <div class="grid grid-cols-2 gap-2 text-xs">
                    <button type="button" @click="upiApp = 'gpay'" :class="upiApp === 'gpay' ? 'border-brand-light bg-brand/15 text-white' : 'border-white/10 bg-ink text-slate-300'" class="p-3 rounded-2xl border font-bold flex items-center gap-2">
                        <span class="text-base">🟢</span> Google Pay
                    </button>
                    <button type="button" @click="upiApp = 'phonepe'" :class="upiApp === 'phonepe' ? 'border-brand-light bg-brand/15 text-white' : 'border-white/10 bg-ink text-slate-300'" class="p-3 rounded-2xl border font-bold flex items-center gap-2">
                        <span class="text-base">🟣</span> PhonePe
                    </button>
                    <button type="button" @click="upiApp = 'paytm'" :class="upiApp === 'paytm' ? 'border-brand-light bg-brand/15 text-white' : 'border-white/10 bg-ink text-slate-300'" class="p-3 rounded-2xl border font-bold flex items-center gap-2">
                        <span class="text-base">🔵</span> Paytm UPI
                    </button>
                    <button type="button" @click="upiApp = 'cred'" :class="upiApp === 'cred' ? 'border-brand-light bg-brand/15 text-white' : 'border-white/10 bg-ink text-slate-300'" class="p-3 rounded-2xl border font-bold flex items-center gap-2">
                        <span class="text-base">⚪</span> CRED Pay
                    </button>
                </div>
                <div class="p-3 bg-ink rounded-2xl border border-white/10 text-xs">
                    <label class="block text-slate-400 mb-1 text-[11px]">Or Pay using UPI VPA / ID</label>
                    <input type="text" value="user@okhdfcbank" readonly class="w-full bg-transparent font-mono text-white text-xs focus:outline-none">
                </div>
            </div>

            <!-- TAB 2: Card Mockup -->
            <div x-show="method === 'card'" class="space-y-4 mb-6">
                <div class="rounded-2xl bg-gradient-to-r from-brand-dark via-brand to-brand-light p-4 text-white shadow-xl relative overflow-hidden">
                    <div class="flex justify-between items-center mb-6">
                        <span class="text-[10px] font-mono tracking-widest uppercase">Razorpay Test Card</span>
                        <span class="font-bold text-xs italic">VISA</span>
                    </div>
                    <p class="font-mono text-base tracking-widest mb-4">4532 8912 3456 8921</p>
                    <div class="flex justify-between text-[11px] font-mono">
                        <span>{{ auth()->user()->name }}</span>
                        <span>EXP: 08/28</span>
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-2 text-xs">
                    <input type="text" value="4532 8912 3456 8921" readonly class="bg-ink border border-white/10 rounded-xl px-3 py-2 text-slate-300 font-mono">
                    <div class="flex gap-2">
                        <input type="text" value="08/28" readonly class="w-1/2 bg-ink border border-white/10 rounded-xl px-3 py-2 text-slate-300 font-mono text-center">
                        <input type="password" value="123" readonly class="w-1/2 bg-ink border border-white/10 rounded-xl px-3 py-2 text-slate-300 font-mono text-center">
                    </div>
                </div>
            </div>

            <!-- TAB 3: Netbanking -->
            <div x-show="method === 'netbanking'" class="space-y-2 mb-6">
                <div class="grid grid-cols-2 gap-2 text-xs">
                    <div class="p-3 bg-ink border border-white/10 rounded-2xl flex items-center gap-2 text-slate-200"><span>🏛️</span> HDFC Bank</div>
                    <div class="p-3 bg-ink border border-white/10 rounded-2xl flex items-center gap-2 text-slate-200"><span>🏛️</span> State Bank of India</div>
                    <div class="p-3 bg-ink border border-white/10 rounded-2xl flex items-center gap-2 text-slate-200"><span>🏛️</span> ICICI Bank</div>
                    <div class="p-3 bg-ink border border-white/10 rounded-2xl flex items-center gap-2 text-slate-200"><span>🏛️</span> Axis Bank</div>
                </div>
            </div>

            <!-- Simulation Action Form -->
            <form id="paymentForm" action="{{ route('checkout.confirm', $order) }}" method="POST">
                @csrf
                <input type="hidden" name="payment_method" :value="method">
                <button type="button" @click="simulatePayment()" :disabled="isProcessing"
                        class="w-full bg-gradient-to-r from-emerald-600 to-emerald-500 hover:from-emerald-500 hover:to-emerald-600 text-white font-black py-4 rounded-2xl text-xs shadow-lg transition flex items-center justify-center gap-2">
                    <template x-if="!isProcessing">
                        <span class="flex items-center gap-2">
                            <span>🔒 Pay ₹{{ number_format($order->grand_total, 2) }} Securely</span>
                        </span>
                    </template>
                    <template x-if="isProcessing">
                        <span class="flex items-center gap-2">
                            <svg class="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>
                            <span>Simulating Bank Authorization...</span>
                        </span>
                    </template>
                </button>
            </form>

            <p class="text-[11px] text-center text-slate-500 mt-4 leading-relaxed">
                ℹ️ This is a simulated Razorpay payment gateway for local development & demonstration.
            </p>

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

@endsection