@extends('front.index')

@section('meta_title')
    {{ trans('front.carts') }}
@endsection
@section('meta_des')
    {{ trans('front.carts') }}
@endsection
@section('meta_key')
    {{ trans('front.carts') }}
@endsection

@section('content')
    <div class="main-content">
        <main class="bg_gray">
            <div class="container margin_30">
                <div class="page_header">
                    <div class="breadcrumbs">
                        <ul>
                            <li><a href="{{ route('front.home') }}">{{ trans('front.home') }}</a></li>

                            <li>{{ trans('front.carts') }}</li>
                        </ul>
                    </div>
                    <h1>{{ trans('front.carts') }}</h1>
                </div>
                <!-- /page_header-->
                <table class="table table-striped cart-list">
                    <thead>
                        <tr>
                            <th>{{ __('front.product') }}</th>
                            <th>{{ trans('front.qty') }}</th>
                            <th>{{ __('front.price') }}</th>
                            <th>{{ __('front.myorders_total') }}</th>
                            <th>#</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if ($orders)
                            @if (count($orders->ProductsAddCart) > 0)
                                @foreach ($orders->ProductsAddCart as $session_item)
                                    <form method="POST"
                                        action="{{ route('front.cart.proceedToCheckOutData', [$orders->id]) }}">
                                        {!! csrf_field() !!}
                                        <tr>
                                            <td>
                                                <div class="thumb_cart">
                                                    <img src="{{ @$session_item->product['image_with_base'] }}"
                                                        data-src="{{ @$session_item->product['image_with_base'] }}"
                                                        alt="{{ @$session_item->product['name'] }}"
                                                        style="width:80px;height:80px;object-fit:cover;">
                                                </div>
                                                <span class="item_cart">{{ @$session_item->product['name'] }}</span>
                                            </td>

                                            <td>
                                                <div class="custom-qty-row">
                                                    <div class="custom-qty-btn custom-qty-dec"
                                                        data-cart-id="{{ $session_item->id }}" data-type="dec">-</div>
                                                    <input class="custom-qty-input" type="text"
                                                        value="{{ $session_item['quantity'] }}"
                                                        id="quantity_{{ $session_item->id }}"
                                                        name="quantity[{{ $session_item['product_id'] }}]"
                                                        data-cart-id="{{ $session_item->id }}"
                                                        data-price="{{ $session_item['price'] }}" readonly>
                                                    <div class="custom-qty-btn custom-qty-inc"
                                                        data-cart-id="{{ $session_item->id }}" data-type="inc">+</div>
                                                </div>
                                                @if (@$session_item->getSpecificTitle->name1 || @$session_item->getSpecificTitleSize->name1)
                                                    <small>{{ @$session_item->getSpecificTitle->name1 }} -
                                                        {{ @$session_item->getSpecificTitleSize->name1 }}</small>
                                                @endif
                                            </td>
                                            <td><strong>{{ $session_item['price'] }} {{ trans('front.KD') }}</strong></td>
                                            <td class="auth-item-total" data-cart-id="{{ $session_item->id }}">
                                                <strong>{{ $session_item['quantity'] * $session_item['price'] }}
                                                    {{ trans('front.KD') }}</strong>
                                            </td>

                                            <td class="options"><a
                                                    href="{{ route('front.cart.deleted', [$session_item->id]) }}"><i
                                                        class="ti-trash"></i></a></td>
                                        </tr>
                                                                        @endforeach
                            @else
                                <th>{{ trans('cart.empty') }}</th>
                            @endif
                        @endif

                    </tbody>
                </table>
                {{-- <div class="row add_top_30 flex-sm-row-reverse cart_actions"> --}}
                {{-- <div class="col-sm-4 text-end"> --}}
                {{-- <button class="btn_1 gray" type="button">Update Cart</button> --}}
                {{-- </div> --}}
                {{-- <div class="col-sm-8"> --}}
                {{-- <div class="apply-coupon"> --}}
                {{-- <div class="form-group"> --}}
                {{-- <div class="row g-2"> --}}
                {{-- <div class="col-md-6"> --}}
                {{-- <input class="form-control" type="text" name="coupon-code" value="" placeholder="Promo code"> --}}
                {{-- </div> --}}
                {{-- <div class="col-md-4"> --}}
                {{-- <button class="btn_1 outline" type="button">Apply Coupon</button> --}}
                {{-- </div> --}}
                {{-- </div> --}}
                {{-- </div> --}}
                {{-- </div> --}}
                {{-- </div> --}}
                {{-- </div> --}}
                <!-- /cart_actions-->
            </div>
            <!-- /container-->
            <div class="box_cart">
                <div class="container">
                    <div class="row justify-content-end">
                        <div class="col-xl-4 col-lg-4 col-md-6">
                            <ul>
                                {{-- <li><span>Subtotal</span>$240.00</li> --}}
                                {{-- <li><span>Shipping</span>$7.00</li> --}}
                                <li><span>@lang('front.taotalsCart') </span>
                                    <div class="full_price">{{ $total }} {{ trans('front.KD') }}</div>
                                </li>
                            </ul>

                            <button class="btn_1 full-width cart" type="submit">@lang('front.Proceedtocheckout')</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /box_cart-->
        </main>
        <!-- /main-->
    </div>

    <style>
        .custom-qty-row {
            display: inline-flex;
            align-items: center;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
        }

        .custom-qty-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            background: #f5f5f5;
            user-select: none;
        }

        .custom-qty-btn:hover {
            background: #e0e0e0;
        }

        .custom-qty-input {
            width: 50px;
            height: 36px;
            text-align: center;
            border: none;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            font-size: 15px;
            background: #fff;
        }
    </style>
    <script>
        document.addEventListener('click', function(e) {
            var btn = e.target.closest('.custom-qty-btn');
            if (!btn) return;

            var cartId = btn.getAttribute('data-cart-id');
            var type = btn.getAttribute('data-type');
            var qtyInput = document.getElementById('quantity_' + cartId);
            if (!qtyInput) return;
            var currentQty = parseInt(qtyInput.value) || 0;
            var newQty = (type === 'inc') ? currentQty + 1 : currentQty - 1;
            if (newQty < 1) return;

            // Instant client-side update
            qtyInput.value = newQty;
            var price = parseFloat(qtyInput.getAttribute('data-price'));
            var itemTotal = (newQty * price).toFixed(3);
            var totalCell = document.querySelector('td.auth-item-total[data-cart-id="' + cartId + '"]');
            if (totalCell) totalCell.innerHTML = '<strong>' + itemTotal + ' {{ trans('front.KD') }}</strong>';

            // Recalculate grand total
            var grandTotal = 0;
            document.querySelectorAll('input.custom-qty-input').forEach(function(inp) {
                var q = parseInt(inp.value) || 0;
                var p = parseFloat(inp.getAttribute('data-price'));
                grandTotal += q * p;
            });
            var fullPriceEl = document.querySelector('.full_price');
            if (fullPriceEl) fullPriceEl.textContent = grandTotal.toFixed(3) + ' {{ trans('front.KD') }}';

            // Save to server via AJAX
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '{{ route('front.auth.updateQty') }}?cart_id=' + cartId + '&qty=' + newQty, true);
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    qtyInput.value = response.qty;
                    var gt = 0;
                    document.querySelectorAll('input.custom-qty-input').forEach(function(inp) {
                        gt += (parseInt(inp.value) || 0) * parseFloat(inp.getAttribute('data-price'));
                    });
                    if (fullPriceEl) fullPriceEl.textContent = gt.toFixed(3) + ' {{ trans('front.KD') }}';
                }
            };
            xhr.send();
        });
    </script>

@endsection