@extends('seller.metronik.layout')
@php
    $PaymentMethods = \App\Models\PaymentMethods::where('is_active',1)->where('is_show',1)->where('is_installment',1)->where('id','!=',3)->get();
@endphp
@section('style')
    <style>
        #content {
            overflow: scroll !important;
        }

        /*//gride*/
        .products-container {

            display: flex;

            flex-wrap: wrap;

        }


        .product-item {

            border: 1px solid #ccc; /* حاشیه برای محصولات */

            margin: 10px; /* فاصله بین محصولات */

            padding: 10px; /* فضای داخلی */

            flex: 1 0 200px; /* حداقل عرض 200px */

        }


        .list-view .product-item {

            flex: 1 0 100%; /* در حالت لیست، هر محصول تمام عرض را اشغال می‌کند */

        }


        .grid-view .product-item {

            flex: 1 0 200px; /* در حالت گرید، محصولات در عرض 200 پیکسل نمایش داده می‌شوند */

        }

        /*//gride*/

        #user_type {
            display: none;
        }

        .border {
            border: 1px dashed #cecece;
            padding: 30px 20px;
            border-radius: 10px;
        }

        .error-message {
            height: 7px;
            font-size: 11px;
            margin-bottom: 3px;
        }

        /* HTML: <div class="loader"></div> */
        .loader-filter {
            display: none;
            transition: all ease .3s;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background: rgba(255, 255, 255, .8);
            z-index: 9999999999999;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes pulse {
            50% {
                background: white;
            }
        }


        .loading-box {
            border-radius: 50%;
            width: 250px;
            height: 250px;
            border-top: 3px solid #330000;
            border-right: 3px solid transparent;
            /* border-top-color: #000; */
            animation: spin 1s infinite linear;
        }

        .loading--double-box {
            position: absolute;
            top: 40%;
            z-index: 999999999999999999999999999999999999999999999999999999;
            left: 40%;
            transform: translate(-50%, -50%);
        }

        /*//step2*/
        /*.active {*/
        /*    background-color: #0b2e13;*/
        /*    color: white;*/
        /*}*/

        .cart {
            width: 20px;
            height: 20px;
            border: 1px solid red;
            border-radius: 20px;
            right: 0;
            position: absolute;
            top: 0;
            background: red;
            color: white;
        }

        .fa-cart-plus {
            padding: 0 !important;
            font-size: 20px !important;
        }

        .w-90 {
            width: 90%;
        }

        .w-100 {
            width: 100% !important;
        }

        .border-none {
            border: none !important;
        }
    </style>
    {{--    //step3--}}
    <link rel="stylesheet" href="{{ asset('home/css/cart.css') }}">
    <link rel="stylesheet" type="text/css" href="{{asset('home/css/checkout.css')}}">
    <style>
        .cart-main {
            padding: 5px 10px !important;
        }

        .cart-main label {
            font-size: 14px !important;
        }

        .cart-summary h5 {
            background-color: #191a71;
            color: white;
            padding: 10px;
            font-size: 16px !important;
        }

        /*.cart-summary {*/
        /*    */
        /*    border-radius: 5px;*/
        /*    overflow: hidden;*/
        /*}*/

        .remove_btn {
            display: flex !important;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 10px;
            background: red;
            color: white;
            justify-content: center;
            align-content: center;
            cursor: pointer;
        }

        .remove_btn > i {
            color: white !important;
            margin-top: 3px;
        }

        .p-relative {
            position: relative;
        }

        tr > td {
            text-align: center !important;
        }

        .number-input {
            border: none !important;
        }

        .shadow-box-md {
            width: 3rem;
            height: 3rem;
            display: flex;

            align-items: center;
        }

        .border-opacity-90 {
            width: 25%;
            border-width: 4px;
            border-color: rgb(34 197 94);

            border: 4px solid rgb(209 213 219);
        }

        .border-opacity-90.active {
            border: 4px solid rgb(34 197 94);
        }

        .flex {
            display: flex;
        }

        .h-full {
            height: 100%;
        }

        .font-semibold {
            font-weight: 600;
        }

        .shadow-box-md h1 {
            font-size: 1.6rem;
            line-height: 1.75rem;
            text-align: center;
            margin: 0;
        }

        .bg-gray-200 {
            --tw-bg-opacity: 1;
            background-color: rgb(229 231 235);
        }

        input[type=number] {
            -moz-appearance: textfield;
        }

        /*.order-total > label {*/
        /*    font-size: 1.6rem !important;*/
        /*}*/

        .table .btn-close {
            top: -8px;
            left: -7px;
            font-size: 16px;
        }

        .table .btn-close {
            position: absolute;
            padding: 0;
            background: #fff;
            border: 2px solid #fff;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            -webkit-box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%);
            box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%);
            top: 3px;
            right: 8px;
        }

        td, th {
            min-width: 80px;
            width: auto;
            text-align: center;
            font-size: 14px;
            vertical-align: initial;
            padding: 11px;
        }

        tr {
            border-bottom: 1px solid #d5d5d5;
        }

        @media screen and (max-width: 576px) {
            td, th {
                min-width: 150px;
                text-align: center;
            }

            .min-width-200 {
                min-width: 200px !important;
            }
        }

        .cart-thead {
            background: #191a71;
            color: white !important;
        }

        th {
            height: 85px;
            vertical-align: middle;
        }

        .cart-summary .divider {
            display: inline-block;
            /* vertical-align: middle; */
            margin-right: 0 !important;
            height: auto !important;
            width: 100% !important;
            background-color: #000 !important;
        }

        .z-20 {
            z-index: 20;
        }

        .inline-flex {
            display: inline-flex;
        }

        .w-full {
            width: 100%;
        }

        .justify-between {
            justify-content: space-between;
        }

        .title-cart {
            font-size: 1.5rem;
            line-height: 1.5rem;
        }

        .bg-green-400 {
            --tw-bg-opacity: 1;
            background-color: rgb(74 222 128);
        }

        .rounded-full {
            border-radius: 9999px;
        }

        .relative {
            position: relative;
        }

        .absolute {
            position: absolute;
        }

        .-top-10 {
            top: -2.5rem;
        }

        .top-0 {
            top: 0;
        }

        .header-cart {
            margin-bottom: 50px
        }
    </style>
    {{--    //gradebox--}}
    <style>
        .color-options {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .color-option {
            width: 150px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 8px;
            cursor: pointer;
            text-align: center;
            transition: transform 0.3s;
        }

        .color-option.selected {
            border: 2px solid #000;
            transform: scale(1.05);
        }

        .color-image {
            width: 100%;
            height: auto;
            border-radius: 8px;
        }

        .color-info {
            margin-top: 10px;
        }

        .color-name {
            font-size: 14px;
            font-weight: bold;
        }

        .color-price {
            font-size: 12px;
            color: #666;
        }

        .color-stock {
            font-size: 12px;
            color: #666;
        }

        .active-btn-view {
            background-color: #1B1D24 !important;
        }

        .active-btn-view i {
            color: white !important;
        }

        .btn-light:hover {
            background-color: #1B1D24 !important;
        }

        .product-card {
            border: 1px solid #ccc; /* حاشیه */
            border-radius: 8px; /* گرد کردن گوشه‌ها */
            padding: 20px; /* فضای داخلی */
            margin: 10px; /* فاصله بین باکس‌ها */
            text-align: center; /* وسط چین کردن متن */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* سایه */
            transition: transform 0.3s; /* افکت حرکت */
        }

        .product-card:hover {
            transform: scale(1.05); /* بزرگ‌تر شدن هنگام hover */
        }

        .product-image {
            width: 100%; /* عرض تصویر ۱۰۰% */
            height: auto; /* حفظ نسبت تصویر */
            border-radius: 8px; /* گوشه‌های گرد تصویر */
        }

        .product-name {
            font-size: 14px;
            margin: 10px 0;
            line-height: 25px;
        }

        .product-description {
            font-size: 14px; /* اندازه فونت توضیحات */
            color: #666; /* رنگ متن توضیحات */
        }

        .buy-button {
            background-color: #28a745; /* رنگ پس‌زمینه دکمه */
            color: white; /* رنگ متن دکمه */
            border: none; /* بدون حاشیه */
            border-radius: 5px; /* گوشه‌های گرد دکمه */
            padding: 10px 15px; /* فضای داخلی دکمه */
            cursor: pointer; /* شکل نشانگر ماوس */
            transition: background-color 0.3s; /* افکت تغییر رنگ */
        }

        .buy-button:hover {
            background-color: #218838; /* رنگ دکمه هنگام hover */
        }


        .cash-item {
            background-color: #e8f5e9; /* سبز بسیار روشن برای محصولات نقدی */
        }

        .installment-item {
            background-color: #e3f2fd; /* آبی بسیار روشن برای محصولات اقساطی */
        }

        .payment-type-label {
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: bold;
        }

        .payment-type-cash {
            background-color: #4caf50;
            color: white;
        }

        .payment-type-installment {
            background-color: #2196f3;
            color: white;
        }


        #paymentTypeModal .form-check {
            font-size: 20px;
        }

        .color-option.out-of-stock {
            opacity: 0.5;
            filter: grayscale(100%);
            cursor: not-allowed;
        }
    </style>
    <style>
        .bank-option {
            position: relative;
            cursor: pointer;
            border-radius: 1rem;
            transition: all 0.3s ease;
            overflow: hidden;
            height: 100%;
            border: 2px solid transparent;
        }

        .bank-option:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
        }

        .bank-option.selected {
            border-color: #0d6efd;
        }

        .bank-option.selected::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 30px;
            background-color: #0d6efd;
            clip-path: polygon(100% 0, 0 0, 100% 100%);
        }

        .bank-option.selected::before {
            content: '✓';
            position: absolute;
            top: 2px;
            right: 7px;
            color: white;
            font-size: 12px;
            z-index: 1;
        }

        .bank-inner {
            background-color: #fff;
            padding: 1.5rem 1rem;
            border-radius: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            transition: all 0.3s ease;
        }

        .bank-option.selected .bank-inner {
            background-color: #f0f7ff;
        }

        .bank-logo {
            width: 70px;
            height: 70px;
            margin-bottom: 0.75rem;
            transition: transform 0.3s ease;
        }

        .bank-option:hover .bank-logo {
            transform: scale(1.1);
        }

        .bank-name {
            font-weight: 700;
            color: #333;
            margin: 0;
            text-align: center;
        }

        .bank-option.selected .bank-name {
            color: #0d6efd;
        }

        .payment-details {
            max-height: 0;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
        }

        .payment-details.show {
            max-height: 500px;
            opacity: 1;
            margin-top: 1.5rem;
        }

        .payment-details-inner {
            border-radius: 1rem;
            background: linear-gradient(145deg, #f0f7ff, #ffffff);
            padding: 1.5rem;
            box-shadow: 0 5px 15px rgba(13, 110, 253, 0.1);
            border-right: 4px solid #0d6efd;
            position: relative;
            overflow: hidden;
        }

        .payment-details-inner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(to right, #0d6efd, transparent);
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            padding: 0.75rem 0;
            border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
        }

        .detail-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .detail-label {
            color: #6c757d;
            font-weight: 500;
        }

        .detail-value {
            font-weight: 600;
            color: #333;
        }

        .monthly-payment {
            font-size: 1.25rem;
            font-weight: 700;
            color: #0d6efd;
        }

        .price-info {
            background: linear-gradient(145deg, #e9f5ff, #f8fdff);
            border-radius: 1rem;
            padding: 1.25rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            border-right: 4px solid #0d6efd;
        }

        .price-info-icon {
            background-color: rgba(13, 110, 253, 0.1);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 1rem;
            flex-shrink: 0;
        }

        .btn-primary {
            background: linear-gradient(to right, #0d6efd, #0b5ed7);
            border: none;
            border-radius: 0.75rem;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(13, 110, 253, 0.3);
        }

        .btn-light {
            background-color: #f0f0f0;
            border: none;
            border-radius: 0.75rem;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-light:hover {
            background-color: #e0e0e0;
        }

        .toast-container {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1060;
        }

        .modal-title {
            font-weight: 700;
            color: #333;
            display: flex;
            align-items: center;
        }

        .modal-title-icon {
            margin-left: 0.5rem;
            color: #0d6efd;
        }

        .modal-subtitle {
            color: #6c757d;
            margin-bottom: 1.5rem;
            font-size: 0.95rem;
        }

        .bank-monthly {
            font-size: 0.85rem;
            color: #0d6efd;
            font-weight: 600;
            margin-top: 0.5rem;
        }

        .btn-close {
            background-color: #f0f0f0;
            opacity: 1;
            padding: 0.5rem;
            border-radius: 50%;
        }

        .btn-close:hover {
            background-color: #e0e0e0;
        }

        #installment-btn, #confirm-installment {
            background-color: #007bff;
            color: #fff;
        }
    </style>
@endsection

@section('script')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const bankOptions = document.querySelectorAll('.bank-option');
            const paymentDetails = document.querySelector('.payment-details');
            const selectedBankTitle = document.getElementById('selected-bank-title');
            const downPaymentEl = document.getElementById('down-payment');
            const confirmInstallment = document.getElementById('confirm-installment');
            const finalPriceEl = document.getElementById('final-price');
            const installmentModal = new bootstrap.Modal(document.getElementById('installmentModal'));

            // مبلغ نقدی محصول از data attribute


            // غیرفعال کردن دکمه تا انتخاب درگاه
            confirmInstallment.disabled = true;

            // انتخاب درگاه
            bankOptions.forEach(option => {
                option.addEventListener('click', () => {
                    const originalPrice = parseInt(document.getElementById('installment-modal-product-price').dataset.productPrice);
                    // حذف انتخاب قبلی
                    bankOptions.forEach(o => o.classList.remove('selected'));

                    // انتخاب درگاه فعلی
                    option.classList.add('selected');
                    confirmInstallment.disabled = false;
                    paymentDetails.classList.add('show');

                    // دریافت درصد تفاوت و عنوان بانک
                    const differencePercent = parseFloat(option.getAttribute('data-difference'));
                    const bank = option.getAttribute('data-bank');

                    // محاسبه مبلغ نهایی
                    const addedAmount = Math.round(originalPrice * differencePercent / 100);
                    const finalAmount = originalPrice + addedAmount;

                    // نمایش جزئیات
                    selectedBankTitle.textContent = `جزئیات پرداخت اقساطی ${bank}`;
                    downPaymentEl.textContent = `${finalAmount.toLocaleString('fa-IR')} تومان`;

                    // ذخیره برای استفاده بعدی
                    option.setAttribute('data-price', finalAmount);
                });
            });

            // تأیید و افزودن به سبد خرید
            confirmInstallment.addEventListener('click', () => {
                const selectedOption = document.querySelector('.bank-option.selected');
                if (selectedOption) {
                    const price = selectedOption.getAttribute('data-price');
                    const bank = selectedOption.getAttribute('data-bank');

                    if (finalPriceEl) {
                        finalPriceEl.innerHTML = `${parseInt(price).toLocaleString('fa-IR')} تومان <span class="d-block text-muted small">${bank}</span>`;
                    }

                    showToast('روش پرداخت اقساطی با موفقیت انتخاب شد.', 'success');
                    installmentModal.hide();
                } else {
                    showToast('لطفاً یک روش پرداخت را انتخاب کنید.', 'warning');
                }
            });

            // تابع Toast
            function showToast(message, type) {
                const toastContainer = document.querySelector('.toast-container');

                const toastEl = document.createElement('div');
                toastEl.className = `toast align-items-center border-0 mb-3`;
                toastEl.classList.add(type === 'success' ? 'bg-success' : 'bg-warning');
                toastEl.setAttribute('role', 'alert');
                toastEl.setAttribute('aria-live', 'assertive');
                toastEl.setAttribute('aria-atomic', 'true');

                const toastContent = `
            <div class="d-flex">
                <div class="toast-body text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="${type === 'success' ? 'bi bi-check-circle-fill' : 'bi bi-exclamation-triangle-fill'} me-2" viewBox="0 0 16 16">
                        ${type === 'success' ?
                    '<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>' :
                    '<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>'}
                    </svg>
                    ${message}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        `;

                toastEl.innerHTML = toastContent;
                toastContainer.appendChild(toastEl);

                const toast = new bootstrap.Toast(toastEl, {
                    autohide: true,
                    delay: 3000
                });

                toast.show();

                toastEl.addEventListener('hidden.bs.toast', () => {
                    toastEl.remove();
                });
            }

            // ریست زمانی که مودال بسته می‌شود
            document.getElementById('installmentModal').addEventListener('hidden.bs.modal', function () {
                paymentDetails.classList.remove('show');
                bankOptions.forEach(option => option.classList.remove('selected'));
                confirmInstallment.disabled = true;
            });

            // انتخاب خودکار اولین درگاه وقتی مودال باز می‌شود
            document.getElementById('installmentModal').addEventListener('shown.bs.modal', function () {
                if (bankOptions.length > 0) {
                    bankOptions[0].click();
                }
            });
        });
        document.addEventListener('DOMContentLoaded', function () {
            const installmentBtn = document.getElementById('installment-btn');
            const installmentModal = new bootstrap.Modal(document.getElementById('installmentModal'));


            installmentBtn.addEventListener('click', function (e) {
                e.preventDefault(); // جلوگیری از رفتار پیش‌فرض
                let priceText = $('#colorOptions').find('.color-option.selected').find('.color-price').text().trim(); // مثلاً "55,000,000 تومان"
                let numeric = priceText.replace(/[^0-9]/g, ''); // فقط عدد خام: "55000000"
                let formatted = Number(numeric).toLocaleString('fa-IR'); // سه رقم سه رقم: "55,000,000"
                $('#installment-modal-product-price')
                    .attr('data-product-price', numeric)
                    .text(`${formatted} تومان`);
                // اجرای تابع بررسی
                if (check_product_variation_selected()[0] == 1) {
                    installmentModal.show(); // اگر چک موفق بود، مودال رو نمایش بده
                }
            });
        });
    </script>
    <script>
        let selectedProduct = null;
        let selectedVariation = null;
        let PaymentMethods = @json($PaymentMethods);

        function openColorSelectionModal(product_id, product_name, product_price) {
            selectedProduct = {id: product_id, name: product_name, price: product_price};

            // درخواست AJAX برای دریافت رنگ‌ها
            $.ajax({
                url: '{{ route('get.product.variations') }}', // مسیر درخواست
                type: 'GET',
                data: {
                    product_id: product_id,
                },
                success: function (response) {
                    if (response.success) {
                        if (response.variations.length > 0) {
                            // اگر محصول رنگ‌بندی دارد، مودال را نمایش دهید
                            renderColorOptions(response.variations);
                            $('#colorSelectionModal').modal('show');
                        } else {
                            selectedVariation =null;
                            // اگر محصول رنگ‌بندی ندارد، مستقیماً به سبد خرید اضافه شود
                            // AddToCart(product_id, product_name, product_price, null, null, null);
                            $('#paymentTypeModal').modal('show');

                        }
                    } else {
                        alert('خطا در دریافت اطلاعات رنگ‌ها.');
                    }
                },
                error: function () {
                    alert('خطا در ارتباط با سرور.');
                }
            });
        }

        function renderColorOptions(variations) {
            const colorOptions = $('#colorOptions');
            colorOptions.empty(); // پاک کردن محتوای قبلی

            variations.forEach(variation => {
                const isOutOfStock = variation.quantity === 0;
                const disabledClass = isOutOfStock ? 'out-of-stock' : '';

                const colorOption = `
            <div class="color-option ${disabledClass}"
                data-color_id="${variation.color_attr_value}"
                data-variation_id="${variation.id}"
                data-price="${variation.price}"
                data-stock="${variation.quantity}">

                <img src="${variation.image}" alt="${variation.color_name}" class="color-image">
                <div class="color-info">
                    <span class="color-name d-block">${variation.color_name}</span>
                    <span class="color-price d-block">${variation.price.toLocaleString()} تومان</span>
                    ${isOutOfStock ? '<span class="text-danger">ناموجود</span>' : ''}
                </div>
            </div>
        `;
                colorOptions.append(colorOption);
            });

            // حذف کلیک از گزینه‌های ناموجود
            $('.color-option.out-of-stock').css('pointer-events', 'none');
        }


        $(document).on('click', '.color-option', function () {
            $('.color-option').removeClass('selected');
            $(this).addClass('selected');
            selectedVariation = {
                id: $(this).data('variation_id'),
                color_id: $(this).data('color_id'),
                color: $(this).find('.color-name').text(),
                price: $(this).data('price'),
                stock: $(this).data('quantity'),
                image: $(this).find('.color-image').attr('src')
            };
        });

        $('#confirmColorSelection').click(function () {
            if (selectedVariation) {
                $('#paymentTypeModal').modal('show');
                // AddToCart(selectedProduct.id, selectedProduct.name+' - '+selectedVariation.color, selectedVariation.price, selectedVariation.id, selectedVariation.color,selectedVariation.color_id);
                $('#colorSelectionModal').modal('hide');
            } else {
                alert('لطفاً یک رنگ انتخاب کنید.');
            }
        });
        $('#confirmPaymentType').click(function () {
            paymentType = $('input[name="paymentType"]:checked').val();
            $('#paymentTypeModal').modal('hide');
            if (paymentType == 'cash') {
                if (selectedVariation) {
                    AddToCart(
                        selectedProduct.id,
                        selectedProduct.name + ' - ' + selectedVariation.color,
                        selectedVariation.price,
                        selectedVariation.id,
                        selectedVariation.color,
                        selectedVariation.color_id,
                        paymentType
                    );
                } else {
                    AddToCart(
                        selectedProduct.id,
                        selectedProduct.name,
                        selectedProduct.price,
                        null,
                        null,
                        null,
                        paymentType
                    );
                }
            } else {
                if (selectedVariation) {
                    $('#installment-modal-product-price')
                        .attr('data-product-price', selectedVariation.price)
                        .text(Number(selectedVariation.price).toLocaleString());
                    $('#installmentModal').modal('show');
                } else {
                    $('#installment-modal-product-price')
                        .attr('data-product-price', selectedProduct.price)
                        .text(Number(selectedProduct.price).toLocaleString());
                    $('#installmentModal').modal('show');
                }

            }

        });

        $('#confirm-installment').click(function () {
            let payment_method = $('.bank-option.selected').data('payment-method-id');
            $('#installmentModal').modal('hide');
            if (selectedVariation) {
                AddToCart(
                    selectedProduct.id,
                    selectedProduct.name + ' - ' + selectedVariation.color,
                    selectedVariation.price,
                    selectedVariation.id,
                    selectedVariation.color,
                    selectedVariation.color_id,
                    paymentType,
                    payment_method
                );
            } else {
                AddToCart(
                    selectedProduct.id,
                    selectedProduct.name,
                    selectedProduct.price,
                    null,
                    null,
                    null,
                    paymentType,
                    payment_method
                );
            }


        });
        let cart_items = [];

        function switchToGridView() {
            $('#grade_view').removeClass('d-none');
            $('#list_view').addClass('d-none');

            $('#list-view-btn').removeClass('active-btn-view');
            $('#grade-view-btn').addClass('active-btn-view');

        }

        function switchToListView() {
            $('#list_view').removeClass('d-none');
            $('#grade_view').addClass('d-none');
            // سایر تنظیمات لازم اگر نیاز دارید
            $('#grade-view-btn').removeClass('active-btn-view');
            $('#list-view-btn').addClass('active-btn-view');
        }


        function AddToCart(product_id, product_name, product_price, variation_id, color_name, color_id, payment_type, payment_method_id = null) {
            const product = {
                id: product_id,
                name: product_name,
                price: product_price,
                variation_id: variation_id,
                color_name: color_name,
                color_id: color_id,
                payment_type: payment_type,
                payment_method_id: payment_method_id
            };
            if (cart_items.length > 0) {
                if (cart_items.at(0).payment_method_id !== payment_method_id) {
                    swal({
                        title: 'توجه',
                        text: 'درگاه انتخابی با محصول داخل سبد خرید شما یکی نمیباشد',
                        icon: 'error',

                    })
                    return;
                }
            }

            // بررسی وجود محصول قبل از افزودن
            const existingProduct = cart_items.find(item =>
                item.id === product_id &&
                item.variation_id === variation_id &&
                item.payment_type === payment_type &&
                item.payment_method_id === payment_method_id
            );

            if (!existingProduct) {
                cart_items.push(product);
            }

            $('#cart_count').text(cart_items.length);
            ShowCart();
        }

        function ShowCart() {
            let cashItems = cart_items.filter(item => item.payment_type === 'cash');
            let installmentItems = cart_items.filter(item => item.payment_type === 'installment');

            let cartContent = `
        <table class="table">
            <thead>
                <tr class="bg-dark text-white">
                    <th class="text-center" scope="col">شناسه</th>
                    <th class="text-center" scope="col">نام محصول</th>
                    <th class="text-center" scope="col">قیمت (تومان)</th>
                    <th class="text-center" scope="col">نوع پرداخت</th>
                    <td class="text-center"  scope="col">درگاه</td>
                    <th class="text-center" scope="col">عملیات</th>
                </tr>
            </thead>
            <tbody>`;

            // نمایش محصولات نقدی
            if (cashItems.length > 0) {
                cartContent += `<tr><td colspan="5" class="text-center bg-light"><strong>محصولات نقدی</strong></td></tr>`;
                cashItems.forEach(item => {
                    cartContent += `
                <tr>
                    <td class="text-center">${item.id}</td>
                    <td class="text-center">${item.name}</td>
                    <td class="text-center">${Number(item.price).toLocaleString()}</td>
                    <td class="text-center">نقدی</td>
<td class="text-center">درگاه نقدی</td>
                    <td class="text-center"><button class="btn btn-danger btn-sm" onclick="removeFromCart(${item.id}, '${item.payment_type}', ${item.variation_id || 'null'})">حذف</button></td>
                </tr>`;
                });
            }

            // نمایش محصولات اقساطی
            if (installmentItems.length > 0) {

                cartContent += `<tr><td colspan="5" class="text-center bg-light"><strong>محصولات اقساطی</strong></td></tr>`;
                installmentItems.forEach(item => {
                    let paymentMethodName = '';

                    const paymentMethod = PaymentMethods.find(pm => pm.id === item.payment_method_id);
                    if (paymentMethod) {
                        paymentMethodName = paymentMethod.title;
                    } else {
                        paymentMethodName = 'نامشخص';
                    }
                    let finalPrice = Number(item.price);
                    if (paymentMethod?.difference_percent) {
                        finalPrice += finalPrice * paymentMethod.difference_percent / 100;
                    }

                    // Format price with thousand separators
                    const formattedPrice = finalPrice.toLocaleString('fa-IR');
                    cartContent += `
                <tr>
                    <td class="text-center">${item.id}</td>
                    <td class="text-center">${item.name}</td>
                    <td class="text-center">${formattedPrice}</td>
                    <td class="text-center">اقساطی</td>
<td class="text-center">${paymentMethodName}</td>

                    <td class="text-center"><button class="btn btn-danger btn-sm" onclick="removeFromCart(${item.id}, '${item.payment_type}', ${item.variation_id || 'null'})">حذف</button></td>
                </tr>`;
                });
            }

            cartContent += `</tbody></table>`;

            $('#cart_modal #content').html(cartContent);
            $('#cart_modal').modal('show');
            $('#add_order_btn').removeClass('d-none');

            if (cart_items.length == 0) {
                $('#add_order_btn').addClass('d-none');
            }
        }

        // تغییر در تابع حذف از سبد خرید
        function removeFromCart(itemId, paymentType, variationId) {
            cart_items = cart_items.filter(item =>
                !(item.id === itemId &&
                    item.payment_type === paymentType &&
                    (item.variation_id === variationId || (item.variation_id === null && variationId === null)))
            );

            $('#cart_count').text(cart_items.length);
            ShowCart();
        }

        $('#add_order_btn').click(function () {
            const cash_products = cart_items.filter(item => item.payment_type === 'cash');
            const installment_products = cart_items.filter(item => item.payment_type === 'installment');

            let user_id = {{ $user->id }};

            $.ajax({
                url: '{{ route('seller.cart.save') }}',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    _token: '{{ csrf_token() }}',
                    cash_products: cash_products,
                    installment_products: installment_products,
                    user_id: user_id
                }),
                success: function (response) {
                    if (response[0] == 1) {
                        Step_3(response[2]);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.error('Error:', textStatus, errorThrown);
                }
            });
        });


        function Step_3(route) {
            $('#cart_modal').modal('hide');
            $('.loader-filter').show();
            $('.stepper-item').removeClass('current');
            $('.icon_step_3').addClass('current');
            $('.steps').addClass('d-none');
            setTimeout(function () {
                window.location.href = route;
            }, 300);
        }

        function Step_4() {

            $('.loader-filter').show();
            $('.stepper-item').removeClass('current');
            $('.icon_step_4').addClass('current');
            $('.steps').addClass('d-none');
            setTimeout(function () {
                $('.loader-filter').hide();
                $('#step_4').removeClass('d-none');
            }, 1000);
        }


    </script>
    {{--    //step3--}}
    <script>
        function change_quantity(cart_id, type) {
            let quantity = $('#quantity_' + cart_id).val();
            if (type == 1) {
                quantity = parseInt(quantity) + 1;
            } else {
                quantity = parseInt(quantity) - 1;
            }
            if (quantity == 0) {
                quantity = 1;
                $('#quantity_' + cart_id).val(quantity);
            } else {
                $('#quantity_' + cart_id).val(quantity);
                updateQuantity(cart_id);
            }


        }

        function remove_cart(cart_id) {
            $.ajax({
                url: "{{ route('home.cart.remove') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    cart_id: cart_id,
                },
                dataType: "json",
                type: 'POST',
                beforeSend: function () {

                },
                success: function (msg) {
                    if (msg) {
                        if (msg[0] == 1) {
                            getCartInfo()
                            Step_3();
                        }
                        if (msg[0] == 0) {
                            let message = msg[1];
                            swal({
                                title: 'error',
                                text: message,
                                icon: 'error',

                            })
                        }
                    }
                },
            })
        }

        function remove_carts() {
            $.ajax({
                url: "{{ route('home.carts.remove') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                },
                dataType: "json",
                type: 'POST',
                beforeSend: function () {

                },
                success: function (msg) {
                    console.log(msg);
                    if (msg) {
                        if (msg[0] == 1) {
                            let message = msg[1];
                            swal({

                                text: message,
                                icon: 'success',
                                timer: 5000,
                                button: false

                            })
                            setTimeout(function () {
                                window.location.href = "{{ route('home.index') }}";
                            }, 1500)
                        }
                        if (msg[0] == 0) {
                            let message = msg[1];
                            swal({
                                title: 'error',
                                text: message,
                                icon: 'error',

                            })
                        }
                    }
                },
            })
        }

        function updateQuantity(cart_id, tag) {
            let quantity = $('#quantity_' + cart_id).val();
            $.ajax({
                url: "{{ route('home.cart.update') }}",
                type: "POST",
                dataType: "json",
                data: {
                    quantity: quantity,
                    cart_id: cart_id,
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    if (response[0] === 1) {
                        getCartInfo()
                        Step_3();
                    }
                    if (response[0] === 0) {
                        swal({
                            title: " دقت کنید",
                            text: "تعداد وارد شده بیش از موجودی کالا است",
                            icon: "error",
                        });

                        $(tag).val(response[1]);
                    }
                }
            });
        }

        function getCartInfo() {
            let user_id = $('#user_id').val();
            $.ajax({
                url: '{{ route('seller.cart.get') }}', // URL درخواست
                type: 'POST', // یا 'GET' بر اساس نیاز شما
                contentType: 'application/json',
                data: JSON.stringify({
                    _token: '{{ csrf_token() }}',
                    user_id: user_id
                }),
                success: function (response) {

                    if (response[0] == 1) {
                        $('#step_3').html(response[2]);
                        Step_3();
                    }

                },

                error: function (jqXHR, textStatus, errorThrown) {

                    console.error('Error:', textStatus, errorThrown);

                }

            });
        }

        function checkCart() {
            $.ajax({
                url: "{{ route('home.cart.checkCartAjax') }}",
                type: "POST",
                dataType: "json",
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    if (response[0] == 1) {
                        window.location.href = "{{ route('home.checkout') }}";
                    }
                    if (response[0] == 0) {
                        swal({
                            title: 'خطا',
                            text: response[1],
                            icon: 'error',
                            timer: 5000,
                            button: false
                        })
                        setTimeout(function () {
                            window.location.reload();
                        }, 5000)
                    }
                }
            });
        }

        $(document).on('change', '#categoryFilter', function () {
            const categoryId = $(this).val();
            filterProductsByCategory(categoryId);
        });

        function filterProductsByCategory(categoryId) {
            $('.product-item').hide(); // مخفی کردن همه محصولات
            if (categoryId === "") {
                $('.product-item').show(); // نمایش همه محصولات اگر دسته‌بندی انتخاب نشده باشد
            } else {
                $('.product-item').filter(function () {
                    const categoryIds = $(this).data('category-ids').toString().split(',');
                    return categoryIds.includes(categoryId);
                }).show();
            }
        }

        $(document).ready(function () {
            // Initial view setting
            switchToListView(); // Set initial view to list

            // Product search functionality
            $('input[data-kt-ecommerce-product-filter="search"]').on('keyup', function () {
                const searchText = $(this).val().toLowerCase();

                $('.product-item').each(function () {
                    const productName = $(this).find('[data-kt-ecommerce-product-filter="product_name"]').text().toLowerCase();
                    if (productName.includes(searchText)) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            });
        });
    </script>
@endsection

@section('content')
    <div class="modal fade" id="installmentModal" tabindex="-1" aria-labelledby="installmentModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="installmentModalLabel">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                             class="bi bi-credit-card-2-front modal-title-icon" viewBox="0 0 16 16">
                            <path
                                d="M14 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2z"/>
                            <path
                                d="M2 5.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z"/>
                        </svg>
                        خرید اقساطی
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="price-info">
                        <div class="price-info-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#0d6efd"
                                 class="bi bi-info-circle-fill" viewBox="0 0 16 16">
                                <path
                                    d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
                            </svg>
                        </div>
                        <div>
                            <span class="fw-bold">قیمت نقدی محصول:</span>
                            <span
                                data-product-price=""
                                id="installment-modal-product-price" class="fw-bold text-primary"> </span>
                            <p class="text-muted mb-0 mt-1 small">با خرید اقساطی، می‌توانید این محصول را با پرداخت
                                ماهانه و بدون فشار مالی تهیه کنید.</p>
                        </div>
                    </div>

                    <p class="modal-subtitle">لطفاً درگاه اعتباری مورد نظر خود را برای پرداخت اقساطی انتخاب کنید:</p>


                    <div class="row g-3 mb-4">
                        @foreach($PaymentMethods as $key=>$item)

                            <div class="col-md-3 col-6">
                                <div class="bank-option"
                                     data-difference="{{$item->difference_percent}}"
                                     data-bank="{{ $item->title }} "
                                     data-payment-method-id="{{$item->id}}"
                                >
                                    <div class="bank-inner">
                                        <img src="{{ asset(env('LOGO_UPLOAD_PATH').$item->image) }}"
                                             alt="{{ $item->title }} " class="bank-logo">
                                        <span class="bank-name">{{ $item->title }}</span>

                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Payment Details -->
                    <div class="payment-details">
                        <div class="payment-details-inner">
                            <h5 class="fw-bold text-primary mb-4" id="selected-bank-title">جزئیات پرداخت اقساطی</h5>

                            <div class="detail-row">
                                <span class="detail-label">مبلغ قابل پرداخت:</span>
                                <span class="detail-value" id="down-payment">۲۰,۰۰۰,۰۰۰ تومان</span>
                            </div>


                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">انصراف</button>
                    <button type="button" class="btn btn-primary d-flex align-items-center" id="confirm-installment">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
                             class="bi bi-check-lg me-2" viewBox="0 0 16 16">
                            <path
                                d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
                        </svg>
                        تأیید و افزودن به سبد خرید
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- مودال انتخاب نوع پرداخت -->
    <div class="modal fade" id="paymentTypeModal" tabindex="-1" aria-labelledby="paymentTypeModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="paymentTypeModalLabel">نوع پرداخت</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>لطفاً نوع پرداخت را انتخاب کنید:</p>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="paymentType" id="installmentPayment"
                               value="installment">
                        <label class="form-check-label" for="installmentPayment">
                            پرداخت اقساطی
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="paymentType" id="cashPayment" value="cash"
                               checked>
                        <label class="form-check-label" for="cashPayment">
                            پرداخت نقدی
                        </label>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">انصراف</button>
                    <button type="button" class="btn btn-primary" id="confirmPaymentType">تأیید</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="colorSelectionModal" tabindex="-1" aria-labelledby="colorSelectionModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="colorSelectionModalLabel">انتخاب رنگ</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Color Options -->
                    <div class="color-options" id="colorOptions">
                        <!-- رنگ‌ها از طریق جاوااسکریپت پر می‌شوند -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
                    <button type="button" class="btn btn-primary" id="confirmColorSelection">تأیید</button>
                </div>
            </div>
        </div>
    </div>
    <div class="d-flex flex-column flex-root" id="kt_app_root">

        <div
            class="d-flex flex-column flex-lg-row flex-column-fluid stepper stepper-pills stepper-column stepper-multistep"
            id="kt_create_account_stepper">
            @include('seller.metronik.sidebar')
            <div class="d-flex flex-column flex-lg-row-fluid py-10 position-relative">
                <div class="loader-filter">
                    <div class='loading-box loading--double-box'></div>
                </div>
                <div class="w-90 mx-auto">
                    {{--                   //step2--}}
                    <div id="step_2" class="steps d-flex flex-center flex-column flex-column-fluid">
                        <div id="kt_app_content" class="app-content w-100">
                            <!--begin::محصولات-->
                            <div class="card card-flush border-none">
                                <!--begin::کارت header-->
                                <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                                    <!--begin::کارت title-->
                                    <div class="card-title">
                                        <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                                            <!-- Icon for List View -->
                                            <span title="نمایش لیست" id="list-view-btn"
                                                  class="active-btn-view btn  position-relative"
                                                  style="width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;"
                                                  onclick="switchToListView()">
        <i class="fa fa-list fa-2x"></i>
    </span>

                                            <!-- Icon for Grid View -->
                                            <span title="نمایش شبکه ای" id="grade-view-btn"
                                                  class=" btn position-relative"
                                                  style="width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;margin-left: 15px"
                                                  onclick="switchToGridView()">
        <i class="fa fa-th fa-2x"></i>
    </span>

                                        </div>
                                        <div class="card-toolbar mx-3 flex-row-fluid justify-content-start gap-5">
                                            <select id="categoryFilter" class="form-select form-select-solid w-200px">
                                                <option value="">همه دسته‌بندی‌ها</option>
                                                @foreach($categories as $category)
                                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <!--begin::جستجو-->
                                        <div class="d-flex align-items-center position-relative my-1 ml-2">
                                            <i class="ki-outline ki-magnifier fs-3 position-absolute ms-4"></i>
                                            <input type="text" data-kt-ecommerce-product-filter="search"
                                                   class="form-control form-control-solid w-250px ps-12"
                                                   placeholder="جستجو محصولات">
                                        </div>
                                        <!--end::جستجو-->
                                    </div>
                                    <!--end::کارت title-->
                                    <!--begin::کارت toolbar-->
                                    <!-- Card toolbar -->
                                    <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                                        <span onclick="ShowCart()" class="btn btn-dark position-relative"
                                              style="width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
        <span id="cart_count" class="cart" style="font-size: 0.7rem; padding: 0.2rem 0.5rem;">0</span>
        <i class="fa fa-cart-plus fa-2x"></i>
    </span>
                                    </div>

                                    <!--end::کارت toolbar-->
                                </div>
                                <!--end::کارت header-->
                                <!--begin::کارت body-->
                                <div class="card-body pt-0">
                                    <!--begin::Table-->
                                    <div id="list_view"
                                         class="dataTables_wrapper dt-bootstrap4 no-footer">
                                        <div class="table-responsive">
                                            <table
                                                class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer"
                                                id="kt_ecommerce_products_table">
                                                <thead>
                                                <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">

                                                    <th class="min-w-200px sorting" tabindex="0"
                                                        aria-controls="kt_ecommerce_products_table" rowspan="1"
                                                        colspan="1"
                                                        style="width: 214.383px;"
                                                        aria-label="محصولات: activate to sort column ascending">محصولات
                                                    </th>

{{--                                                                                                        <th class="text-end min-w-70px sorting" tabindex="0"--}}
{{--                                                                                                            aria-controls="kt_ecommerce_products_table" rowspan="1"--}}
{{--                                                                                                            colspan="1"--}}
{{--                                                                                                            style="width: 98.55px;"--}}
{{--                                                                                                            aria-label="تعداد: activate to sort column ascending">تعداد--}}
{{--                                                                                                        </th>--}}
                                                    <th class="text-end min-w-100px sorting" tabindex="0"
                                                        aria-controls="kt_ecommerce_products_table" rowspan="1"
                                                        colspan="1"
                                                        style="width: 107.517px;"
                                                        aria-label="قیمت: activate to sort column ascending">قیمت
                                                    </th>

                                                    <th class="text-end min-w-70px sorting_disabled" rowspan="1"
                                                        colspan="1"
                                                        style="width: 98.8333px;" aria-label="عملیات">عملیات
                                                    </th>
                                                </tr>
                                                </thead>
                                                <tbody class="fw-semibold text-gray-600">
                                                @foreach($products as $product)
                                                    <tr class="odd product-item"
                                                        data-category-ids="{{ $product->Categories->pluck('id')->implode(',') }}">
                                                        <td>
                                                            <div class="d-flex align-items-center">
                                                                <!--begin::Thumbnail-->
                                                                <a href="{{ imageExist(env('PRODUCT_IMAGES_UPLOAD_PATH'),$product->primary_image) }}"
                                                                   class="symbol symbol-50px">
                                                    <span class="symbol-label"
                                                          style="background-image:url({{ imageExist(env('PRODUCT_IMAGES_UPLOAD_PATH'),$product->primary_image) }});"></span>
                                                                </a>
                                                                <!--end::Thumbnail-->
                                                                <div class="ms-5">
                                                                    <!--begin::Title-->
                                                                    <a href="{{ imageExist(env('PRODUCT_IMAGES_UPLOAD_PATH'),$product->primary_image) }}"
                                                                       class="text-gray-800 text-hover-primary fs-5 fw-bold"
                                                                       data-kt-ecommerce-product-filter="product_name">
                                                                        {{ $product->name }}
                                                                    </a>
                                                                    <!--end::Title-->
                                                                </div>
                                                            </div>
                                                        </td>
{{--                                                                                                                <td class="text-end pe-0" data-order="{{$product->quantity}}">--}}
{{--                                                                                                                    <span class="fw-bold ms-3">{{$product->quantity}}</span>--}}
{{--                                                                                                                </td>--}}
                                                        <td class="text-end pe-0">
                                                            {{ number_format($product->price) }}
                                                        </td>


                                                        <td class="text-end">
                                                            @if($product->hasStock())
                                                                <button
                                                                    onclick="openColorSelectionModal({{ $product->id }}, '{{ $product->name }}', '{{ $product->price }}')"
                                                                    class="btn btn-sm btn-danger">
                                                                    افزودن به سبد خرید
                                                                </button>
                                                            @else
                                                                <span
                                                                    class="badge text-white fs-lg bg-danger">ناموجود</span>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                @endforeach

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <!--end::Table-->
                                    <div id="grade_view" class="d-none row">
                                        @foreach($products as $product)
                                            <div class="col-12 col-md-4 product-item"
                                                 data-category-ids="{{ $product->Categories->pluck('id')->implode(',') }}">
                                                <div class="product-card">
                                                    <img
                                                        src="{{ imageExist(env('PRODUCT_IMAGES_UPLOAD_PATH'),$product->primary_image) }}"
                                                        alt="Product Image" class="product-image">
                                                    <div class="product-name">
                                                        {{ $product->name }}
                                                    </div>
                                                    <p class="product-description">
                                                        {{ number_format($product->price).' تومان ' }}
                                                    </p>
                                                    @if($product->hasStock())
                                                        <button
                                                            onclick="openColorSelectionModal({{ $product->id }}, '{{ $product->name }}', '{{ $product->price }}')"
                                                            class="btn btn-sm btn-danger">
                                                            افزودن به سبد خرید
                                                        </button>
                                                    @else
                                                        <span class="badge  text-white fs-lg bg-danger">ناموجود</span>
                                                    @endif
                                                </div>

                                            </div>
                                        @endforeach

                                    </div>
                                </div>
                                <!--end::کارت body-->
                            </div>
                            <!--end::محصولات-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" name="user_type" id="user_type_input" value="">
        <input type="hidden" name="user_id" id="user_id" value="">
    </div>

    @include('seller.metronik.cart_modal')
@endsection