@php
    $cart = Session::has('cart') ? Session::get('cart') : [];
    $total = 0;
    $option_price = 0;
    $cartTotal = 0;

@endphp

<style>
    /* Shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Apply the shake every 2 seconds */
.shake-button {
    animation: shake 2s ease-in-out infinite;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}

/* Pause briefly between shakes */
.shake-button {
    animation: shake 2s ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
}

/* Optional: subtle hover effect */
.shake-button:hover {
    transform: scale(1.05);
}

</style>

<div class="card">
    <div class="card-header text-center pb-5 text-orange">
        <h2 class="card-title">{{ __('Your Shopping Cart') }}</h2>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-lg-9 col-md-8 col-sm-12 ">
                <div class="table-responsive shopping-cart">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>{{ __('Product Name') }}</th>
                                <th>{{ __('Product Price') }}</th>
                                <th class="text-center">{{ __('Quantity') }}</th>
                                <th class="text-center">{{ __('Subtotal') }}</th>
                                <th class="text-center"><a class="btn btn-sm btn-primary"
                                        href="{{ route('front.cart.clear') }}"><span>{{ __('Clear Cart') }}</span></a>
                                </th>
                            </tr>
                        </thead>

                        <tbody id="cart_view_load" data-target="{{ route('cart.get.load') }}">

                            @foreach ($cart as $key => $item)
                                @php

                                    $cartTotal +=
                                        ($item['main_price'] + $total + $item['attribute_price']) * $item['qty'];
                                @endphp
                                <tr>
                                    <td>
                                        <div class="product-item"><a class="product-thumb"
                                                href="{{ route('front.product', $item['slug']) }}"><img
                                                    src="{{ asset('assets/images/' . $item['photo']) }}"
                                                    alt="Product"></a>
                                            <div class="product-info">
                                                <h4 class="product-title"><a
                                                        href="{{ route('front.product', $item['slug']) }}">
                                                        {{ Str::limit($item['name'], 45) }}

                                                    </a></h4>

                                                @foreach ($item['attribute']['option_name'] as $optionkey => $option_name)
                                                    <span><em>{{ $item['attribute']['names'][$optionkey] }}:</em>
                                                        {{ $option_name }}
                                                        ({{ PriceHelper::setCurrencyPrice($item['attribute']['option_price'][$optionkey]) }})
                                                    </span>
                                                @endforeach
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center text-lg">
                                        {{ PriceHelper::setCurrencyPrice($item['main_price']) }}
                                    </td>

                                    <td class="text-center">
                                        @if ($item['item_type'] == 'normal')
                                            <div class="qtySelector product-quantity">
                                                <span class="decreaseQtycart cartsubclick"
                                                    data-id="{{ $key }}"
                                                    data-target="{{ PriceHelper::GetItemId($key) }}"><i
                                                        class="fas fa-minus"></i></span>
                                                <input type="text" disabled class="qtyValue cartcart-amount"
                                                    value="{{ $item['qty'] }}">
                                                <span class="increaseQtycart cartaddclick"
                                                    data-id="{{ $key }}"
                                                    data-target="{{ PriceHelper::GetItemId($key) }}"
                                                    data-item="{{ implode(',', $item['options_id']) }}"><i
                                                        class="fas fa-plus"></i></span>
                                                <input type="hidden" value="3333" id="current_stock">
                                            </div>
                                        @endif

                                    </td>
                                    <td class="text-center text-lg">
                                        {{ PriceHelper::setCurrencyPrice($item['main_price'] * $item['qty']) }}
                                    </td>

                                    <td class="text-center"><a class="remove-from-cart" id='remove-cart-view'
                                            href="{{ route('front.cart.destroy', $key) }}" data-toggle="tooltip"
                                            title="Remove item"><i class="icon-x"></i></a></td>
                                </tr>


                                <input id="item_id" value="{{ $key }}" type="hidden">

                                <input id="name" value="{{ Str::limit($item['name'], 45) }}" type="hidden">

                                <input id="price" value="{{ PriceHelper::setCurrencyPrice($item['main_price']) }}"
                                    type="hidden">
                            @endforeach


                            <script>
                                item_id = document.getElementById('item_id').value;
                                name = document.getElementById('name').value;
                                price = document.getElementById('price').value;



                                window.dataLayer = window.dataLayer || [];
                                window.dataLayer.push({
                                    'event': 'view_cart',
                                    'ecommerce': {
                                        'currency': "BDT",
                                        'value': '{{ PriceHelper::setCurrencyPrice($cartTotal) }}',
                                        'items': [
                                            @foreach ($cart as $key => $item)
                                                {
                                                    'item_id': '{{ $key }}',
                                                    'item_name': '{{ Str::limit($item['name'], 45) }}',
                                                    'price': '{{ PriceHelper::setCurrencyPrice($item['main_price'] * $item['qty']) }}',
                                                    'quantity': '{{ $item['qty'] }}',
                                                }
                                                @if (!$loop->last)
                                                    ,
                                                @endif
                                            @endforeach
                                        ]
                                    }
                                });
                            </script>

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-12">
                <div class="cart-summary">
                    <h3>{{ __('Cart Summary') }}</h3>
                    <ul class="summary-list">
                        <li class="d-flex justify-content-between">
                            <h6 class="text-muted">{{ __('Total Items') }}:</h6>
                            <h6 class="text-gray-dark">{{ count($cart) }}</h6>
                        </li>
                        <li class="d-flex justify-content-between">
                            <h6 class="text-muted">{{ __('Total Price') }}:</h6>
                            <h6 class="text-gray-dark">{{ PriceHelper::setCurrencyPrice($cartTotal) }}</h6>
                        </li>
                        @if (Session::has('coupon'))
                            <li class="d-flex justify-content-between">
                                <h6 class="text-muted ">{{ __('Discount') }}
                                    ({{ Session::get('coupon')['code']['title'] }}):</h6>
                                <h6 class="text-gray-dark">
                                    {{ PriceHelper::setCurrencyPrice(Session::get('coupon')['discount']) }}</h6>
                            </li>
                        @endif
                    </ul>
                    <div class="column d-flex justify-content-between align-items-center mb-2">
                        <form class="coupon-form d-flex w-100" method="post" id="coupon_form"
                            action="{{ route('front.promo.submit') }}">
                            @csrf
                            <input class="form-control form-control-sm me-2" name="code" type="text"
                                placeholder="{{ __('Coupon code') }}" required>
                            <button class="btn btn-primary btn-sm" type="submit">
                                <span style=" padding: 8px 12px 8px 0px;">{{ __('Apply') }}</span>
                            </button>
                        </form>
                    </div>
                    <p>Taxes and shipping calculated at checkout</p>
                    <!--<div class="form-check mb-3">-->
                    <!--    <input class="form-check-input" type="checkbox" id="agree_terms" required>-->
                    <!--    <label class="form-check-label" for="agree_terms">-->
                    <!--        {{ __('I agree with the') }} <a href="#" target="_blank">{{ __('terms and conditions') }}</a>-->
                    <!--    </label>-->
                    <!--</div>-->

                    <div class="text-center">
                        <a class="btn btn-primary w-100 shake-button" href="{{ route('front.checkout.billing') }}"
                            style="padding:8px 2px;">
                            <span>{{ __('অর্ডার করতে ক্লিক করুন') }}</span>
                        </a>
                    </div>
                    <!--<div class="payment-card py-3 text-center">-->
                    <!--    <p>Guarantee Safe Checkout</p>-->
                    <!--    <img class="" src="{{ asset('/assets/images/credit-cards.png') }}" alt="Payment Methods">-->
                    <!--</div>-->
                </div>
            </div>
        </div>


        <div class="card mt-4">
            <div class="card-body">
                <!-- <div class="shopping-cart-footer">
                    <div class="column">
                        <form class="coupon-form" method="post" id="coupon_form" action="{{ route('front.promo.submit') }}">
                            @csrf
                            <input class="form-control form-control-sm" name="code" type="text"
                                placeholder="{{ __('Coupon code') }}" required>
                            <button class="btn btn-primary btn-sm"
                                type="submit"><span>{{ __('Apply Coupon') }}</span></button>
                        </form>
                    </div>

                    <div class="text-right text-lg column {{ Session::has('coupon') ? '' : 'd-none' }}"><span
                            class="text-muted">{{ __('Discount') }}
                            ({{ Session::has('coupon') ? Session::get('coupon')['code']['title'] : '' }}) : </span><span
                            class="text-gray-dark">{{ PriceHelper::setCurrencyPrice(Session::has('coupon') ? Session::get('coupon')['discount'] : 0) }}</span>
                        <a class="remove-from-cart btn btn-danger btn-sm "
                            href="{{ route('front.promo.destroy') }}" data-toggle="tooltip"
                            title="Remove item"><i class="icon-x"></i></a>
                    </div>

                    <div class="text-right column text-lg"><span class="text-muted">{{ __('Subtotal') }}: </span><span
                            class="text-gray-dark">{{ PriceHelper::setCurrencyPrice($cartTotal - (Session::has('coupon') ? Session::get('coupon')['discount'] : 0)) }}</span>
                    </div>


                </div> -->
                <div class="shopping-cart-footer">
                    <div class="column"><a class="btn btn-primary " href="{{ route('front.catalog') }}"><span><i
                                    class="icon-arrow-left"></i> {{ __('Back to Shopping') }}</span></a></div>

                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).on("click", ".remove-from-cart", function() {

            console.log('removeff');
            // find the parent row (যেখানে hidden input গুলো আছে)
            let row = $(this).closest("tr");

            // hidden input থেকে values নাও
            let itemId = row.find("#item_id").val();
            let name = row.find("#name").val();
            let price = parseFloat(row.find("#price").val());
            let qty = parseInt(row.find("#qty").val()) || 1; // যদি qty hidden input থাকে

            // GA4 remove_from_cart push
            window.dataLayer = window.dataLayer || [];
            window.dataLayer.push({
                'event': 'remove_from_cart',
                'ecommerce': {
                    'currency': "BDT",
                    'value': price * qty,
                    'items': [{
                        'item_id': itemId,
                        'item_name': name,
                        'price': price,
                        'quantity': qty
                    }]
                }
            });

            console.log("GA4 remove_from_cart fired ✅", {
                itemId,
                name,
                price,
                qty
            });
        });
    </script>