@extends('layouts.app')

@section('title', 'Checkout')

@section('content')
<div class="max-w-6xl mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">Checkout</h1>

    <form id="checkout-form" action="{{ route('checkout.store') }}" method="POST">
        @csrf
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

            {{-- Shipping & Payment --}}
            <div class="lg:col-span-2 space-y-6">

                {{-- Shipping Address --}}
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h2 class="font-bold text-gray-800 mb-4">Shipping Address</h2>

                    @if($addresses->count() > 0)
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Use saved address</label>
                        <select id="saved-address" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                            <option value="">Enter new address</option>
                            @foreach($addresses as $addr)
                                <option value="{{ json_encode($addr) }}">{{ $addr->name }} - {{ $addr->address }}, {{ $addr->city }}</option>
                            @endforeach
                        </select>
                    </div>
                    @endif

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Full Name *</label>
                            <input type="text" name="shipping_name" value="{{ old('shipping_name', auth()->user()->name) }}" required class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Email *</label>
                            <input type="email" name="shipping_email" value="{{ old('shipping_email', auth()->user()->email) }}" required class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                            <input type="text" name="shipping_phone" value="{{ old('shipping_phone') }}" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Country *</label>
                            <input type="text" name="shipping_country" value="{{ old('shipping_country', 'United States') }}" required class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Street Address *</label>
                            <input type="text" name="shipping_address" value="{{ old('shipping_address') }}" required class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">City *</label>
                            <input type="text" name="shipping_city" value="{{ old('shipping_city') }}" required class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">State</label>
                            <input type="text" name="shipping_state" value="{{ old('shipping_state') }}" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">ZIP Code *</label>
                            <input type="text" name="shipping_zip" value="{{ old('shipping_zip') }}" required class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500">
                        </div>
                    </div>
                    <div class="mt-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Order Notes (optional)</label>
                        <textarea name="notes" rows="2" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500"></textarea>
                    </div>
                </div>

                {{-- Payment Method --}}
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h2 class="font-bold text-gray-800 mb-4">Payment Method</h2>
                    <div class="space-y-3">
                        <label class="flex items-center gap-3 p-3 border-2 border-red-500 rounded-lg cursor-pointer">
                            <input type="radio" name="payment_method" value="stripe" checked class="text-red-600">
                            <div>
                                <p class="font-medium">Credit / Debit Card (Stripe)</p>
                                <p class="text-xs text-gray-500">Secure payment via Stripe</p>
                            </div>
                            <div class="ml-auto flex gap-1">
                                <span class="bg-blue-600 text-white text-xs px-2 py-0.5 rounded">VISA</span>
                                <span class="bg-red-600 text-white text-xs px-2 py-0.5 rounded">MC</span>
                            </div>
                        </label>
                        <label class="flex items-center gap-3 p-3 border border-gray-200 rounded-lg cursor-pointer">
                            <input type="radio" name="payment_method" value="cod" class="text-red-600">
                            <div>
                                <p class="font-medium">Cash on Delivery</p>
                                <p class="text-xs text-gray-500">Pay when you receive your order</p>
                            </div>
                        </label>
                    </div>

                    {{-- Stripe Card Element --}}
                    <div id="stripe-section" class="mt-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Card Details</label>
                        <div id="card-element" class="border border-gray-300 rounded-lg p-3 bg-gray-50"></div>
                        <div id="card-errors" class="text-red-600 text-sm mt-2"></div>
                    </div>

                    <input type="hidden" name="stripe_payment_intent" id="stripe-payment-intent">
                </div>
            </div>

            {{-- Order Summary --}}
            <div class="bg-white rounded-xl shadow-sm p-6 h-fit sticky top-24">
                <h2 class="font-bold text-gray-800 mb-4">Order Summary</h2>

                <div class="space-y-3 mb-4">
                    @foreach($cartItems as $item)
                    <div class="flex gap-3">
                        <img src="{{ $item->product->thumbnail_url }}" class="w-12 h-12 object-cover rounded">
                        <div class="flex-1">
                            <p class="text-sm font-medium line-clamp-1">{{ $item->product->name }}</p>
                            <p class="text-xs text-gray-500">Qty: {{ $item->quantity }}</p>
                        </div>
                        <p class="text-sm font-bold">${{ number_format($item->subtotal, 2) }}</p>
                    </div>
                    @endforeach
                </div>

                <div class="border-t pt-3 space-y-2 text-sm">
                    <div class="flex justify-between"><span class="text-gray-600">Subtotal</span><span>${{ number_format($subtotal, 2) }}</span></div>
                    @if($discount > 0)
                    <div class="flex justify-between text-green-600"><span>Discount</span><span>-${{ number_format($discount, 2) }}</span></div>
                    @endif
                    <div class="flex justify-between"><span class="text-gray-600">Shipping</span><span>${{ number_format($shippingCost, 2) }}</span></div>
                    <div class="flex justify-between"><span class="text-gray-600">Tax (8%)</span><span>${{ number_format($tax, 2) }}</span></div>
                    <div class="border-t pt-2 flex justify-between font-bold text-base">
                        <span>Total</span>
                        <span class="text-red-600">${{ number_format($total, 2) }}</span>
                    </div>
                </div>

                <button type="submit" id="submit-btn" class="w-full mt-6 bg-red-600 text-white py-3 rounded-lg hover:bg-red-700 font-semibold">
                    Place Order
                </button>
                <p class="text-xs text-gray-400 text-center mt-2">🔒 Secure checkout powered by Stripe</p>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script src="https://js.stripe.com/v3/"></script>
