@extends('ecommerce::frontend.layout.main2')

@section('title') {{trans('file.Cart')}} {{ $ecommerce_setting->site_title ?? '' }} @endsection

@section('description') @endsection

@section('content')
<!-- Breadcrumb -->
<br><br><br>
<div class="tf-breadcrumb">
    <div class="container">
        <div class="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
            <div class="tf-breadcrumb-list">
                <a href="{{ url('/') }}" class="text">{{trans('file.Home')}}</a>
                <i class="icon icon-arrow-right"></i>
                <span class="text">{{trans('file.Shop Cart')}}</span>
            </div>
        </div>
    </div>
</div>
<!-- /Breadcrumb -->

<!-- Cart Section -->
<section class="flat-spacing">
    <div class="container">
        @if(session('total_qty') > 0)
        <div class="tf-page-cart-wrap layout-2">
            <div class="tf-page-cart-item">
                <h5 class="fw-semibold mb-24">Shopping Cart</h5>
                <div class="tf-cart-list">
                    @foreach($cart as $id => $cart_product)
                    @php
                        if($cart_product['variant'] != 0){
                            $variant = implode(' | ', $cart_product['variant']);
                            $true_variant = implode(',', $cart_product['variant']);
                            $id = $cart_product['id'].'-'.implode('-', $cart_product['variant']);
                        }else{
                            $true_variant = 0;
                            $variant = 0;
                            $id = $cart_product['id'];
                        }
                        
                        if($cart_product['image']!==null){
                            $images = explode(',', $cart_product['image']);
                            $cart_product['image'] = $images[0];
                        }
                    @endphp
                    <div class="tf-cart-item single-cart-item-{{$id}}">
                        @php
                            $cartImages = explode(',', $cart_product['image'] ?? '');
                        
                            $cart_main_image = (
                                empty($cart_product['image']) ||
                                $cart_product['image'] === 'zummXD2dvAtI.png' ||
                                empty($cartImages[0])
                            ) ? 'no-image.jpg' : $cartImages[0];
                        @endphp

                        <div class="cart-item-image">
                            <a href="{{ url('product/'.$cart_product['slug'].'/'.$cart_product['id']) }}">
                              <img
                                    class="lazyload"
                                    src="{{ asset('public/images/product/' . $cart_main_image) }}"
                                    alt="{{ $cart_product['name'] }}"
                                >

                            </a>
                        </div>
                        <div class="cart-item-info">
                            <a href="{{ url('product/'.$cart_product['slug'].'/'.$cart_product['id']) }}" class="cart-item-title h4 link">
                                {!! $cart_product['name'] !!}
                            </a>
                            @if($variant != 0)
                            <div class="cart-item-variant text-small text-main-2">({{$variant}})</div>
                            @endif
                            <div class="cart-item-quantity">
                                <div class="input-qty">
                                    <span class="input-group-btn">
                                        <button type="button" class="quantity-left-minus cart-quantity-left-minus" data-id="{{$cart_product['id']}}" data-variant="{{$true_variant}}">
                                            <i class="icon icon-minus"></i>
                                        </button>
                                    </span>
                                    <input type="number" class="input-number" value="{{ $cart_product['qty'] }}" min="1" readonly>
                                    <span class="input-group-btn">
                                        <button type="button" class="quantity-right-plus cart-quantity-right-plus" data-id="{{$cart_product['id']}}" data-variant="{{$true_variant}}">
                                            <i class="icon icon-plus"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="cart-item-price">
                            <div class="cart-price h6">{{$currency->symbol ?? $currency->code}}<span class="amount">{{ number_format($cart_product['total_price'], 2) }}</span></div>
                            <a class="cart-remove-btn remove-from-cart cart" data-id="{{$cart_product['id']}}" data-variant="{{$true_variant}}">
                                <i class="icon icon-close"></i>
                            </a>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="tf-page-cart-footer">
                <div class="tf-cart-footer-inner">
                    <div class="tf-cart-totals-discounts">
                        <h5 class="fw-semibold mb-16">Cart Summary</h5>
                        <div class="tf-cart-total">
                            <div class="tf-cart-total-item">
                                <span class="h6">{{trans('file.Sub Total')}}</span>
                                <span class="h6 text-primary">{{$currency->symbol ?? $currency->code}}<span class="sub_total">{{ number_format($subTotal ?? 0.00, 2) }}</span></span>
                            </div>
                        </div>
                    </div>
                    <div class="tf-cart-checkout">
                        <a href="{{ url('shop') }}" class="tf-btn btn-white animate-btn animate-dark line w-100 justify-content-center mb-3">
                            <i class="icon icon-arrow-left"></i>
                            {{trans('file.Continue Shopping')}}
                        </a>
                        <a href="{{ url('checkout') }}" class="tf-btn animate-btn w-100 justify-content-center">
                            <span>{{trans('file.Proceed to Checkout')}}</span>
                            <i class="icon icon-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        @else
        <div class="tf-page-cart-wrap">
            <div class="box-text_empty type-shop_cart">
                <div class="shop-empty_top">
                    <span class="icon">
                        <i class="icon-shopping-cart-simple"></i>
                    </span>
                    <h3 class="text-emp fw-normal">{{trans('file.No item in your cart')}}</h3>
                    <p class="h6 text-main">
                        Your cart is currently empty. Let us assist you in finding the right product
                    </p>
                </div>
                <div class="shop-empty_bot">
                    <a href="{{ url('shop') }}" class="tf-btn animate-btn">
                        {{trans('file.Continue Shopping')}}
                    </a>
                    <a href="{{ url('/') }}" class="tf-btn style-line">
                        Back to home
                    </a>
                </div>
            </div>
        </div>
        @endif
    </div>
