@extends('layouts.app')

@section('title', 'Checkout - ' . ($shopSettings['shop_name'] ?? 'Orange Groceries'))
@section('meta_robots', 'noindex, nofollow')
@section('canonical', route('checkout.index'))

@section('content')
<!-- Include Razorpay Checkout JS SDK -->
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    
    <!-- Header / Steps -->
    <div class="mb-8">
        <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight">Checkout</h1>
        <div class="flex items-center gap-2 text-xs font-semibold text-slate-400 mt-2">
            <a href="{{ route('cart.index') }}" class="hover:text-brand-600 transition">Cart</a>
            <i class="fa-solid fa-chevron-right text-[10px]"></i>
            <span class="text-brand-600 font-extrabold">Delivery & Payment</span>
            <i class="fa-solid fa-chevron-right text-[10px]"></i>
            <span>Order Confirmation</span>
        </div>
    </div>

    <div id="checkoutAlert" class="hidden mb-6 p-4 bg-rose-50 border-l-4 border-rose-500 rounded-r-2xl text-rose-700 text-xs font-semibold flex items-center justify-between">
        <div class="flex items-center gap-2">
            <i class="fa-solid fa-triangle-exclamation text-base"></i>
            <span id="checkoutAlertText"></span>
        </div>
    </div>

    <form id="checkoutForm" onsubmit="handleCheckoutSubmit(event)">
        @csrf

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            
            <!-- Left Column: Address & Payment Method -->
            <div class="lg:col-span-2 space-y-6">
                
                <!-- Delivery Address Card -->
                <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-5">
                    <div class="flex items-center justify-between border-b border-slate-100 pb-4">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-2xl bg-brand-50 text-brand-600 font-bold flex items-center justify-center text-lg">
                                <i class="fa-solid fa-location-dot"></i>
                            </div>
                            <div>
                                <h2 class="font-extrabold text-slate-900 text-lg">Select Delivery Address</h2>
                                <p class="text-xs text-slate-500 font-medium">Where should we deliver your order?</p>
                            </div>
                        </div>
                        
                        <button type="button" onclick="toggleNewAddressForm()" class="px-4 py-2 bg-slate-900 hover:bg-slate-800 text-white font-bold text-xs rounded-xl shadow transition flex items-center gap-2">
                            <i class="fa-solid fa-plus"></i> Add New Address
                        </button>
                    </div>

                    <!-- New Address Form (Hidden by default unless no address exists) -->
                    <div id="newAddressForm" class="{{ $addresses->isEmpty() ? 'block' : 'hidden' }} bg-slate-50 p-5 rounded-2xl border border-slate-200 space-y-4">
                        <div class="flex items-center justify-between mb-2">
                            <h3 class="font-extrabold text-slate-800 text-sm">Add New Address</h3>
                            @if(!$addresses->isEmpty())
                                <button type="button" onclick="toggleNewAddressForm()" class="text-slate-400 hover:text-slate-600 text-xs font-bold"><i class="fa-solid fa-xmark"></i> Cancel</button>
                            @endif
                        </div>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-extrabold text-slate-700 mb-1">Full Name *</label>
                                <input type="text" id="new_full_name" placeholder="John Doe" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-brand-500 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-xs font-extrabold text-slate-700 mb-1">Mobile Number *</label>
                                <input type="text" id="new_mobile" placeholder="10-digit mobile number" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-brand-500 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-xs font-extrabold text-slate-700 mb-1">House / Flat No.</label>
                                <input type="text" id="new_house_no" placeholder="Flat 402, Sunshine Apts" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-brand-500 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-xs font-extrabold text-slate-700 mb-1">Street / Landmark</label>
                                <input type="text" id="new_street" placeholder="Near Green Park" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-brand-500 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-xs font-extrabold text-slate-700 mb-1">Area / Locality</label>
                                <input type="text" id="new_area" placeholder="Downtown" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-brand-500 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-xs font-extrabold text-slate-700 mb-1">Pincode *</label>
                                <input type="text" id="new_pincode" placeholder="e.g. 751001" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-brand-500 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-xs font-extrabold text-slate-700 mb-1">City *</label>
                                <input type="text" id="new_city" placeholder="Bhubaneswar" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-brand-500 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-xs font-extrabold text-slate-700 mb-1">State *</label>
                                <input type="text" id="new_state" placeholder="Odisha" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-brand-500 focus:outline-none">
                            </div>
                        </div>

                        <div class="pt-2">
                            <button type="button" onclick="submitQuickAddress()" class="px-5 py-2.5 bg-brand-600 hover:bg-brand-700 text-white font-extrabold text-xs rounded-xl shadow transition">
                                Save Address & Continue
                            </button>
                        </div>
                    </div>

                    <!-- Addresses List -->
                    @if($addresses->count() > 0)
                        <div class="space-y-3">
                            @foreach($addresses as $index => $address)
                                <label class="relative flex items-start gap-4 p-4 rounded-2xl border-2 transition cursor-pointer hover:border-brand-500 has-[:checked]:border-brand-600 has-[:checked]:bg-brand-50/30 border-slate-200">
                                    <input type="radio" name="address_id" value="{{ $address->id }}" class="mt-1 accent-brand-600 w-4 h-4" {{ $index === 0 || $address->is_default ? 'checked' : '' }} required>
                                    <div class="flex-1 text-xs space-y-1">
                                        <div class="flex items-center gap-2">
                                            <span class="font-extrabold text-slate-900 text-sm">{{ $address->full_name }}</span>
                                            @if($address->is_default)
                                                <span class="px-2 py-0.5 bg-brand-100 text-brand-800 text-[10px] font-extrabold rounded-md">Default</span>
                                            @endif
                                            <span class="text-slate-400 font-semibold ml-auto"><i class="fa-solid fa-phone"></i> {{ $address->mobile }}</span>
                                        </div>
                                        <div class="text-slate-600 font-medium">
                                            {{ $address->house_no ? $address->house_no . ', ' : '' }}
                                            {{ $address->street ? $address->street . ', ' : '' }}
                                            {{ $address->area ? $address->area . ', ' : '' }}
                                            {{ $address->city }}, {{ $address->state }} - <strong class="text-slate-900 font-mono">{{ $address->pincode }}</strong>
                                        </div>
                                    </div>
                                </label>
                            @endforeach
                        </div>
                    @endif

                </div>

                <!-- Payment Method Card -->
                <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-5">
                    <div class="flex items-center gap-3 border-b border-slate-100 pb-4">
                        <div class="w-10 h-10 rounded-2xl bg-emerald-50 text-emerald-600 font-bold flex items-center justify-center text-lg">
                            <i class="fa-solid fa-credit-card"></i>
                        </div>
                        <div>
                            <h2 class="font-extrabold text-slate-900 text-lg">Select Payment Method</h2>
                            <p class="text-xs text-slate-500 font-medium">Choose how you wish to pay for your groceries</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        
                        <!-- Cash On Delivery -->
                        <label class="relative flex items-center gap-4 p-5 rounded-2xl border-2 transition cursor-pointer hover:border-brand-500 has-[:checked]:border-brand-600 has-[:checked]:bg-brand-50/30 border-slate-200">
                            <input type="radio" name="payment_method" value="cod" checked class="accent-brand-600 w-4 h-4" required>
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-xl bg-amber-100 text-amber-700 font-bold flex items-center justify-center text-lg">
                                    <i class="fa-solid fa-money-bill-wave"></i>
                                </div>
                                <div>
                                    <div class="font-extrabold text-slate-900 text-sm">Cash on Delivery (COD)</div>
                                    <div class="text-[11px] text-slate-500 font-medium">Pay with cash upon delivery</div>
                                </div>
                            </div>
                        </label>

                        <!-- Online Payment / UPI -->
                        <label class="relative flex items-center gap-4 p-5 rounded-2xl border-2 transition cursor-pointer hover:border-brand-500 has-[:checked]:border-brand-600 has-[:checked]:bg-brand-50/30 border-slate-200">
                            <input type="radio" name="payment_method" value="razorpay" class="accent-brand-600 w-4 h-4" required>
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-xl bg-blue-100 text-blue-700 font-bold flex items-center justify-center text-lg">
                                    <i class="fa-solid fa-qrcode"></i>
                                </div>
                                <div>
                                    <div class="font-extrabold text-slate-900 text-sm">Online Payment / UPI</div>
                                    <div class="text-[11px] text-slate-500 font-medium">GPay, PhonePe, Cards & NetBanking</div>
                                </div>
                            </div>
                        </label>

                    </div>
                </div>

                <!-- Special Delivery Instructions -->
                <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-3">
                    <h3 class="font-extrabold text-slate-900 text-sm flex items-center gap-2">
                        <i class="fa-solid fa-clipboard text-slate-400"></i> Delivery Notes (Optional)
                    </h3>
                    <textarea name="order_notes" rows="2" placeholder="e.g. Leave package at the door, ring doorbell, call before arrival..." class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs focus:ring-2 focus:ring-brand-500 focus:outline-none"></textarea>
                </div>

            </div>

            <!-- Right Column: Order Summary & Place Order -->
            <div class="space-y-6">
                
                <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-lg space-y-5 sticky top-24">
                    <h2 class="font-extrabold text-slate-900 text-lg border-b border-slate-100 pb-4">Order Summary</h2>

                    <!-- Items List Accordion/Preview -->
                    <div class="max-h-56 overflow-y-auto space-y-3 pr-1 divide-y divide-slate-100">
                        @foreach($cartItems as $item)
                            <div class="pt-2 flex items-center justify-between gap-3 text-xs">
                                <div class="flex items-center gap-3">
                                    <img src="{{ $item->product->image }}" class="w-10 h-10 object-contain rounded-xl bg-slate-50 border p-1">
                                    <div>
                                        <div class="font-bold text-slate-800 line-clamp-1">{{ $item->product->name }}</div>
                                        <div class="text-[11px] text-slate-400 font-medium">Qty: {{ $item->quantity }} × ₹{{ number_format($item->unit_price, 2) }}</div>
                                    </div>
                                </div>
                                <div class="font-extrabold text-slate-900">₹{{ number_format($item->total_price, 2) }}</div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Price Breakdown -->
                    <div class="border-t border-slate-100 pt-4 space-y-2.5 text-xs font-semibold">
                        <div class="flex justify-between text-slate-600">
                            <span>Subtotal</span>
                            <span class="font-bold text-slate-900">₹{{ number_format($subtotal, 2) }}</span>
                        </div>

                        @if($discountAmount > 0)
                            <div class="flex justify-between text-emerald-700">
                                <span>Coupon Discount</span>
                                <span class="font-extrabold">-₹{{ number_format($discountAmount, 2) }}</span>
                            </div>
                        @endif

                        <div class="flex justify-between text-slate-600">
                            <span>Delivery Charges</span>
                            @if($deliveryCharge == 0)
                                <span class="text-emerald-600 font-extrabold uppercase">FREE</span>
                            @else
                                <span class="font-bold text-slate-900">₹{{ number_format($deliveryCharge, 2) }}</span>
                            @endif
                        </div>

                        @if($gstAmount > 0)
                            <div class="flex justify-between text-slate-400 text-[11px]">
                                <span>Estimated Taxes & GST</span>
                                <span>₹{{ number_format($gstAmount, 2) }}</span>
                            </div>
                        @endif

                        <div class="border-t border-dashed border-slate-200 pt-3 flex justify-between items-center text-sm">
                            <span class="font-black text-slate-900">Grand Total</span>
                            <span class="text-xl font-black text-brand-700">₹{{ number_format($totalAmount, 2) }}</span>
                        </div>
                    </div>

                    <!-- Place Order Button -->
                    <button type="submit" id="submitBtn" class="w-full bg-brand-600 hover:bg-brand-700 text-white font-extrabold text-base py-4 rounded-2xl transition shadow-xl shadow-brand-600/30 flex items-center justify-center gap-2">
                        <span id="submitBtnText">Place Order</span>
                        <i class="fa-solid fa-arrow-right"></i>
                    </button>

                    <!-- Guarantees -->
                    <div class="grid grid-cols-2 gap-2 text-[10px] text-slate-400 font-bold pt-2 border-t border-slate-100">
                        <div class="flex items-center gap-1.5"><i class="fa-solid fa-shield-halved text-emerald-500"></i> 100% Safe & Secure</div>
                        <div class="flex items-center gap-1.5"><i class="fa-solid fa-bolt text-amber-500"></i> Fast Express Delivery</div>
                    </div>
                </div>

            </div>

        </div>
    </form>