<script>
const stripe = Stripe('{{ $stripeKey }}');
const elements = stripe.elements();
const cardElement = elements.create('card', {
    style: { base: { fontSize: '16px', color: '#374151' } }
});
cardElement.mount('#card-element');

cardElement.addEventListener('change', function(e) {
    document.getElementById('card-errors').textContent = e.error ? e.error.message : '';
});

const form = document.getElementById('checkout-form');
const submitBtn = document.getElementById('submit-btn');

// Toggle stripe section
document.querySelectorAll('input[name="payment_method"]').forEach(radio => {
    radio.addEventListener('change', function() {
        document.getElementById('stripe-section').style.display = this.value === 'stripe' ? 'block' : 'none';
    });
});

form.addEventListener('submit', async function(e) {
    const paymentMethod = document.querySelector('input[name="payment_method"]:checked').value;

    if (paymentMethod === 'stripe') {
        e.preventDefault();
        submitBtn.disabled = true;
        submitBtn.textContent = 'Processing...';

        try {
            const response = await fetch('{{ route("checkout.payment-intent") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                }
            });
            const { client_secret } = await response.json();

            const { paymentIntent, error } = await stripe.confirmCardPayment(client_secret, {
                payment_method: { card: cardElement }
            });

            if (error) {
                document.getElementById('card-errors').textContent = error.message;
                submitBtn.disabled = false;
                submitBtn.textContent = 'Place Order';
            } else {
                document.getElementById('stripe-payment-intent').value = paymentIntent.id;
                form.submit();
            }
        } catch (err) {
            document.getElementById('card-errors').textContent = 'Payment failed. Please try again.';
            submitBtn.disabled = false;
            submitBtn.textContent = 'Place Order';
        }
    }
});

// Fill saved address
document.getElementById('saved-address')?.addEventListener('change', function() {
    if (this.value) {
        const addr = JSON.parse(this.value);
        document.querySelector('[name="shipping_name"]').value = addr.name || '';
        document.querySelector('[name="shipping_phone"]').value = addr.phone || '';
        document.querySelector('[name="shipping_address"]').value = addr.address || '';
        document.querySelector('[name="shipping_city"]').value = addr.city || '';
        document.querySelector('[name="shipping_state"]').value = addr.state || '';
        document.querySelector('[name="shipping_country"]').value = addr.country || '';
        document.querySelector('[name="shipping_zip"]').value = addr.zip_code || '';
    }
});
</script>
@endpush