@extends('layouts.layout')
@section('title', 'Shop Products')
<!-- @section('content') -->
@section('content')
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />

    <form action="{{ url('shop/update-product', request()->id) }}" onsubmit="return checkData()" id="add_product" method="POST"
        enctype="multipart/form-data">
        @csrf

        <div class="content-inner mb-5">


            <input type="hidden" name="home" value="{{ $home }}" />
            <input type="hidden" name="status" value="{{ $status }}" />
            <div class="main-right-teaser">
                <div class="permission-block">
                    <div class="permission-header d-flex justify-content-between">
                        <!-- <h3>Edit Product</h3> -->
                        <h3>Edit @if (!empty($product->product_name))
                                {{ $product->product_name }}
                            @else
                                Product
                            @endif
                        </h3>

                        <div class="d-flex justify-content-between align-items-center">

                            <div class="switch-block blue-switch">
                                <label class="switch-title mb-0">Active</label>
                                <label class="switch mb-0">
                                    <input type="checkbox" @if (!empty($product->status) && $product->status == 1) checked @else @endif
                                        value='1' name="product_active">
                                    <span class="slider round"></span>
                                </label>
                            </div>

                            <div class="user-btn-group">
                                <a href="{{ url('shop-products') }}" class="btn ml-3">Back</a>
                            </div>
                        </div>

                    </div>
                    <div class="custom-form-inner">
                        <div class="custom-form-column">
                            <h4>About</h4>
                            <div class="form-wrap">
                                <div class="switch-field">
                                    <input type="radio" id="simple" @if (!empty($product->type) && $product->type == 'simple') checked @endif
                                        name="product_type" value="simple" />
                                    <label for="simple">Simple</label>
                                    <input type="radio" id="configurable" @if (!empty($product->type) && $product->type == 'configurable') checked @endif
                                        name="product_type" value="configurable" />
                                    <label for="configurable">Configurable</label>
                                </div>
                            </div>
                            <div class="form-wrap style-input">
                                <label for="name"
                                    class="style-label @if (!empty($product->product_name)) with-value @endif"> Name*</label>
                                <input type="text" class="form-control"
                                    value="@if (!empty($product->product_name)) {{ $product->product_name }}@else{{ old('product_name') }} @endif"
                                    name="product_name" id="name" value="">
                            </div>
                            <div class="form-wrap style-input">
                                <label for="sku"
                                    class="style-label @if (old('product_sku') || $product->sku) with-value @endif">SKU*</label>
                                <input type="text" class="form-control"
                                onchange="skuqUniqueCheck();"
                                    value="@if (!empty($product->sku)){{$product->sku}}@else{{old('product_sku')}} @endif"
                                    name="product_sku" id="sku">
                            </div>
                            <div class="form-wrap">
                                <select name="product_category" id="" class="form-select">
                                    <option value="">Select Category*</option>
                                    @if ($category)
                                        @foreach ($category as $category)
                                            <option value="{{ $category->id }}" >{{ $category->category_name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="form-wrap style-input" id="descid">
                                <label for="desc">Description*</label>
                                <textarea name="product_description" id="default" cols="30" rows="10">
@if (!empty($product->description))
{{ $product->description }}@else{{ old('product_description') }}
@endif
</textarea>
                                <span id="error" class="error"><span>
                            </div>
                            <label for="">
                                Show On Homepage*
                            </label>
                            <div class="switch-field">
                                <input type="radio" id="yes" @if (!empty($product->show_on_home_page) && $product->show_on_home_page == '1') checked @endif
                                    name="product_show_on_home_page" value="1" />
                                <label for="yes">Yes</label>
                                <input type="radio" id="no" @if ($product->show_on_home_page == '0') checked @endif
                                    name="product_show_on_home_page" value="0" />
                                <label for="no">No</label>
                            </div>
                        </div>
                        <div class="custom-form-column">
                            <h4>Availability & Price</h4>
                            <div class="form-wrap stock_status_class {{ ((!empty($product->type) && $product->type == 'configurable') ? 'disabled' : '') }}">
                                <div class="switch-field">
                                    <input class="form-control" type="radio" id="yes_stock" @if (!empty($product->stock_statues) && $product->stock_statues == '1') checked @endif
                                        name="stock_status" value="1" />
                                    <label for="yes_stock">In Stock</label>
                                    <input class="form-control" type="radio" id="no_status" @if ($product->stock_statues == '0') checked @endif
                                        name="stock_status" value="0" />
                                    <label for="no_status">Out Of Stock</label>
                                </div>
                            </div>
                            <div class="form-wrap style-input">
                                <div class= "currency-input position-relative">
                                    <div class="currency-text">£</div>
                                    <label for="price"
                                        class="style-label @if (old('customer_price') || $product->customer_price) with-value @endif">Customer
                                        Price</label>
                                    <input
                                        type="text"
                                        class="form-control"
                                        id="price"
                                        @if (!empty($product->type) && $product->type == 'configurable')
                                            readonly
                                        @else
                                            value="{{ !empty($product->customer_price) ? number_format($product->customer_price, 2, '.', '') : null }}"
                                            name="customer_price"
                                        @endif
                                        >
                                </div>
                                <label for="">(NET) Exclusive VAT*</label>
                            </div>
                            <div class="form-wrap style-input">
                                <div class= "currency-input position-relative">
                                    <div class="currency-text">£</div>
                                    <label for="offerprice"
                                        class="style-label @if (old('customer_offer_price') || ($product->customer_offer_price && $product->is_offer == '1')) with-value @endif">Customer
                                        Offer Price</label>
                                    <input
                                        type="text"
                                        class="form-control"
                                        id="offerprice"
                                        @if ($product->type == 'configurable')
                                            readonly
                                        @else
                                            value="{{ $product->is_offer == '1' ? number_format($product->customer_offer_price, 2, '.', '') : '' }}"
                                            name="customer_offer_price"
                                        @endif
                                        >
                                </div>
                                <label for="">(NET) Exclusive VAT*</label>
                            </div>
                            <div class="form-wrap style-input">
                                <div class= "currency-input position-relative">
                                    <div class="currency-text">£</div>
                                    <label for="trade-price"
                                        class="style-label @if (old('trade_price') || $product->trade_price) with-value @endif">Trade
                                        Price</label>
                                    <input
                                        type="text"
                                        class="form-control"
                                        id="trade-price"
                                        @if ($product->type == 'configurable')
                                            readonly
                                        @else
                                            value="{{ !empty($product->trade_price) ? number_format($product->trade_price, 2, '.', '') : null }}"
                                            name="trade_price"
                                        @endif
                                    >
                                </div>
                                <label for="">(NET) Exclusive VAT*</label>
                            </div>
                            <div class="form-wrap">
                                <label for="" class="mb-0">
                                    Vat
                                </label>
                                <div class="switch-field">
                                    <input type="radio" id="yes_vat"
                                        @if ($product->vat == '1') checked @endif name="vat_status"
                                        value="1" />
                                    <label for="yes_vat">Yes</label>
                                    <input type="radio" id="no_vat"
                                        @if ($product->vat == '0') checked @endif name="vat_status"
                                        value="0" />
                                    <label for="no_vat">No</label>
                                </div>
                            </div>
                            <div class="form-wrap style-input">
                                <label for="weight"
                                    class="style-label @if (old('product_weight') || $product->weight) with-value @endif">Weight
                                    (Grams)</label>
                                <input type="text" class="form-control"
                                    value="@if ($product->weight) {{ $product->weight }}@else{{ old('product_weight') }} @endif"
                                    id="weight" name="product_weight">
                            </div>
                            <div class="form-wrap pt-5">
                                <label for="">Supplier*</label>
                                <select name="product_supplier" class="form-select" id="supplierdropdown">
                                    <option value="">Select Supplier</option>
                                    @if ($supplier)
                                        @foreach ($supplier as $sup)
                                            <option value="{{ $sup->id }}"
                                                @if ($product->supplier_id == $sup->id) selected @endif>
                                                {{ $sup->company_name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="d-flex justify-content-end">
                                <button type="button" class="btn add_supplier_modal_btn">Add New Supplier</button>
                            </div>
                        </div>
                    </div>
                    <div class="custom-hr"></div>
                    <h3 class="mb-4">Personalisation</h3>
                    <div class="custom-form-inner">
                        <div class="custom-form-column">
                            <div class="form-wrap">
                                <label for="" class="custom-switch-label pb-0 mb-3">Can this item be
                                    personalised*</label>
                                <div class="switch-field">
                                    <input type="radio" id="yes_update_per"
                                        @if ($product->personalisation == '1') checked @endif
                                        onchange="displayadditionalprice('yes')" name="personalised_product"
                                        value="1">
                                    <label for="yes_update_per">Yes</label>
                                    <input type="radio" id="no_update_per"
                                        @if ($product->personalisation == '0') checked @endif
                                        onchange="displayadditionalprice('no')" class="checkbox"
                                        name="personalised_product" value="0" />
                                    <label for="no_update_per">No</label>
                                </div>
                            </div>
                        </div>
                        <div class="custom-form-column @if ($product->personalisation == '0') d-none @endif"
                            id="additional_excusive_price">
                            <label class="style-label mb-3">Additional Price (NET) Exclusive VAT</label>
                            <div class="form-wrap">
                                <input type="text"
                                    value="@if ($product->additional_price) {{ $product->additional_price }}@else{{ old('additional_excusive_price') }} @endif"
                                    class="form-control" name="additional_excusive_price">
                            </div>
                        </div>
                    </div>
                    <div class="custom-hr"></div>
                    <div class="custom-form-inner">
                        <div class="custom-form-column">
                            <h3 class="mb-4">SEO</h3>
                            <div class="form-wrap style-input">
                                <label for="title"
                                    class="style-label @if (old('seo_title') || $product->seo_title) with-value @endif">Title*</label>
                                <input type="text" class="form-control" id="title"
                                    value="@if ($product->seo_title) {{ $product->seo_title }}@else{{ old('seo_title') }} @endif"
                                    name="seo_title">
                            </div>
                            <div class="form-wrap style-input">
                                <label for="desc1"
                                    class="style-label @if (old('seo_description') || $product->seo_description) with-value @endif">Description*</label>
                                <textarea class="form-control" id="desc1" name="seo_description">{{ $product->seo_description ? $product->seo_description : old('seo_description') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        @if ($product->type == 'configurable')
            <div class="content-inner mb-5" id="configurable_section"
                style="display: {{ $product->type == 'configurable' ? '' : 'none' }}">
                <div class="main-right-teaser">
                    <div class="venue-nearby">
                        <div class="d-flex justify-content-between align-items-center mb-5">
                            <h3>Configurable Product - Variants</h3>
                            {{-- <button class="btn" type="button">Delete Variant</button> --}}
                        </div>

                        <div id="attribute_data"></div>
                        <div class="table-custom table-responsive config-table">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Image</th>
                                        <th>SKU Code*</th>
                                        <th>Variant*</th>
                                        <th>Sort*</th>
                                        <th>Stock*</th>
                                        <th></th>
                                    </tr>
                                </thead>

                                <tbody id="table_data">
                                    @foreach ($product->ParentProduct as $pkey => $parent_product_item)
                                        <tr class="rows_data" id="attribute_row_{{ $pkey }}">
                                            <td class="config-img">
                                                <input type="hidden" id="product_add_update_status_{{ $pkey }}"
                                                    name="product_add_update_status[{{ $pkey }}]" value="update">
                                                <input type="hidden" name="productIds[{{ $pkey }}]"
                                                    value="{{ $parent_product_item['product']['productattributeDataSingle']['product_id'] }}">
                                                <input type="hidden" name="attribute_id[{{ $pkey }}]"
                                                    value="{{ $parent_product_item['product']['productattributeDataSingle']['attribute_id'] }}">
                                                <input type="hidden" name="attribute_name[{{ $pkey }}]"
                                                    value="{{ $parent_product_item['product']['productattributeDataSingle']['attribute_name'] }}">
                                                @if (
                                                    !empty(
                                                        $parent_product_item['product']['productattributeDataSingle']['ProductDataAttributeConfigurableValues'][
                                                            'main_attribute_id'
                                                        ]
                                                    ))
                                                    <input type="hidden" name="attribute_main_id[{{ $pkey }}]"
                                                        value="{{ $parent_product_item['product']['productattributeDataSingle']['ProductDataAttributeConfigurableValues']['main_attribute_id'] }}">
                                                @endif
                                                <input type="hidden" name="attribute_value_id[{{ $pkey }}]"
                                                    value="{{ $parent_product_item['product']['productattributeDataSingle']['attribute_value_id'] }}">
                                                <input type="hidden" name="attribute_value_name[{{ $pkey }}]"
                                                    value="{{ $parent_product_item['product']['productattributeDataSingle']['attribute_value'] }}">
                                                @foreach ($parent_product_item['product']['additionalChildImages'] as $additional_child_images_item)
                                                    <div id="row_product_image_{{ $pkey }}">
                                                        <img src="{{ asset('images/loader.svg') }}" class="loader-img"
                                                            alt="">
                                                        <div class="file-wrapper mb-0">
                                                            <input type="file"
                                                                onchange="upload_image(this,'product_additional_image','jpg,png,jpeg','product_image_{{ $pkey }}','submit_button')"
                                                                accept=".png, .jpg, .jpeg">
                                                            <a target="_blank" class="editshow-block"
                                                                id="product_image_{{ $pkey }}_href"
                                                                href="{{ asset('storage/product_additional_image/' . $additional_child_images_item['image_url']) }}">
                                                                <img id="product_image_{{ $pkey }}_preview"
                                                                    class="upload-preview-product my-3"
                                                                    src="{{ asset('storage/product_additional_image/' . $additional_child_images_item['image_url']) }}">
                                                        </div>

                                                        <input type="text"
                                                            id="product_image_{{ $pkey }}_display_name"
                                                            value="{{ $additional_child_images_item['image_label'] }}"
                                                            name="product_image_display[{{ $pkey }}]"
                                                            class="form-control">
                                                        <input type="hidden"
                                                            value="{{ $additional_child_images_item['id'] }}"
                                                            name="productImagesIds[{{ $pkey }}]"
                                                            class="form-control">
                                                        <input type="hidden"
                                                            id="product_image_{{ $pkey }}_add_update_status"
                                                            value="update"
                                                            name="product_image_add_update_status[{{ $pkey }}]"
                                                            class="form-control">
                                                        <input type="hidden" id="product_image_{{ $pkey }}_name"
                                                            value="{{ $additional_child_images_item['image_url'] }}"
                                                            name="product_image[{{ $pkey }}]"
                                                            class="form-control">
                                                        <span class="error"
                                                            id="product_image_{{ $pkey }}_error"></span>
                                                    </div>
                                                @endforeach
                                            </td>
                                            <td class="config-code">
                                                <div class="form-wrap">
                                                    <input type="text" placeholder="SKU"
                                                        name="sku[{{ $pkey }}]"
                                                        onchange="skuqUniqueCheck();"
                                                        value="{{ $parent_product_item['product']['sku'] }}"
                                                        class="form-control">
                                                </div>

                                                <label for="">Customer Price (NET) Exclusive VAT</label>
                                                <div class="currency-input position-relative">
                                                    <div class="currency-text">£</div>
                                                    <input type="text" placeholder=""
                                                        name="customer_price_configurable[{{ $pkey }}]"
                                                        value="{{ (($parent_product_item['product']['customer_price'] > 0) ? number_format($parent_product_item['product']['customer_price'], 2, '.', '') : '') }}"
                                                        class="form-control customer_price_array w-100">
                                                    <span style="display: none" id="customer-price-configurable-error-{{ $pkey }}" class="error configurable-error">The customer or trade price field is required.</span>

                                                </div>

                                                <label for="">Customer Offer Price (NET) Exclusive VAT</label>
                                                <div class="currency-input position-relative">
                                                    <div class="currency-text">£</div>
                                                    <input type="text" placeholder=""
                                                        name="customer_offer_price_configurable[{{ $pkey }}]"
                                                        value="{{ $parent_product_item['product']['is_offer'] == '1' ? number_format($parent_product_item['product']['customer_offer_price'], 2, '.', '') : '' }}"
                                                        class="form-control w-100 customer_offer_price_array">

                                                </div>

                                                <label for="">Trade Price (NET) Exclusive VAT</label>
                                                <div class="currency-input position-relative">
                                                    <div class="currency-text">£</div>
                                                    <input type="text" placeholder=""
                                                        name="trade_price_configurable[{{ $pkey }}]"
                                                        value="{{ (($parent_product_item['product']['trade_price'] > 0) ? number_format($parent_product_item['product']['trade_price'], 2, '.', '') : '')  }}"
                                                        class="form-control w-100 trade_price_array">
                                                    <span style="display: none" id="trade-price-configurable-error-{{ $pkey }}" class="error configurable-error">The trade or customer price field is required.</span>
                                                </div>

                                            </td>
                                            <td class="config-var">
                                                <input type="text" class="text-capitalize form-control"
                                                    name="variant[{{ $pkey }}]"
                                                    value="{{ $parent_product_item['product']['product_name'] }}">
                                            </td>
                                            <td class="config-sort">
                                                <input type="text" placeholder="1"
                                                    name="sort_order[{{ $pkey }}]"
                                                    value="{{ $parent_product_item['product']['sort'] }}"
                                                    class="form-control">
                                            </td>
                                            <td class="config-stoke">
                                                <div class="switch-field">
                                                    <input type="radio"
                                                        {{ $parent_product_item['product']['stock_statues'] == 1 ? 'checked' : '' }}
                                                        id="product_stock_in{{ $pkey }}_19"
                                                        name="product_availability[{{ $pkey }}]" value="1">
                                                    <label for="product_stock_in{{ $pkey }}_19">In Stock</label>

                                                    <input type="radio"
                                                        {{ $parent_product_item['product']['stock_statues'] == 0 ? 'checked' : '' }}
                                                        id="product_stock_out{{ $pkey }}_19" class="checkbox"
                                                        name="product_availability[{{ $pkey }}]" value="0">
                                                    <label for="product_stock_out{{ $pkey }}_19">Out Of
                                                        Stock</label>
                                                </div>
                                            </td>
                                            <td>
                                                <button type="button" class="btn"
                                                    onclick="delete_attribute({{ $pkey }})"><i
                                                        class="fas fa-trash-alt"></i></button>
                                            </td>
                                        </tr>
                                    @endforeach

                                </tbody>
                            </table>
                        </div>
                        @if (!empty($datas))
                            <div class="d-flex justify-content-end my-3">
                                <input type="hidden" id="row_count" value="{{ count($product->ParentProduct) }}" />
                                <button class="btn" onclick="add_new_row()" type="button">Add New Row</button>
                            </div>
                        @endif
                    </div>
                    {{-- <div class="d-flex justify-content-start my-3">
                        <button class="btn" type="button">Add New Variant</button>
                    </div> --}}
                </div>

            </div>
        @else
            <div class="content-inner mb-5" id="configurable_section" style="display: none">
                <div class="main-right-teaser">
                    <div class="venue-nearby">
                        <div class="d-flex justify-content-between align-items-center mb-5">
                            <h3>Configurable Product - Variants</h3>
                            {{-- <button class="btn" type="button">Delete Variant</button> --}}
                        </div>
                        <div>
                            <div class="form-wrap">
                                @foreach ($attribute as $key => $attributeItem)
                                    @if ($attributeItem->attribute_field == 'dropdown')
                                        <input type="checkbox" id="attribute_{{ $key }}"
                                            name="main_attribute_id[]" value="{{ $attributeItem->id }}"
                                            onchange="selectAttribute(this,{{ json_encode($attributeItem) }})"
                                            class="styled-checkbox" />
                                        <label for="attribute_{{ $key }}"
                                            class="styled-label text-capitalize mr-2">{{ $attributeItem->attribute_name }}</label>
                                    @endif
                                @endforeach
                            </div>
                        </div>

                        <div id="attribute_data"></div>

                        <div class="table-custom table-responsive config-table">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Image</th>
                                        <th>SKU Code*</th>
                                        <th>Variant*</th>
                                        <th>Sort*</th>
                                        <th>Stock*</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="table_data">

                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>

            </div>
        @endif


        @php
            $attribute_collection = [];
            $attribute_a = '';
            for ($i = 0; $i < count($product->productattributeData); $i++) {
                $attribute_a .= $product->productattributeData[$i]->attribute_value . ',';
            }
            $attribute_collection = explode(',', $attribute_a);

            //echo "<pre>";print_r($attributeArrData);exit;

        @endphp

        <div class="content-inner mb-5">
            <input type="hidden" value="{{ count($attribute) }}" id="attributes_counts" />
            <div class="main-right-teaser" id="attributes_main_block"
                style="display: {{ count($attribute) == count($attributeArrData) ? 'none' : '' }}">
                <div class="permission-block">
                    <h3 class="mb-5">Attributes</h3>
                    <div class="custom-form-inner pb-0">
                        <div class="custom-form-column">
                            <h4 class="mb-4">Name</h4>
                        </div>
                        <div class="custom-form-column">
                            <h4 class="mb-4">Details(Optional)</h4>
                        </div>
                    </div>


                    @if ($attribute)
                        @foreach ($attribute as $key => $attributeItem)
                            @if (!in_array($attributeItem->id, $attributeArrData))
                                <div class="custom-form-inner pb-0" id="attributes_{{ $attributeItem->id }}">
                                    <div class="custom-form-column">
                                        <div class="form-wrap form-wrap-custom">
                                            <input type="text" class="form-control" readonly
                                                value="{{ Str::ucFirst($attributeItem->attribute_name) }}"
                                                name="product_attribute_name[{{ $key }}]"
                                                id="{{ $attributeItem->attribute_name }}">
                                            <label for="{{ $attributeItem->attribute_name }}"
                                                class="style-label with-value">
                                                {{-- {{ $attributeItem->attribute_name }} --}}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="custom-form-column">
                                        <div class="form-wrap">
                                            <div class="multipleoption">
                                                <select multiple class="selectpicker multiselectcustom"
                                                    name="product_attribute_value{{ $key }}[]">
                                                    @if ($attributeItem->attributevalue)
                                                        @foreach ($attributeItem->attributevalue as $attributeItemval)
                                                            <option
                                                                value="{{ $attributeItemval->id . '~' . $attributeItemval->attribute_value }}"
                                                                {{ in_array($attributeItemval->attribute_value, $attribute_collection) ? 'selected' : '' }}>
                                                                {{ $attributeItemval->attribute_value }}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    @endif

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

        <div class="content-inner mb-5">
            <div class="main-right-teaser">
                <div class="permission-block">
                    <h3 class="mb-3">Image</h3>
                    <div class="row">

                        <div class="col-12 col-md-6" id="row_product_base_image">
                            <img src="{{ asset('images/loader.svg') }}" class="loader-img" alt="">
                            <label for="">Base Image</label>
                            <div class="custom-form-inner">
                                <div class="custom-form-column fluid-column">
                                    <div class="file-wrapper">
                                        <input class="custom-file"
                                            onchange="upload_image(this,'product_additional_image','jpg,png,jpeg','product_base_image','submit_button')"
                                            type="file" id="" accept=".png, .jpg, .jpeg"
                                            placeholder="Drag and Drop image here, or click to select image &#10; (Recommendation size: 1200*1044)" />
                                    </div>
                                </div>

                                @if (!empty($product->additionalImages) && !empty($product->additionalImages[0]['id']))
                                    <div class="custom-form-column fluid-column">
                                        <a target="_blank" id="product_base_image_href" class="editshow-block"
                                            href="{{ asset('storage/product_additional_image/' . $product->additionalImages[array_search('base', array_column($product->additionalImages->toArray(), 'image_type'))]->image_url) }}">

                                            <img id="product_base_image_preview" class="upload-preview-product"
                                                src="{{ asset('storage/product_additional_image/' . $product->additionalImages[array_search('base', array_column($product->additionalImages->toArray(), 'image_type'))]->image_url) }}"
                                                alt="Image">

                                        </a>
                                    </div>
                                @else
                                    <div class="custom-form-column fluid-column">
                                        <a target="_blank" class="editshow-block" id="product_base_image_href"
                                            href="">

                                            <img id="product_base_image_preview" class="upload-preview-product"
                                                src="" alt="Image">

                                        </a>
                                    </div>
                                @endif
                            </div>
                            @if (!empty($product->additionalImages) && !empty($product->additionalImages[0]['id']))
                                <div class="form-wrap form-wrap-custom">
                                    <input type="text" placeholder=" "
                                        value="{{ $product->additionalImages[array_search('base', array_column($product->additionalImages->toArray(), 'image_type'))]->image_label }}"
                                        id="product_base_image_display_name" class="form-control"
                                        name="base_image_label">
                                    <label for="base-img-label">Enter Image Label*</label>
                                    <input type="hidden" id="product_base_image_name"
                                        value="{{ $product->additionalImages[array_search('base', array_column($product->additionalImages->toArray(), 'image_type'))]->image_url }}"
                                        class="form-control" name="base_image">
                                    <span class="error" id="product_base_image_error"></span>
                                </div>
                            @else
                                <div class="form-wrap form-wrap-custom">
                                    <input type="text" placeholder=" " id="product_base_image_display_name"
                                        class="form-control" name="base_image_label">
                                    <label for="base-img-label">Enter Image Label*</label>
                                    <input type="hidden" id="product_base_image_name" class="form-control"
                                        name="base_image">
                                    <span class="error" id="product_base_image_error"></span>
                                </div>
                            @endif

                        </div>


                        <div class="col-12 col-md-6">
                            <label for="">Additional Images</label>

                            @if ($product->additionalImages && count($product->additionalImages) > 0)
                                @foreach ($product->additionalImages as $key => $additionalimg)
                                    @if ($additionalimg->image_type == 'additional' && empty($additionalimg->child_product_id))
                                        <div id="row_product_additional_image_{{ $key }}">
                                            <input type="hidden" value="{{ $additionalimg->id }}"
                                                name="image_ids[]" />
                                            <input type="hidden" id="image_add_update_status_{{ $key }}"
                                                value="update" name="image_add_update_status[]" />
                                            <img src="{{ asset('images/loader.svg') }}" class="loader-img"
                                                alt="">
                                            <div class="file-wrapper">
                                                <input
                                                    onchange="upload_image(this,'product_additional_image','jpg,png,jpeg','product_additional_image_{{ $key }}','submit_button')"
                                                    type="file" id="" accept=".png, .jpg, .jpeg" />
                                                <i class="fa fa-trash delete_aditional_image"
                                                    onclick="delete_additional_image({{ $key }},'update')"></i>
                                            </div>
                                            <a target="_blank" class="editshow-block"
                                                id="product_additional_image_{{ $key }}_href"
                                                href="{{ asset('storage/product_additional_image/' . $additionalimg->image_url) }}"><img
                                                    id="product_additional_image_{{ $key }}_preview"
                                                    class="upload-preview-product"
                                                    src="{{ asset('storage/product_additional_image/' . $additionalimg->image_url) }}"
                                                    alt="Image"></a>
                                            <div class="form-wrap form-wrap-custom">
                                                <input type="text"
                                                    id="product_additional_image_{{ $key }}_display_name"
                                                    value="{{ $additionalimg->image_label }}" placeholder=" "
                                                    class="form-control" name="additional_multi_image_label[]">
                                                <label
                                                    for="product_additional_image_{{ $key }}_display_name">Enter
                                                    Image Label</label>
                                                <input type="hidden"
                                                    id="product_additional_image_{{ $key }}_name"
                                                    value="{{ $additionalimg->image_url }}" class="form-control"
                                                    name="additional_multi_image[]">
                                                <span class="error"
                                                    id="product_additional_image_{{ $key }}_error"></span>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            @endif
                            <input type="hidden" id="additional_image_num"
                                value="@if ($product->additionalImages) {{ count($product->additionalImages) }}@else 0 @endif" />
                            <div class="additiona_image"></div>

                            <div class="d-flex justify-content-end">
                                <button type="button" class="btn" id="addadditional_image_add">Add Next
                                    Image</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-inner mb-5">
            <div class="main-right-teaser">
                <div class="permission-block">
                    <h3 class="mb-5">Upsell</h3>
                    <div class="custom-form-inner">
                        <div class="custom-form-column">
                            <div class="upsell_append_block"></div>
                            <input type="hidden" id="upsellcount"
                                value='@if ($product->productUpsell) {{ count($product->productUpsell) }}@else 1 @endif'>

                            @if (count($product->productUpsell) > 0)
                                @foreach ($product->productUpsell as $keyup => $upsell)
                                    <div class="new_upsell_block">
                                        <div class="form-wrap upsell-input style-input">
                                            <label for="upsell1"
                                                class="style-label @if ($upsell->upsell_product_sku) with-value @endif">SKU
                                                Code</label>
                                            <input type="text" name="product_upsell[]"
                                                value="{{ $upsell->upsell_product_sku }}" class="form-control"
                                                id="upsell1">
                                            @if (count($product->productUpsell) - 1 == $keyup)
                                                <i class="fas fa-plus" id="upsell_append_block"></i>
                                            @else
                                                <i class="fas fa-minus"></i>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="form-wrap upsell-input style-input">
                                    <label for="upsell1" class="style-label">SKU Code</label>
                                    <input type="text" name="product_upsell[]" class="form-control" id="upsell1">
                                    <i class="fas fa-plus" id="upsell_append_block"></i>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-end my-3">
            <button class="btn" id="submit_button" type="button">Save</button>
        </div>
        <div class="fixedBtnOuter">
            <div class="container">
                <div class="d-flex justify-content-end ">
                    <button type="button" id="submit_button2" class="btn">Save</button>
                </div>
               
            </div>
        </div>
    </form>
    <div class="modal fade medium-modal" id="add_supplier_modal" data-backdrop="static" data-keyboard="false"
        tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add New Supplier</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="supplier_form" method="post">
                        <span id="responseerror"></span>
                        @csrf
                        <div class="custom-form-inner">
                            <div class="custom-form-column">
                                <div class="form-wrap form-wrap-custom">
                                    <input type="text" class="form-control" id="company_name_lable"
                                        name="company_name" placeholder="">
                                    <label for="company_name_lable">Company Name*</label>
                                    <span id="company_name"> </span>
                                </div>
                                <div class="form-wrap form-wrap-custom">
                                    <input type="text" id="contact_name_lable" placeholder="" class="form-control"
                                        name="contact_name">
                                    <label for="contact_name_lable">Contact Name*</label>
                                    <span id="contact_name"> </span>
                                </div>
                                <div class="form-wrap form-wrap-custom">
                                    <input type="text" placeholder="" id="contact" class="form-control"
                                        name="contact_phone">
                                    <label for="contact">Contact phone</label>
                                    <span id="contact_phone"> </span>
                                </div>

                                <div class="form-wrap form-wrap-custom">
                                    <input type="email" placeholder="" id="email" class="form-control"
                                        name="contact_email">
                                    <label for="email">Contact Email*</label>
                                    <span id="contact_email"></span>
                                </div>
                                <div class="form-wrap form-wrap-custom">
                                    <input type="email" placeholder="" id="parking-mail" class="form-control"
                                        name="packing_email">
                                    <label for="parking-mail">Packing List Email*</label>
                                    <span id="packing_email"></span>
                                </div>
                                <div class="form-wrap form-wrap-custom">
                                    <input type="text" class="form-control" placeholder="" id="vat-number"
                                        name="vat_number">
                                    <label for="vat-number">VAT Number*</label>
                                    <span id="vat_number"></span>
                                </div>

                                <div class="form-wrap">
                                    <label for="" class="custom-switch-label">RMl Click & Collect*</label>
                                    <div class="switch-field">
                                        <input type="radio" id="yes_update" name="rmi_click_collect" value="yes"
                                            checked>
                                        <label for="yes_update">Yes</label>
                                        <input type="radio" id="no_update" class="checkbox" name="rmi_click_collect"
                                            value="no" />
                                        <label for="no_update">No</label>
                                    </div>
                                    <span id="rmi_click_collect"> </span>
                                </div>
                            </div>
                            <div class="custom-form-column">

                                <div class="form-wrap form-wrap-custom">
                                    <input type="text" id="postcode" placeholder="" class="form-control"
                                        name="post_code">
                                    <label for="postcode">Post Code*</label>
                                    <span id="post_code"></span>
                                </div>
                                <div class="form-wrap form-wrap-custom">
                                    <input type="text" class="form-control" placeholder="" name="address_first"
                                        id="address1">
                                    <label for="address1">Address Line 1*</label>
                                    <span id="address_first"></span>
                                </div>
                                <div class="form-wrap form-wrap-custom">
                                    <input type="text" class="form-control" placeholder="" name="address_second"
                                        id="address2">
                                    <label for="address2">Address Line 2</label>
                                </div>
                                <div class="form-wrap form-wrap-custom">
                                    <input type="text" placeholder="" class="form-control" name="address_third"
                                        id="address3">
                                    <label for="address3">Address Line 3</label>
                                </div>

                                <div class="form-wrap form-wrap-custom">
                                    <input type="text" class="form-control" placeholder="" id="country"
                                        name="county">
                                    <label for="country">County*</label>
                                    <span id="county"></span>
                                </div>
                                <div class="form-wrap form-wrap-custom">
                                    {{-- <label for="">Select Country*</label> --}}
                                    <select id="" class="form-select" name="country">
                                        <option value="Uk" selected>UK</option>
                                    </select>

                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="button" id="addsupplier" class="btn">Add New Supplier</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {!! JsValidator::formRequest('App\Http\Requests\ProductRequestUpdateRequest', '#add_product') !!}
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#submit_button2').click(function(e){
                $('#submit_button').trigger('click');
            })

            $('#submit_button').click(function(e){

                var product_type = $("input[name=product_type]:checked").val();

                if(product_type == "configurable") {
                    var numItems = $('.rows_data').length;
                    var product_name = $("input[name=product_name]").val();
                    var product_sku = $("input[name=product_sku]").val();
                    var product_category = $("input[name=product_category]").val();
                    var product_description = $("input[name=product_description]").val();
                    var product_supplier = $("input[name=product_supplier]").val();
                    var seo_title = $("input[name=seo_title]").val();
                    var seo_description = $("input[name=seo_description]").val();
                    var base_image_label = $("input[name=base_image_label]").val();

                    if (numItems == 0) {
                        if(product_name == "" || product_sku == "" || product_category == "" || product_description == "" || product_supplier == "" || seo_title == "" || seo_description == "" || base_image_label == "") {
                            $('#add_product').submit();
                        }else {
                            Swal.fire({
                                title: "Please add configurable product - variants.",
                                icon: "warning"
                            })
                        }
                    } else {
                        if(skuqUniqueCheck()) {
                            if(configurableProductPriceValidation(numItems)) {
                                $('#add_product').submit();
                            }
                        }
                    }

                }else {
                    $('#add_product').submit();
                }

            });

            function configurableProductPriceValidation(numItems) {

                var returnVariable = true;
                for (let index = 0; index < numItems; index++) {
                    var customer_price = $("input[name^='customer_price_configurable["+index+"]']").val()
                    var trade_price = $("input[name^='trade_price_configurable["+index+"]']").val()
                    if(customer_price == "" && trade_price == "")
                    {
                        var returnVariable = false;
                        $("#customer-price-configurable-error-"+index).show();
                        $("#trade-price-configurable-error-"+index).show();
                    }else {
                        $("#customer-price-configurable-error-"+index).hide();
                        $("#trade-price-configurable-error-"+index).hide();
                    }
                }
                if(returnVariable == false) {
                    setTimeout(function () {
                        var section = document.querySelector( '.configurable-error' );
                        section.scrollIntoView({behavior: 'smooth'});
                    }, 500);
                }
                return returnVariable;
            }

            $(".multipleoption").on("click", function() {
                $(this).find(".bootstrap-select").addClass("show");
                $(this).find(".dropdown-menu").addClass("show");
            });

            $('#add_supplier_modal').modal({
                backdrop: 'static',
                keyboard: false
            }, 'show');

            $('#add_supplier_modal').on('hidden.bs.modal', function() {
                $(this).find('form').trigger('reset');
                $("#company_name").text("");
                $("#contact_name").text("");
                $("#contact_phone").text("");
                $("#post_code").text("");
                $("#address_first").text("");
                $("#rmi_click_collect").text("");
                $("#contact_email").text("");
                $("#packing_email").text("");
                $("#vat_number").text("");
                $("#county").text("");
                $("#add_supplier_modal .form-control").removeClass("lable-animated");
                $(".error-help-block").remove();
            })
        });

        $(".customer_price_array").on("blur", function() {

            var ids = $(".customer_price_array").map(function(e, index) {
                return $(this).val();
            });

            var lowest = Math.min.apply(Math, ids);

            if (lowest > 0) {
                $("#price").val(lowest);
            } else {
                $("#price").val($(this).val());
            }
        });

        $(".customer_offer_price_array").on("blur", function() {

            var ids = $(".customer_offer_price_array").map(function(e, index) {
                return $(this).val();
            });

            var lowest = Math.min.apply(Math, ids);

            if (lowest > 0) {
                $("#offerprice").val(lowest);
            } else {
                $("#offerprice").val($(this).val());
            }
        });

        $(".trade_price_array").on("blur", function() {

            var ids = $(".trade_price_array").map(function(e, index) {
                return $(this).val();
            });

            var lowest = Math.min.apply(Math, ids);

            if (lowest > 0) {
                $("#trade-price").val(lowest);
            } else {
                $("#trade-price").val($(this).val());
            }
        });

        $("input[name='product_type']").on("change", function() {
            if ($(this).val() == "configurable") {
                $("#price").attr('readonly', true);
                $("#offerprice").attr('readonly', true);
                $("#trade-price").attr('readonly', true);
                $("#price").attr('name', "");
                $("#offerprice").attr('name', "");
                $("#trade-price").attr('name', "");
                $("#configurable_section").show();
                $(".stock_status_class").addClass('disabled');
            } else {
                $("#price").attr('readonly', false);
                $("#offerprice").attr('readonly', false);
                $("#trade-price").attr('readonly', false);
                $("#price").attr('name', "customer_price");
                $("#offerprice").attr('name', "customer_offer_price");
                $("#trade-price").attr('name', "trade_price");
                $("#configurable_section").hide();
                $(".stock_status_class").removeClass('disabled');
            }

            $("#price").val("");
            $("#offerprice").val("");
            $("#trade-price").val("");
        });

        var attributeArr = [];
        var attributeValueArr = [];

        function selectAttribute(e, attributeItem) {
            var attributevalue = attributeItem.attributevalue;
            var attribute_name = attributeItem.attribute_name;
            var id = attributeItem.id;

            if (attributeArr.length <= 1) {
                if ($(e).prop('checked') == true) {
                    $("#attributes_" + id).hide();
                    var html = '<div class="form-wrap" id="attribute_selectetin_' + id + '">';
                    html += '<input name="attribute_ids[]" type="hidden" value="' + id +
                        '" /><h3 class="text-capitalize">' + attribute_name + '</h3>';
                    attributevalue.map((attributevalueItem) => {
                        html += '<input name="sub_attribute_id[]" type="checkbox" value="' + attributevalueItem.id +
                            '~' + attributeArr.length + '" id="' + attributevalueItem.id +
                            '" class="styled-checkbox" onchange="selectAttributeValue(this,this.id)" /><label for="' +
                            attributevalueItem.id + '" class="styled-label text-capitalize mr-2">' +
                            attributevalueItem.attribute_value + '</label>';
                    })

                    html += '</div>';

                    $("#attribute_data").append(html);
                    attributeArr.push(attributeItem);
                } else {
                    $("#attributes_" + id).show();
                    $("#attribute_selectetin_" + id).remove();
                    attributeArr = attributeArr.filter(function(elem) {
                        return elem.id != id;
                    })
                }

                selectAttributeValue("", "");
            } else {
                $("#attributes_" + id).show();
                if ($(e).prop('checked') == false) {
                    $("#attribute_selectetin_" + id).remove();
                    attributeArr = attributeArr.filter(function(elem) {
                        return elem.id != id;
                    })
                } else {
                    $(e).prop('checked', false);
                    Swal.fire({
                        title: "You can not select more then 2 comabination.",
                        icon: "warning"
                    })
                }

            }

            var attributes_counts = $("#attributes_counts").val();

            if (attributes_counts <= Number(attributeArr.length)) {
                $("#attributes_main_block").hide();
            } else {
                $("#attributes_main_block").show();
            }
        }


        function selectAttributeValue(e, data) {
            if (data) {
                if ($(e).prop('checked') == true) {
                    attributeValueArr.push(Number(data));
                } else {
                    attributeValueArr = attributeValueArr.filter(function(elem) {
                        return elem != data;
                    })
                }
            }

            var html = "";
            var i = 0;
            var j = 0;
            attributeArr && attributeArr.map((attributeArrItem, index) => {
                attributeArrItem.attributevalue.map((attributeArrItemItem, indexOne) => {
                    html += (($.inArray(attributeArrItemItem.id, attributeValueArr) !== -1 && index == 0 &&
                            attributeArr.length == 1) ? `<tr class="rows_data" id="attribute_row_` + i + `">


                <td class="config-img">
                    <input type="hidden" name="product_add_update_status[` + i + `]" value="create">
                    <input type="hidden" name="attribute_id[` + i + `]" value="` + attributeArrItem.id + `" class="form-control">
                    <input type="hidden" name="attribute_name[` + i + `]" value="` + attributeArrItem.attribute_name + `" class="form-control">
                    <input type="hidden" name="attribute_value_id[` + i + `]" value="` + attributeArrItemItem.id + `" class="form-control">
                    <input type="hidden" name="attribute_value_name[` + i + `]" value="` + attributeArrItemItem
                        .attribute_value + `" class="form-control">
                    <div id="row_product_image_` + i +
                        `">
                        <img src="{{ asset('images/loader.svg') }}" class="loader-img" alt="">
                        <div class="file-wrapper">
                            <input type="file" onchange="upload_image(this,'product_additional_image','jpg,png,jpeg','product_image_` +
                        i + `','submit_button')"  accept=".png, .jpg, .jpeg" placeholder="Drag and Drop a file here or click to select &#10; (Recommended size: 618*536)" />
                            <a target="_blank" class="editshow-block" id="product_image_` + i +
                        `_href" > <img id="product_image_` + i + `_preview" class="upload-preview-product my-3 d-none" src>
                                                        </a>
                            </div>
                        <input type="text" id="product_image_` + i + `_display_name" name="product_image_display[` +
                        i + `]" class="form-control" readonly>
                        <input type="hidden" id="product_image_` + i + `_name" name="product_image[` + i + `]" class="form-control">
                        <span class="error" id="product_image_` + i + `_error"></span>
                    </div>
                </td>
                <td class="config-code">
                    <div class="form-wrap">
                        <input type="text" onchange="skuqUniqueCheck();" placeholder="SKU" name="sku[` + i + `]" class="form-control">
                    </div>
                    <label for="">Customer Price (NET) Exclusive VAT</label>
                        <input type="text" placeholder="" name="customer_price_configurable[` + i + `]" class="form-control customer_price_array w-100">
                        <span style="display: none" id="customer-price-configurable-error-` + i + `" class="error configurable-error">The customer or trade price field is required.</span>
                    <label for="">Customer Offer Price (NET) Exclusive VAT</label>
                        <input type="text" placeholder="" name="customer_offer_price_configurable[` + i + `]" class="form-control customer_offer_price_array w-100">
                    <label for="">Trade Price (NET) Exclusive VAT</label>
                        <input type="text" placeholder="" name="trade_price_configurable[` + i + `]" class="form-control trade_price_array w-100">
                        <span style="display: none" id="trade-price-configurable-error-` + i + `" class="error configurable-error">The trade or customer price field is required.</span>
                </td>
                <td class="config-var">
                    <input type="text" class="text-capitalize form-control" name="variant[` + i + `]" value="` +
                        attributeArrItemItem.attribute_value + `">
                </td>
                <td class="config-sort">
                    <input type="text" placeholder="1" name="sort_order[` + i + `]" value="` + (Number(i) + 1) + `" class="form-control">
                </td>
                <td class="config-stoke">
                    <div class="switch-field">
                        <input type="radio" id="product_stock_in` + indexOne + `_` + attributeArrItemItem.id +
                        `" checked name="product_availability[` + i + `]" value="1" />
                        <label for="product_stock_in` + indexOne + `_` + attributeArrItemItem.id + `">In Stock</label>

                        <input type="radio" id="product_stock_out` + indexOne + `_` + attributeArrItemItem.id +
                        `" class="checkbox" name="product_availability[` + i + `]" value="0" />
                        <label for="product_stock_out` + indexOne + `_` + attributeArrItemItem.id + `">Out Of Stock</label>
                    </div>
                </td>
                <td>
                    <button type="button"  class="btn" onclick="delete_attribute(` + i + `)"><i class="fas fa-trash-alt"></i></button>
                </td>
            </tr>` : '');

                    (($.inArray(attributeArrItemItem.id, attributeValueArr) !== -1 && index == 0 &&
                        attributeArr.length == 1) ? i++ : '')

                    attributeArr.length > 1 && index == 1 && attributeArr[0].attributevalue.map((attributeI,
                        indexTwo) => {
                        html += (($.inArray(attributeI.id, attributeValueArr) !== -1 && $.inArray(
                                attributeArrItemItem.id, attributeValueArr) !== -1) ?
                            `<tr class="rows_data" id="attribute_row_` + j + `">
                        <td class="config-img">
                            <input type="hidden" name="product_add_update_status[` + j + `]" value="create">
                            <input type="hidden" name="attribute_value_id[` + j + `]" value="` + attributeArrItemItem
                            .id + `" class="form-control">
                            <input type="hidden" name="attribute_value_name[` + j + `]" value="` + attributeArrItemItem
                            .attribute_value + `" class="form-control">
                            <input type="hidden" name="attribute_main_id[` + j + `]" value="` + attributeI.id + `" class="form-control">
                            <input type="hidden" name="attribute_id[` + j + `]" value="` + attributeArrItem.id + `" class="form-control">
                            <input type="hidden" name="attribute_name[` + j + `]" value="` + attributeArrItem
                            .attribute_name + `" class="form-control">
                            <div id="row_product_image_` + j +
                            `">
                                <img src="{{ asset('images/loader.svg') }}" class="loader-img" alt="">
                                <div class="file-wrapper">
                                    <input type="file" onchange="upload_image(this,'product_additional_image','jpg,png,jpeg','product_image_` +
                            j + `','submit_button')"  accept=".png, .jpg, .jpeg" placeholder="Drag and Drop a file here or click to select &#10; (Recommended size: 618*536)" />
                                    <a target="_blank" class="editshow-block" id="product_image_` + j +
                            `_href" > <img id="product_image_` + j + `_preview" class="upload-preview-product my-3 d-none" src>
                                                        </a>
                                    </div>
                                <input type="text" id="product_image_` + j +
                            `_display_name" name="product_image_display[` + j + `]" class="form-control" readonly>
                                <input type="hidden" id="product_image_` + j + `_name" name="product_image[` + j + `]" class="form-control">
                                <span class="error" id="product_image_` + j + `_error"></span>
                            </div>
                        </td>
                        <td class="config-code">
                            <div class="form-wrap">
                                <input type="text" onchange="skuqUniqueCheck();" placeholder="SKU" name="sku[` + j + `]" class="form-control">
                            </div>
                            <label for="">Customer Price (NET) Exclusive VAT</label>
                                <input type="text" placeholder="" name="customer_price_configurable[` + j + `]" class="form-control customer_price_array w-100">
                                <span style="display: none" id="customer-price-configurable-error-` + j + `" class="error configurable-error">The customer or trade price field is required.</span>
                            <label for="">Customer Offer Price (NET) Exclusive VAT</label>
                                <input type="text" placeholder="" name="customer_offer_price_configurable[` + j + `]" class="form-control customer_offer_price_array w-100">
                            <label for="">Trade Price (NET) Exclusive VAT</label>
                                <input type="text" placeholder="" name="trade_price_configurable[` + j + `]" class="form-control trade_price_array w-100">
                                <span style="display: none" id="trade-price-configurable-error-` + j + `" class="error configurable-error">The trade or customer price field is required.</span>
                        </td>
                        <td class="config-var">
                            <input type="text" class="text-capitalize form-control" name="variant[` + j +
                            `]" value="` + attributeI.attribute_value + ' - ' +
                            attributeArrItemItem.attribute_value + `">
                        </td>
                        <td class="config-sort">
                            <input type="text" placeholder="1" name="sort_order[` + j +
                            `]" class="form-control" value="` + (Number(j) + 1) + `">
                        </td>
                        <td class="config-stoke">
                            <div class="switch-field">
                                <input type="radio" id="product_stock` + indexTwo + `_` + attributeI.id + `_` +
                            attributeArrItemItem.id + `" checked name="product_availability[` +
                            j + `]" value="1" />
                                <label for="product_stock` + indexTwo + `_` + attributeI.id + `_` +
                            attributeArrItemItem.id + `">In Stock</label>

                                <input type="radio" id="product_stock_out` + indexTwo + `_` + attributeI.id + `_` +
                            attributeArrItemItem.id +
                            `" class="checkbox" name="product_availability[` + j + `]" value="0" />
                                <label for="product_stock_out` + indexTwo + `_` + attributeI.id + `_` +
                            attributeArrItemItem.id + `">Out Of Stock</label>
                            </div>
                        </td>
                        <td>
                            <button type="button" class="btn" onclick="delete_attribute(` + j + `)"><i class="fas fa-trash-alt"></i></button>
                        </td>
                    </tr>` : '');

                        (($.inArray(attributeI.id, attributeValueArr) !== -1 && $.inArray(
                            attributeArrItemItem.id, attributeValueArr) !== -1) ? j++ : '')
                    })
                })
            })

            $("#table_data").html(html);

            // $(".customer_price_array").on("blur", function() {

            //     var ids = $(".customer_price_array").map(function(e, index) {
            //         return $(this).val();
            //     });

            //     var lowest = Math.min.apply(Math, ids);

            //     if (lowest > 0) {
            //         $("#price").val(lowest);
            //     } else {
            //         $("#price").val($(this).val());
            //     }
            // });

            // $(".customer_offer_price_array").on("blur", function() {

            //     var ids = $(".customer_offer_price_array").map(function(e, index) {
            //         return $(this).val();
            //     });

            //     var lowest = Math.min.apply(Math, ids);

            //     if (lowest > 0) {
            //         $("#offerprice").val(lowest);
            //     } else {
            //         $("#offerprice").val($(this).val());
            //     }
            // });

            // $(".trade_price_array").on("blur", function() {

            //     var ids = $(".trade_price_array").map(function(e, index) {
            //         return $(this).val();
            //     });

            //     var lowest = Math.min.apply(Math, ids);

            //     if (lowest > 0) {
            //         $("#trade-price").val(lowest);
            //     } else {
            //         $("#trade-price").val($(this).val());
            //     }
            // });
        }

        function skuqUniqueCheck() {

            var product_sku = $("input[name=product_sku]").val();

            var skuCount = $("input[name^='sku']").length;
            var skuArr = [];
            var j = 0;
            if(product_sku != "") {
                skuArr[j] = product_sku;
                j++;
            }


            for(i=0;i<skuCount;i++)
            {
                if($("input[name^='sku["+i+"]']").val() != "") {
                    skuArr[j] = $("input[name^='sku["+i+"]']").val();
                    j++;
                }

            }

            let findDuplicates = arr => arr.filter((item, index) => arr.indexOf(item) !== index)

            var findDuplicatesArr = findDuplicates(skuArr);

            if(findDuplicatesArr.length > 0) {

                Swal.fire({
                    title: "Please add unique sku for all product.",
                    icon: "warning"
                })
                return false;
            }else {
                return true;
            }
        }

        function upload_image(event, folder, type, id, button_id) {
            $("#row_" + id).addClass("custom-loader");
            $("#submit_button").attr('disabled', true);
            $("#submit_button2").attr('disabled', true);
            var formData = new FormData();

            formData.append('image', event.files[0]);
            formData.append('folder', folder);
            formData.append('type', type);
            formData.append('max', '5000');
            formData.append('min', '1');
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: '/upload-image',
                type: 'POST',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function(response) {
                    var obj = JSON.parse(response);
                    if (obj.status == true) {
                        $("#" + id + '_error').text("");
                        $("#" + id + '_display_name').attr("readonly", false);
                        $("#" + id + '_display_name').val(obj.display_name);
                        $("#" + id + '_name').val(obj.name);
                        $("#" + id + '_preview').show();
                        $("#" + id + '_preview').removeClass('d-none');
                        $("#" + id + '_preview').attr("src","{{ asset('storage/product_additional_image') }}" + "/" + obj.name);
                        $("#" + id + '_href').attr("href", "{{ asset('storage/product_additional_image') }}" +
                            "/" + obj.name);
                    } else {
                        $("#" + id + '_preview').addClass('d-none');
                        $("#" + id + '_display_name').attr("readonly", true);
                        $("#" + id + '_display_name').val("");
                        $("#" + id + '_name').val('');
                        $("#" + id + '_error').text(obj.message && obj.message.image && obj.message.image);
                    }
                    $("#row_" + id).removeClass("custom-loader");
                    $("#submit_button").attr('disabled', false);
                    $("#submit_button2").attr('disabled', false);
                },
            });
        }

        function delete_attribute(id) {
            var numItems = $('.rows_data').length;
            if (numItems == 1) {
                Swal.fire({
                    title: "You cant delete all configurable variants.",
                    icon: "warning"
                })
            } else {
                Swal.fire({
                    title: "Are you sure you want to delete?",
                    icon: "warning",
                    showCancelButton: true,
                    showCloseButton: true,
                    confirmButtonColor: "#00811E",
                    cancelButtonColor: "#B50000",
                    confirmButtonText: "Yes",
                    cancelButtonText: "No",
                    customClass: {
                        confirmButton: "btn order_cancel_confirm",
                        cancelButton: "btn",
                    },
                }).then((result) => {

                    if (result.isConfirmed) {

                        $("#product_add_update_status_" + id).val("delete");
                        $("#attribute_row_" + id).hide();
                        $("#attribute_row_" + id).removeClass("rows_data");
                    }
                });
            }

        }

        function getsuppiler() {
            $.ajax({
                url: "/shop/get-supplier", // if the route is defined in routes/api.php, you need to prefix it with api/
                type: "GET",
                success: function(response) {
                    if (response.length) {
                        response.forEach(el => {
                            $("#supplierdropdown").append(
                                `<option value='${el.id}'> ${el.company_name}</option>`)
                        })
                    }
                },
            });
        }

        function add_new_row() {
            var datas = "{{ json_encode($datas) }}";
            var datasArr = JSON.parse(datas.replace(/&quot;/g, '"'));

            var increment = $("#row_count").val();
            html = `<tr class="rows_data" id="attribute_row_` + increment + `">
                    <td class="config-img">
                        <input type="hidden" id="product_add_update_status_` + increment +
                `" name="product_add_update_status[` + increment + `]" value="add">
                        <input type="hidden" id="select_attribute_id_` + increment + `" name="attribute_id[` +
                increment + `]">
                        <input type="hidden" id="select_attribute_name_` + increment + `" name="attribute_name[` +
                increment + `]">
                        <input type="hidden" id="select_attribute_main_id_` + increment +
                `" name="attribute_main_id[` + increment + `]">
                        <input type="hidden" id="select_attribute_value_id_` + increment +
                `" name="attribute_value_id[` + increment + `]">
                        <input type="hidden" id="select_attribute_value_name_` + increment +
                `" name="attribute_value_name[` + increment + `]">
                        <input type="hidden" id="select_variant_name_` + increment + `" name="variant_name[` +
                increment + `]">
                        <div id="row_product_image_` + increment +
                `">
                            <img src="{{ asset('images/loader.svg') }}" class="loader-img" alt="">
                            <div class="file-wrapper mb-3">
                                <input type="file" onchange="upload_image(this,'product_additional_image','jpg,png,jpeg','product_image_` +
                increment + `','submit_button')" accept=".png, .jpg, .jpeg">
                                <a target="_blank" class="editshow-block" id="product_image_` + increment +
                `_href" href><img style="display: none"  id="product_image_` + increment + `_preview" class="upload-preview-product my-3"></a>
                            </div>

                            <input type="text" id="product_image_` + increment +
                `_display_name" name="product_image_display[` + increment + `]" class="form-control" readonly>
                            <input type="hidden" id="product_image_` + increment +
                `_add_update_status" value="add" name="product_image_add_update_status[` + increment + `]">
                            <input type="hidden" id="product_image_` + increment + `_name" name="product_image[` +
                increment + `]">
                            <span class="error" id="product_image_` + increment + `_error"></span>
                        </div>
                    </td>
                    <td class="config-code">
                        <div class="form-wrap">
                            <input type="text" onchange="skuqUniqueCheck();" placeholder="SKU" name="sku[` + increment + `]" class="form-control">
                        </div>

                        <label for="">Customer Price (NET) Exclusive VAT</label>
                        <input type="text" placeholder="" name="customer_price_configurable[` + increment + `]" class="form-control customer_price_array w-100">
                        <span style="display: none" id="customer-price-configurable-error-` + increment + `" class="error configurable-error">The customer or trade price field is required.</span>
                        <label for="">Customer Offer Price (NET) Exclusive VAT</label>
                        <input type="text" placeholder="" name="customer_offer_price_configurable[` + increment + `]" class="form-control customer_offer_price_array w-100">

                        <label for="">Trade Price (NET) Exclusive VAT</label>
                        <input type="text" placeholder="" name="trade_price_configurable[` + increment + `]" class="form-control trade_price_array w-100">
                        <span style="display: none" id="trade-price-configurable-error-` + increment + `" class="error configurable-error">The trade or customer price field is required.</span>

                    </td>
                    <td class="config-var">
                        <select class="text-capitalize form-select" onchange="select_combination(this.value,` +
                increment + `)" name="variant[` + increment + `]">
                            '<option selected disabled>Select one</option>'
                            ` + datasArr.map((datasItem, index) => {
                    return '<option value="' + index + '">' + datasItem.attribute_value + '</option>'
                }) + `
                        </select>
                    </td>
                    <td class="config-sort">
                        <input type="text" placeholder="1" name="sort_order[` + increment + `]" class="form-control">
                    </td>
                    <td class="config-stoke">
                        <div class="switch-field">
                            <input type="radio" id="product_stock_in` + increment +
                `_19" name="product_availability[` + increment + `]" value="1">
                            <label for="product_stock_in` + increment + `_19">In Stock</label>

                            <input type="radio" id="product_stock_out` + increment +
                `_19" class="checkbox" name="product_availability[` + increment + `]" value="0">
                            <label for="product_stock_out` + increment + `_19">Out Of Stock</label>
                        </div>
                    </td>
                    <td>
                        <button type="button" class="btn" onclick="delete_attribute(` + increment + `)"><i class="fas fa-trash-alt"></i></button>
                    </td>
                </tr>`;

            $("#row_count").val(Number(increment) + 1);
            $("#table_data").append(html);

            $(".customer_price_array").on("blur", function() {

                var ids = $(".customer_price_array").map(function(e, index) {
                    return $(this).val();
                });

                var lowest = Math.min.apply(Math, ids);

                if (lowest > 0) {
                    $("#price").val(lowest);
                } else {
                    $("#price").val($(this).val());
                }
            });

            $(".customer_offer_price_array").on("blur", function() {

                var ids = $(".customer_offer_price_array").map(function(e, index) {
                    return $(this).val();
                });

                var lowest = Math.min.apply(Math, ids);

                if (lowest > 0) {
                    $("#offerprice").val(lowest);
                } else {
                    $("#offerprice").val($(this).val());
                }
            });

            $(".trade_price_array").on("blur", function() {

                var ids = $(".trade_price_array").map(function(e, index) {
                    return $(this).val();
                });

                var lowest = Math.min.apply(Math, ids);

                if (lowest > 0) {
                    $("#trade-price").val(lowest);
                } else {
                    $("#trade-price").val($(this).val());
                }
            });
        }

        function select_combination(key, increment) {
            var datas = "{{ json_encode($datas) }}";
            var datasArr = JSON.parse(datas.replace(/&quot;/g, '"'));

            $("#select_attribute_id_" + increment).val(datasArr[key].attribute_id);
            $("#select_attribute_name_" + increment).val(datasArr[key].attribute_name);
            $("#select_attribute_main_id_" + increment).val(datasArr[key].attribute_main_id);
            $("#select_attribute_value_id_" + increment).val(datasArr[key].attribute_value_id);
            $("#select_attribute_value_name_" + increment).val(datasArr[key].attribute_value_name);
            $("#select_variant_name_" + increment).val(datasArr[key].attribute_value);

        }

        $(document).on('click', '.add_supplier_modal_btn', function(e) {
            $("#add_supplier_modal").modal('show');

        });
        $(document).on('click', '#add_supplier_modal .close', function(e) {
            $("#add_supplier_modal").modal('hide');
        });


        $(document).on('click', '#addsupplier', function(e) {
            var data = $("#supplier_form").serialize();
            $.ajax({
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: '/setting/shop-supplier/create_from_product',
                data: data,
                success: function(result) {

                    $(".error").css('display', 'none');
                    $("#add_supplier_modal").modal('hide');
                    if (result != '') {
                        $("#supplierdropdown").append(
                            `<option value='${result.id}' selected> ${result.company_name}</option>`
                        )
                        document.getElementById("supplier_form").reset();
                    }
                    document.getElementById("supplier_form").reset();
                },
                error: function(result) {
                    var errors = $.parseJSON(result.responseText);
                    $.each(errors, function(key, value) {
                        $(".error").css('display', 'none');
                        if ($.isPlainObject(value)) {
                            $.each(value, function(key, value) {
                                console.log(key + " " + value);
                                $('#' + key).addClass("error");
                                $('#' + key).focus().html(value).css('display',
                                    'block');

                            });
                            $('#' + key).css('display', 'none');
                        } else {
                            $('#' + key).css('display', 'none');
                        }
                    });
                }
            })
        });

        function displayadditionalprice(val) {
            // alert();
            if (val == 'yes') {
                $("#additional_excusive_price").removeClass('d-none');
            } else {
                $("#additional_excusive_price").addClass('d-none');
            }
        }

        function checkData() {
            var editorContent = tinyMCE.get('default').getContent();
            if (editorContent == '') {
                //$("#error").focus();
                $("#error").html('The product description field is required.').css('color', 'red');
                //editorContent.focus();
                $('html, body').scrollTop($("#descid").offset().top);
                return false;
            } else {
                return true;
            }
        }

        $("#addadditional_image_add").click(function() {
            let add_image;
            image_number = $("#additional_image_num").val();
            image_number++;
            $("#additional_image_num").val(image_number);

            var add_image_div = `<div id="row_product_additional_image_` + image_number +
                `">
                <input type="hidden" value="add" name="image_add_update_status[]" />
                <img src="{{ asset('images/loader.svg') }}" class="loader-img" alt="">
                <div class="file-wrapper">
                    <input onchange="upload_image(this,'product_additional_image','jpg,png,jpeg','product_additional_image_` +
                image_number + `','submit_button')" type="file" id="" accept=".png, .jpg, .jpeg" />
                    <i class="fa fa-trash delete_aditional_image" onclick="delete_additional_image(` + image_number + `,'add')"></i>
                </div>
                <a target="_blank" class="editshow-block" id="product_additional_image_` + image_number +
                `_href" href><img id="product_additional_image_` + image_number + `_preview" style="display: none" class="upload-preview-product" alt="Image" ></a>
                <div class="form-wrap form-wrap-custom">
                    <input readonly type="text" placeholder=" " id="product_additional_image_` + image_number + `_display_name" class="form-control" name="additional_multi_image_label[]">
                    <label for="product_additional_image_` + image_number + `_display_name">Enter Image Label</label>
                    <input type="hidden" id="product_additional_image_` + image_number + `_name" class="form-control" name="additional_multi_image[]">
                    <span class="error" id="product_additional_image_` + image_number + `_error"></span>
                </div>
            </div>`;
            $(".additiona_image").append(add_image_div);
        })

        function delete_additional_image(id, type) {
            if (type == "update") {
                $("#image_add_update_status_" + id).val("delete");
                $("#row_product_additional_image_" + id).hide();
            } else {
                $("#row_product_additional_image_" + id).remove();
            }
        }

        $("#upsell_append_block").click(function() {
            let add_upsell;
            add_upsell = $("#upsellcount").val();
            add_upsell++;
            $("#upsellcount").val(add_upsell);
            var add_upsell_div =
                `<div class="new_upsell_block">
                        <div class="form-wrap upsell-input form-wrap-custom">
                            <input type="text" placeholder=" " name="product_upsell[]" class="form-control" id="upsell` +
                add_upsell + `">
                            <label for="upsell` + add_upsell + `">SKU Code</label>
                            <i class="fas fa-minus"></i>
                        </div>
                    </div>`;
            $(".upsell_append_block").append(add_upsell_div);
        })

        $(document).on("click", ".fa-minus", function() {
            // alert()
            if ($(".new_upsell_block").length > 0) {
                let add_upsell;
                add_upsell = $("#upsellcount").val();
                add_upsell--;
                $("#upsellcount").val(add_upsell);
                $(this).parent().parent().remove();
            }
        })


        function readImageName(input) {
            if (input.files && input.files[0]) {
                var fileName = input.files[0].name;
                var result = fileName.split('.');
                $("#base-img-label").val(result[0]);

                //alert('The file "' + fileName +  '" has been selected.');
            }
        }

        $("[id^=additional_image_label_get]").on('change', function() {
            alert($(this).data('value'));
            if (this.files && this.files[0]) {
                var fileName = this.files[0].name;
                var result = fileName.split('.');
                $("#additional_image_label" + $(this).data('value')).val(result[0]);
            }
        });

        $("body").on("click", ".delete-addition-image", function() {
            const id = $(this).data("id");
            //alert(id);
            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: 'btn btn-success',
                    cancelButton: 'btn btn-danger'
                },
                buttonsStyling: false
            });

            swalWithBootstrapButtons.fire({
                title: 'Are you sure?',
                text: `Delete This Additional Image?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        method: "POST",
                        url: "/shop/delete_additional_file",
                        data: {
                            id: id
                        },
                        success: function(response) {
                            swalWithBootstrapButtons.fire(
                                'Deleted!',
                                `Additional Image has been deleted.`,
                                'success'
                            );
                            $('#additiona-image-div' + id).hide();
                        },

                        error: function(error) {
                            console.error(error);
                            swalWithBootstrapButtons.fire(
                                'Error',
                                'An error occurred while deleting.',
                                'error'
                            );
                        }
                    });
                } else if (
                    result.dismiss === Swal.DismissReason.cancel
                ) {
                    swalWithBootstrapButtons.fire(
                        'Cancelled',
                        'Your imaginary file is safe :)',
                        'error'
                    );
                }
            });
        });
    </script>
@endsection