@extends('storefront.layout')

@section('title', trans_key('storefront.pageTitles.checkout').' - '.config('app.name', 'HyperLocal'))
@section('body_class', 'sf-app-checkout-body')

@section('content')
@php
    $cart = $cart ?? null;
    $storefrontQuery = $storefrontQuery ?? [];
    $appliedCouponCode = $appliedCouponCode ?? '';
    $availableCoupons = collect($availableCoupons ?? []);
    $contactPhone = $contactPhone ?? '';
    $appName = $appName ?? config('app.name', 'HyperLocal');
    $resumeCheckout = $resumeCheckout ?? false;
    $items = collect($items ?? data_get($cart, 'items', []));
    $summary = $summary ?? [];
    $subtotal = (float) data_get($summary, 'subtotal', 0);
    $discount = (float) data_get($summary, 'discount_total', data_get($summary, 'coupon_discount_total', 0));
    $couponDiscount = (float) data_get($summary, 'coupon_discount_total', 0);
    $comboDiscount = (float) data_get($summary, 'combo_discount_total', 0);
    $deliveryFee = (float) data_get($summary, 'delivery_fee', 0);
    $platformFee = (float) data_get($summary, 'platform_fee', 0);
    $taxTotal = (float) data_get($summary, 'tax_total', 0);
    $grandTotal = (float) data_get($summary, 'grand_total', $cartTotal ?? 0);
    $payableAmount = (float) data_get($summary, 'payable_amount', $grandTotal);
    $itemQuantity = (int) $items->sum('quantity');
    $isGrocery = ($selectedService ?? 'grocery') !== 'food';
    $storeLogo = $cart?->store ? \App\Support\StorefrontPresenter::storeLogo($cart->store) : null;
    $paymentMethods = collect($paymentMethods ?? [])->map(function ($method) {
        return [
            'key' => data_get($method, 'key', 'cod'),
            'name' => data_get($method, 'name', 'Cash on Delivery'),
            'subtitle' => data_get($method, 'subtitle', ''),
            'icon' => data_get($method, 'icon', 'card'),
            'logo' => data_get($method, 'logo'),
        ];
    });
    $pendingCheckout = is_array($pendingCheckout ?? null) ? $pendingCheckout : [];
    $selectedPaymentMethod = $selectedPaymentMethod ?? data_get($paymentMethods->first(), 'key', 'cod');
    $selectedPayment = $paymentMethods->firstWhere('key', $selectedPaymentMethod) ?? $paymentMethods->first();
    $deliveryLocation = session('delivery_location', 'Select delivery location');
    $deliveryEstimateLabel = $deliveryEstimateLabel ?? ($isGrocery ? 'Delivery in 10-20 mins' : 'Delivery in 30-35 mins');
    $savedAddresses = collect($savedAddresses ?? []);
    $selectedAddress = $selectedAddress ?? ($savedAddresses->firstWhere('is_default', true) ?: $savedAddresses->first());
    $formatCheckoutAddress = function ($address, bool $includeLabel = false) {
        if (! $address) {
            return '';
        }

        return collect([
            $includeLabel ? (data_get($address, 'type') ?: data_get($address, 'label')) : null,
            data_get($address, 'address_line_1') ?: data_get($address, 'address'),
            data_get($address, 'address_line_2'),
            data_get($address, 'landmark'),
            data_get($address, 'city'),
            data_get($address, 'state'),
            data_get($address, 'postal_code') ?: data_get($address, 'pincode'),
        ])->map(fn ($part) => trim((string) $part))
            ->filter()
            ->unique()
            ->join(', ');
    };
    $selectedAddressText = $selectedAddress
        ? $formatCheckoutAddress($selectedAddress)
        : (data_get($pendingCheckout, 'delivery_address') ?: ($deliveryLocation !== 'Select delivery location' ? $deliveryLocation : ''));
    $deliveryLatitude = data_get($pendingCheckout, 'delivery_lat') ?: data_get(session('delivery_coordinates', []), 'latitude', session('delivery_lat'));
    $deliveryLongitude = data_get($pendingCheckout, 'delivery_lng') ?: data_get(session('delivery_coordinates', []), 'longitude', session('delivery_lng'));
    $isTakeawayAvailable = $cart?->store?->service_type === 'food' || true;
@endphp
@php
    $checkoutGatewayKeys = $paymentMethods->pluck('key');
@endphp
@if($checkoutGatewayKeys->contains('razorpay'))
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
@endif
@if($checkoutGatewayKeys->contains('cashfree'))
    <script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>
@endif
<style>
/* ==========================================
   CHECKOUT PAGE - MATCHING HOME DESIGN
   ========================================== */
:root {
    --fm-primary: #2daa37;
    --fm-primary-dark: #1e8a2a;
    --fm-primary-light: #e8f5e9;
    --fm-secondary: #ff6b00;
    --fm-accent: #ffc107;
    --fm-bg: #f5f7f8;
    --fm-card-bg: #ffffff;
    --fm-text: #1a1a2e;
    --fm-text-secondary: #6b7280;
    --fm-text-light: #9ca3af;
    --fm-border: #e5e7eb;
    --fm-shadow: 0 2px 8px rgba(0,0,0,0.06);
    --fm-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --fm-radius: 10px;
    --fm-radius-sm: 6px;
    --fm-radius-full: 9999px;
    --fm-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --fm-safe-top: env(safe-area-inset-top, 0px);
    --fm-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.fm-checkout-page {
    background: var(--fm-bg);
    min-height: 100vh;
    padding-bottom: calc(100px + var(--fm-safe-bottom));
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fm-checkout-page * {
    box-sizing: border-box;
}

.fm-checkout-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 12px;
}

/* TOP BAR */
.fm-checkout-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--fm-card-bg);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--fm-border);
    padding-top: calc(10px + var(--fm-safe-top));
}

.fm-checkout-topbar button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--fm-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--fm-text);
    transition: background var(--fm-transition);
}

.fm-checkout-topbar button:active {
    transform: scale(0.92);
}

.fm-checkout-topbar button svg {
    width: 20px;
    height: 20px;
}

.fm-checkout-topbar strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--fm-text);
}

.fm-checkout-topbar span {
    width: 36px;
}

/* EMPTY STATE */
.fm-checkout-empty {
    text-align: center;
    padding: 60px 20px;
}

.fm-checkout-empty svg {
    width: 80px;
    height: 80px;
    color: var(--fm-text-light);
    margin-bottom: 16px;
}

.fm-checkout-empty h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--fm-text);
    margin: 0 0 6px;
}

.fm-checkout-empty p {
    font-size: 14px;
    color: var(--fm-text-secondary);
    margin: 0 0 16px;
}

.fm-checkout-empty a {
    display: inline-block;
    padding: 10px 28px;
    border-radius: var(--fm-radius-full);
    background: var(--fm-primary);
    color: white;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--fm-transition);
}

.fm-checkout-empty a:hover {
    background: var(--fm-primary-dark);
}

/* STORE CARD */
.fm-checkout-store-card {
    background: var(--fm-card-bg);
    border-radius: var(--fm-radius);
    padding: 14px 16px;
    box-shadow: var(--fm-shadow);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.fm-checkout-store-card .fm-store-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--fm-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    color: var(--fm-primary);
    flex-shrink: 0;
    overflow: hidden;
}

.fm-checkout-store-card .fm-store-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fm-checkout-store-card div {
    flex: 1;
    min-width: 0;
}

