@extends('seller.metronik.layout')

@section('style')
    <style>
        /*//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>
        .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 */
        }

    </style>
@endsection

@section('script')
    <script>
        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) {
            // ایجاد یک شیء برای محصول
            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);
            let user_id = {{ $user->id }};
            $.ajax({
                url: '{{ route('seller.cart.save') }}', // URL درخواست
                type: 'POST', // یا 'GET' بر اساس نیاز شما
                contentType: 'application/json',
                data: JSON.stringify({
                    _token: '{{ csrf_token() }}',
                    product_ids: product_ids,
                    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) {
                    console.log(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)
                    }
                }
            });
        }

    </script>
@endsection

@section('content')




    <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>
                                        <!--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">
                                                        <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_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="{{$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">
                                                            <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 id="grade_view" class="d-none row">
                                        @foreach($products as $product)
                                        <div class="col-12 col-md-4">
                                            <div class="product-card">
                                                <img src="{{ imageExist(env('PRODUCT_IMAGES_THUMBNAIL_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>
                                                <button
                                                    onclick="AddToCart({{ $product->id }},'{{ $product->name }}','{{ $product->price }}')"
                                                    class="btn btn-sm btn-danger">
                                                    افزودن به سبد خرید
                                                </button>
                                            </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