@extends('layouts.app')
@section('title','Checkout | Shopora')
@section('content')
<div class="bg-gray-100 py-6 min-h-[calc(100vh-200px)]">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        
        @if(session('error'))
        <div class="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded text-sm shadow-sm flex items-center gap-2">
            <i class="fa-solid fa-circle-exclamation"></i>
            {{ session('error') }}
        </div>
        @endif

        @if(session('success'))
        <div class="mb-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded text-sm shadow-sm flex items-center gap-2">
            <i class="fa-solid fa-circle-check"></i>
            {{ session('success') }}
        </div>
        @endif

        <form id="checkout-form" onsubmit="this.action = (document.querySelector('input[name=payment_method]:checked').value === 'card') ? '{{ route('checkout.safepay.initiate') }}' : '{{ route('checkout.process') }}';" method="POST" x-data="{ method: '{{ old('payment_method', 'cash_on_delivery') }}' }">
            @csrf
            <div class="flex flex-col lg:flex-row gap-6">
                
                {{-- Left Column: Shipping & Payment --}}
                <div class="lg:flex-1 space-y-4">
                    {{-- Shipping Info --}}
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <h2 class="text-lg font-medium text-gray-800 mb-4 pb-2 border-b border-gray-100">Shipping Information</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="md:col-span-2">
                                <label class="block text-xs font-medium text-gray-600 mb-1">Full Name</label>
                                <input type="text" name="name" value="{{ old('name',$user->name) }}" required class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">Email</label>
                                <input type="email" name="email" value="{{ old('email',$user->email) }}" required class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">Phone Number</label>
                                <input type="text" name="phone" value="{{ old('phone',$user->phone) }}" required class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary" placeholder="03xx-xxxxxxx">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-xs font-medium text-gray-600 mb-1">Street Address</label>
                                <input type="text" name="address" value="{{ old('address',$user->address) }}" required class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary" placeholder="House no. / building / street / area">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">City</label>
                                <input type="text" name="city" value="{{ old('city',$user->city) }}" required class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1">Postal Code</label>
                                <input type="text" name="postal_code" value="{{ old('postal_code',$user->postal_code) }}" required class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-xs font-medium text-gray-600 mb-1">Country</label>
                                <input type="text" name="country" value="{{ old('country', $user->country ?? 'Pakistan') }}" required class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                            </div>
                        </div>
                    </div>

                    {{-- Payment Method --}}
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <h2 class="text-lg font-medium text-gray-800 mb-4 pb-2 border-b border-gray-100">Select Payment Method</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            @foreach([['cash_on_delivery','fa-money-bill-wave','Cash on Delivery'],['card','fa-credit-card','Credit/Debit Card'],['bank_transfer','fa-building-columns','Bank Transfer']] as [$val,$icon,$label])
                            <label :class="method==='{{ $val }}'?'border-primary bg-orange-50':'border-gray-200 hover:bg-gray-50'" class="flex items-center gap-3 border rounded-lg p-4 cursor-pointer transition-colors">
                                <input type="radio" name="payment_method" value="{{ $val }}" @change="method='{{ $val }}'" {{ old('payment_method','cash_on_delivery')===$val?'checked':'' }} class="accent-primary">
                                <i class="fa-solid {{ $icon }} text-xl" :class="method==='{{ $val }}'?'text-primary':'text-gray-400'"></i>
                                <span class="font-medium text-sm" :class="method==='{{ $val }}'?'text-primary':'text-gray-700'">{{ $label }}</span>
                            </label>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- Right Column: Order Summary --}}
                <div class="lg:w-[350px]">
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sticky top-20">
                        <h3 class="text-base font-medium text-gray-800 mb-4">Order Summary</h3>
                        
                        <div class="space-y-3 mb-4 max-h-64 overflow-y-auto pr-2 custom-scrollbar border-b border-gray-100 pb-4">
                            @foreach($cart->items as $item)
                            <div class="flex gap-3">
                                <div class="w-12 h-12 bg-gray-50 border border-gray-100 flex items-center justify-center text-xl flex-shrink-0 overflow-hidden">
                                    @if($item->product->images && is_array($item->product->images) && count($item->product->images) > 0)
                                        <img src="{{ asset('storage/' . $item->product->images[0]) }}" alt="{{ $item->product->name }}" class="w-full h-full object-cover">
                                    @else
                                        🛍️
                                    @endif
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-xs text-gray-800 line-clamp-2 leading-tight">{{ $item->product->name }}</p>
                                    <p class="text-[10px] text-gray-500 mt-1">Qty: {{ $item->quantity }}</p>
                                </div>
                                <span class="text-xs font-medium text-gray-800 flex-shrink-0">Rs. {{ number_format($item->line_total) }}</span>
                            </div>
                            @endforeach
                        </div>

                        @php $shipping = $cart->subtotal >= 10000 ? 0 : 299; @endphp
                        <div class="space-y-2 text-sm text-gray-600 mb-4 pb-4 border-b border-gray-100">
                            <div class="flex justify-between"><span>Subtotal</span><span>Rs. {{ number_format($cart->subtotal) }}</span></div>
                            <div class="flex justify-between"><span>Shipping Fee</span><span class="font-medium text-gray-800">{{ $shipping==0?'Free':'Rs. '.number_format($shipping) }}</span></div>
                            @if($cart->discount>0)<div class="flex justify-between text-green-600"><span>Discount ({{ $cart->coupon_code }})</span><span>- Rs. {{ number_format($cart->discount) }}</span></div>@endif
                        </div>
                        
                        <div class="flex justify-between items-end mb-6">
                            <span class="text-gray-800 text-sm">Total</span>
                            <div class="text-right">
                                <span class="text-primary font-bold text-xl block leading-none">Rs. {{ number_format($cart->total + $shipping) }}</span>
                                <span class="text-xs text-gray-400">VAT included, where applicable</span>
                            </div>
                        </div>

                        <button type="submit" class="btn-primary w-full block text-center font-bold py-3 text-sm rounded shadow-sm">PLACE ORDER</button>
                    </div>
                </div>

            </div>
        </form>
    </div>
</div>
@endsection