.fm-checkout-store-card div h1 {
    font-size: 16px;
    font-weight: 700;
    color: var(--fm-text);
    margin: 0;
}

.fm-checkout-store-card div p {
    font-size: 12px;
    color: var(--fm-text-secondary);
    margin: 0;
}

.fm-checkout-store-card div small {
    font-size: 10px;
    color: var(--fm-text-light);
}

/* SAVINGS BANNER */
.fm-checkout-savings {
    background: var(--fm-primary-light);
    border-radius: var(--fm-radius);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    border-left: 3px solid var(--fm-primary);
}

.fm-checkout-savings svg {
    width: 18px;
    height: 18px;
    color: var(--fm-primary);
    flex-shrink: 0;
}

.fm-checkout-savings span {
    font-size: 12px;
    font-weight: 500;
    color: var(--fm-text-secondary);
}

/* CARD */
.fm-checkout-card {
    background: var(--fm-card-bg);
    border-radius: var(--fm-radius);
    padding: 14px 16px;
    box-shadow: var(--fm-shadow);
    margin-bottom: 12px;
}

.fm-checkout-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.fm-checkout-section-title h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--fm-text);
    margin: 0;
}

.fm-checkout-section-title a {
    font-size: 12px;
    font-weight: 600;
    color: var(--fm-primary);
    text-decoration: none;
}

/* ORDER TYPE SEGMENTED */
.fm-checkout-segmented {
    display: flex;
    gap: 6px;
    background: var(--fm-bg);
    border-radius: var(--fm-radius);
    padding: 3px;
}

.fm-checkout-segmented button {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: var(--fm-radius-sm);
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--fm-text-secondary);
    cursor: pointer;
    transition: all var(--fm-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
}

.fm-checkout-segmented button svg {
    width: 16px;
    height: 16px;
}

.fm-checkout-segmented button.is-active {
    background: var(--fm-card-bg);
    color: var(--fm-text);
    box-shadow: var(--fm-shadow);
}

.fm-checkout-segmented button:active {
    transform: scale(0.97);
}

/* ITEMS LIST */
.fm-checkout-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fm-checkout-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--fm-border);
}

.fm-checkout-item:last-child {
    border-bottom: none;
}

.fm-checkout-item .fm-item-image {
    width: 40px;
    height: 40px;
    border-radius: var(--fm-radius-sm);
    background: var(--fm-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.fm-checkout-item .fm-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fm-checkout-item .fm-item-image b {
    font-size: 14px;
    color: var(--fm-primary);
}

.fm-checkout-item > span {
    flex: 1;
    min-width: 0;
}

.fm-checkout-item > span strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--fm-text);
    display: block;
}

.fm-checkout-item > span small {
    font-size: 11px;
    color: var(--fm-text-light);
}

.fm-checkout-item em {
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    color: var(--fm-text);
}

/* ROW */
.fm-checkout-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.fm-checkout-row .fm-row-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fm-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--fm-primary);
}

.fm-checkout-row .fm-row-icon svg {
    width: 16px;
    height: 16px;
}

.fm-checkout-row > span {
    flex: 1;
    min-width: 0;
}

.fm-checkout-row > span strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--fm-text);
    display: block;
}

.fm-checkout-row > span small {
    font-size: 11px;
    color: var(--fm-text-secondary);
}

.fm-checkout-row > button {
    font-size: 12px;
    font-weight: 600;
    color: var(--fm-primary);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--fm-radius-sm);
    transition: background var(--fm-transition);
}

.fm-checkout-row > button:active {
    background: var(--fm-bg);
}

/* ADDRESS LIST */
.fm-checkout-address-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.fm-checkout-address-list button {
    padding: 10px 12px;
    border: 2px solid var(--fm-border);
    border-radius: var(--fm-radius-sm);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: all var(--fm-transition);
    font-family: inherit;
}

.fm-checkout-address-list button.is-selected {
    border-color: var(--fm-primary);
    background: var(--fm-primary-light);
}

.fm-checkout-address-list button strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--fm-text);
    display: block;
}

.fm-checkout-address-list button span {
    font-size: 12px;
    color: var(--fm-text-secondary);
}

/* INPUT */
.fm-checkout-input {
    display: block;
    margin-top: 8px;
}

.fm-checkout-input span {
    font-size: 12px;
    font-weight: 600;
    color: var(--fm-text-secondary);
    display: block;
    margin-bottom: 3px;
}

.fm-checkout-input input,
.fm-checkout-input textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--fm-border);
    border-radius: var(--fm-radius-sm);
    font-size: 13px;
    font-family: inherit;
    color: var(--fm-text);
    background: var(--fm-bg);
    transition: border-color var(--fm-transition);
    outline: none;
}

.fm-checkout-input input:focus,
.fm-checkout-input textarea:focus {
    border-color: var(--fm-primary);
    background: white;
}

.fm-checkout-input textarea {
    resize: vertical;
    min-height: 50px;
}

/* COUPON */
.fm-checkout-coupon-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--fm-bg);
    border-radius: var(--fm-radius-full);
    padding: 4px 4px 4px 12px;
    border: 2px solid var(--fm-border);
    transition: border-color var(--fm-transition);
}

.fm-checkout-coupon-box:focus-within {
    border-color: var(--fm-primary);
}

.fm-checkout-coupon-box svg {
    width: 18px;
    height: 18px;
    color: var(--fm-text-light);
    flex-shrink: 0;
}

.fm-checkout-coupon-box input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 0;
    font-size: 13px;
    font-family: inherit;
    color: var(--fm-text);
    outline: none;
    min-width: 0;
}

.fm-checkout-coupon-box input::placeholder {
    color: var(--fm-text-light);
}

.fm-checkout-coupon-box button {
    padding: 6px 16px;
    border: none;
    border-radius: var(--fm-radius-full);
    background: var(--fm-primary);
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--fm-transition);
    flex-shrink: 0;
}

.fm-checkout-coupon-box button:active {
    transform: scale(0.95);
}

.fm-checkout-promo-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.fm-checkout-promo-list button {
    padding: 4px 12px;
    border: 1px dashed var(--fm-primary);
    border-radius: var(--fm-radius-full);
    background: transparent;
    font-size: 11px;
    font-weight: 500;
    color: var(--fm-primary);
    cursor: pointer;
    transition: all var(--fm-transition);
    font-family: inherit;
}

.fm-checkout-promo-list button:active {
    background: var(--fm-primary-light);
}

.fm-checkout-promo-list button strong {
    display: block;
    font-size: 12px;
}

.fm-checkout-promo-list button span {
    font-size: 10px;
    color: var(--fm-text-secondary);
}

/* PAYMENT OPTIONS */
.fm-checkout-payment-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fm-checkout-payment-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 2px solid var(--fm-border);
    border-radius: var(--fm-radius-sm);
    cursor: pointer;
    transition: all var(--fm-transition);
}

.fm-checkout-payment-option.is-selected {
    border-color: var(--fm-primary);
    background: var(--fm-primary-light);
}

.fm-checkout-payment-option input[type="radio"] {
    display: none;
}

.fm-checkout-payment-option span {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fm-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--fm-text-secondary);
}

.fm-checkout-payment-option span svg {
    width: 16px;
    height: 16px;
}

.fm-checkout-payment-option span img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.fm-checkout-payment-option b {
    font-size: 13px;
    font-weight: 600;
    color: var(--fm-text);
    flex: 1;
}

.fm-checkout-payment-option small {
    font-size: 11px;
    color: var(--fm-text-secondary);
}