</section>
<!-- /Cart Section -->

<style>
/* Cart Page Styles */
.tf-page-cart-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 992px) {
    .tf-page-cart-wrap.layout-2 {
        grid-template-columns: 2fr 1fr;
    }
}

.tf-cart-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tf-cart-item {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 20px;
    padding: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    align-items: center;
}

@media (max-width: 767px) {
    .tf-cart-item {
        grid-template-columns: 80px 1fr;
        gap: 15px;
    }
    
    .tf-cart-item .cart-item-price {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #e5e5e5;
    }
}

.cart-item-image {
    width: 100px;
    height: 100px;
}

@media (max-width: 767px) {
    .cart-item-image {
        width: 80px;
        height: 80px;
    }
}

.cart-item-image img {
    width: 60%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.cart-item-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cart-item-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.cart-item-variant {
    color: #666;
    font-size: 14px;
}

.cart-item-quantity {
    margin-top: 10px;
}

.input-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
}

.input-qty button {
    width: 36px;
    height: 36px;
    border: none;
    background: #f8f8f8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.input-qty button:hover {
    background: var(--theme-color);
    color: #fff;
}

.input-qty .input-number {
    width: 50px;
    height: 36px;
    border: none;
    text-align: center;
    font-weight: 600;
}

.cart-item-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.cart-price {
    font-weight: 600;
    color: var(--theme-color);
}

.cart-remove-btn {
    cursor: pointer;
    color: #999;
    transition: all 0.3s;
    font-size: 20px;
}

.cart-remove-btn:hover {
    color: #e74c3c;
}

.tf-page-cart-footer {
    position: sticky;
    top: 100px;
}

.tf-cart-footer-inner {
    background: #f8f8f8;
    padding: 30px;
    border-radius: 8px;
}

.tf-cart-totals-discounts {
    margin-bottom: 30px;
}

.tf-cart-total {
    padding: 20px 0;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    margin-top: 20px;
}

.tf-cart-total-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tf-cart-checkout {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.box-text_empty.type-shop_cart {
    text-align: center;
    padding: 80px 20px;
}

.shop-empty_top {
    margin-bottom: 40px;
}

.shop-empty_top .icon {
    font-size: 80px;
    color: #ddd;
    display: block;
    margin-bottom: 20px;
}

.shop-empty_top .icon i {
    font-size: 80px;
}

.shop-empty_bot {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 575px) {
    .shop-empty_bot {
        flex-direction: column;
    }
    
    .shop-empty_bot a {
        width: 100%;
    }
}
</style>
@endsection

@section('script')
<script type="text/javascript">
    "use strict";

    $(document).on('click', '.remove-from-cart.cart', function(e){
        e.preventDefault();
        var id = $(this).data('id');
        var variant = $(this).data('variant');
        var route = "{{ route('removeFromCart') }}";

        $.ajax({
            url: route,
            type:"POST",
            data:{
                product_id: id,
                variant: variant,
                _token: "{{ csrf_token() }}"
            },
            success:function(response){
                console.log(response);
                if(response) {
                    $('.alert').addClass('alert-custom show');
                    $('.alert-custom .message').html(response.success);
                    $('.single-cart-item-'+response.deleted_item).fadeOut(300, function() {
                        $(this).remove();
                    });
                    $('.sub_total').html(response.subTotal.toFixed(2));
                    $('#cart-item-'+response.deleted_item).html('').css('padding', 0);
                    $('.cart-count').html(response.total_qty);

                    if(response.total_qty < 1) {
                        $('.sub_total').html('0.00');
                        $('.shp__cart__wrap').html('<h6 class="mt-3">No item in your cart</h6>');
                        $('.cart-count').html('0');
                        setTimeout(function() {
                            location.reload();
                        }, 1000);
                    }
                    
                    setTimeout(function() {
                        $('.alert').removeClass('show');
                    }, 4000);
                }
            },
        });
    })

    var qty = 0;
    $('.cart-quantity-right-plus').on("click", function(e) {
        e.preventDefault();
        var btn = $(this);
        var id = $(this).data('id');
        var variant = $(this).data('variant');
        var qtyInput = $(this).parent().siblings("input.input-number");
        var qty = parseInt(qtyInput.val());
        var priceElement = $(this).closest('.tf-cart-item').find('.cart-price .amount');
        var currentTotal = parseFloat(priceElement.text().replace(/,/g, ''));
        var unitPrice = currentTotal / qty;
        
        var newQty = qty + 1;
        qtyInput.val(newQty);
        var newTotal = unitPrice * newQty;
        priceElement.text(newTotal.toFixed(2));

        // Update subtotal immediately
        updateSubTotal();

        var route = "{{ route('updateCart') }}";

        $.ajax({
            url: route,
            type:"POST",
            data:{
                product_id: id,
                product_qty: newQty,
                product_variant: variant,
                _token: "{{ csrf_token() }}"
            },
            success:function(response){
                console.log('Response:', response);
                // Update from server response for accuracy
                $('.sub_total').text(parseFloat(response.subTotal).toFixed(2));
                $('.cart-count').text(response.total_qty);
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
                // Revert on error
                qtyInput.val(qty);
                priceElement.text(currentTotal.toFixed(2));
                updateSubTotal();
            }
        });
    });

    $('.cart-quantity-left-minus').on("click", function(e) {
        e.preventDefault();
        var btn = $(this);
        var id = $(this).data('id');
        var variant = $(this).data('variant');
        var qtyInput = $(this).parent().siblings("input.input-number");
        var qty = parseInt(qtyInput.val());
        
        if (qty > 1) {
            var priceElement = $(this).closest('.tf-cart-item').find('.cart-price .amount');
            var currentTotal = parseFloat(priceElement.text().replace(/,/g, ''));
            var unitPrice = currentTotal / qty;
            
            var newQty = qty - 1;
            qtyInput.val(newQty);
            var newTotal = unitPrice * newQty;
            priceElement.text(newTotal.toFixed(2));

            // Update subtotal immediately
            updateSubTotal();

            var route = "{{ route('updateCart') }}";

            $.ajax({
                url: route,
                type:"POST",
                data:{
                    product_id: id,
                    product_qty: newQty,
                    product_variant: variant,
                    _token: "{{ csrf_token() }}"
                },
                success:function(response){
                    console.log('Response:', response);
                    // Update from server response for accuracy
                    $('.sub_total').text(parseFloat(response.subTotal).toFixed(2));
                    $('.cart-count').text(response.total_qty);
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    // Revert on error
                    qtyInput.val(qty);
                    priceElement.text(currentTotal.toFixed(2));
                    updateSubTotal();
                }
            });
        }
    });

    // Function to update subtotal
    function updateSubTotal() {
        var sub_total = 0;
        $(".cart-price .amount").each(function() {
            var value = parseFloat($(this).text().replace(/,/g, ''));
            if(!isNaN(value)) {
                sub_total += value;
            }
        });
        console.log('Updating subtotal to:', sub_total.toFixed(2));
        $('.sub_total').text(sub_total.toFixed(2));
    }
</script>
@endsection