@php
    Theme::asset()->container('footer')->remove('ecommerce-checkout-js');
@endphp
{!! Theme::partial('page-header') !!}
<style>
    .cart-form__contents thead th {
    background: #f9fafb;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgb(7, 55, 99);
    vertical-align: middle;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}
.checkout-button{
    border-radius: 10px !important;
    line-height: 0px !important;
}
.cart-summary {
    border: 1px solid #e9ecef;
}

.summary-list li strong {
    color: #333;
    font-weight: 600;
}

.summary-list li:hover {
    background: #f8f9fa;
    border-radius: 8px;
    transition: 0.2s;
}
.product-attributes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 2 equal columns */
    column-gap: 0px;  /* space between columns */
    row-gap: 0px;      /* vertical spacing */
    font-size: 14px;
}

.attribute-item {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}
@media (max-width: 991px) {
    .product-attributes-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}
@media (max-width: 767px) {
    .product-attributes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 500px) {
    .product-attributes-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.box-price {
    display: inline-block !important;
}
.box-price-vertical {
    display: flex !important;
    flex-direction: column;  /* Makes it vertical */
    gap: 8px;                /* Spacing between lines */
}

.box-price-vertical .price {
    font-size: 18px;
    font-weight: bold;
}

.box-price-vertical .price-old {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
}

.discount-badge {
    background: #ff4d4f;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 7px;
    width: fit-content;
    border-radius: 4px;
}

</style>
{{-- <div class="section-box mt-70"></div> --}}
<section class="section-box">
    <div class="container">
        <div class="row cart-page-content py-5 mt-3">
            <div class="col-12">
                <form class="form--shopping-cart cart-form" method="post" action="{{ route('public.cart.update') }}">
                    @csrf
                    @if ($products->isNotEmpty())
                      <div class="table-responsive cart-table-wrapper">
                        <table class="table cart-form__contents table-bordered table-striped" cellspacing="0">
                            <thead>
                                <tr>
                                    <th class="product-thumbnail" width="100"></th>
                                    <th class="product-name">{{ __('Product') }}</th>
                                    <th class="product-price product-md d-md-table-cell d-none">{{ __('Price') }}</th>
                                    {{-- <th class="product-price product-md d-md-table-cell d-none">{{ __('Price') }}</th> --}}
                                    <th class="product-quantity product-md d-md-table-cell d-none">{{ __('Quantity') }}</th>
                                    <th class="product-subtotal product-md d-md-table-cell d-none">{{ __('Total') }}</th>
                                    <th class="product-remove product-md d-md-table-cell d-none"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach(Cart::instance('cart')->content() as $key => $cartItem)
                                    @php
                                        $product = $products->find($cartItem->id);
                                    @endphp

                                    @if (!empty($product))
                                        <tr class="cart-form__cart-item cart_item">
                                            <td class="product-thumbnail">
                                                <input type="hidden" name="items[{{ $key }}][rowId]" value="{{ $cartItem->rowId }}">
                                                <a href="{{ $product->original_product->url }}">
                                                    <img src="{{ RvMedia::getImageUrl($cartItem->options['image'], 'thumb', false, RvMedia::getDefaultImage()) }}" alt="{{ $product->original_product->name }}" class="img-thumbnail">
                                                </a>
                                            </td>
                                            <td class="product-name d-md-table-cell d-block" data-title="{{ __('Product') }}">
                                                <a href="{{ $product->original_product->url }}" class="fw-bold">{{ $product->original_product->name }}</a>
                                                @if (is_plugin_active('marketplace') && $product->original_product->store->id)
                                                    <div class="variation-group">
                                                        <span class="text-secondary">{{ __('Vendor') }}: </span>
                                                        <span class="text-primary ms-1">
                                                            <a href="{{ $product->original_product->store->url }}">{{ $product->original_product->store->name }}</a>
                                                        </span>
                                                    </div>
                                                @endif
                                                <p> <strong>SKU : </strong>{{ $product->original_product->sku }}</p>
                                                <p class="mb-0">
                                                       <small class="d-none">{{ $cartItem->options['attributes'] ?? '' }}</small>
                                                    {{-- @if (!empty($cartItem->options['attributes']))
                                                        @php
                                                            $attributesText = $cartItem->options['attributes'];
                                                            $attributes = [];
                                                            foreach (explode(',', $attributesText) as $attr) {
                                                                if (strpos($attr, ':') !== false) {
                                                                    [$attrKey, $attrValue] = array_map('trim', explode(':', $attr, 2));
                                                                    $attributes[$attrKey] = $attrValue;
                                                                }
                                                            }
                                                        @endphp
                                                        <div class="product-attributes d-flex flex-wrap">
                                                            @foreach($attributes as $attrKey => $attrValue)
                                                                <div class="d-flex gap-1 me-2">
                                                                      <strong>{{ ltrim($attrKey, '(') }}:</strong><span>{{ rtrim($attrValue, ')') }}</span>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    @endif --}}
                                                    @if (!empty($cartItem->options['attributes']))
                                                        @php
                                                            $attributesText = $cartItem->options['attributes'];
                                                            $attributes = [];
                                                            foreach (explode(',', $attributesText) as $attr) {
                                                                if (strpos($attr, ':') !== false) {
                                                                    [$attrKey, $attrValue] = array_map('trim', explode(':', $attr, 2));
                                                                    $attributes[$attrKey] = $attrValue;
                                                                }
                                                            }
                                                        @endphp
                                                        <div class="product-attributes-grid">
                                                            @foreach($attributes as $attrKey => $attrValue)
                                                                <div class="attribute-item">
                                                                      <strong>{{ ltrim($attrKey, '(') }}:</strong><span>{{ rtrim($attrValue, ')') }}</span>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    @endif
                                                </p>

                                                @if (!empty($cartItem->options['options']))
                                                    {!! render_product_options_info($cartItem->options['options'], $product, true) !!}
                                                @endif

                                                @if (!empty($cartItem->options['extras']) && is_array($cartItem->options['extras']))
                                                    @foreach($cartItem->options['extras'] as $option)
                                                        @if (!empty($option['key']) && !empty($option['value']))
                                                            <p class="mb-0">
                                                                <small>{{ $option['key'] }}: <strong> {{ $option['value'] }}</strong></small>
                                                            </p>
                                                        @endif
                                                    @endforeach
                                                @endif
                                            </td>
                                            <td class="product-price product-md d-md-table-cell d-block" data-title="Price">
                                                <div class="box-price">
                                                    <span class="d-md-none title-price">{{ __('Price') }}: </span>
                                                    <span class="quantity">
                                                        <span class="box-price price-amount amount box-price-vertical">
                                                            {{-- <span class="price">{{ format_price($product->front_sale_price_with_taxes) }}</span>
                                                            <span class="price-old @if ($product->front_sale_price === $product->price) d-none @endif">{{ format_price($product->price_with_taxes) }}</span> --}}
                                                            <span class="price">{{ format_price($cartItem->price) }}</span>
                                                            <span class="price-old @if ($cartItem->price >= $product->price) d-none @endif">{{ format_price($product->price_with_taxes) }}</span>
                                                            <span class="discount-per-lable badge bg-danger discount-badge">@if ($cartItem->price < $product->price) {{ number_format((($product->price - $cartItem->price) / $product->price) * 100, 2) }}% <small>Off</small>  @endif</span>
                                                        </span>
                                                    </span>
                                                </div>
                                            </td>
                                            <td class="product-quantity product-md d-md-table-cell d-block" data-title="{{ __('Quantity') }}">
                                                <div class="product-button detail-extralink">
                                                    {!! Theme::partial('ecommerce.product-quantity', compact('product') + [
                                                            'name' => 'items[' . $key . '][values][qty]',
                                                            'value' => $cartItem->qty,
                                                        ]) !!}
                                                </div>
                                            </td>
                                            <td class="product-subtotal product-md d-md-table-cell d-block" data-title="{{ __('Total') }}">
                                                <div class="box-price">
                                                    <span class="d-md-none title-price">{{ __('Total') }}: </span>
                                                    <span class="fw-bold amount">
                                                        <span class="price-current">{{ format_price($cartItem->price * $cartItem->qty) }}</span>
                                                    </span>
                                                </div>
                                            </td>
                                            <td class="product-remove product-md d-md-table-cell d-block">
                                                <a class="fs-4 remove btn remove-cart-item" href="#" style="color: var(--color-primary);"
                                                    data-url="{{ route('public.cart.remove', $cartItem->rowId) }}"
                                                    aria-label="{{ __('Remove this item') }}">
                                                    {{-- <i class="fi fi-rr-delete"></i> --}}
                                                     <i class="fi fi-rr-trash"></i>
                                                    
                                                </a>
                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                      </div>
                    @else
                        <p class="text-center">{{ __('Your cart is empty!') }}</p>
                        
                    @endif
                    @if ($products->isNotEmpty())
                        <div class="actions my-4 pb-4 border-bottom">
                            <div class="actions__button-wrapper row justify-content-between">
                                <div class="col-md-9">
                                    <div class="actions__left d-grid d-md-block gap-2">
                                        <a class="btn btn-secondary btn-p fs-12" href="{{ route('public.products') }}">
                                            {{-- <i class="fi fi-rr-arrow-left"></i> --}}
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 27">
                                                <path fill="currentColor" d="m10 18l-6-6l6-6l1.4 1.45L7.85 11H20v2H7.85l3.55 3.55z"/>
                                            </svg>
                                            {{ __('Continue Shopping') }}
                                        </a>
                                        {{-- <a class="btn btn-secondary p-2 fs-12" href="{{ route('public.index') }}">
                                            <i class="fi fi-rr-home"></i>
                                            </span> {{ __('Back to Home') }}
                                        </a> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-4">
                            {{-- <div class="col-lg-4 col-md-5 col-coupon form-coupon-wrapper py-2">
                                <div class="coupon">
                                    <label class="form-label" for="coupon_code">
                                        <h4>{{ __('Using A Promo Code?') }}</h4>
                                    </label>
                                    <div class="coupon-input input-group my-3">
                                        <input class="form-control coupon-code" type="text" name="coupon_code"
                                            value="{{ old('coupon_code') }}" placeholder="{{ __('Enter coupon code') }}">
                                        <button class="btn btn-primary lh-1 btn-apply-coupon-code" type="button"
                                            data-url="{{ route('public.coupon.apply') }}">{{ __('Apply') }}</button>
                                    </div>
                                </div>
                            </div> --}}
                            <div class="col-lg-8">
                                    <div class="form-group">
                                        <h5 class="mb-3 fw-bold text-primary">{{ __('Order Notes') }}</h5>
                                        <textarea class="form-control" rows="3" placeholder="Notes about your order, e.g. special notes for delivery." name="order_notes" style="min-height: 0px !important;border: 1px solid rgb(220, 220, 220);border-radius: var(--bs-border-radius);height: auto !important;">{{ session('order_notes', '') }}</textarea>
                                        {{-- <button type="submit" class="btn btn-sm btn-secondary mt-2">{{ __('Update Cart') }}</button> --}}
                                    </div>
                                </div>
                            {{-- <div class="col-lg-4 col-md-2"></div> --}}
                            <div class="col-lg-4">
                                {{-- <div class="cart_totals bg-light p-4 rounded">
                                    <h5 class="mb-3">{{ __('Cart totals') }}</h5>
                                    <div class="cart_totals-table">
                                        <div class="cart-subtotal d-flex justify-content-between border-bottom pb-3 mb-3">
                                            <span class="title fw-bold">{{ __('Subtotal') }}:</span>
                                            <span class="amount fw-bold">
                                                <span class="price-current">{{ format_price(Cart::instance('cart')->rawSubTotal()) }}</span>
                                            </span>
                                        </div>
                                        @if (EcommerceHelper::isTaxEnabled())
                                            <div class="cart-subtotal d-flex justify-content-between border-bottom pb-3 mb-3">
                                                <!-- <span class="title fw-bold">{{ __('Tax') }}:</span> -->
                                                <span class="title fw-bold">{{ __('Tax') }}@if (Cart::instance('cart')->rawTax())
                                                        (<small>{{ Cart::instance('cart')->taxClassesName() }}</small>)
                                                    @endif:</span>
                                                <span class="amount fw-bold">
                                                    <span class="price-current">{{ format_price(Cart::instance('cart')->rawTax()) }}</span>
                                                </span>
                                            </div>
                                        @endif
                                        @if ($couponDiscountAmount > 0 && session('applied_coupon_code'))
                                            <div class="cart-subtotal d-flex justify-content-between border-bottom pb-3 mb-3">
                                                <span class="title">
                                                    <span class="fw-bold">{{ __('Coupon code: :code', ['code' => session('applied_coupon_code')]) }}</span>
                                                    <small>
                                                        (<a class="btn-remove-coupon-code text-danger" data-url="{{ route('public.coupon.remove') }}"
                                                        href="#" data-processing-text="{{ __('Removing...') }}">{{ __('Remove') }}</a>)
                                                    </small>
                                                </span>

                                                <span class="amount fw-bold">{{ format_price($couponDiscountAmount) }}</span>
                                            </div>
                                        @endif
                                        @if ($promotionDiscountAmount)
                                            <div class="ps-block__header">
                                                <p>{{ __('Discount promotion') }} <span> {{ format_price($promotionDiscountAmount) }}</span></p>
                                            </div>
                                        @endif
                                        <div class="order-total d-flex justify-content-between pb-3 mb-3">
                                            <span class="title">
                                                <h6 class="mb-0 fw-bold">{{ __('Total') }}</h6>
                                                <small>{{ __('(Shipping fees not included)') }}</small>
                                            </span>
                                            <span class="amount fw-bold fs-6 text-green">
                                                <span class="price-current">{{ ($promotionDiscountAmount + $couponDiscountAmount) > Cart::instance('cart')->rawTotal() ? format_price(0) : format_price(Cart::instance('cart')->rawTotal() - $promotionDiscountAmount - $couponDiscountAmount) }}</span>
                                            </span>
                                        </div>
                                    </div>
                                    @if (session('tracked_start_checkout'))
                                        <div class="proceed-to-checkout">
                                            <div class="d-grid gap-2">
                                                <a class="checkout-button btn btn-primary" href="{{ route('public.checkout.information', session('tracked_start_checkout')) }}">{{ __('Proceed to checkout') }}</a>
                                            </div>
                                        </div>
                                    @endif
                                </div> --}}
                                <div class="cart-summary shadow-sm p-4 rounded-3 bg-white">
                                        <h5 class="mb-4 fw-bold text-primary">Cart Summary</h5>

                                        <ul class="summary-list list-unstyled mb-4">
                                            <li class="d-flex justify-content-between mb-2 pb-2">
                                                <span class="fw-bold text-dark">Subtotal :</span>
                                                <strong>{{ format_price(Cart::instance('cart')->rawSubTotal()) }}</strong>
                                            </li>

                                            @if (EcommerceHelper::isTaxEnabled())
                                                <li class="d-flex justify-content-between mb-3 pb-2 border-bottom mt-0">
                                                    <span class="fw-bold text-dark">
                                                        Tax 
                                                        @if (Cart::instance('cart')->rawTax())
                                                            <small class="fw-bold text-dark">({{ Cart::instance('cart')->taxClassesName() }}) :</small>
                                                        @endif
                                                    </span>
                                                    <strong>{{ format_price(Cart::instance('cart')->rawTax()) }}</strong>
                                                </li>
                                            @endif

                                            {{-- @if ($couponDiscountAmount > 0 && session('applied_coupon_code'))
                                                <li class="d-flex justify-content-between mb-3 pb-2 border-bottom">
                                                    <span>
                                                        <strong>Coupon: {{ session('applied_coupon_code') }}</strong>
                                                        <br>
                                                        <a class="btn-remove-coupon-code text-danger small"
                                                        href="#"
                                                        data-url="{{ route('public.coupon.remove') }}"
                                                        data-processing-text="Removing...">
                                                            Remove
                                                        </a>
                                                    </span>
                                                    <strong class="text-success">{{ format_price($couponDiscountAmount) }}</strong>
                                                </li>
                                            @endif --}}

                                            @if ($promotionDiscountAmount)
                                                <li class="d-flex justify-content-between mb-3 pb-2 border-bottom">
                                                    <span class="fw-bold text-dark">Promotion Discount</span>
                                                    <strong class="text-success">{{ format_price($promotionDiscountAmount) }}</strong>
                                                </li>
                                            @endif
                                        </ul>

                                        <div class="d-flex justify-content-between">
                                            <h6 class="fw-bold text-dark mb-0">Total :</h6>
                                            <h5 class="fw-bold text-success mb-0">
                                                {{ ($promotionDiscountAmount + $couponDiscountAmount) > Cart::instance('cart')->rawTotal() ? 
                                                    format_price(0) : 
                                                    format_price(Cart::instance('cart')->rawTotal() - $promotionDiscountAmount - $couponDiscountAmount) }}
                                            </h5>
                                        </div>

                                        <p class="text-muted small mb-3">(Shipping not included)</p>

                                        @if (session('tracked_start_checkout'))
                                            <a href="{{ route('public.checkout.information', session('tracked_start_checkout')) }}"
                                            class="btn btn-lg btn-primary w-100 checkout-button">
                                           Checkout
                                            </a>
                                        @endif
                                </div>
                            </div>
                        </div>
                    @endif
                </form>

                @if ($crossSellProducts->isNotEmpty())
                    <div class="row align-items-center mb-2 widget-header">
                        <h4 class="col-auto mb-0 py-2">{{ __('Customers who bought this item also bought') }}</h4>
                    </div>

                    @php
                        $crossSellProducts->loadMissing(['productLabels']);
                        if (is_plugin_active('marketplace')) {
                            $crossSellProducts->loadMissing(['store', 'store.slugable']);
                        }
                    @endphp
                    <div class="row mt-40 row-cols-xl-4 row-cols-lg-3 row-cols-md-2 row-cols-sm-2">
                        @foreach($crossSellProducts as $crossSellProduct)
                            <div class="col">
                                {!! Theme::partial('ecommerce.product-item', ['product' => $crossSellProduct]) !!}
                            </div>
                        @endforeach
                    </div>
                @endif

            </div>
        </div>
    </div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function () {

    let timeout;

    const notesField = document.querySelector('textarea[name="order_notes"]');

    if (notesField) {
        notesField.addEventListener('input', function () {

            clearTimeout(timeout);

            timeout = setTimeout(() => {

                fetch('{{ route('public.cart.update') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        order_notes: notesField.value
                    })
                });
            }, 500);
        });
    }

});
</script>