/* BILL DETAILS */
.fm-checkout-bill dl {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.fm-checkout-bill dl div {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--fm-text-secondary);
    padding: 2px 0;
}

.fm-checkout-bill dl div.is-green {
    color: var(--fm-primary);
}

.fm-checkout-bill dl div.is-total {
    font-size: 16px;
    font-weight: 700;
    color: var(--fm-text);
    padding-top: 8px;
    border-top: 2px solid var(--fm-border);
    margin-top: 4px;
}

.fm-checkout-bill dl div dt {
    font-weight: 500;
}

.fm-checkout-bill dl div dd {
    font-weight: 600;
    margin: 0;
}

/* POLICY */
.fm-checkout-policy {
    font-size: 11px;
    color: var(--fm-text-light);
    padding: 8px 4px;
    text-align: center;
}

.fm-checkout-policy strong {
    display: block;
    font-weight: 600;
    color: var(--fm-text-secondary);
}

.fm-checkout-policy p {
    margin: 2px 0 0;
}

/* SCHEDULE FIELD */
.fm-checkout-schedule-field {
    margin-top: 8px;
    display: none;
}

.fm-checkout-schedule-field.is-visible {
    display: block;
}

.fm-checkout-schedule-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--fm-border);
    border-radius: var(--fm-radius-sm);
    font-size: 13px;
    font-family: inherit;
    color: var(--fm-text);
    background: var(--fm-bg);
    transition: border-color var(--fm-transition);
    outline: none;
}

.fm-checkout-schedule-field input:focus {
    border-color: var(--fm-primary);
    background: white;
}

/* DETECT LOCATION BUTTON */
.fm-detect-location-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--fm-border);
    border-radius: var(--fm-radius-full);
    background: var(--fm-bg);
    font-size: 11px;
    font-weight: 500;
    color: var(--fm-text-secondary);
    cursor: pointer;
    transition: all var(--fm-transition);
    font-family: inherit;
}

.fm-detect-location-btn:hover {
    background: var(--fm-primary-light);
    border-color: var(--fm-primary);
    color: var(--fm-primary);
}

.fm-detect-location-btn:active {
    transform: scale(0.95);
}

.fm-detect-location-btn svg {
    width: 14px;
    height: 14px;
}

.fm-detect-location-btn.is-detecting {
    opacity: 0.6;
    pointer-events: none;
}

/* BOTTOM BAR */
.fm-checkout-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--fm-card-bg);
    border-top: 1px solid var(--fm-border);
    padding: 8px 16px calc(8px + var(--fm-safe-bottom));
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 50;
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}

.fm-checkout-bottom-bar .fm-payment-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: var(--fm-radius-full);
    background: var(--fm-bg);
    cursor: pointer;
    flex: 1;
    min-width: 0;
    transition: background var(--fm-transition);
}

.fm-checkout-bottom-bar .fm-payment-preview:active {
    background: var(--fm-border);
}

.fm-checkout-bottom-bar .fm-payment-preview span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fm-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--fm-primary);
}

.fm-checkout-bottom-bar .fm-payment-preview span svg {
    width: 14px;
    height: 14px;
}

.fm-checkout-bottom-bar .fm-payment-preview b {
    font-size: 12px;
    font-weight: 600;
    color: var(--fm-text);
    white-space: nowrap;
}

