@extends('layouts.app')

@section('title', 'Checkout - Saba Remedies')

@section('content')
<div class="bg-gradient-to-r from-emerald-800 to-teal-900 text-white py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-2xl sm:text-3xl font-extrabold">Secure Checkout</h1>
        <p class="text-xs text-emerald-200 mt-1">Complete your order with shipping information and payment choice</p>
    </div>
</div>

<section class="py-12 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <form action="{{ route('checkout.process') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
                
                <!-- Left Column: Shipping Address & Payment Selection -->
                <div class="lg:col-span-7 space-y-6">
                    
                    <!-- Delivery Address Box -->
                    <div class="bg-white rounded-3xl border border-slate-200 p-6 sm:p-8 shadow-sm space-y-5">
                        <div class="flex items-center gap-2 border-b border-slate-100 pb-3">
                            <i class="fa-solid fa-location-dot text-emerald-600 text-lg"></i>
                            <h3 class="font-extrabold text-slate-900 text-base">Delivery Address</h3>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                            <div>
                                <label class="block font-semibold text-slate-700 mb-1">Full Name *</label>
                                <input type="text" name="name" value="{{ old('name', ($user->sh_name ? $user->sh_name : $user->fname . ' ' . $user->lname)) }}" required class="w-full bg-slate-50 border border-slate-300 rounded-xl p-2.5 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                            </div>
                            <div>
                                <label class="block font-semibold text-slate-700 mb-1">Contact Phone Number *</label>
                                <input type="text" name="phone" value="{{ old('phone', ($user->sh_phone ? $user->sh_phone : $user->mob_no)) }}" required class="w-full bg-slate-50 border border-slate-300 rounded-xl p-2.5 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                            </div>
                            <div class="sm:col-span-2">
                                <label class="block font-semibold text-slate-700 mb-1">Complete Street Address *</label>
                                <input type="text" name="address" value="{{ old('address', ($user->shp_addr ? $user->shp_addr : $user->addr)) }}" required placeholder="House/Flat No., Building Name, Street" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-2.5 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                            </div>
                            <div>
                                <label class="block font-semibold text-slate-700 mb-1">Landmark (Optional)</label>
                                <input type="text" name="landmark" value="{{ old('landmark', ($user->sh_landmark ? $user->sh_landmark : $user->landmark)) }}" placeholder="Near hospital, mosque, etc." class="w-full bg-slate-50 border border-slate-300 rounded-xl p-2.5 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                            </div>
                            <div>
                                <label class="block font-semibold text-slate-700 mb-1">Postal PIN Code *</label>
                                <input type="text" name="pincode" value="{{ old('pincode', ($user->shp_pincode ? $user->shp_pincode : $user->pincode)) }}" required class="w-full bg-slate-50 border border-slate-300 rounded-xl p-2.5 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                            </div>
                            <div>
                                <label class="block font-semibold text-slate-700 mb-1">State *</label>
                                <select name="state" id="state-select" required class="w-full bg-slate-50 border border-slate-300 rounded-xl p-2.5 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                                    <option value="">Select State</option>
                                    @foreach($states as $st)
                                        <option value="{{ $st->name }}" data-id="{{ $st->id }}" {{ (old('state', ($user->shp_state ?: $user->state)) == $st->name) ? 'selected' : '' }}>
                                            {{ $st->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="block font-semibold text-slate-700 mb-1">City / District *</label>
                                <input type="text" name="city" id="city-input" value="{{ old('city', ($user->shp_city ?: $user->city)) }}" required placeholder="Enter City" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-2.5 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                            </div>
                            <div class="sm:col-span-2">
                                <label class="block font-semibold text-slate-700 mb-1">Order Notes / Delivery Instructions (Optional)</label>
                                <textarea name="message" rows="2" placeholder="Any specific instructions for delivery..." class="w-full bg-slate-50 border border-slate-300 rounded-xl p-2.5 focus:bg-white focus:ring-1 focus:ring-emerald-500"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Payment Method Box -->
                    <!-- Payment Method Selection -->
                    <div class="bg-white rounded-3xl border border-slate-200 p-6 sm:p-8 shadow-sm space-y-4">
                        <div class="flex items-center gap-2 border-b border-slate-100 pb-3">
                            <i class="fa-solid fa-wallet text-emerald-600 text-lg"></i>
                            <h3 class="font-extrabold text-slate-900 text-base">Payment Method</h3>
                        </div>

                        <div class="space-y-3 text-xs">
                            <label class="flex items-start gap-3.5 p-4 rounded-2xl border-2 border-emerald-600 bg-emerald-50/40 cursor-pointer transition-all">
                                <input type="radio" name="payment_method" value="offline" checked class="mt-1 text-emerald-600 focus:ring-emerald-500">
                                <div class="w-full">
                                    <div class="font-bold text-slate-900 text-sm flex items-center justify-between">
                                        <span class="flex items-center gap-2">
                                            <i class="fa-solid fa-qrcode text-emerald-600 text-base"></i>
                                            Digital Wallet (QR Code) &amp; Direct Bank Transfer
                                        </span>
                                        <span class="text-[10px] font-extrabold text-emerald-700 bg-emerald-100 px-2 py-0.5 rounded">UPI / Bank Transfer</span>
                                    </div>
                                    <p class="text-slate-600 mt-1.5 leading-relaxed">
                                        Scan our official UPI QR code (Google Pay, PhonePe, Paytm) or transfer directly to our Union Bank of India account on the next step and upload your payment receipt.
                                    </p>
                                </div>
                            </label>
                        </div>
                    </div>

                </div>

                <!-- Right Column: Order Summary & Confirmation Button -->
                <div class="lg:col-span-5 space-y-6">
                    <div class="bg-white rounded-3xl border border-slate-200 p-6 sm:p-8 shadow-sm space-y-5">
                        <h3 class="font-extrabold text-slate-900 text-base border-b border-slate-100 pb-3">Items in Your Order</h3>

                        <!-- Items Review List -->
                        <div class="divide-y divide-slate-100 max-h-64 overflow-y-auto space-y-2 pr-1">
                            @foreach($standardItems as $item)
                                <div class="flex items-center justify-between py-2 text-xs">
                                    <div class="pr-2">
                                        <div class="font-bold text-slate-800 line-clamp-1">{{ $item->prod_name }}</div>
                                        <div class="text-[11px] text-slate-400">Qty: {{ $item->quantity }} &times; ₹{{ $item->price }}</div>
                                    </div>
                                    <div class="font-bold text-slate-900 flex-shrink-0">₹{{ (float)$item->price * (int)$item->quantity }}</div>
                                </div>
                            @endforeach

                            @foreach($sbItems as $sb)
                                <div class="flex items-center justify-between py-2 text-xs">
                                    <div class="pr-2">
                                        <div class="font-bold text-slate-800 line-clamp-1">{{ $sb->prod_name }}</div>
                                        <div class="text-[11px] text-slate-400">Qty: {{ $sb->quantity }} &times; ₹{{ $sb->price }}</div>
                                    </div>
                                    <div class="font-bold text-slate-900 flex-shrink-0">₹{{ (float)$sb->price * (int)$sb->quantity }}</div>
                                </div>
                            @endforeach
                        </div>

                        <!-- Cost Breakdown -->
                        <div class="border-t border-slate-200 pt-4 space-y-2 text-xs text-slate-600">
                            <div class="flex justify-between">
                                <span>Subtotal</span>
                                <span class="font-bold text-slate-900">₹{{ $subtotal }}</span>
                            </div>
                            @if($discount > 0)
                                <div class="flex justify-between text-emerald-600 font-bold">
                                    <span>Discount (Coupon)</span>
                                    <span>-₹{{ $discount }}</span>
                                </div>
                            @endif
                            <div class="flex justify-between">
                                <span>Shipping Fee</span>
                                <span class="font-bold text-emerald-600">Free</span>
                            </div>
                            <div class="border-t border-slate-200 pt-3 flex justify-between items-baseline">
                                <span class="font-extrabold text-slate-900 text-sm">Total Payable</span>
                                <span class="text-2xl font-extrabold text-emerald-700">₹{{ $total }}</span>
                            </div>
                        </div>

                        <button type="submit" class="w-full bg-brand-red hover:bg-brand-darkred text-white font-bold py-4 px-6 rounded-2xl text-sm shadow-md hover:shadow-lg transition-all flex items-center justify-center gap-2">
                            <i class="fa-solid fa-check"></i> Place Order &amp; Pay ₹{{ $total }}
                        </button>

                        <p class="text-center text-[11px] text-slate-400">
                            By placing this order you agree to Saba Remedies Terms &amp; Privacy Policy.
                        </p>
                    </div>
                </div>

            </div>

        </form>

    </div>
</section>
@endsection