@extends('layouts.app')

@section('title', 'Checkout - ECA Networks')

@section('content')
<div style="background:linear-gradient(90deg,#16a34a,#15803d);color:#fff;text-align:center;padding:11px 16px;font-size:.875rem;font-weight:700;letter-spacing:.02em">
    🚚 <span style="color:#fef08a">FREE DELIVERY WITHIN NRB CBD</span> &nbsp;·&nbsp; Order now and get it delivered same day!
</div>
<div class="max-w-6xl mx-auto px-4 py-8">
    <!-- Breadcrumb -->
    <nav class="text-sm text-gray-500 mb-6 flex items-center gap-2">
        <a href="{{ route('home') }}" class="hover:text-electric-blue">Home</a>
        <i class="fas fa-chevron-right text-xs"></i>
        <a href="{{ route('cart.index') }}" class="hover:text-electric-blue">Cart</a>
        <i class="fas fa-chevron-right text-xs"></i>
        <span class="text-navy font-medium">Checkout</span>
    </nav>

    <!-- Steps -->
    <div class="flex items-center justify-center mb-8 gap-2">
        <div class="flex items-center gap-2 text-green-600">
            <div class="w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center text-sm font-bold"><i class="fas fa-check"></i></div>
            <span class="text-sm font-medium hidden sm:block">Cart</span>
        </div>
        <div class="flex-1 max-w-16 h-0.5 bg-electric-blue"></div>
        <div class="flex items-center gap-2 text-electric-blue">
            <div class="w-8 h-8 rounded-full bg-electric-blue text-white flex items-center justify-center text-sm font-bold">2</div>
            <span class="text-sm font-medium hidden sm:block">Checkout</span>
        </div>
        <div class="flex-1 max-w-16 h-0.5 bg-gray-200"></div>
        <div class="flex items-center gap-2 text-gray-400">
            <div class="w-8 h-8 rounded-full bg-gray-200 text-gray-400 flex items-center justify-center text-sm font-bold">3</div>
            <span class="text-sm font-medium hidden sm:block">Confirmation</span>
        </div>
    </div>

    @guest
    <div class="bg-blue-50 border border-blue-200 rounded-2xl p-4 mb-6 flex items-start gap-3">
        <div class="text-blue-500 mt-0.5"><i class="fas fa-info-circle text-lg"></i></div>
        <div>
            <p class="font-semibold text-blue-800 text-sm">No account needed!</p>
            <p class="text-blue-600 text-xs mt-0.5">Just enter your email and phone number below. We'll automatically create your account so you can track your order. Already have an account? <a href="{{ route('login') }}?redirect={{ url('/checkout') }}" class="underline font-semibold">Login here</a>.</p>
        </div>
    </div>
    @endguest

    <form action="{{ route('checkout.store') }}" method="POST" id="checkoutForm" x-data="{ paymentMethod: 'mpesa' }">
        @csrf
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Left: Shipping + Payment -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Shipping Details -->
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                    <h2 class="text-lg font-bold text-navy mb-5 flex items-center gap-2">
                        <i class="fas fa-map-marker-alt text-electric-blue"></i> Shipping Details
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">Full Name <span class="text-red-500">*</span></label>
                            <input type="text" name="shipping_name" value="{{ old('shipping_name', Auth::user()?->name ?? '') }}"
                                class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-electric-blue focus:ring-1 focus:ring-electric-blue @error('shipping_name') border-red-500 @enderror"
                                placeholder="John Doe" required>
                            @error('shipping_name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">Phone Number <span class="text-red-500">*</span></label>
                            <input type="tel" name="shipping_phone" value="{{ old('shipping_phone', Auth::user()?->phone ?? '') }}"
                                class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-electric-blue @error('shipping_phone') border-red-500 @enderror"
                                placeholder="+254 700 000 000" required>
                            @error('shipping_phone')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        <!-- guest_checkout_patch -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">Email Address <span class="text-red-500">*</span></label>
                            @auth
                            <input type="email" name="shipping_email" value="{{ Auth::user()?->email ?? '' }}" readonly
                                class="w-full border border-gray-100 bg-gray-50 rounded-xl px-4 py-3 text-sm text-gray-500 cursor-not-allowed">
                            @else
                            <input type="email" name="shipping_email" value="{{ old('shipping_email') }}"
                                class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-electric-blue focus:ring-1 focus:ring-electric-blue @error('shipping_email') border-red-500 @enderror"
                                placeholder="your@email.com" required>
                            @error('shipping_email')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                            @endauth
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">Delivery Address <span class="text-red-500">*</span></label>
                            <textarea name="shipping_address" rows="2"
                                class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-electric-blue @error('shipping_address') border-red-500 @enderror"
                                placeholder="Street address, apartment, etc." required>{{ old('shipping_address') }}</textarea>
                            @error('shipping_address')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">City <span class="text-red-500">*</span></label>
                            <input type="text" name="shipping_city" value="{{ old('shipping_city', 'Nairobi') }}"
                                class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-electric-blue @error('shipping_city') border-red-500 @enderror"
                                required>
                            @error('shipping_city')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">Country <span class="text-red-500">*</span></label>
                            <select name="shipping_country" class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-electric-blue">
                                <option value="Kenya" selected>Kenya</option>
                                <option value="Uganda">Uganda</option>
                                <option value="Tanzania">Tanzania</option>
                                <option value="Rwanda">Rwanda</option>
                            </select>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">Order Notes (Optional)</label>
                            <textarea name="notes" rows="2"
                                class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-electric-blue"
                                placeholder="Special instructions for your order...">{{ old('notes') }}</textarea>
                        </div>
                    </div>
                </div>

                <!-- Payment Method -->
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                    <h2 class="text-lg font-bold text-navy mb-5 flex items-center gap-2">
                        <i class="fas fa-credit-card text-electric-blue"></i> Payment Method
                    </h2>
                    <div class="space-y-3">
                        <!-- M-Pesa -->
                        <label class="flex items-center gap-4 p-4 border-2 rounded-xl cursor-pointer transition-all" :class="paymentMethod === 'mpesa' ? 'border-electric-blue bg-blue-50' : 'border-gray-200 hover:border-gray-300'">
                            <input type="radio" name="payment_method" value="mpesa" x-model="paymentMethod" class="text-electric-blue focus:ring-electric-blue">
                            <div class="flex items-center gap-3 flex-1">
                                <div class="w-12 h-8 bg-green-600 rounded-lg flex items-center justify-center">
                                    <span class="text-white text-xs font-bold">M-PESA</span>
                                </div>
                                <div>
                                    <p class="font-semibold text-navy text-sm">M-Pesa</p>
                                    <p class="text-xs text-gray-500">Pay via M-Pesa STK Push</p>
                                </div>
                            </div>
                            <i class="fas fa-check-circle text-electric-blue" x-show="paymentMethod === 'mpesa'"></i>
                        </label>

                        <!-- M-Pesa phone input -->
                        <div x-show="paymentMethod === 'mpesa'" x-transition class="px-4 pb-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">M-Pesa Phone Number</label>
                            <input type="tel" name="mpesa_phone" value="{{ Auth::user()?->phone ?? '' }}"
                                class="w-full max-w-xs border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-electric-blue"
                                placeholder="+254 700 000 000">
                            <p class="text-xs text-gray-400 mt-1">You will receive a prompt on this number to complete payment.</p>
                        </div>

                        <!-- Bank Transfer -->
                        <label class="flex items-center gap-4 p-4 border-2 rounded-xl cursor-pointer transition-all" :class="paymentMethod === 'bank_transfer' ? 'border-electric-blue bg-blue-50' : 'border-gray-200 hover:border-gray-300'">
                            <input type="radio" name="payment_method" value="bank_transfer" x-model="paymentMethod" class="text-electric-blue focus:ring-electric-blue">
                            <div class="flex items-center gap-3 flex-1">
                                <div class="w-12 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-university text-white text-sm"></i>
                                </div>
                                <div>
                                    <p class="font-semibold text-navy text-sm">Bank Transfer</p>
                                    <p class="text-xs text-gray-500">Direct bank deposit</p>
                                </div>
                            </div>
                            <i class="fas fa-check-circle text-electric-blue" x-show="paymentMethod === 'bank_transfer'"></i>
                        </label>

                        <div x-show="paymentMethod === 'bank_transfer'" x-transition class="px-4 pb-2 bg-blue-50 rounded-xl p-3 text-xs text-gray-600 space-y-1">
                            <div class="flex items-start gap-2">
                                <i class="fas fa-info-circle text-electric-blue mt-0.5"></i>
                                <p>Bank payment details will be sent to your email and WhatsApp after you place the order. Our team will confirm receipt of payment before processing.</p>
                            </div>
                        </div>

                        <!-- Cash on Delivery -->
                        <label class="flex items-center gap-4 p-4 border-2 rounded-xl cursor-pointer transition-all" :class="paymentMethod === 'cash_on_delivery' ? 'border-electric-blue bg-blue-50' : 'border-gray-200 hover:border-gray-300'">
                            <input type="radio" name="payment_method" value="cash_on_delivery" x-model="paymentMethod" class="text-electric-blue focus:ring-electric-blue">
                            <div class="flex items-center gap-3 flex-1">
                                <div class="w-12 h-8 bg-yellow-500 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-money-bill-wave text-white text-sm"></i>
                                </div>
                                <div>
                                    <p class="font-semibold text-navy text-sm">Cash on Delivery <span class="text-xs font-normal text-gray-400">(Within Nairobi)</span></p>
                                    <p class="text-xs text-gray-500">Pay when you receive</p>
                                </div>
                            </div>
                            <i class="fas fa-check-circle text-electric-blue" x-show="paymentMethod === 'cash_on_delivery'"></i>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Right: Order Summary -->
            <div>
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 sticky top-24">
                    <h2 class="text-lg font-bold text-navy mb-5">Order Summary</h2>

                    <!-- Items -->
                    <div class="space-y-3 mb-4 max-h-64 overflow-y-auto pr-1">
                        @foreach($cart as $item)
                        <div class="flex gap-3 items-center">
                            <div class="w-12 h-12 bg-gray-50 rounded-lg overflow-hidden border border-gray-100 shrink-0">
                                @if($item['image'])
                                <img src="{{ asset($item['image']) }}" alt="{{ $item['name'] }}" class="w-full h-full object-contain p-1">
                                @endif
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-xs font-medium text-navy line-clamp-2">{{ $item['name'] }}</p>
                                <p class="text-xs text-gray-500">Qty: {{ $item['quantity'] }}</p>
                            </div>
                            <p class="text-sm font-semibold text-navy shrink-0">KES {{ number_format($item['price'] * $item['quantity']) }}</p>
                        </div>
                        @endforeach
                    </div>

                    <!-- Totals -->
                    <div class="border-t border-gray-100 pt-4 space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Subtotal</span>
                            <span class="font-medium">KES {{ number_format($subtotal) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Tax</span>
                            <span class="font-medium">KES 0</span>
                        </div>
                        <div class="border-t border-gray-100 pt-2 flex justify-between font-bold text-base">
                            <span>Total</span>
                            <span class="text-electric-blue text-lg">KES {{ number_format($total) }}</span>
                        </div>
                    </div>

                    <button type="submit" class="w-full mt-6 bg-electric-blue text-white py-4 rounded-xl font-bold hover:bg-blue-dark transition-colors shadow-lg text-base">
                        <i class="fas fa-lock mr-2"></i> Place Order
                    </button>

                    <p class="text-center text-xs text-gray-400 mt-3 flex items-center justify-center gap-1">
                        <i class="fas fa-shield-alt text-green-500"></i>
                        Secured & encrypted checkout
                    </p>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection