@extends('partial.layout')
@section('content')
    <x-toast/>
    <div class="cart__section">
        <div class="container">
            <div class="row">
                <div class="col-12 mb-4 mt-3">
                    <p class="cart-title fw-bold mb-4">سبد خرید شما</p>
                </div>
            </div>

            @if(isset($removedItems) && count($removedItems) > 0)
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="alert alert-warning" role="alert">
                            <h6 class="alert-heading mb-3">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                محصولات زیر به فروش رفته‌اند
                            </h6>
                            <p class="mb-2">برخی از محصولات موجود در سبد خرید شما توسط سایر مشتریان خریداری شده‌اند و از
                                سبد خرید حذف شدند:</p>
                            <ul class="mb-3">
                                @foreach($removedItems as $removedItem)
                                    <li>
                                        <a href="{{route('front.product.show',$removedItem['slug'])}}" target="_blank">
                                            <strong>{{ $removedItem['product_title'] }}</strong>
                                            (کد: {{ $removedItem['product_code'] }})
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                            <p class="mb-0">
                                <small>لطفاً برای خرید این محصولات، دوباره به صفحه محصول مراجعه کرده و محصول موجود را
                                    انتخاب کنید.</small>
                            </p>
                        </div>
                    </div>
                </div>
            @endif
            @if($basket && $basket->items->count() > 0)
                <div class="row">
                    <div class="col-12 col-md-8">
                        <div class="cart-items">
                            <!-- Cart Item -->
                            @foreach($basket->items as $item)
                                <div class="cart-item  bg-white  p-4 mb-4">
                                    <div class="row align-items-center g-4">
                                        <div class="col-lg-3 col-md-3 col-sm-4">
                                            <a href="{{route('front.product.show',isset($item->product) ?  $item->product->slug : "")}}">
                                                @if(count($item->product->attachments) > 0)
                                                    <img class="primary__image__cart"
                                                         src="{{ asset('storage/attachments/' . json_decode($item->product->attachments->first()->sizes)->thumbnail) }}"
                                                         alt="{{ $item->product->title }}">
                                                @else
                                                    <img class="primary__image__cart"
                                                         src="/theme/img/banners-temp/2-ordibehesht-400x457.png"
                                                         alt="{{$item->product->title}}">
                                                @endif
                                            </a>
                                        </div>
                                        <div class="col-lg-9 col-md-10 col-sm-8">
                                            <a href="{{route('front.product.show',isset($item->product) ?  $item->product->slug : "")}}">
                                                <h2 class="h5 product-title">{{$item->product->title}}</h2></a>
                                            <p class="text-muted small mb-2">کد {{$item->product->vendor_code}}</p>
                                            @if($item->product->category->title != 'کارت هدیه')
                                                <p class="text-muted small mb-2">وزن
                                                    : {{isset($item->productItem) ? $item->productItem->weight : $item->product->default_weight}}
                                                    گرم</p>
                                                <p class="text-muted small mb-2">رنگ
                                                    : {{$item->product->color->title}}</p>
                                                <p class="text-muted small mb-0">زمان تولید:
                                                    @if($item->product_item_id == null)

                                                        : {{$item->product->time_to_create}}
                                                        روز کاری
                                                    @else
                                                        <span class="text-success"> آماده ارسال</span>
                                                    @endif
                                                </p>
                                            @endif
                                        </div>
                                        <div class="col-3 justify-content-end flex">
                                            <div class="input-group {{$item->product_item_id == null ? 'cart-product-qty' :'cart-product-qty-prd-item' }} ltr justify-content-end">
                                                <button class="btn btn-minus removeCart" onclick="removeCart()"
                                                        data-item-id="{{$item->id}}" type="button">
                                                    <i class="fa-regular fa-trash-can secondary-color"></i>
                                                </button>
                                                @if($item->product_item_id == null)

                                                    <input type="text"
                                                           class="form-control text-center cart-product-count"
                                                           value="{{$item->count}}"
                                                           style="max-width: 70px;"
                                                           max="10"
                                                           autocomplete="off"
                                                    >
                                                    <button class="btn btn-add" type="button">
                                                        <i class="fa fa-plus secondary-color"></i>
                                                    </button>
                                                @endif

                                            </div>
                                        </div>
                                        <div class="col-9 text-lg-end text-center">
                                            @php
                                                // اگر ProductItem دارد، از آن استفاده کن، وگرنه از محصول
                                                $displayPrice = $item->product->product_price;
                                                $displayFinalPrice = $item->product->final_price;
                                                $displayHasDiscount = $item->product->has_discount;
                                                $displayDiscountPercent = $item->product->discount_percent;

                                                if($item->productItem) {
                                                    $displayPrice = $item->productItem->price;
                                                    $displayFinalPrice = $item->productItem->final_price;
                                                    $displayHasDiscount = $item->productItem->has_discount;
                                                    $displayDiscountPercent = $item->productItem->discount_percent ?? 0;
                                                }
                                            @endphp

                                            @if($displayHasDiscount)
                                                <span
                                                    class="text-bold">{{ number_format($displayFinalPrice) }} ریال</span>
                                                <span class="discount-percent">{{ $displayDiscountPercent }}%</span>
                                                <p class="mb-0 discount-price">
                                                    <del>{{ number_format($displayPrice) }}ریال
                                                    </del>
                                                </p>
                                            @else
                                                <span class="text-bold">{{ number_format($displayPrice) }} ریال</span>
                                            @endif
                                        </div>
                                        <div class="col-12"><p class="secondary-color small">هزینه ارسال : وابسته به
                                                آدرس می
                                                باشد.</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="cart-summary  bg-gray  p-2">
                            <div class="row g-4">
                                <div class="col-12">
                                    <div class="card border-0 bg-gray">
                                        <div class="card-body p-2">
                                            <p class="fw-bold mb-2">
                                                مبلغ قابل پرداخت (
                                                <span id="cart-total-count">{{ $basket->basket_total_count }}</span>
                                                ) :
                                                <span
                                                    id="cart-total-final">{{ number_format($basket->total_final_price) }}</span>
                                                ریال
                                            </p>

                                            <p class="secondary-color mb-5 mt-3 {{ $basket->total_discount > 0 ? '' : 'd-none' }}"
                                               id="cart-total-discount-row">
                                                <i class="bi bi-piggy-bank me-1"></i>
                                                سود شما از این خرید :
                                                <span
                                                    id="cart-total-discount">{{ number_format($basket->total_discount) }}</span>
                                                ریال
                                            </p>
                                            @if(\Illuminate\Support\Facades\Auth::guard('customer')->check())
                                                <a href="{{route('basket.TimeAddress')}}">
                                                    <button class="w-100 btn btn-auth btn-block mb-5">
                                                        <i class="bi bi-cart-check me-1"></i>
                                                        ادامه ثبت سفارش
                                                    </button>
                                                </a>
                                            @else
                                                <a href="{{route('customer.login',['basket'=>'true'])}}">
                                                    <button class="w-100 btn btn-auth btn-block mb-5">
                                                        <i class="bi bi-cart-check me-1"></i>
                                                        ادامه ثبت سفارش
                                                    </button>
                                                </a>
                                            @endif
                                        </div>
                                        <div class="mb-0 p-2">
                                            کالاهای موجود در سبد شما ثبت و رزرو نشده‌اند، برای ثبت سفارش مراحل بعدی را
                                            تکمیل کنید
                                        </div>
                                        <div class="d-flex align-items-center mb-3 p-2 mt-3">
                                            <img src="/theme/img/icons/change-warranty.svg" alt="ضمانت تعویض کالا"
                                                 class="ms-2">
                                            <span>یک روز ضمانت تعویض</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            @if(!$basket || $basket->items->count() == 0)
                <div class="row justify-content-center">
                    <div class="col-12 col-md-8 mb-4">
                        <div class="empty-cart-container text-center py-5">
                            <div class="empty-cart-illustration mb-4">
                                <i class="fa-duotone fa-cart-shopping fa-6x text-primary"></i>
                            </div>
                            <h3 class="mb-3 fw-bold">سبد خرید شما خالی است</h3>
                            <p class="text-muted mb-4">برای مشاهده محصولات و افزودن آنها به سبد خرید، به صفحه محصولات
                                مراجعه کنید</p>
                            <div class="empty-cart-actions">
                                <a href="{{ route('allProducts') }}" class="btn btn-primary btn-lg px-5">
                                    <i class="fa-duotone fa-shop me-2"></i>
                                    خرید از فروشگاه
                                </a>
                            </div>
                        </div>
                    </div>
                    @if(!\Illuminate\Support\Facades\Auth::guard('customer')->check())
                        <div class="col-12 col-md-4 mb-4 text-center">
                            <div class="login-prompt-card text-center h-100">
                                <div class="login-prompt-header">
                                    <h4 class="fw-bold mb-0 w-100 text-center">
                                        <div class="w-100">
                                            <i class="fa-duotone fa-left-to-bracket login-icon ms-2"></i>

                                            ورود به حساب کاربری
                                        </div>
                                    </h4>
                                </div>
                                <p class="text-muted mb-0 mt-3">
                                    برای مشاهده محصولاتی که پیش‌تر به سبد
                                    <br>خرید خود اضافه کرده‌اید وارد شوید.
                                </p>
                                <div class="empty-cart-actions mt-5">
                                    <a href="{{route('customer.login', ['basket' => 'true'])}}"
                                       class="btn btn-primary btn-lg px-5">
                                        <i class="fa-duotone fa-left-to-bracket login-icon me-2"></i>
                                        ورود / ثبت نام
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            @endif

            <div class="feture__section sp_bottom_20 mt-2">
                <div class="container">
                    <div class="col-md-12 p-1 pb-3">
                        <div class="row">
                            <div class="col-12 col-md-6 text-center text-md-end p-1">
                                <span class="product-slider-title">در کنارش این محصولات خریداری شده</span>
                            </div>
                        </div>
                    </div>
                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            @foreach($newProducts as $newProduct)
                                <div class="swiper-slide">
                                    <x-front.product.slider-item :product="$newProduct"/>
                                </div>
                            @endforeach
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        (function () {
            const numberFormatter = new Intl.NumberFormat('en-US');

            const formatNumber = (value) => {
                const numericValue = Number(value || 0);
                return numberFormatter.format(Number.isFinite(numericValue) ? numericValue : 0);
            };

            const updateCartSummary = (summary) => {
                if (!summary) {
                    return;
                }

                $('#cart-total-count').text(formatNumber(summary.basket_total_count));
                $('#cart-total-final').text(formatNumber(summary.total_final_price));

                if (summary.total_discount && Number(summary.total_discount) > 0) {
                    $('#cart-total-discount').text(formatNumber(summary.total_discount));
                    $('#cart-total-discount-row').removeClass('d-none');
                } else {
                    $('#cart-total-discount-row').addClass('d-none');
                }

                $('.bigcounter').text(formatNumber(summary.basket_total_count));
            };

            const toggleCartButtonLoading = (button, isLoading) => {
                if (!button || !button.length) {
                    return;
                }

                if (isLoading) {
                    if (!button.data('original-html')) {
                        button.data('original-html', button.html());
                    }
                    button.data('loading', true);
                    button.prop('disabled', true);
                    button.addClass('cart-action-loading');
                    button.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
                } else {
                    const originalHtml = button.data('original-html');
                    if (typeof originalHtml !== 'undefined') {
                        button.html(originalHtml);
                    }
                    button.data('loading', false);
                    button.prop('disabled', false);
                    button.removeClass('cart-action-loading');
                }
            };

            $(document).on('click', '.removeCart', function () {
                const btn = $(this);
                if (btn.data('loading')) {
                    return;
                }

                const itemID = btn.data('item-id');
                const cartItem = btn.closest('.cart-item');
                const countInput = cartItem.find('.cart-product-count');
                const incrementBtn = cartItem.find('.btn-add');

                toggleCartButtonLoading(btn, true);

                if (incrementBtn.length) {
                    incrementBtn.prop('disabled', true);
                }

                $.ajax({
                    url: "{{ route('basket.destroy') }}",
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        itemID: itemID
                    },
                    success: function (data) {
                        showAlert({type: 'success', message: data.message});

                        const responseData = data.data || {};

                        if (responseData.removed) {
                            cartItem.addClass('cart-item-removing');
                            cartItem.slideUp(200, function () {
                                $(this).remove();
                                if (responseData.basket_summary && Number(responseData.basket_summary.basket_total_count) === 0) {
                                    window.location.reload();
                                }
                            });
                        } else if (countInput.length && typeof responseData.remaining_count !== 'undefined') {
                            countInput.val(responseData.remaining_count);
                        }

                        updateCartSummary(responseData.basket_summary);
                    },
                    error: function () {
                        showAlert({type: 'danger', message: 'خطا در حذف از سبد خرید'});
                    },
                    complete: function () {
                        if ($.contains(document, btn[0])) {
                            toggleCartButtonLoading(btn, false);
                        }
                        if (incrementBtn.length && $.contains(document, incrementBtn[0])) {
                            incrementBtn.prop('disabled', false);
                        }
                    }
                });
            });

            $(document).on('click', '.cart-item .btn-add', function () {
                const btn = $(this);
                if (btn.data('loading')) {
                    return;
                }

                const itemContainer = btn.closest('.cart-item');
                const itemID = itemContainer.find('.removeCart').data('item-id');
                const countInput = itemContainer.find('.cart-product-count');
                const removeBtn = itemContainer.find('.removeCart');
                const previousCount = parseInt(countInput.val(), 10) || 0;
                const newCount = previousCount + 1;

                countInput.val(newCount);

                toggleCartButtonLoading(btn, true);

                if (removeBtn.length) {
                    removeBtn.prop('disabled', true);
                }

                $.ajax({
                    url: "{{ route('basket.updateCount') }}",
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        itemID: itemID,
                        count: newCount
                    },
                    success: function (response) {
                        if (response.status === 'success') {
                            showAlert({type: 'success', message: response.message});

                            const responseData = response.data || {};

                            if (typeof responseData.count !== 'undefined') {
                                countInput.val(responseData.count);
                            }

                            updateCartSummary(responseData.basket_summary);
                        } else {
                            countInput.val(previousCount);
                            showAlert({type: response.status || 'danger', message: response.message});
                        }
                    },
                    error: function () {
                        countInput.val(previousCount);
                        showAlert({type: 'danger', message: 'خطا در بروزرسانی تعداد محصول.'});
                    },
                    complete: function () {
                        if ($.contains(document, btn[0])) {
                            toggleCartButtonLoading(btn, false);
                        }
                        if (removeBtn.length && $.contains(document, removeBtn[0])) {
                            removeBtn.prop('disabled', false);
                        }
                    }
                });
            });
        })();
    </script>
@endpush

@push('styles')
    <style>
        .cart-action-loading {
            pointer-events: none;
        }

        .cart-action-loading .spinner-border {
            width: 1rem;
            height: 1rem;
        }

        .cart-item-removing {
            opacity: 0.5;
            transition: opacity 0.2s ease;
        }

        .empty-cart-container {
            background: #fff;
            box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.05);
            padding: 4rem 2rem;
            position: relative;
            overflow: hidden;
        }

        .empty-cart-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--secondaryColor), var(--primaryColor));
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
        }

        .empty-cart-illustration {
            position: relative;
            margin-bottom: 2rem;
        }

        .empty-cart-illustration i {
            filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
            animation: float 6s ease-in-out infinite;
            --fa-primary-color: #0E819E;
            --fa-secondary-color: #0e85a3c7;
            --fa-secondary-opacity: 0.8;
        }

        .empty-cart-actions .btn {
            border-radius: 8px;
            padding: 1rem 2.5rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            background: linear-gradient(45deg, var(--primaryColor), #6c5ce7);
            border: none;
            box-shadow: 0 5px 15px rgba(108, 92, 231, 0.2);
        }

        .empty-cart-actions .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(108, 92, 231, 0.3);
        }

        .empty-cart-actions .btn:active {
            transform: translateY(-1px);
        }

        .empty-cart-actions .btn i {
            font-size: 1.2em;
            vertical-align: middle;
            --fa-primary-color: #ffffff;
            --fa-secondary-color: #ffffff;
            --fa-secondary-opacity: 0.8;
        }

        /* Login Prompt Card Styles */
        .login-prompt-card {
            background-color: #fff;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            padding: 2.5rem 2rem;
            width: 100%;
            /* max-width: 450px; */ /* Removed to allow column to dictate width */
            /* margin-top: 2rem; */ /* Removed, mb-4 on col handles spacing */
            position: relative;
            overflow: hidden;
        }

        .login-prompt-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--primaryColor), var(--secondaryColor));
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
        }

        .login-prompt-header {
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid #eee;
            padding-bottom: 1rem;
        }

        .login-prompt-header h4 {
            display: flex;
            align-items: center;
            color: var(--darkColor);
            font-size: 1.5rem;
        }

        .login-prompt-header .login-icon {
            font-size: 2rem;
            color: var(--primaryColor);
            --fa-primary-color: #303030;
            --fa-secondary-color: #ababab;
            --fa-secondary-opacity: 0.9;
        }

        .login-prompt-header .fa-chevron-left {
            color: #999;
            font-size: 1.2rem;
        }

        .login-prompt-card p {
            font-size: 1.1rem;
            line-height: 1.8;
            color: #555;
        }

        .login-prompt-card .btn {
            border-radius: 8px;
            background-color: var(--primaryColor);
            color: #fff;
            padding: 0.8rem 1.5rem;
            font-size: 1.1rem;
            transition: background-color 0.3s ease;
        }

        .login-prompt-card .btn:hover {
            background-color: var(--darkColor);
        }

        @keyframes float {
            0% {
                transform: translateY(0px) rotate(0deg);
            }
            50% {
                transform: translateY(-15px) rotate(2deg);
            }
            100% {
                transform: translateY(0px) rotate(0deg);
            }
        }

        @media (max-width: 768px) {
            .empty-cart-container {
                padding: 3rem 1rem;
            }

            .empty-cart-illustration i {
                font-size: 4rem;
            }

            .login-prompt-card {
                padding: 2rem 1rem;
                margin-top: 1rem; /* Adjust margin for smaller screens */
            }

            .login-prompt-header h4 {
                font-size: 1.3rem;
            }
        }

    </style>
@endpush