@extends('storefront.layout')

@section('title', 'Secure checkout')

@section('content')
<section class="mx-auto max-w-6xl px-6 py-12 lg:px-8">
    <div class="mb-8">
        <p class="text-xs font-semibold uppercase tracking-[0.22em] text-emerald-700">Secure checkout</p>
        <h1 class="mt-2 text-4xl font-semibold tracking-tight text-stone-950">Complete your order</h1>
        <p class="mt-3 text-sm leading-6 text-stone-600">No account is required to place a prepaid order.</p>
    </div>

    @if (session('status'))
        <div class="mb-6 rounded-xl border border-emerald-200 bg-emerald-50 px-5 py-4 text-sm text-emerald-800" role="status">
            {{ session('status') }}
        </div>
    @endif

    @if ($errors->any())
        <div class="mb-6 rounded-xl border border-rose-200 bg-rose-50 px-5 py-4 text-sm text-rose-800" role="alert">
            <p class="font-semibold">{{ $errors->has('payment') ? 'We could not place your order.' : 'Please review the highlighted fields.' }}</p>
            <ul class="mt-2 list-disc space-y-1 pl-5">
                @foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach
            </ul>
        </div>
    @endif

    @foreach ($notices as $notice)
        <div class="mb-4 rounded-xl border border-amber-200 bg-amber-50 px-5 py-4 text-sm text-amber-800">{{ $notice }}</div>
    @endforeach

    <form id="guest-checkout-form" method="POST" action="{{ route('storefront.checkout.place') }}"
        class="grid gap-8 lg:grid-cols-[minmax(0,1fr)_22rem]">
        @csrf
        <input type="hidden" name="idempotency_key" value="{{ old('idempotency_key', $idempotencyKey) }}">
        <input id="shipping-rate-key" type="hidden" name="shipping_rate_key" value="{{ old('shipping_rate_key', $freeShippingApplies ? 'free' : '') }}">

        <div class="space-y-6">
            <div class="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
                <h2 class="text-xl font-semibold text-stone-950">Contact</h2>
                <div class="mt-5 grid gap-5 sm:grid-cols-2">
                    <label class="text-sm font-medium text-stone-700">Full name
                        <input name="full_name" value="{{ old('full_name') }}" required autocomplete="name"
                               aria-invalid="{{ $errors->has('full_name') ? 'true' : 'false' }}"
                               class="mt-2 min-h-12 w-full rounded-xl border bg-white px-4 py-3 text-base text-stone-950 shadow-sm outline-none transition {{ $errors->has('full_name') ? 'border-rose-400 focus:border-rose-500 focus:ring-2 focus:ring-rose-500/20' : 'border-stone-300 focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/20' }}">
                    </label>
                    <label class="text-sm font-medium text-stone-700">Email address
                        <input type="email" name="email" value="{{ old('email') }}" required autocomplete="email"
                               aria-invalid="{{ $errors->has('email') ? 'true' : 'false' }}"
                               class="mt-2 min-h-12 w-full rounded-xl border bg-white px-4 py-3 text-base text-stone-950 shadow-sm outline-none transition {{ $errors->has('email') ? 'border-rose-400 focus:border-rose-500 focus:ring-2 focus:ring-rose-500/20' : 'border-stone-300 focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/20' }}">
                    </label>
                </div>
            </div>

            <div class="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
                <h2 class="text-xl font-semibold text-stone-950">Shipping address</h2>
                <div class="mt-5 grid gap-5 sm:grid-cols-2">
                    <label class="text-sm font-medium text-stone-700 sm:col-span-2">Street address
                        <input name="shipping_line1" value="{{ old('shipping_line1') }}" required autocomplete="shipping address-line1"
                               aria-invalid="{{ $errors->has('shipping_line1') ? 'true' : 'false' }}"
                               class="mt-2 min-h-12 w-full rounded-xl border bg-white px-4 py-3 text-base text-stone-950 shadow-sm outline-none transition {{ $errors->has('shipping_line1') ? 'border-rose-400 focus:border-rose-500 focus:ring-2 focus:ring-rose-500/20' : 'border-stone-300 focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/20' }}">
                    </label>
                    <label class="text-sm font-medium text-stone-700 sm:col-span-2">Apartment, suite, etc. <span class="font-normal text-stone-400">(optional)</span>
                        <input name="shipping_line2" value="{{ old('shipping_line2') }}" autocomplete="shipping address-line2"
                               aria-invalid="{{ $errors->has('shipping_line2') ? 'true' : 'false' }}"
                               class="mt-2 min-h-12 w-full rounded-xl border bg-white px-4 py-3 text-base text-stone-950 shadow-sm outline-none transition {{ $errors->has('shipping_line2') ? 'border-rose-400 focus:border-rose-500 focus:ring-2 focus:ring-rose-500/20' : 'border-stone-300 focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/20' }}">
                    </label>
                    <label class="text-sm font-medium text-stone-700">City
                        <input name="shipping_city" value="{{ old('shipping_city') }}" required autocomplete="shipping address-level2"
                               aria-invalid="{{ $errors->has('shipping_city') ? 'true' : 'false' }}"
                               class="mt-2 min-h-12 w-full rounded-xl border bg-white px-4 py-3 text-base text-stone-950 shadow-sm outline-none transition {{ $errors->has('shipping_city') ? 'border-rose-400 focus:border-rose-500 focus:ring-2 focus:ring-rose-500/20' : 'border-stone-300 focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/20' }}">
                    </label>
                    <label class="text-sm font-medium text-stone-700">State / province
                        <input name="shipping_state" value="{{ old('shipping_state') }}" required autocomplete="shipping address-level1"
                               aria-invalid="{{ $errors->has('shipping_state') ? 'true' : 'false' }}"
                               class="mt-2 min-h-12 w-full rounded-xl border bg-white px-4 py-3 text-base text-stone-950 shadow-sm outline-none transition {{ $errors->has('shipping_state') ? 'border-rose-400 focus:border-rose-500 focus:ring-2 focus:ring-rose-500/20' : 'border-stone-300 focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/20' }}">
                    </label>
                    <label class="text-sm font-medium text-stone-700">ZIP / postal code
                        <input name="shipping_postal_code" value="{{ old('shipping_postal_code') }}" required autocomplete="shipping postal-code"
                               aria-invalid="{{ $errors->has('shipping_postal_code') ? 'true' : 'false' }}"
                               class="mt-2 min-h-12 w-full rounded-xl border bg-white px-4 py-3 text-base text-stone-950 shadow-sm outline-none transition {{ $errors->has('shipping_postal_code') ? 'border-rose-400 focus:border-rose-500 focus:ring-2 focus:ring-rose-500/20' : 'border-stone-300 focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/20' }}">
                    </label>
                    <label class="text-sm font-medium text-stone-700">Country
                        <select name="shipping_country_code" required autocomplete="shipping country"
                                aria-invalid="{{ $errors->has('shipping_country_code') ? 'true' : 'false' }}"
                                class="mt-2 min-h-12 w-full rounded-xl border bg-white px-4 py-3 text-base text-stone-950 shadow-sm outline-none transition {{ $errors->has('shipping_country_code') ? 'border-rose-400 focus:border-rose-500 focus:ring-2 focus:ring-rose-500/20' : 'border-stone-300 focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/20' }}">
                            <option value="US" @selected(old('shipping_country_code', 'US') === 'US')>United States</option>
                        </select>
                    </label>
                </div>
                @if ($freeShippingApplies)
                    <div class="mt-5 flex items-start gap-3 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-emerald-900" role="status">
                        <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-emerald-600 text-white" aria-hidden="true">
                            <svg viewBox="0 0 20 20" fill="none" class="h-4 w-4" stroke="currentColor" stroke-width="2.25">
                                <path d="m5 10 3 3 7-7" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        <span>
                            <span class="block text-sm font-semibold">Free shipping applied</span>
                            <span class="mt-0.5 block text-xs leading-5 text-emerald-800">
                                Orders of ${{ number_format((float) $freeShippingThreshold, 2) }} or more ship free.
                            </span>
                        </span>
                    </div>
                @else
                    <button id="calculate-shipping" type="button"
                            class="mt-5 rounded-xl border border-emerald-700 px-4 py-2.5 text-sm font-semibold text-emerald-800 hover:bg-emerald-50">
                        Calculate shipping
                    </button>
                    <p id="shipping-message" class="mt-3 text-sm text-stone-600" aria-live="polite"></p>
                    <div id="shipping-options" class="mt-3 space-y-2"></div>
                @endif
            </div>

            <div class="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
                <h2 class="text-xl font-semibold text-stone-950">Payment method</h2>
                <div class="mt-5 space-y-3">
                    @foreach ($paymentMethods as $method)
                        <label class="flex cursor-pointer items-start gap-3 rounded-xl border border-stone-200 p-4 hover:border-emerald-400">
                            <input type="radio" name="payment_method" value="{{ $method->value }}"
                                   @checked(old('payment_method') === $method->value) required
                                   class="mt-1 border-stone-300 text-emerald-700 focus:ring-emerald-600">
                            <span>
                                <span class="block font-semibold text-stone-900">{{ match ($method) {
                                    \App\Enums\PaymentMethod::Ach => 'ACH transfer',
                                    \App\Enums\PaymentMethod::Wire => 'Wire transfer',
                                    \App\Enums\PaymentMethod::Card => 'Credit card',
                                    default => $method->getLabel(),
                                } }}</span>
                                <span class="mt-1 block text-xs text-stone-500">
                                    {{ $method === \App\Enums\PaymentMethod::Card
                                        ? 'Continue to the secure hosted card payment page.'
                                        : 'Payment instructions are sent after the order is placed.' }}
                                </span>
                            </span>
                        </label>
                    @endforeach

                    <div class="rounded-xl border border-dashed border-stone-300 bg-stone-50 p-4" aria-disabled="true">
                        <p class="font-semibold text-stone-900">Pay on Terms</p>
                        <p class="mt-2 text-sm leading-6 text-stone-600">
                            Apply for business credit to request payment terms. Approval and credit limits are not guaranteed.
                        </p>
                        <a href="{{ route('storefront.payment-terms') }}" class="mt-3 inline-flex text-sm font-semibold text-emerald-700 hover:text-emerald-900">Apply for payment terms</a>
                    </div>
                </div>
            </div>
        </div>

        <aside class="h-fit rounded-2xl border border-stone-200 bg-white p-6 shadow-sm lg:sticky lg:top-24">
            <h2 class="text-xl font-semibold text-stone-950">Order summary</h2>
            <div class="mt-5 space-y-3">
                @foreach ($cart->items as $item)
                    <div class="flex justify-between gap-4 text-sm">
                        <span class="text-stone-600">{{ $item->product?->title }} × {{ $item->quantity }}</span>
                        <span class="font-medium text-stone-900">${{ number_format($item->lineTotal(), 2) }}</span>
                    </div>
                @endforeach
            </div>
            <div class="mt-5 border-t border-stone-200 pt-4 text-sm">
                <div class="flex justify-between text-stone-600"><span>Subtotal</span><span>${{ number_format($cart->subtotal(), 2) }}</span></div>
                <div class="mt-2 flex items-center justify-between text-stone-600">
                    <span>Shipping</span>
                    <span id="shipping-summary" @class([
                        'font-medium text-stone-700' => ! $freeShippingApplies,
                        'rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-bold uppercase tracking-wide text-emerald-800' => $freeShippingApplies,
                    ])>{{ $freeShippingApplies ? 'Free shipping' : 'Calculated at checkout' }}</span>
                </div>
            </div>
            <button id="place-order" type="submit" aria-busy="false"
                    class="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-emerald-700 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-800 disabled:cursor-wait disabled:bg-emerald-700 disabled:text-white">
                <svg id="place-order-spinner" class="hidden h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"></path>
                </svg>
                <svg id="place-order-icon" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L6 12Zm0 0h7.5"/>
                </svg>
                <span id="place-order-label">Place order</span>
            </button>
            <div id="checkout-submit-feedback" class="mt-3 hidden rounded-lg border px-3 py-2 text-xs" role="status" aria-live="polite" aria-atomic="true" tabindex="-1">
                <p id="checkout-submit-message" class="font-medium"></p>
            </div>
            <p class="mt-3 text-center text-xs text-stone-500">Minimum product subtotal: ${{ number_format($minimumOrder, 2) }}.</p>
        </aside>
    </form>