.fm-checkout-bottom-bar .fm-payment-preview small {
    font-size: 10px;
    color: var(--fm-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fm-checkout-bottom-bar .fm-payment-preview em {
    font-style: normal;
    font-size: 16px;
    color: var(--fm-text-light);
    margin-left: auto;
}

.fm-checkout-bottom-bar .fm-place-order {
    padding: 10px 20px;
    border: none;
    border-radius: var(--fm-radius-full);
    background: var(--fm-primary);
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--fm-transition);
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.fm-checkout-bottom-bar .fm-place-order:active {
    transform: scale(0.96);
}

.fm-checkout-bottom-bar .fm-place-order svg {
    width: 16px;
    height: 16px;
}

.fm-checkout-bottom-bar .fm-place-order:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* RESPONSIVE */
@media (max-width: 380px) {
    .fm-checkout-container { padding: 0 8px; }
    .fm-checkout-bottom-bar .fm-payment-preview { padding: 4px 8px; }
    .fm-checkout-bottom-bar .fm-payment-preview b { font-size: 11px; }
    .fm-checkout-bottom-bar .fm-payment-preview small { display: none; }
    .fm-checkout-bottom-bar .fm-place-order { padding: 8px 14px; font-size: 12px; }
}

@media (min-width: 481px) {
    .fm-checkout-container { max-width: 600px; padding: 0 16px; }
    .fm-checkout-bottom-bar { max-width: 600px; }
}
</style>

<div class="fm-checkout-page" role="main">
    <div class="fm-checkout-container">
        {{-- TOP BAR --}}
        <header class="fm-checkout-topbar">
            <button type="button" onclick="history.length > 1 ? history.back() : window.location.assign(@js(route('storefront.cart')))" aria-label="Go back">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="15 18 9 12 15 6"/>
                </svg>
            </button>
            <strong>{{ $cart?->store?->name ?? trans_key('storefront.fallbacks.checkout') }}</strong>
            <span></span>
        </header>

        @if($items->isEmpty())
            <div class="fm-checkout-empty">
                <svg viewBox="0 0 96 96" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 28h12l7 34h30l8-24H38"/>
                    <circle cx="45" cy="74" r="5"/>
                    <circle cx="70" cy="74" r="5"/>
                </svg>
                <h1>Your cart is empty</h1>
                <p>Add items before checkout.</p>
                <a href="{{ route('storefront.home', $storefrontQuery ?? []) }}">Start shopping</a>
            </div>
        @else
            <form action="{{ route('storefront.orders.store') }}" method="POST" class="fm-checkout-form" data-app-checkout-form data-summary-url="{{ route('storefront.checkout.preview') }}" data-currency-symbol="{{ \App\Support\StorefrontPresenter::currencySymbol() }}" data-currency-decimals="{{ \App\Support\StorefrontPresenter::decimalDigits() }}">
                @csrf
                @if($cart?->store?->id)
                    <input type="hidden" name="restaurant_id" value="{{ $cart->store->id }}">
                @endif
                @foreach($items as $payloadIndex => $payloadItem)
                    <input type="hidden" name="items[{{ $payloadIndex }}][id]" value="{{ $payloadItem->product?->id ?? $payloadItem->getRouteKey() }}">
                    <input type="hidden" name="items[{{ $payloadIndex }}][quantity]" value="{{ (int) $payloadItem->quantity }}">
                @endforeach
                <input type="hidden" name="order_type" value="delivery" data-order-type-input>
                <input type="hidden" name="coupon_code" value="{{ $appliedCouponCode ?? '' }}" data-coupon-code-input>
                <input type="hidden" name="delivery_address_id" value="{{ $selectedAddress?->id }}" data-delivery-address-id>
                <input type="hidden" name="scheduled_time" value="" data-scheduled-time-input>

                {{-- STORE CARD --}}
                <section class="fm-checkout-store-card">
                    <span class="fm-store-logo">
                        @if(!empty($storeLogo))
                            <img src="{{ $storeLogo }}" alt="{{ $cart?->store?->name }}">
                        @else
                            {{ \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($cart?->store?->name ?? 'S', 0, 1)) }}
                        @endif
                    </span>
                    <div>
                        <h1>{{ $cart?->store?->name ?? trans_key('storefront.fallbacks.store') }}</h1>
                        <p>{{ $itemQuantity }} item{{ $itemQuantity === 1 ? '' : 's' }} • <span data-delivery-estimate>{{ $deliveryEstimateLabel }}</span></p>
                        <small>{{ $isGrocery ? 'InstaKart checkout' : 'Food delivery checkout' }}</small>
                    </div>
                </section>

                {{-- SAVINGS --}}
                <div class="fm-checkout-savings">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round">
                        <path d="M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z"/>
                        <circle cx="8" cy="8" r="1.5" fill="currentColor"/>
                    </svg>
                    <span data-savings-text>{{ ($couponDiscount + $comboDiscount + $discount) > 0 ? 'You saved '.\App\Support\StorefrontPresenter::money($couponDiscount + $comboDiscount + $discount).' on this order' : 'Apply coupons and save more on this order' }}</span>
                </div>

                {{-- ORDER TYPE --}}
                <section class="fm-checkout-card">
                    <div class="fm-checkout-section-title">
                        <h2>Choose order type</h2>
                    </div>
                    <div class="fm-checkout-segmented" data-order-type-tabs>
                        <button type="button" class="is-active" data-order-type="delivery">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round">
                                <path d="M3 7h11v10H3zM14 10h4l3 4v3h-7z"/>
                                <circle cx="7" cy="18" r="2"/>
                                <circle cx="18" cy="18" r="2"/>
                            </svg>
                            Delivery
                        </button>
                        @if($isTakeawayAvailable)
                            <button type="button" data-order-type="takeaway">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round">
                                    <path d="M6 8h12l-1 12H7L6 8Z"/>
                                    <path d="M9 8a3 3 0 0 1 6 0"/>
                                </svg>
                                Takeaway
                            </button>
                        @endif
                    </div>
                    
                    <div style="margin-top:8px;font-size:12px;color:var(--fm-text-secondary);" data-takeaway-info hidden>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="display:inline-block;vertical-align:middle;margin-right:4px;">
                            <circle cx="12" cy="12" r="10"/>
                            <line x1="12" y1="16" x2="12" y2="12"/>
                            <line x1="12" y1="8" x2="12.01" y2="8"/>
                        </svg>
                        You'll pick up your order from the store. No delivery address needed.
                    </div>
                </section>

                {{-- REVIEW ITEMS --}}
                <section class="fm-checkout-card">
                    <div class="fm-checkout-section-title">
                        <h2>Review items</h2>
                        <a href="{{ route('storefront.cart') }}">Edit</a>
                    </div>
                    <div class="fm-checkout-items">
                        @foreach($items as $item)
                            @php
                                $product = $item->product;
                                $image = $product ? \App\Support\StorefrontPresenter::productImage($product) : null;
                                $lineTotal = (float) ($item->line_total ?? 0);
                            @endphp
                            <div class="fm-checkout-item">
                                <span class="fm-item-image">
                                    @if($image)
                                        <img src="{{ $image }}" alt="{{ $product?->name }}" style="width:100%;height:100%;object-fit:cover;">
                                    @else
                                        <b>{{ \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($product?->name ?? 'I', 0, 1)) }}</b>
                                    @endif
                                </span>
                                <span>
                                    <strong>{{ $product?->name ?? trans_key('storefront.fallbacks.productUnavailable') }}</strong>
                                    <small>{{ (int) $item->quantity }} × {{ \App\Support\StorefrontPresenter::money((float) ($item->unit_price ?? 0)) }}</small>
                                </span>
                                <em>{{ \App\Support\StorefrontPresenter::money($lineTotal) }}</em>
                            </div>
                        @endforeach
                    </div>
                </section>

                {{-- DELIVERY ADDRESS --}}
                <section class="fm-checkout-card" data-address-section>
                    <div class="fm-checkout-row">
                        <span class="fm-row-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round">
                                <path d="M12 21s7-5.2 7-11a7 7 0 0 0-14 0c0 5.8 7 11 7 11Z"/>
                                <circle cx="12" cy="10" r="2.5"/>
                            </svg>
                        </span>
                        <span>
                            <strong>Delivery Address</strong>
                            <small id="deliveryLocationDisplay">{{ $deliveryLocation }}</small>
                        </span>
                        <div style="display:flex;gap:4px;">
                            <button type="button" class="fm-detect-location-btn" data-detect-location>
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="3"/>
                                    <path d="M22 12h-4M6 12H2M12 22v-4M12 6V2M20 20l-2-2M4 4l2 2M20 4l-2 2M4 20l2-2"/>
                                </svg>
                                Detect
                            </button>
                            <button type="button" data-reference-location-trigger data-location-open>{{ $deliveryLocation === 'Select delivery location' ? 'Add' : 'Change' }}</button>
                        </div>
                    </div>
                    
                    @if($savedAddresses->isNotEmpty())
                        <div class="fm-checkout-address-list">
                            @foreach($savedAddresses as $address)
                                @php
                                    $addressLabel = trim(collect([
                                        data_get($address, 'type') ?: data_get($address, 'label'),
                                        data_get($address, 'address_line_1') ?: data_get($address, 'address'),
                                        data_get($address, 'landmark'),
                                    ])->filter()->join(' • '));
                                    $addressLabel = $formatCheckoutAddress($address);
                                    $addressTitle = data_get($address, 'type') ?: data_get($address, 'label') ?: 'Saved address';
                                @endphp
                                <button
                                    type="button"
                                    class="{{ (int) $selectedAddress?->id === (int) $address->id ? 'is-selected' : '' }}"
                                    data-address-id="{{ $address->id }}"
                                    data-address-label="{{ $addressLabel ?: 'Saved address' }}"
                                    data-address-lat="{{ data_get($address, 'latitude') }}"
                                    data-address-lng="{{ data_get($address, 'longitude') }}"
                                >
                                    <strong>{{ $addressTitle }}</strong>
                                    <span>{{ $addressLabel ?: 'Deliver here' }}</span>
                                </button>
                            @endforeach
                        </div>
                    @endif
                    
                    <label class="fm-checkout-input">
                        <span>Complete address</span>
                        <textarea name="delivery_address" rows="2" placeholder="House / flat / floor / landmark" autocomplete="street-address" data-address-textarea>{{ $selectedAddressText }}</textarea>
                    </label>
                    
                    <input type="hidden" name="delivery_lat" id="deliveryLat" value="{{ $deliveryLatitude }}">
                    <input type="hidden" name="delivery_lng" id="deliveryLng" value="{{ $deliveryLongitude }}">
                </section>

                {{-- SCHEDULE & CONTACT --}}
                <section class="fm-checkout-card">
                    <div class="fm-checkout-row">
                        <span class="fm-row-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round">
                                <path d="M8 2v4m8-4v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14H3V6a2 2 0 0 1 2-2Z"/>
                            </svg>
                        </span>
                        <span>
                            <strong data-delivery-estimate-label>{{ $deliveryEstimateLabel }}</strong>
                            <small>Want this later? Schedule it</small>
                        </span>
                        <button type="button" data-schedule-toggle>
                            <span data-schedule-text>Schedule</span>
                            <span data-schedule-cancel-text style="display:none;">Cancel</span>
                        </button>
                    </div>
                    
                    <div class="fm-checkout-schedule-field" data-schedule-field>
                        <label class="fm-checkout-input" style="margin-top:0;">
                            <span>Select date & time</span>
                            <input type="datetime-local" name="scheduled_time" id="scheduledTime" min="{{ now()->addMinutes(30)->format('Y-m-d\TH:i') }}" data-schedule-input>
                        </label>
                        <div style="font-size:11px;color:var(--fm-text-light);margin-top:4px;">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="display:inline-block;vertical-align:middle;margin-right:4px;">
                                <circle cx="12" cy="12" r="10"/>
                                <polyline points="12 6 12 12 16 14"/>
                            </svg>
                            Minimum 30 minutes from now. Store will prepare your order at the selected time.
                        </div>
                    </div>
                    
                    <label class="fm-checkout-input">
                        <span>Contact number</span>
                        <input type="tel" name="contact_phone" value="{{ $contactPhone ?? '' }}" placeholder="Enter phone number" required>
                    </label>
                    
                    <label class="fm-checkout-input">
                        <span>Special instructions</span>
                        <textarea name="special_instructions" rows="2" placeholder="{{ $isGrocery ? 'Example: leave at door, call before delivery' : 'Example: no cutlery, less spicy, call before delivery' }}"></textarea>
                    </label>
                </section>

                {{-- COUPONS --}}
                <section class="fm-checkout-card">
                    <div class="fm-checkout-section-title">
                        <h2>Coupons</h2>
                    </div>
                    <div class="fm-checkout-coupon-box">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round">
                            <path d="M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z"/>
                        </svg>
                        <input type="text" value="{{ $appliedCouponCode ?? '' }}" placeholder="Enter coupon code" data-coupon-input>
                        <button type="button" data-apply-coupon>Apply</button>
                    </div>
                    
                    @if(($availableCoupons ?? collect())->count())
                        <div class="fm-checkout-promo-list">
                            @foreach($availableCoupons as $coupon)
                                <button type="button" data-promo-code="{{ $coupon->code }}">
                                    <strong>{{ $coupon->code }}</strong>
                                    <span>{{ $coupon->title ?: \App\Support\StorefrontPresenter::couponDiscountLabel($coupon) }}</span>
                                </button>
                            @endforeach
                        </div>
                    @endif
                </section>

                {{-- PAYMENT OPTIONS --}}
                <section class="fm-checkout-card">
                    <div class="fm-checkout-section-title">
                        <h2>Payment Options</h2>
                    </div>
                    <div class="fm-checkout-payment-options">
                        @foreach($paymentMethods as $method)
                            <label class="fm-checkout-payment-option {{ $selectedPaymentMethod === $method['key'] ? 'is-selected' : '' }}">
                                <input type="radio" name="payment_method" value="{{ $method['key'] }}" @checked($selectedPaymentMethod === $method['key'])>
                                <span>
                                    @if(!empty($method['logo']))
                                        <img src="{{ $method['logo'] }}" alt="{{ $method['name'] }}">
                                    @elseif($method['icon'] === 'wallet')
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round">
                                            <path d="M3 7h18v13H3zM16 12h5v4h-5zM3 7l3-4h12l3 4"/>
                                        </svg>
                                    @elseif($method['icon'] === 'cash')
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M3 6h18v12H3zM7 10h.01M17 14h.01M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/>
                                        </svg>
                                    @else
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round">
                                            <path d="M3 6h18v12H3zM3 10h18"/>
                                        </svg>
                                    @endif
                                </span>
                                <b>{{ $method['name'] }}</b>
                                <small>{{ $method['subtitle'] }}</small>
                            </label>
                        @endforeach
                    </div>
                </section>

                {{-- BILL DETAILS --}}
                <section class="fm-checkout-card fm-checkout-bill">
                    <div class="fm-checkout-section-title">
                        <h2>Bill Details</h2>
                    </div>
                    <dl>
                        <div><dt>Item total</dt><dd data-summary-amount="subtotal">{{ \App\Support\StorefrontPresenter::money($subtotal) }}</dd></div>
                        @if($comboDiscount > 0)
                            <div class="is-green"><dt>Bundle savings</dt><dd>-{{ \App\Support\StorefrontPresenter::money($comboDiscount) }}</dd></div>
                        @endif
                        <div class="is-green" data-coupon-row @if($couponDiscount <= 0) hidden @endif>
                            <dt>Coupon savings</dt>
                            <dd data-summary-amount="coupon_discount_total">-{{ \App\Support\StorefrontPresenter::money($couponDiscount) }}</dd>
                        </div>
                        @if($discount > 0 && $comboDiscount <= 0 && $couponDiscount <= 0)
                            <div class="is-green"><dt>Discount</dt><dd>-{{ \App\Support\StorefrontPresenter::money($discount) }}</dd></div>
                        @endif
                        <div><dt>Delivery fee</dt><dd data-summary-amount="delivery_fee">{{ $deliveryFee > 0 ? \App\Support\StorefrontPresenter::money($deliveryFee) : 'FREE' }}</dd></div>
                        <div><dt>Platform fee</dt><dd data-summary-amount="platform_fee">{{ $platformFee > 0 ? \App\Support\StorefrontPresenter::money($platformFee) : 'FREE' }}</dd></div>
                        <div data-tax-row @if($taxTotal <= 0) hidden @endif>
                            <dt>Taxes</dt>
                            <dd data-summary-amount="tax_total">{{ \App\Support\StorefrontPresenter::money($taxTotal) }}</dd>
                        </div>
                        <div class="is-total"><dt>To pay</dt><dd data-summary-amount="payable_amount">{{ \App\Support\StorefrontPresenter::money($payableAmount) }}</dd></div>
                    </dl>
                </section>

                {{-- POLICY --}}
                <section class="fm-checkout-policy">
                    <strong>Cancellation policy</strong>
                    <p>Help us avoid food and inventory waste. Orders may be non-refundable once the store accepts them.</p>
                </section>

                {{-- BOTTOM BAR --}}
                <footer class="fm-checkout-bottom-bar">
                    <button type="button" class="fm-payment-preview" data-payment-preview>
                        <span>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round">
                                <path d="M3 6h18v12H3zM3 10h18"/>
                            </svg>
                        </span>
                        <b data-payment-preview-title>{{ data_get($selectedPayment, 'name', 'Online Payment') }}</b>
                        <small data-payment-preview-subtitle>{{ data_get($selectedPayment, 'subtitle', 'UPI, cards and netbanking') }}</small>
                        <em>›</em>
                    </button>
                    <button type="submit" class="fm-place-order" data-place-order-button>
                        Continue with {{ \App\Support\StorefrontPresenter::money($payableAmount) }}
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="9 18 15 12 9 6"/>
                        </svg>
                    </button>
                </footer>
            </form>
        @endif
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    'use strict';

    const form = document.querySelector('[data-app-checkout-form]');
    if (!form) return;

    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

    // ==========================================
    // TOAST
    // ==========================================
    function showToast(message, type = 'info', duration = 3000) {
        const container = document.getElementById('toast-container');
        if (!container) {
            const newContainer = document.createElement('div');
            newContainer.id = 'toast-container';
            document.body.appendChild(newContainer);
            return showToast(message, type, duration);
        }
        const toast = document.createElement('div');
        toast.className = `toast ${type}`;
        const icons = { success: 'fa-check-circle', error: 'fa-exclamation-circle', warning: 'fa-triangle-exclamation', info: 'fa-info-circle' };
        toast.innerHTML = `
            <i class="fas ${icons[type] || icons.info}"></i>
            <span>${message}</span>
            <button onclick="this.closest('.toast').remove()"><i class="fas fa-times"></i></button>
        `;
        container.appendChild(toast);
        requestAnimationFrame(() => toast.classList.add('show'));
        setTimeout(() => { toast.classList.remove('show'); setTimeout(() => toast.remove(), 400); }, duration);
    }

    window.showToast = showToast;

    // ==========================================
    // MONEY FORMAT
    // ==========================================
    function fmCheckoutMoney(form, amount) {
        const symbol = form?.dataset.currencySymbol || '₹';
        const decimals = Number.parseInt(form?.dataset.currencyDecimals || '2', 10);
        return symbol + Number(amount || 0).toFixed(decimals);
    }

    function updateCheckoutAddress(locationName, lat = '', lng = '', addressId = '') {
        const addressTextarea = document.querySelector('[data-address-textarea]');
        const locationDisplay = document.querySelector('#deliveryLocationDisplay');
        const latInput = document.querySelector('[name="delivery_lat"]');
        const lngInput = document.querySelector('[name="delivery_lng"]');
        const addressIdField = document.querySelector('[data-delivery-address-id]');

        if (addressTextarea && locationName) addressTextarea.value = locationName;
        if (locationDisplay && locationName) locationDisplay.textContent = locationName;
        if (latInput) latInput.value = lat || '';
        if (lngInput) lngInput.value = lng || '';
        if (addressIdField) addressIdField.value = addressId || '';
    }

    function googleReverseGeocode(lat, lng) {
        if (!window.google?.maps?.Geocoder) {
            return Promise.resolve('');
        }

        return new Promise((resolve) => {
            const geocoder = new google.maps.Geocoder();
            geocoder.geocode({ location: { lat, lng } }, (results, status) => {
                if (status === google.maps.GeocoderStatus.OK && results?.[0]) {
                    resolve(results[0].formatted_address || '');
                    return;
                }
                resolve('');
            });
        });
    }

    async function lookupCheckoutLocation(lat, lng) {
        const response = await fetch('{{ route('storefront.location.lookup') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            },
            body: JSON.stringify({ latitude: lat, longitude: lng })
        });

        return response.json();
    }

    // ==========================================
    // DETECT LOCATION
    // ==========================================
    async function detectLocation() {
        const detectBtn = document.querySelector('[data-detect-location]');
        if (!detectBtn) return;

        if (!navigator.geolocation) {
            showToast('Geolocation is not supported by your browser', 'warning');
            return;
        }

        detectBtn.classList.add('is-detecting');
        detectBtn.innerHTML = 'Detecting...';

        navigator.geolocation.getCurrentPosition(
            async (position) => {
                const lat = position.coords.latitude;
                const lng = position.coords.longitude;

                try {
                    const [googleAddress, lookupPayload] = await Promise.all([
                        googleReverseGeocode(lat, lng),
                        lookupCheckoutLocation(lat, lng).catch(() => ({}))
                    ]);
                    const lookup = lookupPayload.data || {};
                    const locationName = googleAddress || lookup.label || lookup.zone?.name || 'Current Location';

                    if (locationName) {
                        updateCheckoutAddress(locationName, lat, lng, lookup.address_id || '');
                        showToast('Location detected successfully!', 'success');
                        await fmRefreshCheckoutSummary();
                    } else {
                        showToast('Could not find your location. Please enter address manually.', 'warning');
                    }
                } catch (error) {
                    showToast('Failed to detect location', 'error');
                }

                detectBtn.classList.remove('is-detecting');
                detectBtn.innerHTML = `
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;">
                        <circle cx="12" cy="12" r="3"/>
                        <path d="M22 12h-4M6 12H2M12 22v-4M12 6V2M20 20l-2-2M4 4l2 2M20 4l-2 2M4 20l2-2"/>
                    </svg>
                    Detect
                `;
            },
            () => {
                showToast('Unable to get your location. Please enter address manually.', 'error');
                detectBtn.classList.remove('is-detecting');
                detectBtn.innerHTML = `
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;">
                        <circle cx="12" cy="12" r="3"/>
                        <path d="M22 12h-4M6 12H2M12 22v-4M12 6V2M20 20l-2-2M4 4l2 2M20 4l-2 2M4 20l2-2"/>
                    </svg>
                    Detect
                `;
            }
        );
    }

    // ==========================================
    // REFRESH SUMMARY
    // ==========================================
    async function fmRefreshCheckoutSummary() {
        if (!form?.dataset.summaryUrl) return;

        try {
            const response = await fetch(form.dataset.summaryUrl, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': form.querySelector('input[name="_token"]')?.value || '',
                    'Accept': 'application/json',
                },
                body: new FormData(form),
                credentials: 'same-origin',
            });
            const payload = await response.json().catch(() => ({}));
            if (!response.ok || !payload.success) return;

            const summary = payload.data?.summary || {};
            const setAmount = (key, value, zeroLabel = null, prefix = '') => {
                const node = document.querySelector(`[data-summary-amount="${key}"]`);
                if (!node) return;
                const numeric = Number(value || 0);
                node.textContent = numeric <= 0 && zeroLabel ? zeroLabel : prefix + fmCheckoutMoney(form, numeric);
            };

            setAmount('subtotal', summary.subtotal);
            setAmount('delivery_fee', summary.delivery_fee, 'FREE');
            setAmount('platform_fee', summary.platform_fee, 'FREE');
            setAmount('tax_total', summary.tax_total);
            setAmount('payable_amount', summary.payable_amount);
            setAmount('coupon_discount_total', summary.coupon_discount_total, null, '-');

            const couponRow = document.querySelector('[data-coupon-row]');
            if (couponRow) couponRow.hidden = Number(summary.coupon_discount_total || 0) <= 0;
            const taxRow = document.querySelector('[data-tax-row]');
            if (taxRow) taxRow.hidden = Number(summary.tax_total || 0) <= 0;

            const placeOrder = document.querySelector('[data-place-order-button]');
            if (placeOrder) {
                placeOrder.innerHTML = `Continue with ${fmCheckoutMoney(form, summary.payable_amount)} <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4"/></svg>`;
            }

            const savingsText = document.querySelector('[data-savings-text]');
            const discount = Number(summary.coupon_discount_total || 0) + Number(summary.combo_discount_total || 0);
            if (savingsText) {
                savingsText.textContent = discount > 0 ? `You saved ${fmCheckoutMoney(form, discount)} on this order` : 'Apply coupons and save more on this order';
            }

            if (summary.eta) {
                const estimateEl = document.querySelector('[data-delivery-estimate]');
                const estimateLabelEl = document.querySelector('[data-delivery-estimate-label]');
                if (estimateEl && summary.eta.eta_range) {
                    estimateEl.textContent = summary.eta.eta_range;
                }
                if (estimateLabelEl && summary.eta.eta_range) {
                    estimateLabelEl.textContent = summary.eta.eta_range;
                }
            }
        } catch (error) {
            // Silent fail
        }
    }

    function setCheckoutSubmitting(isLoading, label = 'Processing...') {
        const submitButton = document.querySelector('[data-place-order-button]');
        if (!submitButton) return;
        submitButton.disabled = isLoading;
        if (isLoading) {
            submitButton.dataset.originalHtml = submitButton.dataset.originalHtml || submitButton.innerHTML;
            submitButton.textContent = label;
        } else if (submitButton.dataset.originalHtml) {
            submitButton.innerHTML = submitButton.dataset.originalHtml;
            delete submitButton.dataset.originalHtml;
        }
    }

    function handleGatewayPayment(orderId, payment) {
        if (!payment || !payment.provider) {
            showToast('Payment session could not be created.', 'error');
            setCheckoutSubmitting(false);
            return;
        }

        if (payment.redirect_url) {
            window.location.assign(payment.redirect_url);
            return;
        }

        if (payment.provider === 'razorpay') {
            startRazorpayPayment(orderId, payment);
            return;
        }

        if (payment.provider === 'cashfree') {
            startCashfreePayment(orderId, payment);
            return;
        }

        showToast('Unsupported payment gateway: ' + payment.provider, 'error');
        setCheckoutSubmitting(false);
    }

    function startRazorpayPayment(orderId, payment) {
        if (typeof Razorpay === 'undefined') {
            failCheckoutPayment(orderId, 'Razorpay checkout is unavailable right now.');
            return;
        }

        const razorpay = new Razorpay({
            key: payment.key,
            amount: payment.amount,
            currency: payment.currency || 'INR',
            name: payment.name || @js($appName ?? config('app.name', 'HyperLocal')),
            description: payment.description || 'Order payment',
            order_id: payment.order_id,
            prefill: payment.prefill || {},
            theme: payment.theme || {},
            handler: function(response) {
                verifyCheckoutPayment(orderId, {
                    payment_method: 'razorpay',
                    payment_id: response.razorpay_payment_id,
                    razorpay_order_id: response.razorpay_order_id,
                    razorpay_signature: response.razorpay_signature
                });
            },
            modal: {
                ondismiss: function() {
                    failCheckoutPayment(orderId, 'Payment was cancelled before confirmation.');
                }
            }
        });

        razorpay.on('payment.failed', function() {
            failCheckoutPayment(orderId, 'Razorpay payment failed.');
        });
        razorpay.open();
    }

    function startCashfreePayment(orderId, payment) {
        if (typeof Cashfree === 'undefined') {
            failCheckoutPayment(orderId, 'Cashfree checkout is unavailable right now.');
            return;
        }

        if (!payment.payment_session_id || !payment.order_id) {
            failCheckoutPayment(orderId, 'Cashfree payment session was incomplete.');
            return;
        }

        const cashfree = Cashfree({ mode: payment.environment === 'sandbox' ? 'sandbox' : 'production' });
        cashfree.checkout({
            paymentSessionId: payment.payment_session_id,
            redirectTarget: '_modal'
        }).then(function() {
            verifyCheckoutPayment(orderId, {
                payment_method: 'cashfree',
                payment_id: payment.order_id
            });
        }).catch(function() {
            verifyCheckoutPayment(orderId, {
                payment_method: 'cashfree',
                payment_id: payment.order_id
            });
        });
    }

    function verifyCheckoutPayment(orderId, payload, attempt = 0) {
        setCheckoutSubmitting(true, 'Verifying Payment...');
        fetch('{{ route('checkout.payment.verify') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify(Object.assign({ order_id: orderId }, payload)),
            credentials: 'same-origin'
        })
            .then((response) => response.json())
            .then((data) => {
                if (data.success) {
                    showToast('Payment verified successfully!', 'success');
                    window.location.assign(data.redirect_url || '{{ route('storefront.orders.index') }}');
                    return;
                }

                const message = String(data.message || '');
                const shouldRetryCashfree = payload.payment_method === 'cashfree'
                    && (message.includes('not confirmed yet') || message.includes('Unable to verify Cashfree payment'))
                    && attempt < 3;

                if (shouldRetryCashfree) {
                    setTimeout(() => verifyCheckoutPayment(orderId, payload, attempt + 1), 1500);
                    return;
                }

                showToast(data.message || 'Payment verification failed.', 'error');
                setCheckoutSubmitting(false);
            })
            .catch(() => {
                showToast('Payment verification failed. Please contact support if money was debited.', 'error');
                setCheckoutSubmitting(false);
            });
    }

    function failCheckoutPayment(orderId, message) {
        fetch('{{ route('checkout.payment.fail') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify({ order_id: orderId, message }),
            credentials: 'same-origin'
        }).finally(function() {
            showToast(message || 'Payment failed or was cancelled.', 'error');
            setCheckoutSubmitting(false);
        });
    }

    // ==========================================
    // DETECT LOCATION CLICK
    // ==========================================
    document.addEventListener('click', function(event) {
        const detectBtn = event.target.closest('[data-detect-location]');
        if (detectBtn) {
            event.preventDefault();
            detectLocation();
        }
    });

    // ==========================================
    // ORDER TYPE CHANGE
    // ==========================================
    document.addEventListener('click', function(event) {
        const orderTypeButton = event.target.closest('[data-order-type]');
        if (!orderTypeButton) return;

        const tabs = orderTypeButton.closest('[data-order-type-tabs]');
        if (tabs) {
            tabs.querySelectorAll('[data-order-type]').forEach((button) => {
                button.classList.toggle('is-active', button === orderTypeButton);
            });
        }

        const orderType = orderTypeButton.dataset.orderType || 'delivery';
        document.querySelector('[data-order-type-input]').value = orderType;

        const addressSection = document.querySelector('[data-address-section]');
        const takeawayInfo = document.querySelector('[data-takeaway-info]');
        const addressTextarea = document.querySelector('[data-address-textarea]');
        
        if (orderType === 'takeaway') {
            if (addressSection) addressSection.style.display = 'none';
            if (takeawayInfo) takeawayInfo.hidden = false;
            if (addressTextarea) {
                const storeName = document.querySelector('.fm-checkout-store-card h1')?.textContent || 'Store';
                addressTextarea.value = `Takeaway from ${storeName}`;
            }
        } else {
            if (addressSection) addressSection.style.display = 'block';
            if (takeawayInfo) takeawayInfo.hidden = true;
            const savedAddress = document.querySelector('[data-address-id].is-selected');
            if (savedAddress && addressTextarea) {
                addressTextarea.value = savedAddress.dataset.addressLabel || '';
            } else if (addressTextarea && !addressTextarea.value.includes('Takeaway from')) {
                // Keep existing address
            }
        }

        fmRefreshCheckoutSummary();
    });

    // ==========================================
    // SCHEDULE TOGGLE
    // ==========================================
    document.addEventListener('click', function(event) {
        const scheduleButton = event.target.closest('[data-schedule-toggle]');
        if (!scheduleButton) return;

        const field = document.querySelector('[data-schedule-field]');
        const input = document.querySelector('[data-schedule-input]');
        const scheduleText = document.querySelector('[data-schedule-text]');
        const cancelText = document.querySelector('[data-schedule-cancel-text]');
        
        if (field) {
            const isVisible = field.classList.contains('is-visible');
            
            if (isVisible) {
                field.classList.remove('is-visible');
                if (scheduleText) scheduleText.style.display = 'inline';
                if (cancelText) cancelText.style.display = 'none';
                if (input) {
                    input.value = '';
                    document.querySelector('[data-scheduled-time-input]').value = '';
                }
            } else {
                field.classList.add('is-visible');
                if (scheduleText) scheduleText.style.display = 'none';
                if (cancelText) cancelText.style.display = 'inline';
                if (input) {
                    const minDate = new Date();
                    minDate.setMinutes(minDate.getMinutes() + 30);
                    input.min = minDate.toISOString().slice(0, 16);
                    input.focus();
                }
            }
        }
    });

    // ==========================================
    // SCHEDULED TIME CHANGE
    // ==========================================
    document.addEventListener('change', function(event) {
        const input = event.target.closest('[data-schedule-input]');
        if (!input) return;

        const hiddenInput = document.querySelector('[data-scheduled-time-input]');
        if (hiddenInput) {
            hiddenInput.value = input.value || '';
        }
    });

    // ==========================================
    // COUPON
    // ==========================================
    document.addEventListener('click', function(event) {
        const promoButton = event.target.closest('[data-promo-code]');
        if (promoButton) {
            const code = promoButton.dataset.promoCode || '';
            const input = document.querySelector('[data-coupon-input]');
            const hidden = document.querySelector('[data-coupon-code-input]');
            if (input) input.value = code;
            if (hidden) hidden.value = code;
            fmRefreshCheckoutSummary();
        }

        const applyCoupon = event.target.closest('[data-apply-coupon]');
        if (applyCoupon) {
            const input = document.querySelector('[data-coupon-input]');
            const hidden = document.querySelector('[data-coupon-code-input]');
            if (hidden) hidden.value = input?.value || '';
            fmRefreshCheckoutSummary();
        }
    });

    // ==========================================
    // ADDRESS SELECTION
    // ==========================================
    document.addEventListener('click', function(event) {
        const addressButton = event.target.closest('[data-address-id]');
        if (!addressButton) return;

        const hidden = document.querySelector('[data-delivery-address-id]');
        const textarea = document.querySelector('[data-address-textarea]');
        const latInput = document.querySelector('[name="delivery_lat"]');
        const lngInput = document.querySelector('[name="delivery_lng"]');

        document.querySelectorAll('[data-address-id]').forEach((button) => {
            button.classList.toggle('is-selected', button === addressButton);
        });

        if (hidden) hidden.value = addressButton.dataset.addressId || '';
        if (textarea && addressButton.dataset.addressLabel) {
            textarea.value = addressButton.dataset.addressLabel;
        }
        if (latInput && addressButton.dataset.addressLat) {
            latInput.value = addressButton.dataset.addressLat;
        }
        if (lngInput && addressButton.dataset.addressLng) {
            lngInput.value = addressButton.dataset.addressLng;
        }

        const locationDisplay = document.querySelector('#deliveryLocationDisplay');
        if (locationDisplay && addressButton.dataset.addressLabel) {
            locationDisplay.textContent = addressButton.dataset.addressLabel;
        }

        fmRefreshCheckoutSummary();
    });

    // ==========================================
    // LOCATION TRIGGER
    // ==========================================
    document.addEventListener('click', function(event) {
        const locationTrigger = event.target.closest('[data-reference-location-trigger]');
        if (!locationTrigger) return;

        const locationModalTrigger = document.getElementById('locationTrigger') || document.getElementById('desktopLocationTrigger');
        if (locationModalTrigger) {
            locationModalTrigger.click();
            return;
        }

        document.dispatchEvent(new CustomEvent('storefront:open-location-modal'));
    });

    // ==========================================
    // PAYMENT SELECTION
    // ==========================================
    document.addEventListener('change', function(event) {
        const payment = event.target.closest('input[name="payment_method"]');
        if (!payment) return;

        document.querySelectorAll('.fm-checkout-payment-option').forEach((option) => {
            option.classList.toggle('is-selected', option.contains(payment));
        });

        const option = payment.closest('.fm-checkout-payment-option');
        const title = option?.querySelector('b')?.textContent || 'Payment';
        const subtitle = option?.querySelector('small')?.textContent || '';
        const previewTitle = document.querySelector('[data-payment-preview-title]');
        const previewSubtitle = document.querySelector('[data-payment-preview-subtitle]');
        if (previewTitle) previewTitle.textContent = title;
        if (previewSubtitle) previewSubtitle.textContent = subtitle;
    });

    // ==========================================
    // FORM SUBMIT
    // ==========================================
    document.addEventListener('submit', async function(event) {
        const submitForm = event.target.closest('[data-app-checkout-form]');
        if (!submitForm) return;

        event.preventDefault();
        const submitButton = submitForm.querySelector('.fm-place-order');
        const originalLabel = submitButton?.innerHTML;
        let keepSubmittingState = false;

        const orderType = document.querySelector('[data-order-type-input]')?.value || 'delivery';
        
        if (orderType === 'delivery') {
            const address = submitForm.querySelector('[data-address-textarea]')?.value;
            if (!address || address.trim() === '' || address.includes('Takeaway from')) {
                showToast('Please enter a valid delivery address', 'error');
                return;
            }
        }

        const scheduledTime = document.querySelector('[data-scheduled-time-input]')?.value;
        if (scheduledTime) {
            const selectedDate = new Date(scheduledTime);
            const now = new Date();
            if (selectedDate < now) {
                showToast('Please select a future date and time', 'error');
                return;
            }
        }

        const phone = submitForm.querySelector('[name="contact_phone"]')?.value;
        if (!phone || phone.trim() === '') {
            showToast('Please enter your contact number', 'error');
            return;
        }

        setCheckoutSubmitting(true, 'Processing...');

        try {
            const response = await fetch(submitForm.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': submitForm.querySelector('input[name="_token"]')?.value || '',
                    'Accept': 'application/json',
                },
                body: new FormData(submitForm),
                credentials: 'same-origin',
            });

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

            const payload = await response.json().catch(() => ({}));
            if (response.status === 401 || payload.requires_login) {
                showToast(payload.message || 'Please sign in to continue.', 'warning');
                window.location.assign(payload.redirect_url || '{{ route('login') }}');
                return;
            }

            if (response.ok && payload.success) {
                if (payload.requires_payment && payload.payment) {
                    keepSubmittingState = true;
                    showToast('Opening payment...', 'success');
                    handleGatewayPayment(payload.order_id, payload.payment);
                    return;
                }

                showToast('Order placed successfully!', 'success');
                setTimeout(() => {
                    window.location.assign(payload.redirect_url || '{{ route('storefront.orders.index') }}');
                }, 500);
                return;
            }

            showToast(payload.message || 'Unable to place order. Please check address and payment method.', 'error');
        } catch (error) {
            showToast('Unable to place order. Please try again.', 'error');
        } finally {
            if (submitButton && !keepSubmittingState) {
                submitButton.disabled = false;
                submitButton.innerHTML = originalLabel;
                delete submitButton.dataset.originalHtml;
            }
        }
    });

    // ==========================================
    // INIT
    // ==========================================
    // Auto-select saved address if available
    if (document.querySelector('[data-address-id].is-selected')) {
        const selectedAddress = document.querySelector('[data-address-id].is-selected');
        if (selectedAddress) {
            const textarea = document.querySelector('[data-address-textarea]');
            const locationDisplay = document.querySelector('#deliveryLocationDisplay');
            if (textarea && selectedAddress.dataset.addressLabel) {
                textarea.value = selectedAddress.dataset.addressLabel;
            }
            if (locationDisplay && selectedAddress.dataset.addressLabel) {
                locationDisplay.textContent = selectedAddress.dataset.addressLabel;
            }
        }
    }

    fmRefreshCheckoutSummary();

    @if($resumeCheckout ?? false)
        setTimeout(() => {
            showToast('Continuing checkout...', 'info');
            form.requestSubmit();
        }, 700);
    @endif

    // Listen for location updates from layout
    document.addEventListener('storefront:location-updated', function(event) {
        const location = event.detail?.location || '';
        const latitude = event.detail?.latitude || '';
        const longitude = event.detail?.longitude || '';
        updateCheckoutAddress(location, latitude, longitude);
        fmRefreshCheckoutSummary();
    });
});
</script>
@endsection