@extends('layouts.app')


@push('css')
    <style>
        .parent {height: 150px;width: 50%;}.parent > .row {display: flex;align-items: center;height: 100% }.col img {height: 100px;width: 100%;cursor: pointer;transition: transform 1s;object-fit: cover }.col label {overflow: hidden;position: relative }.imgbgchk:checked + label > .tick_container {opacity: 1 }.imgbgchk:checked + label > img {transform: scale(1.25);opacity: .3 }.tick_container {transition: .5s;opacity: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);cursor: pointer;text-align: center }.tick {background-color: #4caf50;color: #fff;font-size: 16px;padding: 6px 12px;height: 40px;width: 40px;border-radius: 100% }
    </style>
@endpush
@section('content')
    @include('includes.bread_crumb_with_header', [
    'header' => 'Products',
    'bread_crumbs' => ['Home' => ""],
])
    <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">
                <!--begin::Nav item-->
                <li class="nav-item mt-2">
                    <a class="nav-link text-active-primary ms-0 me-10 py-5 active"
                       href="{{ url('admin/products') }}">Products</a>
                </li>

                <!--end::Nav item-->
                <!--begin::Nav item-->
                <li class="nav-item mt-2">
                    <a class="nav-link text-active-primary ms-0 me-10 py-5"
                       href="{{ url('admin/products/import_Log') }}">Product import log</a>
                </li>
                <!--end::Nav item-->

                <!--begin::Nav item-->
                <li class="nav-item mt-2">
                    <a class="nav-link text-active-primary ms-0 me-10 py-5"
                       href="{{ url('admin/products/revise_Log') }}">Product revise log</a>
                </li>
                <!--end::Nav item-->

            </ul>
            <!--begin::Navs-->
        </div>
    </div>
    <div class="card card-flush m-10 p-5" data-select2-id="select2-data-125-ss3g">
        <!--begin::Card header-->
        @include('pages.admin.products.includes.card-header')
        <!--end::Card header-->
        <!--begin::Card 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 no-footer"
                           id="kt_datatable_column_rendering">
                        <!--begin::Table head-->
                        <thead>
                        <!--begin::Table row-->
                        <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                            {{--                            <th class="text-center min-w-10px">#</th>--}}
                            <th>Image</th>
                            <th>Name</th>
                            <th>Price</th>
                            <th>RSP</th>
                            <th>SKU</th>
                            <th>Qty</th>
                            <th>Imports</th>
                            <th>Courier</th>
                            <th>Dispatch Time</th>
                            <th>Recommend</th>
                            <th class="text-center">Actions</th>
                        </tr>
                        <!--end::Table row-->
                        </thead>

                        <!--end::Table head-->
                        <!--begin::Table body-->
                        <tbody class="fw-semibold text-gray-600">

                        @foreach($products as $index => $product)
                            @if($product->status != 1)
                            <tr>
                                {{--                                <td style="width: 100px;">--}}
                                {{--                                    <a class="btn btn-icon fs-3 text-success drop-variants-btn" data-id="{{ $product->id }}"><i class="bi bi-chevron-down"></i></a><span class="badge badge-outline bc-orange-b m-2 badge-sm {{ (Count($product->getVariants) == 1) ? "d-none":"" }}">{{ Count($product->getVariants)}}</span>--}}
                                {{--                                </td>--}}

                                <td class="d-flex gap-2">

                                    <div class="owl-carousel w-50px h-50px">

                                        @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-3 mr-3"
                                                        style="height: 50px; width:50px; background-image:url('{{ asset('storage/product')."/".$image['storage_name'] }}')"></div>
                                                </div>
                                            @endif
                                        @endforeach

                                    </div>

                                    @if($product->status == 1)
                                        <span class="mt-3">
                                        <span class="badge badge-danger">Deleted</span>
                                    </span>
                                    @endif


                                </td>
                                <td>{{ substr_replace($product->title, " ...", 20) }}</td>
                                <td>
                                    @foreach($product->getVariants as $variant)
                                        @if(!$product->isVariant)
                                            {{ "€".$variant->price }}
                                        @endif
                                    @endforeach
                                </td>
                                <td>

                                    @foreach($product->getVariants as $variant)
                                        @if(!$product->isVariant)
                                            {{ "€".$variant->rsp }}
                                        @endif
                                    @endforeach
                                </td>
                                <td>
                                    @foreach($product->getVariants as $variant)
                                        @if(!$product->isVariant)
                                            {{ $variant->sku }}
                                        @endif
                                    @endforeach
                                </td>
                                <td>
                                    @foreach($product->getVariants as $variant)
                                        @if(!$product->isVariant)
                                            {{ $variant->quantity }}
                                        @endif
                                    @endforeach
                                </td>
                                <td>
                                    {{ $product->imports }}
                                </td>
                                <td>
                                    @switch($product->courier)
                                        @case(\App\Models\Product::COURIER_ROYAL_MAIL)
                                            <span class="badge badge-danger" style="color:#ffca00; font-weight: 800;">Royal Mail</span>
                                            @break

                                        @case(\App\Models\Product::COURIER_HERMES)
                                            <span class="badge badge-primary" style="color:#f5f5f5; font-weight: 800;">Hermes</span>
                                            @break
                                    @endswitch


                                </td>
                                <td>{{ $product->dispatch_time }} DAYS</td>
                                <td>
                                    @if($product->recommend == 1)
                                        <span class="badge badge-success">Recommended</span>
                                    @endif
                                </td>
                                <td class="text-center min-w-100px">
                                    @if($product->status != 1)
                                    <div class="dropdown show">
                                        <a class="btn btn-secondary dropdown-toggle" href="#" role="button"
                                           id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
                                           aria-expanded="false">
                                            Action
                                        </a>

                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">

                                                <a class="dropdown-item product-edit-btn"
                                                   data-id="{{ $product['id'] }}">Edit</a>
                                                <a class="dropdown-item product-delete-btn"
                                                   data-id="{{ $product['id'] }}">
                                                    Delete
                                                </a>
                                                @if($product->recommend == 1)
                                                    <a class="dropdown-item product-un-recommend-btn"
                                                       data-id="{{ $product['id'] }}">
                                                        Un-Recommend
                                                    </a>
                                                @else
                                                    <a class="dropdown-item product-recommend-btn"
                                                       data-id="{{ $product['id'] }}">
                                                        Recommend
                                                    </a>
                                                @endif

                                        </div>
                                    </div>

                                    @endif
                                </td>

                            </tr>
                            @if($product->isVariant)

                                @foreach($product->getVariants as $variant)
                                    <tr class="d-none product-variant" data-id="{{ $product->id }}">
                                        <td class="invisible"></td>
                                        <td><i class="bi bi-arrow-right-circle fs-3"></i></td>
                                        <td>
                                            <div class="owl-carousel w-50px h-50px">

                                                @foreach($variant->image as $image)
                                                    <div>
                                                        <div
                                                            class="overlay-wrapper bgi-no-repeat bgi-position-center bgi-size-cover card-rounded mb-7 ml-3 mr-3"
                                                            style="height: 50px; width:50px; background-image:url('{{ asset('storage/product')."/".$image['storage_name'] }}')"></div>
                                                    </div>
                                                @endforeach

                                            </div>
                                        </td>
                                        <td>
                                            {{ $variant->price }}
                                        </td>
                                        <td>
                                            {{ $variant->sku }}
                                        </td>
                                        <td>
                                            {{ $variant->quantity }}
                                        </td>
                                        <td>
                                            {{ $variant->rsp }}
                                        </td>
                                        <td class="invisible"></td>
                                        <td class="invisible"></td>
                                        <td class="invisible"></td>
                                    </tr>
                                @endforeach
                            @endif
                            @endif
                        @endforeach

                        </tbody>
                        <!--end::Table body-->
                    </table>
                    @if($products instanceof \Illuminate\Pagination\LengthAwarePaginator )
                    {{ $products->links() }}
                    @endif
                </div>
            </div>
            <!--end::Table-->
        </div>
        <!--end::Card body-->
    </div>

@endsection
@push('script')
{{--    <script>tinymce.init({selector:'textarea'});</script>--}}
    <script>



        const modalId = "modal";

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

        $(document).on("click", ".product-add-btn", async function (e) {
            e.preventDefault()
            const btn = $(this);
            const btnTitle = btn.html();
            try {
                loadButton(btn, 'Loading ...');
                let loadURL = `${baseUrl}/admin/products/create`;
                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);
            }

            $(".variant-type-values").select2({
                tags: true,
                tokenSeparators: [',', ' ']
            });


            $('select.category').select2({
                dropdownParent: $('.modal'),
                placeholder: "SELECT A CATEGORY",
                ajax: {
                    url: '{{ route('getCategory') }}',
                    dataType: 'json',
                    // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
                    data: function (params) {
                        let query = {
                            search: params.term,
                            type: 'public',
                            page: params.page || 1
                        }

                        // Query parameters will be ?search=[term]&type=public
                        return query;
                    }
                },
                processResults: function (data, params) {
                    return {
                        results: data.results,
                    };
                }


            });


            $('select.variant-type').select2({
                dropdownParent: $('.modal'),
            });
            $('select.weight-unit').select2({
                dropdownParent: $('.modal'),
                minimumResultsForSearch: Infinity
            });
            $('.input-images1').imageUploader({});

            $(function () {
                $('[data-toggle="tooltip"]').tooltip()
            })
            tinymce.init({selector:'textarea'});
        });

        $(document).on("click", '.product-edit-btn', async function () {
            let productId = $(this).data("id");
            try {
                let loadURL = `${baseUrl}/admin/products/` + productId + "/edit";
                await loadModal(modalId, loadURL);
            } catch (err) {
                toast.error("Could not load add event popup. (error_ref: add_product)");
                console.log("add_product", err);
            }


            $(".variant-type-values").select2({
                tags: true,
                tokenSeparators: [',', ' ']
            });


            $('select.category').select2({
                dropdownParent: $('.modal'),
                placeholder: "Select a Category",
                ajax: {
                    url: '{{ route('getCategory') }}',
                    dataType: 'json',
                    // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
                    data: function (params) {
                        let query = {
                            search: params.term,
                            type: 'public',
                            page: params.page || 1
                        }

                        // Query parameters will be ?search=[term]&type=public
                        return query;
                    }
                },
                processResults: function (data, params) {
                    return {
                        results: data.results,
                    };
                }

            });


            $('select.variant-type').select2({
                dropdownParent: $('.modal'),
            });
            $('select.weight-unit').select2({
                dropdownParent: $('.modal'),
                minimumResultsForSearch: Infinity
            });


            if ($('.edit-price-field').val() < $(this).val()) {
                $('.button-switch').attr("disabled", true);
            } else {
                $('.button-switch').attr("disabled", false);
            }
            tinymce.init({selector:'textarea'});
        });


    </script>
    @include('pages.admin.products.includes.product-scripts')

    {{--ADD PRODUCT MODAL--}}


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

@endpush