</section>

<script>
(() => {
    const form = document.getElementById('guest-checkout-form');
    const button = document.getElementById('calculate-shipping');
    const message = document.getElementById('shipping-message');
    const options = document.getElementById('shipping-options');
    const selected = document.getElementById('shipping-rate-key');
    const summary = document.getElementById('shipping-summary');
    const placeOrder = document.getElementById('place-order');
    const placeOrderSpinner = document.getElementById('place-order-spinner');
    const placeOrderIcon = document.getElementById('place-order-icon');
    const placeOrderLabel = document.getElementById('place-order-label');
    const submitFeedback = document.getElementById('checkout-submit-feedback');
    const submitMessage = document.getElementById('checkout-submit-message');
    let submitting = false;
    const setShippingSummary = (text, isFree = false) => {
        summary.textContent = isFree ? 'Free shipping' : text;
        summary.className = isFree
            ? 'rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-bold uppercase tracking-wide text-emerald-800'
            : 'font-medium text-stone-700';
    };
    const setSubmitState = (isSubmitting, text, isError = false) => {
        submitting = isSubmitting;
        placeOrder.disabled = isSubmitting;
        placeOrder.setAttribute('aria-busy', isSubmitting ? 'true' : 'false');
        placeOrderSpinner.classList.toggle('hidden', !isSubmitting);
        placeOrderIcon.classList.toggle('hidden', isSubmitting);
        placeOrderLabel.textContent = isSubmitting ? 'Placing order...' : 'Place order';
        submitMessage.textContent = text;
        submitFeedback.classList.toggle('hidden', !text);
        submitFeedback.className = `mt-3 rounded-lg border px-3 py-2 text-xs ${!text ? 'hidden ' : ''}${isError
            ? 'border-rose-200 bg-rose-50 text-rose-700'
            : 'border-emerald-100 bg-emerald-50 text-emerald-800'}`;
        submitFeedback.setAttribute('role', isError ? 'alert' : 'status');
    };
    const responseError = (data, response) => {
        const messages = Object.values(data.errors || {})
            .flatMap((value) => Array.isArray(value) ? value : [value])
            .filter((value) => typeof value === 'string' && value.trim() !== '');

        return messages[0] || data.message || (response.status === 503
            ? 'The payment and inventory service is temporarily unavailable. Please wait a moment and try again.'
            : 'We could not place your order. Please review your details and try again.');
    };

    if (button) button.addEventListener('click', async () => {
        const required = [...form.querySelectorAll('[required]')].filter((field) => field.name !== 'payment_method');
        if (!required.every((field) => field.reportValidity())) return;
        button.disabled = true;
        message.textContent = 'Calculating shipping…';
        options.replaceChildren();
        try {
            const response = await fetch(@json(route('storefront.checkout.shipping-rate')), {
                method: 'POST',
                headers: {'Accept': 'application/json', 'X-CSRF-TOKEN': form.querySelector('[name="_token"]').value},
                body: new FormData(form),
            });
            const data = await response.json();
            if (!response.ok) throw new Error(data.message || 'Unable to calculate shipping.');
            (data.options || []).forEach((option, index) => {
                const label = document.createElement('label');
                label.className = 'flex cursor-pointer items-center justify-between rounded-xl border border-stone-200 p-3 text-sm';
                const radio = document.createElement('input');
                radio.type = 'radio';
                radio.name = 'shipping_option_display';
                radio.checked = option.key === data.selected_rate_key || index === 0;
                radio.addEventListener('change', () => {
                    selected.value = option.key;
                    setShippingSummary(option.amount_formatted, Number(option.amount) === 0);
                });
                const title = document.createElement('span');
                title.className = 'ml-3 flex-1';
                title.textContent = [option.carrier, option.service].filter(Boolean).join(' — ');
                const amount = document.createElement('strong');
                amount.textContent = option.amount_formatted;
                label.append(radio, title, amount);
                options.append(label);
            });
            selected.value = data.selected_rate_key || '';
            setShippingSummary(data.shipping_formatted, Boolean(data.is_free));
            message.textContent = data.options?.length ? 'Select a shipping option.' : 'Shipping calculated.';
        } catch (error) {
            selected.value = '';
            message.textContent = error.message;
        } finally {
            button.disabled = false;
        }
    });

    form.addEventListener('submit', async (event) => {
        event.preventDefault();
        if (submitting) return;
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }

        setSubmitState(true, 'Securely creating your Retail Partner order. Please keep this page open.');
        try {
            const controller = new AbortController();
            const abortTimer = setTimeout(() => controller.abort(), 45000);
            let response;
            try {
                response = await fetch(form.action, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': form.querySelector('[name="_token"]').value,
                    },
                    body: new FormData(form),
                    credentials: 'same-origin',
                    signal: controller.signal,
                });
            } finally {
                clearTimeout(abortTimer);
            }

            if (response.redirected && response.url) {
                window.location.assign(response.url);
                return;
            }

            const data = await response.json().catch(() => ({}));
            if (!response.ok) {
                setSubmitState(false, responseError(data, response), true);
                submitFeedback.focus({preventScroll: false});
                return;
            }
            if (!data.redirect_url) {
                setSubmitState(false, 'Your order may have been created, but checkout did not return a confirmation page. Please contact support before trying again.', true);
                submitFeedback.focus({preventScroll: false});
                return;
            }

            setSubmitState(true, data.message || 'Order created. Opening your confirmation...');
            window.location.assign(data.redirect_url);
        } catch (error) {
            const message = error?.name === 'AbortError'
                ? 'Checkout is taking longer than expected. Your order may still be processing; please wait before trying again.'
                : 'The browser lost the checkout response. Your order may still have been created; please contact support before trying again.';
            setSubmitState(false, message, true);
            submitFeedback.focus({preventScroll: false});
        }
    });
})();
</script>
@endsection