@extends('frontend::layouts.master')

@php
$assetPath = 'frontend_assets';
$langCode = session('lang_code', 'en');
@endphp

<script>
    window.pageName = 'cart';
    window.freeShippingThreshold = @json($currentCountry -> free_order_threshold_value ?? 0);
    window.cartTotalAmount = @json($totalAmountAfterDiscount ?? 0);
</script>

@section('content')
    @if(!(session('stripe_success') || session('stripe_cancel')))
    <div class="container-fluid px-2 px-lg-5">
        <div class="main-header-bar">
            <a href="javascript:history.back()" class="back-btn">
                <img src="{{ asset($assetPath . '/icons/back.png') }}">
            </a>
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="py-3">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item item-nav"><a href="{{ url('/') }}"
                            data-translate="home">{{ webTrans('home', 'cart') }}</a></li>
                    <li class="breadcrumb-item item-nav active" aria-current="page" data-translate="cart">
                        {{ webTrans('cart', 'cart') }}
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    @if ($cartItems->total() > 0)
    <div class="container-fluid px-2 px-lg-5 cart-container mt-4 mb-4" @if(session('stripe_success') || session('stripe_cancel')) style="display:none;" @endif>
        <div class="row g-4">
            <div class="col-md-8">
                <h1 class="section-title" data-translate="products">{{ webTrans('products', 'cart') }}</h1>

                <div class="product-scroll-container">
                    @foreach ($cartItems as $item)
                    @php
                    $prod = $item->product;
                    $countryData = $item->country;
                    $variation = $item->variation;

                    // Thumbnail
                    $thumbId = null;
                    if ($variation && $variation->img_id) {
                    $imgIds = explode(',', $variation->img_id);
                    $thumbId = $imgIds[0] ?? null;
                    }
                    if (!$thumbId && $prod) {
                    $thumbId = $prod->thumbnail;
                    }
                    $thumbUrl = $thumbId
                    ? uploadedAsset($thumbId)
                    : asset($assetPath . '/images/image-placeholder.png');

                    // Name
                    $itemName = $prod ? $prod->getTranslation('name', $langCode) : 'Unknown Product';

                    // Pricing
                    $price = 0;
                    $mrp = 0;
                    if ($variation) {
                    $price =
                    $variation->offer_price > 0
                    ? $variation->offer_price
                    : $variation->mrp_price;
                    $mrp = $variation->mrp_price;
                    } elseif ($countryData) {
                    $price =
                    $countryData->offer_price > 0
                    ? $countryData->offer_price
                    : $countryData->mrp_price;
                    $mrp = $countryData->mrp_price;
                    }

                    // Min/Max qty from product_countries
                    $minQty = $countryData->min_qty ?? 1;
                    $maxQty =
                    $countryData->max_qty > 0
                    ? $countryData->max_qty
                    : $countryData->number_of_stock ?? 10;

                    // Variation attribute details
                    $attrDetails = [];
                    if ($variation && $variation->combinations) {
                    foreach ($variation->combinations as $combo) {
                    $attrName = optional($combo->attribute)->getTranslation('name', $langCode);
                    $attrValue = optional($combo->attributeValue)->getTranslation(
                    'attribute_value',
                    $langCode,
                    );
                    $attrCode = optional($combo->attributeValue)->attribute_code;
                    if ($attrName && $attrValue) {
                    $attrDetails[] = [
                    'name' => $attrName,
                    'value' => $attrValue,
                    'code' => $attrCode,
                    ];
                    }
                    }
                    }
                    @endphp

                    <div class="product-card-horizontal row align-items-center p-md-3 mb-3 border-bottom gx-2"
                        id="cart-item-{{ $item->id }}">

                        <div class="col-2 col-md-2">
                            <div class="rounded border w-100 bg-white d-flex align-items-center justify-content-center" style="aspect-ratio: 1/1; overflow: hidden;">
                                <img src="{{ $thumbUrl }}" class="img-fluid w-100 h-100" alt="{{ $itemName }}" 
                                    style="object-fit: cover; max-height: 100%;"
                                    onerror="this.onerror=null;this.src='{{ asset($assetPath . '/images/image-placeholder.png') }}';">
                            </div>
                        </div>

                        <div class="col-7 col-md-6">
                            <h6 class="product-title-cart mb-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $itemName }}" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal;">
                                {{ $itemName }}
                            </h6>

                            @if (!empty($attrDetails))
                            <p class="cart-spec mb-1" style="font-size: 11px;">
                                @foreach ($attrDetails as $i => $attr)
                                {{ $attr['name'] }}: @if ($attr['code'] && str_starts_with($attr['code'], '#'))
                                <span class="dot"
                                    style="background-color: {{ $attr['code'] }}; width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid #cbced4;"></span>@else{{ $attr['value'] }}
                                @endif
                                @if (!$loop->last)
                                &nbsp;
                                @endif
                                @endforeach
                            </p>
                            @endif

                            <div class="d-flex flex-column ">
                                <div class="d-flex align-items-center gap-1 ">
                                    @if ($mrp > $price)
                                    <span class="text-muted text-decoration-line-through small"
                                        style="font-size: 10px;">{{ webFormatPriceWithSymbol($mrp, $currentCountry) }}</span>
                                    @endif
                                    <span class="fw-bold"
                                        style="font-size: 14px;">{{ webFormatPriceWithSymbol($price, $currentCountry) }}</span>

                                    <span class="fw-bold ms-4"
                                        style="font-size: 12px;">{{ webTrans('sub_total', 'cart') }}:
                                        {{ webFormatPriceWithSymbol($price * $item->quantity, $currentCountry) }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-3 col-md-4 text-end mb-3">
                            <div class="mb-4 pb-2">
                                <button class="btn trash-btn p-0 border-0"
                                    onclick="removeFromCart({{ $item->id }})">
                                    <img src="{{ asset($assetPath . '/icons/TrashBinTrash.png') }}"
                                        style="width: 20px;">
                                </button>
                            </div>

                            <div class="qty-wrapper d-inline-flex align-items-center gap-1 gap-md-3">
                                <button class="qty-btn"
                                    onclick="changeCartQty({{ $item->id }}, -1, {{ $item->quantity }}, {{ $minQty }}, {{ $maxQty }})">−</button>
                                <span id="qtyValue-{{ $item->id }}"
                                    class="qty-number">{{ $item->quantity }}</span>
                                <button class="qty-btn"
                                    onclick="changeCartQty({{ $item->id }}, 1, {{ $item->quantity }}, {{ $minQty }}, {{ $maxQty }})">+</button>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                {{-- Pagination --}}
                <div class="pagination-container d-flex justify-content-between align-items-center mt-5 pb-4">
                    <div class="d-flex align-items-center">
                        <span
                            class="pagination-text me-2">{{ webTrans('showing', 'common', 'Showing') }}</span>
                        <div class="per-page-box">{{ $cartItems->perPage() }}</div>
                        <span
                            class="pagination-text ms-2">{{ webTrans('products_per_page', 'common', 'Products per page') }}</span>
                    </div>

                    <div class="d-flex align-items-center">
                        @if ($cartItems->onFirstPage())
                        <span class="nav-arrow disabled"><img
                                src="{{ asset($assetPath . '/icons/gotoprev.png') }}"
                                alt="Previous"></span>
                        @else
                        <a href="{{ $cartItems->previousPageUrl() }}" class="nav-arrow"><img
                                src="{{ asset($assetPath . '/icons/gotoprev.png') }}" alt="Previous"></a>
                        @endif

                        @php
                        $start = max($cartItems->currentPage() - 2, 1);
                        $end = min($start + 4, $cartItems->lastPage());
                        if ($end - $start < 4) {
                            $start=max($end - 4, 1);
                            }
                            @endphp
                            @foreach ($cartItems->getUrlRange($start, $end) as $page => $url)
                            <a href="{{ $url }}"
                                class="page-number-box {{ $page == $cartItems->currentPage() ? 'active' : '' }}">{{ $page }}</a>
                            @endforeach

                            @if ($cartItems->hasMorePages())
                            <a href="{{ $cartItems->nextPageUrl() }}" class="nav-arrow"><img
                                    src="{{ asset($assetPath . '/icons/gotonext.png') }}" alt="Next"></a>
                            @else
                            <span class="nav-arrow disabled"><img
                                    src="{{ asset($assetPath . '/icons/gotonext.png') }}"
                                    alt="Next"></span>
                            @endif
                    </div>
                </div>

            </div>

            <div class="col-md-4 border-start">
                <!-- STEP PROGRESS (hidden until wizard starts) -->
                <div id="wizard-stepper" style="display: none;"
                    class="d-flex align-items-center justify-content-between mb-4 stepper">
                    <div class="step active" id="step-indicator-1">
                        <span class="circle"><img src="{{ asset($assetPath . '/icons/non_tick.png') }}"></span>
                        <span>{{ webTrans('cart', 'cart') }}</span>
                    </div>
                    <div class="step" id="step-indicator-2">
                        <span class="circle"><img src="{{ asset($assetPath . '/icons/Vector2.png') }}"></span>
                        <span>{{ webTrans('address', 'cart') }}</span>
                    </div>
                    <div class="step" id="step-indicator-3">
                        <span class="circle"><img src="{{ asset($assetPath . '/icons/Vector2.png') }}"></span>
                        <span>{{ webTrans('summary', 'cart') }}</span>
                    </div>
                    <div class="step" id="step-indicator-4">
                        <span class="circle"><img src="{{ asset($assetPath . '/icons/Vector2.png') }}"></span>
                        <span>{{ webTrans('payment', 'cart') }}</span>
                    </div>
                </div>

                <!-- ============ STEP 2: ADDRESS ============ -->
                <div id="wizard-step-2" style="display: none;">
                    <h1 class="section-title mb-4">{{ webTrans('address', 'cart') }}</h1>
                    <div id="address-list-container">
                        <!-- Addresses loaded via JS -->
                        <div class="text-center py-3">
                            <div class="spinner-border spinner-border-sm" role="status"></div>
                            <span class="ms-2">{{ webTrans('loading_addresses', 'cart') }}</span>
                        </div>
                    </div>

                    <div class="text-end mb-3">
                        <button class="btn btn-add-new px-4 py-2" onclick="openAddAddressCanvas()">{{ webTrans('add_new', 'cart') }}</button>
                    </div>

                    <button type="button" class="btn btn-continue w-100"
                        onclick="submitAddressStep()">{{ webTrans('continue', 'cart') }}</button>
                </div>

                <!-- ============ STEP 3: SUMMARY (placeholder) ============ -->
                <div id="wizard-step-3" style="display: none;">
                    <h1 class="section-title-2 mb-4">{{ webTrans('summary', 'cart') }}</h1>

                    <div class="offer-container p-4 position-relative mb-4">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div class="d-flex align-items-center gap-2">
                                <div class="offer-icon">
                                    <img src="{{ asset($assetPath . '/icons/TicketSale.png') }}"
                                        alt="Offer Icon">
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    <h6 class="offer-title mb-0">{{ webTrans('offer_available', 'cart') }}</h6>
                                </div>
                            </div>
                            <a href="javascript:void(0)" class="view-offers-link"
                                onclick="openOffersOffcanvas()">{{ webTrans('view_all_offers', 'cart') }}</a>
                        </div>

                        <p class="text-muted small mb-3" id="cart-offer-count-text">&nbsp;</p>

                        <div class="d-flex align-items-center gap-3">
                            <div class="coupon-input-wrapper flex-grow-1">
                                <input type="text"
                                    class="form-control coupon-input {{ $appliedCouponCode ? 'success-tick' : '' }}"
                                    id="cart-coupon-code"
                                    placeholder="{{ webTrans('coupon_code', 'cart') }}" value="{{ $appliedCouponCode ?? '' }}"
                                    {{ $appliedCouponCode ? 'readonly' : '' }}>
                            </div>

                            @if ($appliedCouponCode)
                            <a href="javascript:void(0)" class="view-offers-link-red"
                                onclick="removeAppliedCoupon()">{{ webTrans('remove', 'cart') }}</a>
                            @else
                            <a href="javascript:void(0)" class="view-offers-link"
                                onclick="applyCouponFromInput()">{{ webTrans('apply', 'cart') }}</a>
                            @endif
                        </div>

                        @if ($appliedCouponCode)
                        <div class="mt-3 p-2 rounded" style="background-color: #E6F4EA;  display: inline-block;">
                            <p class="offer-subtext-green m-0 fw-bold d-flex align-items-center gap-2">
                                <img src="{{ asset($assetPath . '/icons/CheckCircle.png') }}" width="14" alt="Applied">
                                {{ (float) $discountPercentage }}% {{ webTrans('offer_applied', 'cart') }}.
                            </p>
                        </div>
                        @endif

                        <div class="offer-watermark"></div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-12 d-flex align-items-center mb-3 mb-md-0">
                            <div class="delivery-icon me-3">
                                <img src="{{ asset($assetPath . '/icons/Box.png') }}" alt="Delivery Box">
                            </div>
                            <div>
                                <p class="text-102 mb-0">{{ webTrans('your_product_will_arrive_within', 'cart') }} {{ $deliveryDays ?? 10 }}
                                    {{ webTrans('bussiness_days')}}</p>
                                <p class="text-103 mb-0 fw-bold">{{ webTrans('estimated_delivery_before', 'cart') }}
                                    {{ $estimatedDeliveryBefore ?? '' }}
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3 cursor-pointer" onclick="openFreeShippingModal()">
                        <div class="col-md-12 d-flex align-items-center">
                            <div class="offer-icon me-3">
                                <img src="{{ asset($assetPath . '/icons/Sale.png') }}" alt="Offer">
                            </div>
                            <div>
                                @if ($currentCountry && $currentCountry->free_order_threshold_value > 0)
                                <p class="offer-title-1 mb-0">{{ webTrans('free_delivery_offer', 'cart') }}</p>
                                <p class="text-102 mb-0">{{ webTrans('free_delivery_above_order_amount', 'cart') }}
                                    {{ webFormatPriceWithSymbol($currentCountry->free_order_delivery_value, $currentCountry) }}
                                </p>
                                @else
                                <p class="offer-title-1 mb-0">{{ webTrans('no_active_offers', 'cart') }}</p>
                                <p class="text-102 mb-0">{{ webTrans('check_back_later_for_offers', 'cart') }}</p>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="summary-card p-4 mt-5">
                        <div class="d-flex justify-content-between mb-3">
                            <span
                                class="summary-text-1">{{ webTrans('total_products', 'cart', 'Total Products') }}</span>
                            <span class="summary-text-2">{{ $totalQuantity }}</span>
                        </div>
                        @foreach ($splitTaxes as $st)
                        <div class="d-flex justify-content-between mb-3">
                            <span class="summary-text-1">{{ $st['label'] }} ({{ $st['percentage'] }})</span>
                            <span class="summary-text-2">{{ webFormatPriceWithSymbol($st['amount'], $currentCountry) }}</span>
                        </div>
                        @endforeach
                        <div class="d-flex justify-content-between mb-3">
                            <span class="summary-text-1">{{ webTrans('sub_total', 'cart', 'Sub Total') }}</span>
                            <span
                                class="summary-text-2">{{ webFormatPriceWithSymbol($subTotal, $currentCountry) }}</span>
                        </div>

                        @if ($appliedCouponCode)
                        <p class="offer-subtext-green mt-3">{{ (float) $discountPercentage }}% {{ webTrans('offer_is_applied', 'cart') }}. {{ webTrans('you_saved', 'cart') }} {{ webFormatPriceWithSymbol($discountAmount, $currentCountry) }}
                        </p>
                        @endif

                        <div class="d-flex justify-content-between mb-4">
                            <span
                                class="summary-text-1">{{ webTrans('total_amount', 'cart', 'Total Amount') }}</span>
                            <span
                                class="summary-text-2 fw-bold">{{ webFormatPriceWithSymbol($totalAmountAfterDiscount, $currentCountry) }}</span>
                        </div>
                        <button type="button" class="btn btn-continue w-100"
                            onclick="submitSummaryStep()">{{ webTrans('continue','cart') }}</button>
                    </div>
                </div>

                <!-- ============ STEP 4: PAYMENT ============ -->
                <div id="wizard-step-4" style="display: none;">
                    <h1 class="section-title-2 mb-4">{{ webTrans('payment','cart') }}</h1>

                    <!-- Delivery info card -->
                    <div class="delivery-card p-3">
                        <div class="delivery-header d-flex align-items-start gap-3 mb-2">
                            <div class="delivery-icon">
                                <img src="{{ asset($assetPath . '/icons/Box2.png') }}" alt="Package Icon">
                            </div>
                            <h6 class="delivery-title fw-bold mb-0" id="payment-delivery-title">{{ webTrans('loading_delivery_info', 'cart') }}...</h6>
                        </div>

                        <div class="delivery-details ms-5" id="payment-address-details">
                            <p class="mb-1">&nbsp;</p>
                        </div>

                        <hr class="my-3 text-light-gray">

                        <div class="delivery-footer">
                            <p class="arrival-text mb-0" id="payment-arrival-text"></p>
                        </div>
                    </div>

                    <!-- Payment gateways -->
                    <div class="payment-method-container mt-3" id="payment-methods-container">
                        <div class="text-center py-3">
                            <div class="spinner-border spinner-border-sm" role="status"></div>
                            <span class="ms-2">{{ webTrans('loading_payment_methods', 'cart') }}...</span>
                        </div>
                    </div>

                    <!-- Total + Pay Now -->
                    <div class="row mt-5">
                        <div class="col-md-12">
                            <div class="summary-card" style="top: 20px;">
                                <div class="d-flex justify-content-between mb-3" id="payment-delivery-row" style="display: none;">
                                    <span class="summary-text-1">{{ webTrans('shipping_charge', 'cart', 'Shipping Charge') }}</span>
                                    <span class="summary-text-2" id="payment-delivery-charge"></span>
                                </div>
                                <div class="d-flex justify-content-between mb-4">
                                    <span class="summary-text-1">{{ webTrans('total_amount', 'cart', 'Total Amount') }}</span>
                                    <span class="summary-text-2 fw-bold" id="payment-total-amount"></span>
                                </div>
                                <button type="button" class="btn btn-continue btn-pay-now w-100" onclick="payNow()">{{ webTrans('pay_now','cart') }}</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ============ DEFAULT: CONTINUE BUTTON (before wizard starts) ============ -->
                <div id="wizard-pre-start">
                    <div class="summary-card p-4 sticky-top" style="top: 20px;">
                        <div class="d-flex justify-content-between mb-3">
                            <span
                                class="summary-text-1">{{ webTrans('total_products', 'cart', 'Total Products') }}</span>
                            <span class="summary-text-2">{{ $totalQuantity }}</span>
                        </div>
                        @foreach ($splitTaxes as $st)
                        <div class="d-flex justify-content-between mb-3">
                            <span class="summary-text-1">{{ $st['label'] }} ({{ $st['percentage'] }})</span>
                            <span class="summary-text-2">{{ webFormatPriceWithSymbol($st['amount'], $currentCountry) }}</span>
                        </div>
                        @endforeach
                        <div class="d-flex justify-content-between mb-3">
                            <span class="summary-text-1">{{ webTrans('sub_total', 'cart', 'Sub Total') }}</span>
                            <span
                                class="summary-text-2">{{ webFormatPriceWithSymbol($subTotal, $currentCountry) }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-4">
                            <span
                                class="summary-text-1">{{ webTrans('total_amount', 'cart', 'Total Amount') }}</span>
                            <span
                                class="summary-text-2 fw-bold">{{ webFormatPriceWithSymbol($totalAmount, $currentCountry) }}</span>
                        </div>
                        <button type="button" class="btn btn-continue w-100"
                            onclick="goToCheckout()">{{ webTrans('continue', 'cart')}}</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
    @else
    <div
        class="order-success-container d-flex flex-column align-items-center justify-content-center text-center p-4">
        <img src="{{ asset($assetPath . '/images/Group498.png') }}" class="img-fluid">
        <div class="order-info-text mt-4 mb-4">
            <p class="no-order-text mb-1">
                {{ webTrans('cart_empty_message', 'cart', 'Your Cart is empty start shopping') }}
            </p>
        </div>
    </div>
    @endif
    @endif

    <!-- ORDER SUCCESS SCREEN (hidden by default, shown via JS or Blade for Stripe) -->
    <div id="order-success-screen" style="{{ session('stripe_success') ? 'display:block;' : 'display:none;' }}">
        <div class="order-success-container d-flex flex-column align-items-center justify-content-center text-center p-4">
            <div id="order-success-lottie" class="mx-auto" style="width: 220px; height: 220px;"></div>
            <img id="order-success-fallback" src="{{ asset($assetPath . '/images/Group498.png') }}" class="img-fluid" style="max-width: 220px; display: none;" alt="Order placed">
            <h2 class="order-status-title mb-3">{{ webTrans('order_has_been_placed', 'cart') }}</h2>
            <div class="order-info-text mt-4 mb-4">
                <p class="mb-1">{{ webTrans('your_order_id_is', 'cart') }}<strong id="success-order-id">{{ session('stripe_success', '') }}</strong></p>
                <p class="mb-1">{{ webTrans('payment_method', 'cart') }}<span id="success-payment-method">{{ session('stripe_success') ? 'PAID VIA STRIPE' : '' }}</span></p>
                <p class="mb-1">{{ webtrans('go_to_order_menu', 'cart') }}</p>
            </div>
            <div class="d-grid gap-3 w-100" style="max-width: 300px;">
                <button class="btn btn-track-order py-2" onclick="window.location.href='{{ route('frontend.profile') }}'">{{ webTrans('track_my_order', 'cart') }}</button>
                <a href="{{ route('frontend.home') }}" class="btn btn-back-home">{{ webTrans('go_to_home') }}</a>
            </div>
        </div>
    </div>

    <!-- ORDER FAILED SCREEN (hidden, shown via JS) -->
    <div id="order-failed-screen" style="display: none;">
        <div class="order-success-container d-flex flex-column align-items-center justify-content-center text-center p-4">
            <img src="{{ asset($assetPath . '/icons/WalletMoney1.png') }}" class="img-fluid">
            <h2 class="order-status-title mb-3">{{ webTrans('order_failed') }}</h2>
            <div class="order-info-text mt-4 mb-4">
                <p class="mb-1">{{ webTrans('order_failed') }}</p>
            </div>
            <div class="d-flex flex-wrap justify-content-center gap-3 w-100">
                <button class="btn btn-go-back px-5 py-2 text-uppercase" onclick="showOrderFailedGoBack()">{{ webTrans('go_back','cart') }}</button>
                <button class="btn btn-try-again px-5 py-2 text-uppercase" onclick="window.location.href='{{ route('frontend.cart') }}'">{{ webTrans('try_again', 'cart') }}</button>
            </div>
        </div>
    </div>

<!-- REMOVE ITEM CONFIRMATION MODAL -->
<div class="modal fade" tabindex="-1" id="removeItemModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content" style="border-radius: 25px;">
            <div class="modal-body text-center p-4 pt-2">
                <img src="{{ asset($assetPath . '/icons/TrashBinTrash.png') }}" style="width: 40px;" class="mb-3">
                <h5 class="fw-bold mb-2">{{ webTrans('remove_item', 'cart')}}</h5>
                <p class="text-muted mb-4">{{ webTrans('are_you_sure_you_want_remove_this_item', 'cart') }}</p>
                <div class="row g-3">
                    <div class="col-6">
                        <button type="button" class="btn btn-continue w-100" id="confirmRemoveBtn">{{ webTrans('remove', 'cart') }}</button>
                    </div>
                    <div class="col-6">
                        <button type="button" class="btn btn-skip w-100" data-bs-dismiss="modal">{{ webTrans('cancel', 'cart')}}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- OFFER OFFCANVAS -->
<div class="offcanvas offcanvas-end custom-offcanvas-width" tabindex="-1" id="offerCanvas">
    <div class="offcanvas-header my-orders-header" style="justify-content:left !important">
        <button type="button" class="my-orders-back-btn" data-bs-dismiss="offcanvas" aria-label="Back">
            <span class="my-orders-back-icon" aria-hidden="true">&#8249;</span>
        </button>
        <h1 class="section-title mb-0" style="margin-left: 10px;">{{ webTrans('offers', 'cart') }}</h1>
    </div>

    <div class="offcanvas-body">
        <div class="offers-list-container" id="offers-list-container">
            <div class="text-center py-3" id="offers-loading" style="display:none;">
                <div class="spinner-border spinner-border-sm" role="status"></div>
                <span class="ms-2">Loading...</span>
            </div>
        </div>
    </div>
</div>
<!-- ADD/EDIT ADDRESS OFFCANVAS -->
<div class="offcanvas offcanvas-end custom-offcanvas-width" tabindex="-1" id="addNewCanvas">
    <div class="offcanvas-header my-orders-header" style="justify-content:left !important">
        <button type="button" class="my-orders-back-btn" data-bs-dismiss="offcanvas" aria-label="Back">
            <span class="my-orders-back-icon" aria-hidden="true">&#8249;</span>
        </button>
        <h1 class="section-title mb-0" id="addressCanvasTitle" style="margin-left: 10px;">{{ webTrans('address', 'cart') }}</h1>
    </div>
    <div class="offcanvas-body">
        <div class="add-address-container">
            <form id="addAddressForm">
                <input type="hidden" id="edit-address-id" value="">
                <input type="hidden" id="original-is-default" value="0">
                <div class="mb-4">
                    <textarea class="form-control address-textarea" id="address-text" placeholder="{{ webTrans('address_without_name', 'cart') }}" rows="4"></textarea>
                </div>

                <div class="d-flex align-items-center justify-content-between mb-4">
                    <div class="d-flex gap-4">
                        <div class="custom-radio-wrapper">
                            <input type="radio" name="addressType" id="addr-type-home" class="address-radio"
                                value="home" checked>
                            <span class="radio-checkmark"></span>
                            <label for="addr-type-home" class="ms-4 ps-1">{{ webTrans('home','cart')}}</label>
                        </div>
                        <div class="custom-radio-wrapper">
                            <input type="radio" name="addressType" id="addr-type-office" class="address-radio"
                                value="office">
                            <span class="radio-checkmark"></span>
                            <label for="addr-type-office" class="ms-4 ps-1">{{ webTrans('office', 'cart')}}</label>
                        </div>
                    </div>
                    <div class="custom-checkbox-container">
                        <input type="checkbox" id="setDefault" class="custom-checkbox-input">
                        <label for="setDefault" class="custom-checkbox-label">
                            <span class="checkbox-box"></span>
                            {{ webTrans('set_as_default', 'cart') }}
                        </label>
                    </div>
                </div>

                <div class="mb-3">
                    <input type="text" class="form-control address-textarea py-3" id="address-landmark"
                        placeholder="{{ webTrans('landmark', 'cart') }}">
                </div>

                <div class="mb-3 position-relative">
                    <select class="form-select address-input py-3" id="address-state"
                        onchange="loadChildLevels(this.value, 'address-city')">
                        <option selected disabled value="">{{ $shippingLevelLabels['level1'] ?? 'State' }}
                        </option>
                    </select>
                </div>

                <div class="mb-3 position-relative @if(isset($activeShippingLevel) && $activeShippingLevel < 2) d-none @endif">
                    <select class="form-select address-input py-3" id="address-city"
                        onchange="loadChildLevels(this.value, 'address-zone')">
                        <option selected disabled value="">{{ $shippingLevelLabels['level2'] ?? 'City' }}
                        </option>
                    </select>
                </div>

                <div class="mb-4 position-relative @if(isset($activeShippingLevel) && $activeShippingLevel < 3) d-none @endif">
                    <select class="form-select address-input py-3" id="address-zone">
                        <option selected disabled value="">{{ $shippingLevelLabels['level3'] ?? 'Zipcode' }}
                        </option>
                    </select>
                </div>

                <button type="button" class="btn btn-continue w-100" onclick="saveAddress()">
                    <span id="address-save-text">{{ webTrans('add_address', 'cart') }}</span>
                </button>
            </form>
        </div>
    </div>
</div>

<!-- ADDRESS DELETE CONFIRMATION MODAL -->
<div class="modal fade" tabindex="-1" id="deleteAddressModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content" style="border-radius: 25px;">
            <div class="modal-body text-center p-4 pt-2">
                <img src="{{ asset($assetPath . '/icons/trash.png') }}" style="width: 40px;" class="mb-3">
                <h5 class="fw-bold mb-2">{{ webTrans('delete_address', 'cart') }}</h5>
                <p class="text-muted mb-4">{{ webTrans('are_you_sure_you_want_to_delete_this_address', 'cart') }}</p>
                <div class="row g-3">
                    <div class="col-6">
                        <button type="button" class="btn btn-continue w-100"
                            id="confirmDeleteAddressBtn">{{ webTrans('delete', 'cart') }}</button>
                    </div>
                    <div class="col-6">
                        <button type="button" class="btn btn-skip w-100" data-bs-dismiss="modal">{{ webTrans('cancel','cart') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    window.shippingLevelLabels = {
        level1: @json($shippingLevelLabels['level1'] ?? 'State'),
        level2: @json($shippingLevelLabels['level2'] ?? 'City'),
        level3: @json($shippingLevelLabels['level3'] ?? 'Zipcode'),
    };
    window.cartActiveShippingLevel = {{ $activeShippingLevel ?? 3 }};

    document.addEventListener('DOMContentLoaded', function() {
        // Allow Enter key to apply coupon
        const couponInput = document.getElementById('cart-coupon-code');
        if (couponInput) {
            couponInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    if (typeof applyCouponFromInput === 'function') {
                        applyCouponFromInput();
                    }
                }
            });
        }
    });
</script>

@include('frontend::home.scripts.cart_scripts')
@include('frontend::home.modals._bundle_modal', ['product' => (object)['is_bundle' => false], 'cartTotal' => $totalAmountAfterDiscount])

@endsection