@extends('frontEnd.layouts.master')
{{-- @section('title', $details->name) --}}

@section('content')
    <main class="container">

        <section class="cart-main">
            <div class="container-fluid">

                <div class="row cartPageBody">
                    @include('frontEnd.layouts.ajax.cart_page_body')
                </div>

            </div>
        </section>
    </main>
    <style>
        /* Cart Table Styling */
        .cart-card {
            border: none;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            border-radius: 12px;
        }

        .table thead th {
            background-color: #f8f9fa;
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: 0.5px;
            font-weight: 600;
            color: #6c757d;
            padding: 15px;
        }

        .td-product-name {
            font-weight: 500;
            color: #333;
            text-decoration: none;
        }

        .td-product-name:hover {
            color: #0d6efd;
        }

        /* Custom Stepper */
        .qty-stepper {
            display: flex;
            align-items: center;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            overflow: hidden;
            width: fit-content;
            margin: 0 auto;
        }

        .qty-stepper button {
            background: #f8f9fa;
            border: none;
            padding: 5px 12px;
            cursor: pointer;
            transition: 0.2s;
        }

        .qty-stepper button:hover {
            background: #e9ecef;
        }

        .qty-input {
            width: 45px;
            text-align: center;
            border: none;
            border-left: 1px solid #dee2e6;
            border-right: 1px solid #dee2e6;
            font-weight: 600;
            font-size: 14px;
        }

        .btn-remove-item {
            color: #dc3545;
            background: none;
            /* border: none; */
            font-size: 12px;
            cursor: pointer;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 5.4px 10px;
        }

        .btn-remove-item:hover {
            color: white;
            background: #dc3545;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <script>
        //cart body
        function loadCartPageBody() {
            $.ajax({
                url: "{{ route('cart.page.body') }}",
                type: "GET",
                cache: false, 
                success: function(res) {
                    $(".cartPageBody").html(res);
                }
            });
        }

        //cart remove
        $(document).on("click", ".cart_item_remove", function(e) {
            e.preventDefault();

            let rowId = $(this).data("id");

            $.ajax({
                url: "{{ route('cart.remove') }}",
                type: "GET",
                data: {
                    rowId: rowId
                },
                success: function(res) {
                    // update cart count
                    // console.log(res);
                    $("#cart_count").text(res.cart_count);
                    if ($('#cart_count').length) {
                        $('#cart_count').text(res.cart_count);
                    }

                    // reload cart body
                    loadCartPageBody();

                    toastr.success('Item removed');
                },
                error: function() {
                    toastr.error('Something went wrong');
                }
            });
        });

        // $(".cart_increment").on("click", function () {
        $(document).on("click", ".cart_page_increment", function(e) {
            var id = $(this).data("id");
            if (id) {
                $.ajax({
                    type: "GET",
                    data: {
                        id: id
                    },
                    url: "{{ route('cart.increment') }}",
                    success: function(res) {
                        $("#cart_count").text(res.cart_count);
                        if ($('#cart_count').length) {
                            $('#cart_count').text(res.cart_count);
                        }

                        // reload cart body
                        loadCartPageBody();
                    },
                });
            }
        });

        // $(".cart_decrement").on("click", function () {
        $(document).on("click", ".cart_page_decrement", function(e) {
            console.log("decrement");
            var id = $(this).data("id");
            if (id) {
                $.ajax({
                    type: "GET",
                    data: {
                        id: id
                    },
                    url: "{{ route('cart.decrement') }}",
                    success: function(res) {
                        $("#cart_count").text(res.cart_count);
                        if ($('#cart_count').length) {
                            $('#cart_count').text(res.cart_count);
                        }

                        // reload cart body
                        loadCartPageBody();
                    },
                });
            }
        });
    </script>
    
    @push('datalayerScripts') {{-- Jodi apnar master layout e @stack('scripts') thake --}}
        <script>
            // DataLayer define kora jate GTM prothomei pay
            window.dataLayer = window.dataLayer || [];

            window.dataLayer.push({
                'ecommerce': null // Clear the previous ecommerce object
            });

            window.dataLayer.push({
                'event': "view_cart",
                'ecommerce': {
                    'currency': "BDT",
                    'value': {{ (float) str_replace(',', '', Cart::instance('shopping')->total()) }},
                    'items': [
                        @foreach(Cart::instance('shopping')->content() as $item)
                            {
                                'item_id': "{{ $item->id }}",
                                'item_name': "{{ $item->name }}",
                                'item_variant': "{{ $item->options->size ?? '' }} {{ $item->options->color ?? '' }}",
                                'price': {{ (float) $item->price }},
                                'quantity': {{ (int) $item->qty }},
                                'brand': "{{ $item->brand->name ?? '' }}",
                            },
                        @endforeach
                    ]
                }
            });
        </script>
    @endpush
@endsection