</div>

<script>
function showAlert(message) {
    const alertBox = document.getElementById('checkoutAlert');
    const alertText = document.getElementById('checkoutAlertText');
    alertText.innerText = message;
    alertBox.classList.remove('hidden');
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

function toggleNewAddressForm() {
    const form = document.getElementById('newAddressForm');
    form.classList.toggle('hidden');
}

function submitQuickAddress() {
    const fullName = document.getElementById('new_full_name').value.trim();
    const mobile = document.getElementById('new_mobile').value.trim();
    const houseNo = document.getElementById('new_house_no').value.trim();
    const street = document.getElementById('new_street').value.trim();
    const area = document.getElementById('new_area').value.trim();
    const pincode = document.getElementById('new_pincode').value.trim();
    const city = document.getElementById('new_city').value.trim();
    const state = document.getElementById('new_state').value.trim();

    if (!fullName || !mobile || !pincode || !city || !state) {
        alert('Please fill in all required fields (Full Name, Mobile, Pincode, City, State).');
        return;
    }

    const formData = new FormData();
    formData.append('_token', '{{ csrf_token() }}');
    formData.append('full_name', fullName);
    formData.append('mobile', mobile);
    formData.append('house_no', houseNo);
    formData.append('street', street);
    formData.append('area', area);
    formData.append('pincode', pincode);
    formData.append('city', city);
    formData.append('state', state);

    fetch('{{ route("address.save") }}', {
        method: 'POST',
        body: formData
    }).then(res => {
        if (res.ok || res.redirected) {
            window.location.reload();
        } else {
            alert('Failed to save address. Please check your inputs.');
        }
    }).catch(err => {
        console.error(err);
        window.location.reload();
    });
}

function handleCheckoutSubmit(e) {
    e.preventDefault();

    const form = document.getElementById('checkoutForm');
    const btn = document.getElementById('submitBtn');
    const btnText = document.getElementById('submitBtnText');

    btn.disabled = true;
    btnText.innerText = 'Processing Order...';

    const formData = new FormData(form);

    fetch('{{ route("checkout.place") }}', {
        method: 'POST',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(res => res.json().then(data => ({ status: res.status, body: data })))
    .then(result => {
        const data = result.body;
        if (!data.success) {
            btn.disabled = false;
            btnText.innerText = 'Place Order';
            showAlert(data.message || 'Failed to place order. Please try again.');
            return;
        }

        if (data.is_razorpay) {
            // Trigger Razorpay Modal
            const options = {
                "key": data.razorpay_key,
                "amount": data.amount,
                "currency": "INR",
                "name": data.shop_name,
                "description": "Order #" + data.order_number,
                "image": data.shop_logo || "",
                "order_id": data.razorpay_order_id,
                "handler": function (response) {
                    btnText.innerText = 'Verifying Payment...';
                    // Verify Razorpay payment signature
                    fetch('{{ route("checkout.razorpay.verify") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            order_number: data.order_number,
                            razorpay_payment_id: response.razorpay_payment_id,
                            razorpay_order_id: response.razorpay_order_id,
                            razorpay_signature: response.razorpay_signature
                        })
                    })
                    .then(r => r.json())
                    .then(verifyRes => {
                        if (verifyRes.success) {
                            window.location.href = verifyRes.redirect_url;
                        } else {
                            btn.disabled = false;
                            btnText.innerText = 'Place Order';
                            showAlert(verifyRes.message || 'Payment Verification Failed.');
                        }
                    });
                },
                "modal": {
                    "ondismiss": function() {
                        btn.disabled = false;
                        btnText.innerText = 'Place Order';
                    }
                },
                "prefill": {
                    "name": data.customer.name,
                    "email": data.customer.email,
                    "contact": data.customer.phone
                },
                "theme": {
                    "color": "#16a34a"
                }
            };
            const rzp = new Razorpay(options);
            rzp.open();
        } else {
            // COD Redirection
            window.location.href = data.redirect_url;
        }
    })
    .catch(err => {
        console.error(err);
        btn.disabled = false;
        btnText.innerText = 'Place Order';
        showAlert('An unexpected network error occurred. Please try again.');
    });
}
</script>
@endsection