@extends('seller.layout.index')

{{-- ===========  meta Title  =================== --}}
@section('title')
    محصولات
@endsection
{{-- ===========  My Css Style  =================== --}}
@section('style')
    <style>
        .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;
        }
    </style>
@endsection
{{-- ===========  My JavaScript  =================== --}}

@section('script')
    <script>

        // function ShowModalSelectUser(product_id) {
        //     $('#select_user_modal').modal('show');
        // }
        let cart_items = [];

        function AddToCart(product_id, product_name, product_price) {
            // ایجاد یک شیء برای محصول
            const product = {
                id: product_id,
                name: product_name,
                price: product_price
            };

            // بررسی وجود محصول قبل از افزودن
            const existingProduct = cart_items.find(item => item.id === product_id);
            if (!existingProduct) {
                cart_items.push(product);
            }

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

        function ShowCart() {
            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>
                </tr>
            </thead>
            <tbody>
    `;

            cart_items.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"><button class="btn btn-danger btn-sm" onclick="removeFromCart(${item.id})">حذف</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');
                $('#choose_user_box').addClass('d-none');
            }
        }

        function removeFromCart(itemId) {
            cart_items = cart_items.filter(item => item.id !== itemId);
            $('#cart_count').text(cart_items.length);
            ShowCart(); // به‌روزرسانی جدول بعد از حذف
        }

        $('#add_order_btn').click(function () {
            // $('#choose_user_box').removeClass('d-none');
            const product_ids = cart_items.map(obj => obj.id);
            $.ajax({
                url: '{{ route('seller.cart.save') }}', // URL درخواست
                type: 'POST', // یا 'GET' بر اساس نیاز شما
                contentType: 'application/json',
                data: JSON.stringify({
                    _token: '{{ csrf_token() }}',
                    product_ids: product_ids
                }),

                success: function (response) {

                    if (response[0] == 1) {
                        let route=response[2];
                        GoToCart(route);
                    }

                },

                error: function (jqXHR, textStatus, errorThrown) {

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

                }

            });
        });


        function ShowUserOption(tag, id) {
            $('.option_btn').removeClass('active');
            $(tag).addClass('active');


            $('.user_option').addClass('d-none');
            $('#' + id).removeClass('d-none')

        }

        $('#save_user_info').click(function () {
            const formData = new FormData($('#user_form_information')[0]);

            $.ajax({
                url: '{{ route('seller.user.save') }}', // URL درخواست
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    // عمل موفق
                    alert('اطلاعات با موفقیت ذخیره شد!'); // پیغام موفقیت
                    $('.error-message').empty(); // پاک کردن خطاها زمانی که اطلاعات درست ذخیره شوند
                    CreateCart(response.user_id);
                },
                error: function (xhr) {
                    const errors = xhr.responseJSON.errors; // خطاهای بازگشتی
                    $('.error-message').empty(); // پاک کردن خطاهای قبلی
                    for (let key in errors) {
                        $('#error_' + key).text(errors[key].join(', ')); // نمایش خطا در مکان مشخص
                    }
                }
            });
        });
        $('#add_exists_user').click(function () {
            $('#error_user').addClass('d-none');
            let user_id = $('#user').val();
            if (user_id == null || user_id == '') {
                $('#error_user').removeClass('d-none');
                return;
            }
            CreateCart(user_id)
        })

        function CreateCart(user_id) {
            console.log(user_id);
            const product_ids = cart_items.map(obj => obj.id);
            $.ajax({

                url: '{{ route('seller.cart.save') }}', // URL درخواست

                type: 'POST', // یا 'GET' بر اساس نیاز شما

                contentType: 'application/json',

                data: JSON.stringify({
                    _token: '{{ csrf_token() }}',

                    user_id: user_id,

                    product_ids: product_ids

                }),

                success: function (response) {

                    if (response[0] == 1) {
                        let route=response[2];
                        GoToCart(route);
                    }

                },

                error: function (jqXHR, textStatus, errorThrown) {

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

                }

            });
        }

        function GoToCart(route) {
            let html='<div class="alert alert-success text-center" style="margin: 15px !important;">سبد خرید با موفقیت ثبت شد</div>';
            $('#cart_modal').find('.modal-content').html(html);
           setTimeout(function() {
               window.location.href=route;
           },1000)
        }


    </script>
@endsection
{{-- ===========      CONTENT      =================== --}}
@section('content')
    @include('seller.products.user_modal')
    @include('seller.products.cart_modal')
    <div class="row">
        <div class="col-12">
            <div id="kt_app_content" class="app-content">
                <!--begin::محصولات-->
                <div class="card card-flush">
                    <!--begin::کارت header-->
                    <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                        <!--begin::کارت title-->
                        <div class="card-title">
                            <!--begin::جستجو-->
                            <div class="d-flex align-items-center position-relative my-1">
                                <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-->
                        <div class="card-toolbar flex-row-fluid justify-content-end gap-5"
                             data-select2-id="select2-data-110-tdx9">
                            <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="kt_ecommerce_products_table_wrapper"
                             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">
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <!--begin::Thumbnail-->
                                                    <a href="../../demo43/dist/apps/ecommerce/catalog/edit-product.html"
                                                       class="symbol symbol-50px">
                                                    <span class="symbol-label"
                                                          style="background-image:url({{ imageExist(env('PRODUCT_IMAGES_THUMBNAIL_UPLOAD_PATH'),$product->primary_image) }});"></span>
                                                    </a>
                                                    <!--end::Thumbnail-->
                                                    <div class="ms-5">
                                                        <!--begin::Title-->
                                                        <a href="../../demo43/dist/apps/ecommerce/catalog/edit-product.html"
                                                           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="16">
                                                <span class="fw-bold ms-3">16</span>
                                            </td>
                                            <td class="text-end pe-0">
                                                {{ number_format($product->price) }}
                                            </td>


                                            <td class="text-end">
                                                <button
                                                    onclick="AddToCart({{ $product->id }},'{{ $product->name }}','{{ $product->price }}')"
                                                    class="btn btn-sm btn-danger">
                                                    افزودن به سبد خرید
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!--end::Table-->
                    </div>
                    <!--end::کارت body-->
                </div>
                <!--end::محصولات-->
            </div>
        </div>
    </div>
@endsection