@extends('layouts.app')

@section('title', 'Checkout')

@section('content')
@php
    $rzEnabled = $gateways['razorpay']['enabled'] ?? true;
    $codEnabled = $gateways['cod']['enabled'] ?? true;
    $transferEnabled = $gateways['transfer']['enabled'] ?? true;
    $rzKey = $gateways['razorpay']['keyId'] ?? '';
    $hasBilling = $currentCustomer && is_array($currentCustomer->billing_address) && ($currentCustomer->billing_address['street'] ?? '');
    $splitCfg = $gateways['split_payment'] ?? [];
    $splitEnabled = (bool) ($splitCfg['enabled'] ?? false);
    $splitMin = (int) ($splitCfg['min_amount'] ?? 5000);
    $splitPct = (int) ($splitCfg['max_percent'] ?? 50);
    $splitAvailable = $splitEnabled && $rzEnabled && $cartTotal >= $splitMin;
    $defaultPm = old('payment_method', 'razorpay');
@endphp

<div class="bg-slate-50/70 min-h-screen py-8 px-4 sm:px-6 lg:px-8">
    <div class="max-w-6xl mx-auto">
        <nav class="flex items-center gap-2 text-xs font-semibold text-slate-500 mb-5">
            <a href="{{ route('store.home') }}" class="hover:text-[#1769AA] transition-colors">Home</a>
            <x-icon name="chevron-right" class="w-3.5 h-3.5" />
            <span class="text-slate-900 font-bold">Secure Checkout</span>
        </nav>

        <div class="flex items-center gap-2.5 mb-6">
            <div class="w-9 h-9 rounded-xl bg-[#1769AA]/10 text-[#1769AA] flex items-center justify-center border border-[#0E5588]/20">
                <x-icon name="lock" class="w-5 h-5" />
            </div>
            <h1 class="font-display text-2xl sm:text-3xl font-black uppercase tracking-wider text-slate-900">Secure Express Checkout</h1>
        </div>

        <div x-data="{ pm: '{{ $defaultPm }}', returningOpen: {{ $currentCustomer ? 'false' : 'true' }} }">

        @if(!$currentCustomer)
        {{-- Returning Customer Login --}}
        <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6 sm:p-8 mb-8">
            <div class="flex items-center justify-between flex-wrap gap-3 mb-4">
                <h3 class="text-xs font-bold uppercase tracking-wider text-slate-900 flex items-center gap-2">
                    <x-icon name="user" class="w-4 h-4 text-[#1769AA]" />
                    <span>Returning Customer?</span>
                </h3>
                <button type="button" x-on:click="returningOpen = !returningOpen" class="text-xs font-bold text-[#1769AA] hover:underline">
                    <span x-show="!returningOpen">Log in with password</span>
                    <span x-show="returningOpen" x-cloak>Continue as guest</span>
                </button>
            </div>

            <div x-show="returningOpen" x-cloak x-transition>
                <p class="text-xs text-slate-500 mb-4">Login to auto-fill your saved billing address and track your order from your user panel.</p>
                <form action="{{ route('store.checkout.login') }}" method="post" class="grid grid-cols-1 sm:grid-cols-2 gap-3.5 text-xs">
                    @csrf
                    <div>
                        <label class="block text-slate-600 mb-1 font-medium">Email Address</label>
                        <input type="email" name="email" value="{{ old('email') }}" required placeholder="you@email.com" class="w-full bg-white border border-slate-300 text-slate-900 rounded-lg p-2.5 focus:border-[#1769AA] focus:outline-none" />
                    </div>
                    <div>
                        <label class="block text-slate-600 mb-1 font-medium">Password</label>
                        <input type="password" name="password" required placeholder="••••••••" class="w-full bg-white border border-slate-300 text-slate-900 rounded-lg p-2.5 focus:border-[#1769AA] focus:outline-none" />
                    </div>
                    <div class="sm:col-span-2 flex items-center justify-between gap-3">
                        <a href="#" x-on:click.prevent="returningOpen = false" class="text-[#1769AA] hover:underline font-semibold">I'm a new customer</a>
                        <button type="submit" class="px-5 py-2.5 rounded-lg bg-[#142B4A] hover:bg-[#526579] text-white text-xs font-bold uppercase tracking-wider transition-colors">Login & Apply Address</button>
                    </div>
                </form>
                <div class="mt-4 pt-4 border-t border-slate-100 flex items-center gap-2 text-[11px] text-slate-400">
                    <x-icon name="info" class="w-3.5 h-3.5" />
                    <span>Placed an order before? Check your inbox for your account email with your temporary password.</span>
                </div>
            </div>
        </div>
        @endif

        <form action="{{ route('store.checkout.place') }}" method="post" class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            @csrf

            <div class="lg:col-span-7 space-y-6">
                {{-- Delivery Details --}}
                <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6 sm:p-8">
                    <h3 class="text-xs font-bold uppercase tracking-wider text-slate-900 mb-4 flex items-center gap-2">
                        <x-icon name="truck" class="w-4 h-4 text-[#1769AA]" />
                        <span>Shipping & Delivery Destination</span>
                    </h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5 text-xs">
                        <div>
                            <label class="block text-slate-600 mb-1 font-medium">Full Name</label>
                            <input type="text" name="name" value="{{ old('name', $currentCustomer->name ?? '') }}" required class="w-full bg-white border border-slate-300 text-slate-900 rounded-lg p-2.5 focus:border-[#1769AA] focus:outline-none" />
                        </div>
                        <div>
                            <label class="block text-slate-600 mb-1 font-medium">Mobile Number</label>
                            <input type="tel" name="phone" value="{{ old('phone', $currentCustomer->phone ?? '') }}" required class="w-full bg-white border border-slate-300 text-slate-900 rounded-lg p-2.5 focus:border-[#1769AA] focus:outline-none" />
                        </div>
                        <div class="sm:col-span-2">
                            <label class="block text-slate-600 mb-1 font-medium">Email Address</label>
                            <input type="email" name="email" value="{{ old('email', $currentCustomer->email ?? '') }}" required class="w-full bg-white border border-slate-300 text-slate-900 rounded-lg p-2.5 focus:border-[#1769AA] focus:outline-none" />
                        </div>
                        <div class="sm:col-span-2">
                            <label class="block text-slate-600 mb-1 font-medium">Street Address / Flat / Floor</label>
                            <input type="text" name="street" value="{{ old('street', $hasBilling ? $currentCustomer->billing_address['street'] : '') }}" required class="w-full bg-white border border-slate-300 text-slate-900 rounded-lg p-2.5 focus:border-[#1769AA] focus:outline-none" />
                        </div>
                        <div>
                            <label class="block text-slate-600 mb-1 font-medium">City</label>
                            <input type="text" name="city" value="{{ old('city', $hasBilling ? $currentCustomer->billing_address['city'] : '') }}" required class="w-full bg-white border border-slate-300 text-slate-900 rounded-lg p-2.5 focus:border-[#1769AA] focus:outline-none" />
                        </div>
                        <div>
                            <label class="block text-slate-600 mb-1 font-medium">State</label>
                            <input type="text" name="state" value="{{ old('state', $hasBilling ? $currentCustomer->billing_address['state'] : '') }}" required class="w-full bg-white border border-slate-300 text-slate-900 rounded-lg p-2.5 focus:border-[#1769AA] focus:outline-none" />
                        </div>
                        <div>
                            <label class="block text-slate-600 mb-1 font-medium">Pincode</label>
                            <input type="text" name="pincode" value="{{ old('pincode', $hasBilling ? $currentCustomer->billing_address['pincode'] : '') }}" required class="w-full bg-white border border-slate-300 text-slate-900 rounded-lg p-2.5 focus:border-[#1769AA] focus:outline-none" />
                        </div>
                        <div>
                            <label class="block text-slate-600 mb-1 font-medium">Country</label>
                            <input type="text" name="country" value="{{ old('country', $hasBilling ? $currentCustomer->billing_address['country'] : 'India') }}" class="w-full bg-white border border-slate-300 text-slate-900 rounded-lg p-2.5 focus:border-[#1769AA] focus:outline-none" />
                        </div>
                    </div>
                </div>

                {{-- Payment Method --}}
                <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6 sm:p-8">
                    <h3 class="text-xs font-bold uppercase tracking-wider text-slate-900 mb-4 flex items-center gap-2">
                        <x-icon name="credit-card" class="w-4 h-4 text-[#1769AA]" />
                        <span>Select Payment Method</span>
                    </h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        @if($rzEnabled)
                            <label class="p-4 rounded-xl border flex items-start gap-3 cursor-pointer transition-all {{ old('payment_method', 'razorpay') === 'razorpay' ? 'bg-[#1769AA]/5 border-[#1769AA] shadow-sm' : 'bg-white border-slate-200 hover:border-slate-300' }}">
                                <input type="radio" name="payment_method" value="razorpay" {{ old('payment_method', 'razorpay') === 'razorpay' ? 'checked' : '' }} x-model="pm" class="mt-1 accent-[#1769AA]" />
                                <div>
                                    <div class="font-bold text-slate-900 text-xs flex items-center gap-1.5">
                                        <span>Razorpay Online Gateway</span>
                                        <span class="text-[10px] bg-[#1769AA] text-white px-1.5 py-0.5 rounded font-bold">Fast & Secure</span>
                                    </div>
                                    <p class="text-[11px] text-slate-500 mt-1">UPI, Credit/Debit Cards, NetBanking, Paytm, Google Pay, Wallets.</p>
                                </div>
                            </label>
                        @endif
                        @if($codEnabled)
                            <label class="p-4 rounded-xl border flex items-start gap-3 cursor-pointer transition-all {{ old('payment_method') === 'cod' ? 'bg-[#1769AA]/5 border-[#1769AA] shadow-sm' : 'bg-white border-slate-200 hover:border-slate-300' }}">
                                <input type="radio" name="payment_method" value="cod" {{ old('payment_method') === 'cod' ? 'checked' : '' }} x-model="pm" class="mt-1 accent-[#1769AA]" />
                                <div>
                                    <div class="font-bold text-slate-900 text-xs">Cash on Delivery (COD)</div>
                                    <p class="text-[11px] text-slate-500 mt-1">Pay cash upon delivery at your doorstep across India.</p>
                                </div>
                            </label>
                        @endif
                        @if($splitAvailable)
                            <label class="p-4 rounded-xl border flex items-start gap-3 cursor-pointer transition-all {{ old('payment_method') === 'split' ? 'bg-[#1769AA]/5 border-[#1769AA] shadow-sm' : 'bg-white border-slate-200 hover:border-slate-300' }}">
                                <input type="radio" name="payment_method" value="split" {{ old('payment_method') === 'split' ? 'checked' : '' }} x-model="pm" class="mt-1 accent-[#1769AA]" />
                                <div>
                                    <div class="font-bold text-slate-900 text-xs flex items-center gap-1.5">
                                        <span>50-50 Split Payment</span>
                                        <span class="text-[10px] bg-[#142B4A] text-white px-1.5 py-0.5 rounded font-bold">{{ $splitPct }}% Now</span>
                                    </div>
                                    <p class="text-[11px] text-slate-500 mt-1">Pay {{ $splitPct }}% today (₹{{ number_format(round($cartTotal * $splitPct / 100, 2), 2) }}), balance {{ 100 - $splitPct }}% on delivery.</p>
                                </div>
                            </label>
                        @endif
                        @if($transferEnabled)
                            <label class="p-4 rounded-xl border flex items-start gap-3 cursor-pointer transition-all {{ old('payment_method') === 'transfer' ? 'bg-[#1769AA]/5 border-[#1769AA] shadow-sm' : 'bg-white border-slate-200 hover:border-slate-300' }} sm:col-span-2">
                                <input type="radio" name="payment_method" value="transfer" {{ old('payment_method') === 'transfer' ? 'checked' : '' }} x-model="pm" class="mt-1 accent-[#1769AA]" />
                                <div>
                                    <div class="font-bold text-slate-900 text-xs">Direct Bank Transfer</div>
                                    <p class="text-[11px] text-slate-500 mt-1">Pay directly to our corporate bank account. Our finance team confirms and dispatches the order.</p>
                                </div>
                            </label>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Order Summary --}}
            <div class="lg:col-span-5">
                <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6 sm:p-8 sticky top-28 space-y-4">
                    <h3 class="text-xs font-bold uppercase tracking-wider text-slate-900 flex items-center gap-2">
                        <x-icon name="shopping-bag" class="w-4 h-4 text-[#1769AA]" />
                        <span>Order Summary</span>
                    </h3>

                    <div class="space-y-3 max-h-64 overflow-y-auto pr-1">
                        @foreach($cartItems as $item)
                            <div class="flex items-center gap-3 text-xs">
                                <img src="{{ $item['product']->images[0] ?? '' }}" alt="{{ $item['product']->name }}" class="w-12 h-12 rounded-lg object-cover border border-slate-200 flex-shrink-0" />
                                <div class="flex-1 min-w-0">
                                    <div class="font-bold text-slate-800 truncate">{{ $item['product']->name }}</div>
                                    <div class="text-slate-500 text-[11px]">Qty: {{ $item['quantity'] }} × ₹{{ number_format($item['unit_price'], 2) }}</div>
                                </div>
                                <div class="font-mono font-bold text-slate-900">₹{{ number_format($item['unit_price'] * $item['quantity'], 2) }}</div>
                            </div>
                        @endforeach
                    </div>

                    @if($appliedCoupon)
                        <div class="p-3 rounded-xl bg-[#1769AA]/5 border border-[#0E5588]/30 text-xs flex items-center justify-between">
                            <span class="text-[#1769AA] font-bold">Coupon: {{ $appliedCoupon->code }} applied</span>
                            <form action="{{ route('cart.coupon.remove') }}" method="post">
                                @csrf
                                <button type="submit" class="text-slate-500 hover:text-red-600"><x-icon name="x" class="w-3.5 h-3.5" /></button>
                            </form>
                        </div>
                    @endif

                    <div class="space-y-2 pt-4 border-t border-slate-200 text-xs">
                        <div class="flex justify-between">
                            <span class="text-slate-500">Subtotal</span>
                            <span class="font-bold text-slate-900">₹{{ number_format($cartSubtotal, 2) }}</span>
                        </div>
                        @if($cartDiscount > 0)
                            <div class="flex justify-between text-[#1769AA]">
                                <span>Discount {{ $appliedCoupon ? '(' . $appliedCoupon->code . ')' : '' }}</span>
                                <span class="font-bold">- ₹{{ number_format($cartDiscount, 2) }}</span>
                            </div>
                        @endif
                        <div class="flex justify-between">
                            <span class="text-slate-500">Shipping</span>
                            <span class="font-bold text-slate-900">{{ $cartShipping > 0 ? '₹' . number_format($cartShipping, 2) : 'FREE' }}</span>
                        </div>
                        <div class="flex justify-between pt-2 border-t border-slate-200 text-sm">
                            <span class="font-black text-slate-900 uppercase tracking-wider">Total Payable</span>
                            <span class="font-black font-mono text-slate-900">₹{{ number_format($cartTotal, 2) }}</span>
                        </div>
                        @if($splitAvailable)
                            <div x-show="pm === 'split'" x-cloak class="p-3 rounded-xl bg-[#142B4A]/5 border border-[#142B4A]/20 text-xs space-y-1.5">
                                <div class="flex justify-between text-[#142B4A] font-bold">
                                    <span>Deposit today ({{ $splitPct }}%)</span>
                                    <span>₹{{ number_format(round($cartTotal * $splitPct / 100, 2), 2) }}</span>
                                </div>
                                <div class="flex justify-between text-slate-600">
                                    <span>Balance on delivery ({{ 100 - $splitPct }}%)</span>
                                    <span>₹{{ number_format(round($cartTotal * (100 - $splitPct) / 100, 2), 2) }}</span>
                                </div>
                            </div>
                        @endif
                    </div>

                    <button type="submit" class="w-full py-3.5 rounded-xl bg-[#1769AA] hover:bg-[#0E5588] text-white text-xs font-black uppercase tracking-wider flex items-center justify-center gap-2 shadow-md transition-all">
                        <x-icon name="shield-check" class="w-4 h-4" />
                        <span>Place Order & Proceed to Payment</span>
                    </button>

                    <p class="text-[11px] text-slate-400 flex items-center gap-1.5 justify-center">
                        <x-icon name="lock" class="w-3 h-3" />
                        Your payment & personal details are encrypted and secure.
                    </p>
                </div>
            </div>
        </form>
        </div>
    </div>
</div>
@endsection