@extends('layouts.app')
@section('content')
    @include('includes.bread_crumb_with_header', [
      'header' => 'Products',
      'bread_crumbs' => ['Dashboard' => "", 'recommended' => ''],
  ])
    <div class="card" style="margin-left: 35px; margin-right: 35px;">
        <div class="card-body ">
            <!--begin::Navs-->
            <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold">
                <li class="nav-item mt-2">
                    <a class="nav-link text-active-primary ms-0 me-10 py-5"
                       href="{{ route('products.index') }}">Products</a>
                </li>
                <li class="nav-item mt-2">
                    <a class="nav-link text-active-primary ms-0 me-10 py-5 active"
                       href="{{ url('products/recommended') }}">Recommended  <i class="fa-solid fa-crown text-warning fs-5 " style="position: absolute; top:40px; transform: rotate(-20deg); margin-left: -8px;" data-bs-toggle="tooltip" data-bs-delay-show="500" data-bs-placement="right" aria-label="Upgrade" data-kt-initialized="1"></i></a>
                </li>
                <li class="nav-item mt-2">
                    <a class="nav-link text-active-primary ms-0 me-10 py-5"
                       href="{{ url('products/imported') }}">Imported</a>
                </li>
                <li class="nav-item mt-2">
                    <a class="nav-link text-active-primary ms-0 me-10 py-5"
                       href="{{ url('/products/import_error_log/show') }}">Product import log</a>
                </li>
                <li class="nav-item mt-2">
                    <a class="nav-link text-active-primary ms-0 me-10 py-5"
                       href="{{ url('/products/revise_log/show') }}">Product revise log</a>
                </li>
            </ul>
        </div>
        <div class="card-title d-flex gap-3" style="margin-left: 30px;">
            <form action="{{ url('products/search') }}" method="post">
                @csrf
                <div class="d-flex align-items-center position-relative my-1 working-on-it">

                    <span class="svg-icon svg-icon-1 position-absolute ms-4">

                        @if(\Request::is('products/search'))
                            <a href="{{ route('products.index') }}" class="border-0 text-gray-400 btn"
                               style="background: transparent;">

                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                 class="bi bi-x-lg" viewBox="0 0 16 16">
                          <path
                              d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
                        </svg>


                                </a>
                        @else
                            <button class="border-0 text-gray-400" style="background: transparent;" type="submit">
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                       class="bi bi-search" viewBox="0 0 16 16">
                          <path
                              d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                        </svg>

                        </button>
                        @endif
                    </span>
                    <input type="text" data-kt-docs-table-filter="search" name="search"
                           class="form-control form-control-solid w-500px ps-20 " placeholder="Search Product" {{\Request::is('products/search')? "value=".$searchText." "."disabled" :''}} required>

                </div>
            </form>
        </div>
    </div>


    <div class="card card-flush m-10" data-select2-id="select2-data-125-ss3g">
        <div class="card-header align-items-center py-5 gap-2 gap-md-5" data-select2-id="select2-data-124-5bsj">
            <div class="card-title d-flex gap-3 d-none">
                <form action="{{ url('products/search') }}" method="post">
                    @csrf
                    <div class="d-flex align-items-center position-relative my-1 working-on-it">

                    <span class="svg-icon svg-icon-1 position-absolute ms-4">

                        @if(\Request::is('products/search'))
                            <a href="{{ route('products.index') }}" class="border-0 text-gray-400 btn"
                               style="background: transparent;">

                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                 class="bi bi-x-lg" viewBox="0 0 16 16">
                          <path
                              d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
                        </svg>


                                </a>
                        @else
                            <button class="border-0 text-gray-400" style="background: transparent;" type="submit">
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                       class="bi bi-search" viewBox="0 0 16 16">
                          <path
                              d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                        </svg>

                        </button>
                        @endif
                    </span>
                        <input type="text" data-kt-docs-table-filter="search" name="search"
                               class="form-control form-control-solid w-250px ps-20 " placeholder="Search" {{\Request::is('products/search')? "value=".$searchText :''}} required>

                    </div>
                </form>
            </div>
            <div class="card-toolbar d-none">
                <select class="form-control form-select float-right w-200px product-filter" data-control="select2"
                        data-hide-search="true">
                    <option value="" disabled selected hidden>Filter</option>
                    <option value="1">Imported</option>
                    <option value="2">Recommended</option>
                </select>
            </div>

            <div class="row w-100 product-body">

                @foreach ($products as $productIndex => $product)
                    @php
                        $price = $variants[$productIndex]['getVariants'][0]->price;
                        $rsp = $variants[$productIndex]['getVariants'][0]->rsp;
                        $quantity = $variants[$productIndex]['getVariants'][0]->quantity;
                        $profitAfterEbayFee =$rsp - $price;
                    @endphp


                    @if($product->status != 1 && $product->recommend == 1)
                        <div class="col-sm-6 col-xxl-4 col-md-6 mb-5">
                            <div class="card card-flush" style="border: solid 1px #e8e7e7; height:450px;">

                                    <span class="badge badge-info text-center animation-blink w-95px">Recommended</span>

                                @if($product->isImported)
                                    <div class="ribbon ribbon-triangle ribbon-top-end border-primary">
                                        <div class="ribbon-icon mt-n5 ms-n1">
                                            <i class="bi bi-check2 fs-2 text-white"></i>
                                        </div>
                                    </div>
                                @endif

                                <div class="card-body text-center pb-1">
                                    <div class="d-flex align-items-end flex-stack">
                                        <div class="text-start">
                                        <span
                                            class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-md-6 fs-sm-6 fs-xxl-3  d-block">{{ substr_replace($variants[$productIndex]['title'], " ...",40) }}</span>
                                        </div>
                                    </div>

                                    <span style="">
                                    <div class="d-flex align-items-end flex-stack">
                                        <div class="text-start">
                                            <span class="text-gray-400 mt-1 fw-bold fs-6">Price</span>
                                        </div>
                                        <span class="text-gray-600 text-end fw-bold fs-7">
                                                <small>£</small> {{ $price }}
                                        </span>
                                    </div>
                                    <div class="d-flex align-items-end flex-stack mb-1">
                                        <div class="text-start">
                                            <span class="text-gray-400 mt-1 fw-bold fs-6">Rsp</span>
                                        </div>
                                        <span class="text-gray-600 text-end fw-bold fs-7">
                                           <small>£</small> {{ $rsp }}
                                        </span>
                                    </div>
                                    <div class="d-flex align-items-end flex-stack mb-3">
                                        <div class="text-start">
                                            <span class="text-gray-600 mt-1 fw-bold fs-7">Profit after
                                                <span style="color:#E53238;">e</span>
                                                <span style="color:#0064D2;">b</span>
                                                <span style="color:#F5AF02;">a</span>
                                                <span style="color:#86B817;">y</span>
                                                fees</span>
                                        </div>
                                        <span class="text-gray-600 text-end fw-bold fs-8">
                                         <small>£</small> {{ $profitAfterEbayFee }}
                                        </span>
                                    </div>
                                    <div class="d-flex align-items-end flex-stack mb-1 mt-2 text-gray-600"
                                         style="flex-wrap: wrap;">
                                        <span class="w-100 text-start h-20px d-flex"
                                              style="justify-content: space-between;">
                                            <p>dispatch time :</p>
                                            <p>{{ $product->dispatch_time }} Days</p>
                                        </span>
                                        <span class="w-100 text-start h-20px d-flex"
                                              style="justify-content: space-between;">
                                            <p>quantity :</p>
                                            <p>{{ $quantity }}</p>
                                        </span>
                                    </div>
                                    <div class="owl-carousel" style="height: 110px;">
                                        @foreach ($product_image as $image)
                                            @if ($image['reference_id'] == $product['id'])
                                                <div>
                                                    <div
                                                        class="overlay-wrapper bgi-no-repeat bgi-position-center bgi-size-cover card-rounded mb-7 ml-5 mr-5"
                                                        style="max-height: 200px; max-width:200px; width:150px; height: 150px; background-image:url('{{ asset('storage/product') . '/' . $image['storage_name'] }}')">
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </span>
                                </div>

                                <!--end::Body-->
                                <!--begin::Footer-->
                                <div class="card-footer d-flex flex-stack pt-5 flex-end">
                                    <!--begin::Link-->
                                    <a class="btn btn-sm btn-primary flex-shrink-0 me-2
                                 @if(!$product->isImported)
                                    {{ "import-product btn-primary" }}
                                    @else
                                     {{ "btn-dark" }}
                                    @endif"
                                       data-bs-target="#kt_modal_bidding" data-bs-toggle="modal"
                                       data-id="{{ $product['id'] }}">Import</a>
                                    <!--end::Link-->
                                    <!--begin::Link-->
                                    <a class="btn btn-sm btn-light flex-shrink-0"
                                       href="{{ url('/product/view') }}/{{ $product['id'] }}">View Item</a>
                                    <!--end::Link-->
                                </div>
                                <!--end::Footer-->
                            </div>
                            <!--end::Card widget 14-->
                        </div>
                    @endif

                @endforeach
                {{ $products->links() }}
            </div>


        </div>
        <!--end::Card header-->

    </div>
