@extends('layouts.store')

@section('title', 'Checkout — Meatworx')

@section('content')
<section class="mw-inner-hero">
    <div class="container mw-inner-hero-inner">
        <div class="mw-inner-hero-copy">
            <h1>Checkout</h1>
            <p class="mw-inner-hero-script">Fresh, Safe, Vacumm Packed</p>
        </div>
        <span class="mw-inner-hero-meat" aria-hidden="true">Meat</span>
    </div>
</section>

<section class="mw-cart-page">
    <div class="container mw-checkout">
        <form class="mw-panel" action="{{ route('checkout.store') }}" method="POST">
            @csrf
            <h3 style="margin-top:0">Delivery Details</h3>
            @guest
                <p class="mw-account-note">Have an account? <a href="{{ route('login') }}">Log in</a> to track this order and reuse saved addresses. You can also check out as a guest.</p>
            @endguest
            @if($addresses->isNotEmpty())
                <div class="mw-field">
                    <label>Saved address</label>
                    <select id="saved-address">
                        <option value="">Enter a new address</option>
                        @foreach($addresses as $address)
                            <option
                                value="{{ $address->id }}"
                                data-name="{{ $address->name }}"
                                data-phone="{{ $address->phone }}"
                                data-address="{{ $address->address }}"
                                data-city="{{ $address->city }}"
                                data-pincode="{{ $address->pincode }}"
                                @selected(old('saved_pick', $defaultAddress?->id) == $address->id)
                            >{{ $address->label }} — {{ $address->address }}, {{ $address->city }}</option>
                        @endforeach
                    </select>
                </div>
            @endif
            <div class="mw-field">
                <label>Full Name</label>
                <input type="text" name="customer_name" value="{{ old('customer_name', auth()->user()?->name ?? $defaultAddress?->name) }}" required>
            </div>
            <div class="mw-field">
                <label for="customer_email">Email <span class="mw-req" aria-hidden="true">*</span></label>
                <input id="customer_email" type="email" name="customer_email" value="{{ old('customer_email', auth()->user()?->email) }}" required autocomplete="email">
                @error('customer_email')<p class="mw-form-error">{{ $message }}</p>@enderror
            </div>
            <div class="mw-field">
                <label for="customer_phone">Phone <span class="mw-req" aria-hidden="true">*</span></label>
                <input id="customer_phone" type="tel" name="customer_phone" value="{{ old('customer_phone', $defaultAddress?->phone ?? auth()->user()?->phone) }}" required inputmode="tel" autocomplete="tel" minlength="10" maxlength="20" pattern="[0-9+\-\s]{10,20}" title="Enter a phone number, at least 10 digits">
                @error('customer_phone')<p class="mw-form-error">{{ $message }}</p>@enderror
            </div>
            <div class="mw-field">
                <label>Address</label>
                <textarea name="shipping_address" rows="3" required>{{ old('shipping_address', $defaultAddress?->address) }}</textarea>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
                <div class="mw-field">
                    <label>City</label>
                    <input type="text" name="city" value="{{ old('city', $defaultAddress?->city ?? 'Gurgaon') }}" required>
                </div>
                <div class="mw-field">
                    <label>Pincode</label>
                    <input type="text" name="pincode" value="{{ old('pincode', $defaultAddress?->pincode) }}" required>
                </div>
            </div>
            @auth
                <label class="mw-check">
                    <input type="checkbox" name="save_address" value="1" @checked(old('save_address'))>
                    Save this address to my account
                </label>
            @endauth
            <div class="mw-field">
                <label>Payment Method</label>
                <select name="payment_method">
                    <option value="cod">Cash on Delivery</option>
                    <option value="online">Online</option>
                </select>
            </div>
            <div class="mw-field">
                <label>Order Notes</label>
                <textarea name="notes" rows="2">{{ old('notes') }}</textarea>
            </div>
            <button class="mw-btn mw-btn-block" type="submit">Place Order</button>
        </form>

        <aside class="mw-panel">
            <h3 style="margin-top:0">Order Summary</h3>
            @foreach($items as $item)
                <div class="mw-sum">
                    <span>{{ $item['name'] }} × {{ $item['qty'] }}</span>
                    <span>₹{{ number_format($item['price'] * $item['qty'], 0) }}</span>
                </div>
            @endforeach
            <div class="mw-sum"><span>Subtotal</span><span>₹{{ number_format($subtotal, 0) }}</span></div>
            @if($discount > 0)
                <div class="mw-sum"><span>Discount{{ $coupon ? ' ('.$coupon->code.')' : '' }}</span><span>−₹{{ number_format($discount, 0) }}</span></div>
            @endif
            <div class="mw-sum"><span>Shipping</span><span>Free</span></div>
            <div class="mw-coupon-box" style="margin:1rem 0 0;padding:0;border:0">
                @if($coupon)
                    <form action="{{ route('cart.coupon.remove') }}" method="POST">
                        @csrf @method('DELETE')
                        <button class="mw-btn mw-btn-soft" type="submit">Remove {{ $coupon->code }}</button>
                    </form>
                @else
                    <form action="{{ route('cart.coupon') }}" method="POST">
                        @csrf
                        <input type="text" name="code" value="{{ old('code') }}" placeholder="Coupon code" maxlength="40">
                        <button class="mw-btn" type="submit">Apply</button>
                    </form>
                    @error('code')<p class="mw-form-error">{{ $message }}</p>@enderror
                @endif
            </div>
            <div class="mw-sum total"><span>Total</span><span>₹{{ number_format($total, 0) }}</span></div>
        </aside>
    </div>
</section>
@endsection

@push('scripts')
<script>
document.getElementById('saved-address')?.addEventListener('change', function () {
    const option = this.selectedOptions[0];
    if (!option || !option.value) return;
    const form = this.form;
    form.customer_name.value = option.dataset.name || '';
    form.customer_phone.value = option.dataset.phone || '';
    form.shipping_address.value = option.dataset.address || '';
    form.city.value = option.dataset.city || '';
    form.pincode.value = option.dataset.pincode || '';
});
</script>
@endpush