@extends('layouts.master')

@section('title', 'Secure Checkout - DigitalStore')

@section('content')
<div class="bg-slate-50 min-h-screen pt-4 pb-20" x-data="{
    selectedGateway: @js(collect($gateways)->first(fn($g) => $g['is_ready'])),
    isSubmitting: false,
    errorMessage: null,
    cartItems: @js($cart->items->map(fn($item) => [
        'id' => $item->product_id ?? $item->plan_id,
        'type' => $item->plan_id ? 'plan' : 'product',
        'title' => $item->product->title ?? $item->plan->name ?? 'Product',
        'image' => $item->product->thumbnail_url ?? null,
        'price' => (float) $item->price_snapshot,
    ])),
    totals: @js($totals),
    
    async removeItem(itemId, type) {
        if (this.isSubmitting) return;
        
        try {
            const res = await fetch(`/cart/items/${itemId}?type=${type}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            });
            const data = await res.json();
            if (res.ok) {
                this.cartItems = this.cartItems.filter(i => !(i.id === itemId && i.type === type));
                this.totals = {
                    subtotal: data.data.subtotal,
                    total: data.data.total,
                    tax: data.data.tax
                };
                window.dispatchEvent(new CustomEvent('cart-updated', { detail: { count: data.data.item_count, message: 'Item removed.' } }));
                if (this.cartItems.length === 0) {
                    window.location.href = '{{ route('storefront.products') }}';
                }
            }
        } catch (e) {
            console.error(e);
        }
    },

    async submitCheckout() {
        if (this.isSubmitting) return;
        this.isSubmitting = true;
        this.errorMessage = null;

        const form = this.$refs.checkoutForm;
        const formData = new FormData(form);

        try {
            const response = await fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            });

            const result = await response.json();

            if (!response.ok) {
                this.errorMessage = result.message || 'Payment initiation failed. Please verify your details.';
                this.isSubmitting = false;
                window.scrollTo({ top: 0, behavior: 'smooth' });
                return;
            }

            if (result.data?.payment?.action === 'redirect') {
                window.location.href = result.data.payment.redirect_url;
            } else {
                window.location.href = @js(route('checkout.success', 'placeholder')).replace('placeholder', result.data.order.ulid);
            }
        } catch (e) {
            this.errorMessage = 'Network protocol error. Please check your connection.';
            this.isSubmitting = false;
        }
    }
}">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        {{-- Breadcrumbs & Header --}}
        <div class="mb-8">
            <nav class="flex items-center gap-2 text-[10px] font-bold text-slate-400 mb-4">
                <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>
                <a href="{{ route('cart.index') }}" class="hover:text-brand-500 transition-colors">Cart</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">Checkout</span>
            </nav>
            <div class="flex flex-col md:flex-row md:items-end justify-between gap-8">
                <div>
                    <h1 class="text-base md:text-lg font-900 text-slate-900 tracking-tight">Secure Checkout</h1>
                    <p class="text-slate-400 font-600 text-[11px] uppercase tracking-widest mt-1">Safe & Encrypted Acquisition</p>
                </div>
                <div class="flex items-center gap-4 p-4 rounded-2xl bg-white border border-slate-200 shadow-sm">
                    <div class="w-10 h-10 rounded-xl bg-emerald-50 flex items-center justify-center text-emerald-500">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                    </div>
                    <div>
                        <p class="text-[10px] font-900 text-slate-400 uppercase tracking-widest leading-none mb-1">SSL SECURED</p>
                        <p class="text-xs font-800 text-slate-700 uppercase tracking-tight">256-bit Encryption</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- Error Message --}}
        <template x-if="errorMessage">
            <div class="mb-10 bg-rose-50 border border-rose-100 text-rose-600 px-6 py-4 rounded-2xl flex items-center gap-4 font-800 text-sm shadow-sm">
                <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <span x-text="errorMessage"></span>
            </div>
        </template>

        <form x-ref="checkoutForm" action="{{ route('checkout.process') }}" method="POST" @submit.prevent="submitCheckout">
            @csrf
            <input type="hidden" name="gateway" :value="selectedGateway ? selectedGateway.key : ''">

            <div class="grid grid-cols-1 lg:grid-cols-12 gap-10">
                {{-- Form Sections --}}
                <div class="lg:col-span-7 space-y-10">
                    {{-- 01. Contact Information --}}
                    <div class="space-y-6">
                        <div class="flex items-center gap-4">
                            <div class="w-8 h-8 rounded-lg bg-brand-500 text-white flex items-center justify-center font-900 text-xs shadow-lg shadow-brand-500/20">01</div>
                            <h2 class="text-sm font-900 text-slate-900 uppercase tracking-widest">Contact Information</h2>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div class="space-y-2">
                                <label class="text-[11px] font-800 text-slate-400 uppercase tracking-widest ml-1">Full Name</label>
                                <input type="text" name="name" required placeholder="John Doe" 
                                       value="{{ auth()->user()?->name ?? old('name') }}"
                                       class="w-full h-14 bg-white border border-slate-200 rounded-xl px-6 text-sm font-700 text-slate-900 focus:ring-4 focus:ring-brand-500/5 focus:border-brand-500 transition-all outline-none">
                            </div>
                            <div class="space-y-2">
                                <label class="text-[11px] font-800 text-slate-400 uppercase tracking-widest ml-1">Email Address</label>
                                <input type="email" name="email" required placeholder="john@example.com" 
                                       value="{{ auth()->user()?->email ?? old('email') }}"
                                       class="w-full h-14 bg-white border border-slate-200 rounded-xl px-6 text-sm font-700 text-slate-900 focus:ring-4 focus:ring-brand-500/5 focus:border-brand-500 transition-all outline-none">
                            </div>
                        </div>
                    </div>

                    {{-- 02. Order Notes --}}
                    <div class="space-y-6">
                        <div class="flex items-center gap-4">
                            <div class="w-8 h-8 rounded-lg bg-brand-500 text-white flex items-center justify-center font-900 text-xs shadow-lg shadow-brand-500/20">02</div>
                            <h2 class="text-sm font-900 text-slate-900 uppercase tracking-widest">Order Notes (Optional)</h2>
                        </div>
                        <textarea name="notes" placeholder="Any special requests or instructions for your order..." 
                                  class="w-full h-32 bg-white border border-slate-200 rounded-2xl px-6 py-5 text-sm font-600 text-slate-900 focus:ring-4 focus:ring-brand-500/5 focus:border-brand-500 transition-all outline-none resize-none placeholder:text-slate-300"></textarea>
                    </div>

                    {{-- 03. Payment Method --}}
                    <div class="space-y-6">
                        <div class="flex items-center gap-4">
                            <div class="w-8 h-8 rounded-lg bg-brand-500 text-white flex items-center justify-center font-900 text-xs shadow-lg shadow-brand-500/20">03</div>
                            <h2 class="text-sm font-900 text-slate-900 uppercase tracking-widest">Payment Method</h2>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            @php
                                $readyGateways = collect($gateways)->where('is_ready', true);
                            @endphp
                            
                            @if($readyGateways->isEmpty())
                                <div class="col-span-full py-10 px-6 text-center border-2 border-dashed border-slate-200 rounded-2xl bg-white shadow-sm">
                                    <div class="w-12 h-12 bg-slate-50 text-slate-400 rounded-xl flex items-center justify-center mx-auto mb-4 border border-slate-100">
                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                                    </div>
                                    <p class="text-sm font-900 text-slate-900 uppercase tracking-widest mb-2">No Payment Methods Available</p>
                                    <p class="text-xs font-600 text-slate-500 leading-relaxed">Our payment gateways are currently undergoing maintenance.<br>Please contact technical support to complete your acquisition.</p>
                                </div>
                            @else
                                @foreach ($readyGateways as $gateway)
                                <button type="button" 
                                        @click="selectedGateway = @js($gateway)"
                                        class="relative group bg-white border rounded-2xl p-6 flex items-center gap-5 transition-all duration-300 text-left"
                                        :class="selectedGateway?.key === @js($gateway['key']) ? 'border-brand-500 ring-4 ring-brand-500/5 shadow-lg shadow-brand-500/5' : 'border-slate-200 hover:border-slate-300 hover:bg-slate-50'">
                                    <div class="w-12 h-12 flex items-center justify-center bg-slate-50 rounded-xl border border-slate-100 group-hover:scale-110 transition-transform">
                                        <img src="{{ $gateway['logo_path'] }}" alt="{{ $gateway['name'] }}" class="max-w-[30px] max-h-[30px]">
                                    </div>
                                    <div>
                                        <p class="text-xs font-900 text-slate-900 uppercase tracking-widest">{{ $gateway['name'] }}</p>
                                        <p class="text-[9px] font-800 text-emerald-500 uppercase tracking-widest mt-1">Instant Activation</p>
                                    </div>
                                    <div x-show="selectedGateway?.key === @js($gateway['key'])" class="absolute top-4 right-4">
                                        <div class="w-5 h-5 bg-brand-500 rounded-full flex items-center justify-center text-white shadow-lg">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M5 13l4 4L19 7"/></svg>
                                        </div>
                                    </div>
                                </button>
                                @endforeach
                            @endif
                        </div>
                    </div>


                </div>

                {{-- Sidebar --}}
                <div class="lg:col-span-5">
                    <div class="bg-white rounded-[2.5rem] border border-slate-200 p-8 lg:p-10 lg:sticky lg:top-28 shadow-sm relative overflow-hidden">
                        <h2 class="text-xs font-900 text-slate-400 uppercase tracking-[0.3em] mb-10 pb-6 border-b border-slate-50 flex items-center justify-between">
                            Order Summary
                            <span class="text-brand-500" x-text="`${cartItems.length} items`"></span>
                        </h2>

                        <div class="space-y-4 mb-10">
                            <template x-for="item in cartItems" :key="`${item.type}-${item.id}`">
                                <div class="flex items-center gap-4 p-3 bg-slate-50 rounded-2xl border border-slate-100 group relative">
                                    <div class="w-14 h-14 rounded-xl overflow-hidden shrink-0 border border-slate-200 bg-white">
                                        <template x-if="item.image">
                                            <img :src="item.image" class="w-full h-full object-cover">
                                        </template>
                                        <template x-if="!item.image">
                                            <div class="w-full h-full flex items-center justify-center text-brand-500 bg-brand-50">
                                                <svg class="w-6 h-6" 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>
                                        </template>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <h4 class="text-sm font-900 text-slate-900 truncate" x-text="item.title"></h4>
                                        <p class="text-[10px] font-800 text-slate-400 uppercase tracking-widest mt-0.5" x-text="item.type === 'plan' ? 'Subscription Plan' : 'Commercial License'"></p>
                                    </div>
                                    <div class="text-sm font-900 text-slate-900 tabular-nums" x-text="`$${item.price.toFixed(2)}`"></div>
                                    
                                    {{-- Remove Button --}}
                                    <button type="button" @click="removeItem(item.id, item.type)" 
                                            class="absolute -top-2 -right-2 w-6 h-6 bg-rose-500 text-white rounded-full flex items-center justify-center shadow-lg opacity-0 group-hover:opacity-100 transition-all scale-75 group-hover:scale-100">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
                                    </button>
                                </div>
                            </template>
                        </div>

                        {{-- Total Matrix --}}
                        <div class="space-y-4 pt-10 border-t border-slate-100">
                            <div class="flex justify-between items-center text-xs font-800 uppercase tracking-widest text-slate-400">
                                <span>Subtotal</span>
                                <span class="text-slate-900" x-text="`$${totals.subtotal.toFixed(2)}`"></span>
                            </div>
                            <div class="flex justify-between items-center text-xs font-800 uppercase tracking-widest text-slate-400">
                                <span>Tax (0%)</span>
                                <span class="text-slate-900">$0.00</span>
                            </div>
                            <div class="pt-8 mt-8 border-t border-slate-100">
                                <p class="text-[10px] font-900 text-brand-500 uppercase tracking-[0.3em] mb-2">Grand Total</p>
                                <div class="flex justify-between items-baseline">
                                    <p class="text-4xl font-900 text-slate-900 tracking-tighter tabular-nums" x-text="`$${totals.total.toFixed(2)}`"></p>
                                    <div class="px-2 py-1 rounded-md bg-slate-50 border border-slate-100 text-[9px] font-900 text-slate-400 uppercase tracking-widest">
                                        USD
                                    </div>
                                </div>
                            </div>

                            <div class="pt-10">
                                <button type="submit" 
                                        class="w-full h-16 bg-brand-500 text-white rounded-2xl font-900 text-sm uppercase tracking-[0.2em] flex items-center justify-center gap-3 shadow-xl shadow-brand-500/20 active:scale-95 hover:bg-brand-600 transition-all disabled:opacity-50 group"
                                        :disabled="isSubmitting">
                                    <template x-if="!isSubmitting">
                                        <div class="flex items-center gap-3">
                                            <span>Secure Checkout</span>
                                            <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                                        </div>
                                    </template>
                                    <template x-if="isSubmitting">
                                        <div class="w-6 h-6 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
                                    </template>
                                </button>
                            </div>

                            <p class="text-[10px] text-center text-slate-400 font-700 uppercase tracking-widest mt-10 leading-relaxed">
                                By placing this order, you agree to our <br>
                                <a href="#" class="text-slate-900 hover:text-brand-500 underline underline-offset-4 decoration-slate-200 transition-all">Terms of Service</a> & <a href="#" class="text-slate-900 hover:text-brand-500 underline underline-offset-4 decoration-slate-200 transition-all">Privacy Policy</a>.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection