@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>
                        @php $total = 0; @endphp
                        @if (count($guestCart) > 0)
                            @foreach ($guestCart as $cartKey => $item)
                                @php
                                    $productsData = new \App\Model\Products();
                                    $productsData->setConnection('mysql2');
                                    $productObj = $productsData->where('id', $item['product_id'])->first();
                                @endphp
                                <tr>
                                    <td>
                                        <div class="thumb_cart">
                                            <img src="{{ @$productObj->ImageWiteBase }}"
                                                data-src="{{ @$productObj->ImageWiteBase }}"
                                                alt="{{ @$productObj->item_name }}">
                                        </div>
                                        <a href="{{ @$productObj->ForLink }}"><span
                                                class="item_cart">{{ @$productObj->item_name }}</span></a>
                                    </td>
                                    <td>
                                        <div class="custom-qty-row">
                                            <div class="custom-qty-btn guest-qty-btn" data-key="{{ $cartKey }}"
                                                data-action="dec">-</div>
                                            <input class="custom-qty-input" type="text" value="{{ $item['quantity'] }}"
                                                data-key="{{ $cartKey }}" data-price="{{ $item['price'] }}" readonly>
                                            <div class="custom-qty-btn guest-qty-btn" data-key="{{ $cartKey }}"
                                                data-action="inc">+</div>
                                        </div>
                                    </td>
                                    <td><strong>{{ $item['price'] }} {{ trans('front.KD') }}</strong></td>
                                    <td><strong class="item-total"
                                            data-key="{{ $cartKey }}">{{ $item['total_price'] }}
                                            {{ trans('front.KD') }}</strong></td>
                                    <td class="options"><a href="{{ route('front.guest.removeFromCart', [$cartKey]) }}"><i
                                                class="ti-trash"></i></a></td>
                                </tr>
                                @php $total += $item['total_price']; @endphp
                            @endforeach
                        @else
                            <tr>
                                <td colspan="5" class="text-center">{{ trans('cart.empty') }}</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
            <!-- /container-->
            @if (count($guestCart) > 0)
                <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>@lang('front.taotalsCart') </span>
                                        <div class="full_price" id="guest_total">{{ $total }}
                                            {{ trans('front.KD') }}</div>
                                    </li>
                                </ul>

                                <a class="btn_1 full-width cart" href="{{ route('front.guest.checkout') }}"
                                    style="display:block; text-align:center; margin-bottom:10px;">
                                    @lang('front.pay_as_guest')
                                </a>
                                <a class="btn_1 full-width outline" href="{{ route('front.login-register') }}"
                                    style="display:block; text-align:center;">
                                    @lang('front.login_to_checkout')
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <!-- /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('.guest-qty-btn');
            if (!btn) return;

            var key = btn.getAttribute('data-key');
            var action = btn.getAttribute('data-action');
            var input = document.querySelector('input.custom-qty-input[data-key="' + key + '"]');
            if (!input) return;
            var qty = parseInt(input.value) || 0;
            var price = parseFloat(input.getAttribute('data-price'));

            if (action === 'inc') {
                qty += 1;
            } else {
                if (qty > 1) qty -= 1;
            }

            // Instant update
            input.value = qty;
            var newTotal = (qty * price).toFixed(3);
            var itemTotalEl = document.querySelector('strong.item-total[data-key="' + key + '"]');
            if (itemTotalEl) itemTotalEl.innerHTML = newTotal + ' {{ trans('front.KD') }}';

            // 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 gtEl = document.getElementById('guest_total');
            if (gtEl) gtEl.innerHTML = grandTotal.toFixed(3) + ' {{ trans('front.KD') }}';

            // Save to server
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '{{ route('front.guest.updateQty') }}?key=' + encodeURIComponent(key) + '&qty=' + qty,
                true);
            xhr.send();
        });
    </script>
@endsection