@endsection
@push('script')
    {{-- ADD PRODUCT MODAL --}}
    <script>


        $(document).on('change', '.product-filter', async function () {
            let value = $(this).val();
            $('.product-body').html("");

            try {
                const url = "{{url('products/filter')}}" + "/" + value;
                let ajaxRequest = new HttpRequest(url, 'get');
                let response = await ajaxRequest.call();
                $(".modal").modal("hide");
                console.log(response);

                if(value == 1){
                    for (let i = 0; i < response.products.length; i++) {
                        $('.product-body').append(`
                                    <div class="col-sm-6 col-xxl-4 col-md-6 mb-5">

                                                        <!--begin::Card widget 14-->
                                                        <div class="card card-flush" style="border: solid 1px #e8e7e7; height:420px;">

                                <span class="badge badge-info text-center animation-blink w-95px">Recommended</span>

                                <div class="ribbon ribbon-triangle ribbon-top-end border-primary">
                                    <div class="ribbon-icon mt-n5 ms-n1">
                                        <i class="bi bi-check2 fs-2 text-white"></i>
                                    </div>
                                </div>


                                <div class="card-body text-center pb-1">
                                    <div class="d-flex align-items-end flex-stack">
                                        <div class="text-start">
                                        <span
                                            class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-md-6 fs-sm-6 fs-xxl-3  d-block">${response.products[i].title}</span>
                                                                    </div>
                                                                </div>

                                                                <span style="">
                                                                <div class="d-flex align-items-end flex-stack">

                                                                    <!--begin::Title-->
                                                                    <div class="text-start">
                                                                        <span class="text-gray-400 mt-1 fw-bold fs-6">Price</span>
                                                                    </div>
                                                                    <!--end::Title-->


                                                                    <!--begin::Total-->

                                                                    <span class="text-gray-600 text-end fw-bold fs-7">
                                                                            ${response.products[i].get_variants[0].price}<small>£</small>
                                </span>
                                <!--end::Total-->

                            </div>
                            <div class="d-flex align-items-end flex-stack mb-1">
                                <!--begin::Title-->
                                <div class="text-start">
                                    <span class="text-gray-400 mt-1 fw-bold fs-6">Rsp</span>
                                </div>
                                <!--end::Title-->
                                <!--begin::Total-->
                                <span class="text-gray-600 text-end fw-bold fs-7">
                                   ${response.products[i].get_variants[0].rsp}<small>£</small>
                                </span>
                                <!--end::Total-->

                            </div>
                            <div class="d-flex align-items-end flex-stack mb-3">
                                <!--begin::Title-->
                                <div class="text-start">
                                    <span class="text-gray-600 mt-1 fw-bold fs-7">Profit after
                                        <span style="color:#E53238;">e</span>
                                        <span style="color:#0064D2;">b</span>
                                        <span style="color:#F5AF02;">a</span>
                                        <span style="color:#86B817;">y</span>
                                        fees</span>
                                </div>
                                <!--end::Title-->
                                <!--begin::Total-->
                                <span class="text-gray-600 text-end fw-bold fs-8">
                                 ${response.products[i].get_variants[0].rsp - response.products[i].get_variants[0].price}<small>£</small>
                                </span>
                                <!--end::Total-->
                            </div>
                            <div class="d-flex align-items-end flex-stack mb-1 mt-2 text-gray-600"
                                 style="flex-wrap: wrap;">
                                <span class="w-100 text-start h-20px d-flex"
                                      style="justify-content: space-between;">
                                    <p>dispatch time :</p>
                                    <p>${response.products[i].dispatch_time} Days</p>
                                                                    </span>
                                                                    <span class="w-100 text-start h-20px d-flex"
                                                                          style="justify-content: space-between;">
                                                                        <p>quantity :</p>
                                                                        <p>${response.products[i].get_variants[0].quantity}</p>
                                                                    </span>
                                                                </div>
                                                                    <!--begin::Image-->
                                                                <div class="owl-carousel" style="height: 110px;">


                                </div>
                            </span>
                            </div>

                            <!--end::Body-->
                            <!--begin::Footer-->
                            <div class="card-footer d-flex flex-stack pt-5 flex-end">
                                <!--begin::Link-->
                                <a class="btn btn-sm btn-primary flex-shrink-0 me-2 btn-dark"
                                                                   data-bs-target="#kt_modal_bidding" data-bs-toggle="modal"
                                                                   data-id="">Import</a>
                                                                <!--end::Link-->
                                                                <!--begin::Link-->
                                                                <a class="btn btn-sm btn-light flex-shrink-0"
                                                                   href="{{ url('/product/view') }}/${response.products[i].id}">View Item</a>
                                                                <!--end::Link-->
                                                            </div>
                                                            <!--end::Footer-->
                                                        </div>
                                                        <!--end::Card widget 14-->
                                                    </div>
    `);
                    }

                }else if(value == 2){

                    for (let i = 0; i < response.products.length; i++) {
                        $('.product-body').append(`
                                    <div class="col-sm-6 col-xxl-4 col-md-6 mb-5">

                                                        <!--begin::Card widget 14-->
                                                        <div class="card card-flush" style="border: solid 1px #e8e7e7; height:420px;">

                                <span class="badge badge-info text-center animation-blink w-95px">Recommended</span>

                                <div class="ribbon ribbon-triangle ribbon-top-end border-primary">
                                    <div class="ribbon-icon mt-n5 ms-n1">
                                        <i class="bi bi-check2 fs-2 text-white"></i>
                                    </div>
                                </div>


                                <div class="card-body text-center pb-1">
                                    <div class="d-flex align-items-end flex-stack">
                                        <div class="text-start">
                                        <span
                                            class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-md-6 fs-sm-6 fs-xxl-3  d-block">${response.products[i].title}</span>
                                                                    </div>
                                                                </div>

                                                                <span style="">
                                                                <div class="d-flex align-items-end flex-stack">

                                                                    <!--begin::Title-->
                                                                    <div class="text-start">
                                                                        <span class="text-gray-400 mt-1 fw-bold fs-6">Price</span>
                                                                    </div>
                                                                    <!--end::Title-->


                                                                    <!--begin::Total-->

                                                                    <span class="text-gray-600 text-end fw-bold fs-7">
                                                                            ${response.products[i].get_variants[0].price}<small>£</small>
                                </span>
                                <!--end::Total-->

                            </div>
                            <div class="d-flex align-items-end flex-stack mb-1">
                                <!--begin::Title-->
                                <div class="text-start">
                                    <span class="text-gray-400 mt-1 fw-bold fs-6">Rsp</span>
                                </div>
                                <!--end::Title-->
                                <!--begin::Total-->
                                <span class="text-gray-600 text-end fw-bold fs-7">
                                   ${response.products[i].get_variants[0].rsp}<small>£</small>
                                </span>
                                <!--end::Total-->

                            </div>
                            <div class="d-flex align-items-end flex-stack mb-3">
                                <!--begin::Title-->
                                <div class="text-start">
                                    <span class="text-gray-600 mt-1 fw-bold fs-7">Profit after
                                        <span style="color:#E53238;">e</span>
                                        <span style="color:#0064D2;">b</span>
                                        <span style="color:#F5AF02;">a</span>
                                        <span style="color:#86B817;">y</span>
                                        fees</span>
                                </div>
                                <!--end::Title-->
                                <!--begin::Total-->
                                <span class="text-gray-600 text-end fw-bold fs-8">
                                 ${response.products[i].get_variants[0].rsp - response.products[i].get_variants[0].price}<small>£</small>
                                </span>
                                <!--end::Total-->
                            </div>
                            <div class="d-flex align-items-end flex-stack mb-1 mt-2 text-gray-600"
                                 style="flex-wrap: wrap;">
                                <span class="w-100 text-start h-20px d-flex"
                                      style="justify-content: space-between;">
                                    <p>dispatch time :</p>
                                    <p>${response.products[i].dispatch_time} Days</p>
                                                                    </span>
                                                                    <span class="w-100 text-start h-20px d-flex"
                                                                          style="justify-content: space-between;">
                                                                        <p>quantity :</p>
                                                                        <p>${response.products[i].get_variants[0].quantity}</p>
                                                                    </span>
                                                                </div>
                                                                    <!--begin::Image-->
                                                                <div class="owl-carousel" style="height: 110px;">

                                <div>
                                    <div
                                        class="overlay-wrapper bgi-no-repeat bgi-position-center bgi-size-cover card-rounded mb-7 ml-5 mr-5"
                                        style="max-height: 200px; max-width:200px; width:150px; height: 150px; background-image:url('')">
                                                                                </div>
                                                                            </div>

                                </div>
                            </span>
                            </div>

                            <!--end::Body-->
                            <!--begin::Footer-->
                            <div class="card-footer d-flex flex-stack pt-5 flex-end">
                                <!--begin::Link-->
                                <a class="btn btn-sm btn-primary flex-shrink-0 me-2"
                                                                   data-bs-target="#kt_modal_bidding" data-bs-toggle="modal"
                                                                   data-id="">Import</a>
                                                                <!--end::Link-->
                                                                <!--begin::Link-->
                                                                <a class="btn btn-sm btn-light flex-shrink-0"
                                                                   href="">View Item</a>
                                                                <!--end::Link-->
                                                            </div>
                                                            <!--end::Footer-->
                                                        </div>
                                                        <!--end::Card widget 14-->
                                                    </div>
    `);
                    }
                }


                toastr.success(response.message);
                // location.reload();
            } catch (err) {
                toastr.error(err);
            }

            alert(value);
        });


        $(document).ready(function () {
            $(".owl-carousel").on('mousewheel', '.owl-stage', function (e) {
                if (e.deltaY > 0) {
                    $(this).trigger('next.owl');
                } else {
                    $(this).trigger('prev.owl');
                }
                e.preventDefault();
            });
        });


        const modalId = "modal";
        $(document).ready(function () {
            $(".owl-carousel").owlCarousel({
                items: 2
            });
        });


        $(document).on("click", ".import-product", async function (e) {
            e.preventDefault()

            let productId = $(this).data('id');

            const btn = $(this);
            const btnTitle = btn.html();
            try {
                loadButton(btn, 'Loading ...');
                let loadURL = `${baseUrl}/products/import/modal/` + productId;
                await loadModal(modalId, loadURL);
            } catch (err) {
                toast.error("Could not load add event popup. (error_ref: add_product)");
                console.log("add_product", err);
            } finally {
                resetButton(btn, btnTitle);
            }

        });
    </script>
    {{-- ADD PRODUCT MODAL --}}

    <script>
        $(document).on('submit', '.product-import-modal-form', async function (e) {
            e.preventDefault();
            let btn = $('.import');
            try {
                loadButton(btn)
                const url = `${baseUrl}/products/import`;
                let ajaxRequest = new HttpRequest(url, 'POST');
                ajaxRequest.set_data_by_form_object($(this));
                let response = await ajaxRequest.call();
                $(".modal").modal("hide");
                toastr.success(response.message);
                setTimeout(function () {
                    location.reload();
                }, 2000);
            } catch (err) {
                let error = JSON.parse(err);
                if (error.status == "warning") {
                    toastr.success("Imported successfully");
                    for (let i = 0; i < error.errors.length; i++) {
                        toastr.info(error.errors[i].ShortMessage);
                    }
                } else {
                    for (let i = 0; i < error.errors.length; i++) {
                        toastr.error(error.errors[i].ShortMessage);
                    }
                }
                setTimeout(function () {
                    location.reload();
                }, 2000);
            } finally {
                resetButton(btn, 'Proceed')
            }

        });
    </script>
    <script src="{{ asset('assets/js/widgets.bundle.js') }}"></script>
@endpush