@extends('store.layouts.app')

@section('title', 'Checkout')
@section('meta_description', 'Checkout – ' . ($store_name ?? config('app.name')))

@section('content')
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    {{-- Step Indicator --}}
    <div class="mb-8">
        <div class="step-indicator justify-center">
            <div class="step-item step-completed">
                <div class="step-number"><i class="fas fa-check text-xs"></i></div>
                <span class="font-semibold text-gray-800 hidden sm:inline">Cart</span>
            </div>
            <div class="w-12 sm:w-16 h-0.5 bg-blinkit-green mx-2"></div>
            <div class="step-item step-active">
                <div class="step-number">2</div>
                <span class="font-semibold text-gray-800">Address</span>
            </div>
            <div class="w-12 sm:w-16 h-0.5 bg-gray-200 mx-2"></div>
            <div class="step-item step-pending">
                <div class="step-number">3</div>
                <span class="font-semibold text-gray-500 hidden sm:inline">Payment</span>
            </div>
        </div>
    </div>

    <h1 class="text-3xl font-black text-gray-900 mb-6">Checkout</h1>

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

        <div class="lg:col-span-2 space-y-6">
            {{-- Shipping Address --}}
            <div class="card p-6">
                <h2 class="text-xl font-black text-gray-900 mb-6 flex items-center gap-2">
                    <i class="fas fa-map-marker-alt text-blinkit-green"></i>
                    Shipping Details
                </h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="sm:col-span-2">
                        <label class="block text-sm font-bold text-gray-700 mb-2">Full Name *</label>
                        <input type="text" name="shipping_name" value="{{ old('shipping_name', auth()->guard('web')->user()->name ?? '') }}" required class="input" placeholder="Your name">
                        @error('shipping_name')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Email *</label>
                        <input type="email" name="shipping_email" value="{{ old('shipping_email', auth()->guard('web')->user()->email ?? '') }}" required class="input">
                        @error('shipping_email')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Phone *</label>
                        <input type="text" name="shipping_phone" value="{{ old('shipping_phone', auth()->guard('web')->user()->phone ?? '') }}" required class="input" placeholder="+1 234 567 8900">
                        @error('shipping_phone')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div class="sm:col-span-2">
                        <label class="block text-sm font-bold text-gray-700 mb-2">Address *</label>
                        <textarea name="shipping_address" rows="3" required class="input" placeholder="Street, building, apartment">{{ old('shipping_address', auth()->guard('web')->user()->address ?? '') }}</textarea>
                        @error('shipping_address')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">City</label>
                        <input type="text" name="shipping_city" value="{{ old('shipping_city') }}" class="input" placeholder="City">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">State / ZIP</label>
                        <input type="text" name="shipping_state" value="{{ old('shipping_state') }}" class="input" placeholder="State or ZIP">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Country</label>
                        <input type="text" name="shipping_country" value="{{ old('shipping_country', 'United States') }}" class="input">
                    </div>
                    <div class="sm:col-span-2">
                        <label class="block text-sm font-bold text-gray-700 mb-2">Delivery Instructions (Optional)</label>
                        <textarea name="notes" rows="2" class="input" placeholder="Leave at door, call on arrival, etc.">{{ old('notes') }}</textarea>
                    </div>
                </div>
            </div>

            {{-- Coupon --}}
            <div class="card p-6 bg-gradient-to-r from-yellow-50 to-orange-50 border-2 border-yellow-200">
                <h2 class="text-lg font-black text-gray-900 mb-3 flex items-center gap-2">
                    <i class="fas fa-tag text-blinkit-yellow"></i>
                    Promo Code
                </h2>
                <div class="flex gap-2">
                    <input type="text" name="coupon_code" value="{{ old('coupon_code') }}" class="input flex-1 bg-white" placeholder="Enter coupon code">
                    <button type="button" class="btn-yellow px-6" onclick="alert('Coupon validation - Coming soon')">Apply</button>
                </div>
                @if($discount > 0 && $coupon)
                <p class="text-green-600 text-sm mt-2 font-semibold">
                    <i class="fas fa-check-circle"></i> Coupon "{{ $coupon->code }}" applied! You saved {{ $currency_symbol }}{{ number_format($discount, 0) }}
                </p>
                @endif
            </div>
        </div>

        {{-- Order Summary Sidebar --}}
        <div class="lg:col-span-1">
            <div class="card p-6 sticky top-24">
                <h2 class="text-xl font-black text-gray-900 mb-6">Order Summary</h2>
                
                <div class="space-y-3 mb-6 max-h-64 overflow-y-auto">
                    @foreach($cart->items as $item)
                    <div class="flex items-start gap-3 pb-3 border-b border-gray-100 last:border-0">
                        <img src="{{ \App\Helpers\ImageHelper::urlOrPlaceholder($item->product->images->first()->image_path ?? null, 'https://images.unsplash.com/photo-1542838132-92c53300491e?w=100') }}" 
                             alt="{{ $item->product->name }}" class="w-16 h-16 object-cover rounded-lg">
                        <div class="flex-1 min-w-0">
                            <p class="font-semibold text-sm text-gray-800 line-clamp-1">{{ $item->product->name }}</p>
                            @if($item->variant)
                            <p class="text-xs text-gray-500">{{ $item->variant->name }}</p>
                            @endif
                            <p class="text-xs text-gray-500 mt-1">Qty: {{ $item->quantity }} × {{ $currency_symbol }}{{ number_format($item->price, 0) }}</p>
                        </div>
                        <p class="font-bold text-gray-900">{{ $currency_symbol }}{{ number_format($item->subtotal, 0) }}</p>
                    </div>
                    @endforeach
                </div>

                <div class="space-y-2 mb-6 pt-4 border-t-2 border-gray-200">
                    <div class="flex justify-between text-gray-600">
                        <span>Subtotal</span>
                        <span class="font-semibold">{{ $currency_symbol }}{{ number_format($subtotal, 0) }}</span>
                    </div>
                    <div class="flex justify-between text-gray-600">
                        <span>Delivery</span>
                        <span class="font-semibold text-green-600">FREE</span>
                    </div>
                    @if($discount > 0)
                    <div class="flex justify-between text-green-600">
                        <span>Discount</span>
                        <span class="font-bold">-{{ $currency_symbol }}{{ number_format($discount, 0) }}</span>
                    </div>
                    @endif
                    <div class="flex justify-between pt-3 border-t border-gray-200">
                        <span class="font-black text-lg text-gray-900">Total</span>
                        <span class="font-black text-xl text-blinkit-green">{{ $currency_symbol }}{{ number_format($total, 0) }}</span>
                    </div>
                </div>

                <button type="submit" class="btn-primary w-full py-4 text-lg mb-4">
                    <i class="fas fa-lock mr-2"></i> Place Order
                </button>

                <div class="text-xs text-gray-500 text-center space-y-1">
                    <p><i class="fas fa-shield-alt mr-1"></i> Secure checkout</p>
                    <p><i class="fas fa-undo mr-1"></i> Easy returns</p>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection