@extends('admin.layout')
@section('content')
    <div class="content-header">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="page-title">{{ translate('Edit product') }}</h3>
                <div class="d-inline-block align-items-center">
                    <nav>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i
                                        class="mdi mdi-home-outline"></i></a></li>
                            <li class="breadcrumb-item"><a
                                    href="{{ route('Product.index') }}">{{ translate('Products') }}</a></li>
                            <li class="breadcrumb-item" aria-current="page"> {{ translate('Edit food product') }}</li>

                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    @php
    $currency_name = currency_sympol()['name'];
    @endphp

    <!-- Main content -->
    <section class="content">
        {!! Form::open(['method' => 'POST', 'id' => 'choice_form', 'action' => ['Admin\ProductController@updateRestorant', $product->id], 'files' => true, 'class' => 'form_to_submit']) !!}
        <input type="hidden" name="id" value="{{ $product->id }}">
        <div class="row">
            <div class="col-lg-12 col-12">
                <div class="box box-slided-up box box-solid bg-warning orang-bg">
                    <div class="box-header with-border with-border orang-bg">
                        <h4 class="box-title">
                            {{ translate('basic information') }}
                        </h4>
                        <ul class="box-controls pull-right">
                            <li><a class="box-btn-slide" href="#"></a></li>

                        </ul>
                    </div>

                    <div class="box-body" style="display: block;">


                        <div class="row">

                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label for="title">
                                        {{ translate('Title') }}
                                        <span class="text-danger">*</span>
                                    </label>

                                    <div>
                                        {!! Form::text('title', getTranslation($product, 'product_translations', 'title'), ['required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Title')]) !!}
                                    </div>
                                    @error('title')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-lg-5 col-12">
                                <div class="form-group">
                                    <label for="sku">{{ translate('sku') }}

                                        <span class="text-danger">*</span>
                                    </label>
                                    <div>
                                        {!! Form::text('sku', $product->sku, ['required' => 'required', 'class' => 'form-control', 'placeholder' => translate('sku')]) !!}
                                    </div>
                                    @error('sku')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-1 col-12">
                                <div class="form-group">
                                    <label for="sku">{{ translate('arrangement') }}
                                    </label>
                                    <div>
                                        {!! Form::text('arrangement', $product->arrangement, ['required' => 'required', 'class' => 'form-control', 'placeholder' => translate('arrangement')]) !!}
                                    </div>
                                    @error('sku')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            @if (Session::get('tenant_subscribtion_data')['product_label']['belongs_to_subscribtion'] == true && Session::get('tenant_controle_modules')['product_label'] == 1)
                                <div class="col-lg-8 col-12">
                                    <div class="form-group">
                                        <label for="label_text">{{ translate('Label text') }}

                                        </label>
                                        <div>
                                            {!! Form::text('label_text', getTranslation($product, 'product_translations', 'label_text'), ['class' => 'form-control', 'placeholder' => translate('Label text')]) !!}
                                        </div>
                                        @error('label_text')
                                            <div class="badge badge-danger text-center" style="width: 100%">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-4 col-12">
                                    <div class="form-group">
                                        <label for="label_color">{{ translate('Label color') }}
                                        </label>
                                        <div>
                                            {!! Form::color('label_color', getTranslation($product, 'product_translations', 'label_color'), ['class' => 'form-control', 'placeholder' => translate('Label color')]) !!}
                                        </div>
                                        @error('label_color')
                                            <div class="badge badge-danger text-center" style="width: 100%">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            @endif
                            <div class="col-lg-6 col-6">
                                <div class="form-group" id="category">
                                    <label for="name">{{ translate('Categories') }}
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div>
                                        <select class="form-control select2" name="categories[]" id="category-id" required
                                            multiple>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}"
                                                    {{ in_array($category->id, $productcategories) ? 'selected' : '' }}>
                                                    {{ $category->getTranslation('title') }}
                                                </option>
                                                @foreach ($category->childrenCategories as $childCategory)
                                                    @include('categories.child_category', ['child_category' =>
                                                    $childCategory , 'category_id' => $productcategories])
                                                @endforeach
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('category_id')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror

                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label for="name">{{ translate('Select Offer Group') }}
                                    </label>
                                    <div>
                                        <select class="form-control select2" name="offer_group_id" id="offer_group_id">

                                        </select>
                                    </div>

                                </div>
                            </div>
                            <div class="col-lg-3 col-3">
                                <div class="form-group text-center" style="margin-top: 3em">
                                    <div class="checkbox">
                                        {!! Form::checkbox('published', null, $product->published, ['id' => 'Checkbox_2']) !!}
                                        <label for="Checkbox_2">{{ translate('Published') }}</label>
                                    </div>

                                </div>
                            </div>
                            <div class="col-lg-3 col-3">
                                <div class="form-group text-center" style="margin-top: 3em">
                                    <div class="checkbox">
                                        {!! Form::checkbox('require_charge', $product->require_charge, 0, ['id' => 'require_charge_2']) !!}
                                        <label for="require_charge_2">{{ translate('Require charge') }}</label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12 col-12">

                                <div class="form-group">
                                    <label for="short_desc">{{ translate('Short description') }}
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div>
                                        {!! Form::textarea('short_desc', getTranslation($product, 'product_translations', 'short_desc'), ['required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Short description')]) !!}
                                    </div>
                                    @error('short_desc')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-12 col-12">
                                <div class="form-group">
                                    <label for="description">{{ translate('Description') }}
                                    </label>
                                    <div>
                                        {!! Form::textarea('description', getTranslation($product, 'product_translations', 'description'), ['id' => 'e1', 'class' => 'form-control', 'placeholder' => translate('Description')]) !!}
                                    </div>
                                    @error('description')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>

                            <div style="width: 100%;">
                                <div class="form-group">
                                    <label for="tags">{{ translate('Tags') }}
                                    </label>
                                    <div>
                                        {!! Form::text('tags', getTranslation($product, 'product_translations', 'tags'), ['style' => 'width:100%', 'data-role' => 'tagsinput', 'class' => 'form-control', 'placeholder' => translate('Tags')]) !!}
                                    </div>
                                    @error('tags')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>


                                <div class="form-group">
                                    <div class="checkbox">
                                        {!! Form::checkbox('refundable', null, $product->refundable, ['id' => 'refundable_2']) !!}
                                        <label for="refundable_2">{{ translate('Refundable') }}</label>
                                    </div>

                                </div>

                            </div>

                        </div>


                    </div>
                </div>
                <div class="box box-slided-up box box-solid bg-warning orang-bg">
                    <div class="box-header with-border with-border orang-bg">
                        <h4 class="box-title">
                            {{ translate('price + stock') }}
                        </h4>
                        <ul class="box-controls pull-right">
                            <li><a class="box-btn-slide" href="#"></a></li>

                        </ul>
                    </div>

                    <div class="box-body" style="display: block;">


                        <div class="row">
                            <div class="col-lg-4 col-6 ">
                                <div class="form-group">
                                    <label for="short_desc_en">{{ translate('Unit price') }}
                                        <span class="text-danger">*</span>
                                    </label>


                                    <div class="input-group">
                                        {!! Form::number('unit_price', $product->unit_price, ['min' => '0', 'step' => '0.01', 'required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Unit price')]) !!}


                                        <span class="input-group-append">
                                            <div class="btn bg-secondary btn-rounded btn-sm" style="color: #757575;">
                                                {{ $currency_name }}</div>
                                        </span>
                                    </div>


                                    @error('unit_price')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-4 col-6">
                                <div class="form-group">
                                    <label for="cost_price">{{ translate('Cost Price') }}
                                    </label>
                                    <div class="input-group">
                                        {!! Form::number('cost_price', $product->cost_price, ['min' => '0', 'step' => '0.01', 'required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Cost Price')]) !!}


                                        <span class="input-group-append">
                                            <div class="btn bg-secondary btn-rounded btn-sm " style="color: #757575;">
                                                {{ $currency_name }}</div>
                                        </span>
                                    </div>
                                    @error('cost_price')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-4 col-6">
                                <div class="form-group">
                                    <label for="market_price">{{ translate('Market Price') }}
                                    </label>
                                    <div class="input-group">
                                        {!! Form::number('market_price', $product->market_price, ['min' => '0', 'step' => '0.01', 'required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Cost Price')]) !!}
                                        <span class="input-group-append">
                                            <div class="btn bg-secondary btn-rounded btn-sm " style="color: #757575;">
                                                {{ $currency_name }}</div>
                                        </span>
                                    </div>
                                    @error('market_price')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-3 col-6 quantity-limit-weight">
                                <div class="form-group">
                                    <label for="short_desc_en">{{ translate('Quantity') }}
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div>
                                        {!! Form::number('current_stock', $product->current_stock, ['id' => 'current_stock_id', 'min' => '0', 'step' => '1', 'required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Quantity')]) !!}
                                    </div>
                                    @error('current_stock')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-lg-1 col-6 quantity-limit-weight">
                                <div class="checkbox checkbox_limit">
                                    {!! Form::checkbox('current_stock_unlimited', null, $product->current_stock_unlimited, ['id' => 'Checkboxs_12']) !!}
                                    <label for="Checkboxs_12">
                                        {{ translate('current_stock_unlimited') }}
                                    </label>
                                    <span id="current_stock_limit"></span>
                                </div>
                            </div>
                            <div class="col-lg-2 col-6 quantity-limit-weight">
                                <div class="form-group">
                                    <label for="weight">{{ translate('Weight') }}
                                    </label>
                                    <div>
                                        {!! Form::number('weight', $product->weight, ['min' => '0', 'step' => '1', 'required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Weight')]) !!}

                                    </div>
                                    @error('weight')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-2 col-6 quantity-limit-weight">
                                <div class="form-group">
                                    <label for="weight">{{ translate('Unit') . $product->measruing_unit }}
                                    </label>
                                    <div>
                                        {!! Form::select('measruing_unit', ['kg' => 'KG', 'g' => 'G', 'lb' => 'LB'], $product->measruing_unit, ['class' => 'form-control ']) !!}

                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-12 ">
                                <div>
                                    <div class="row ">
                                        <div class="col-9">
                                            <div class="form-group">
                                                <label for="short_desc_en">{{ translate('Discount') }}
                                                </label>
                                                <div>
                                                    {!! Form::number('discount', $product->discount, ['min' => '0', 'step' => '0.01', 'class' => 'form-control', 'placeholder' => translate('Discount')]) !!}
                                                </div>
                                                @error('discount')
                                                    <div class="badge badge-danger text-center" style="width: 100%">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <label for="short_desc_en">
                                                {{ translate('Discount type') }}
                                            </label>
                                            <div>
                                                {!! Form::select('discount_type', ['amount' => translate('Amount'), 'percent' => translate('Percent')], $product->discount_type, ['class' => 'form-control']) !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-12 col-12" style="padding: 0;">
                    <div class="box box-slided-up box box-solid bg-warning orang-bg">
                        <div class="box-header with-border with-border orang-bg">
                            <h4 class="box-title">
                                {{ translate('Variations') }}
                                <span class="text-mute">
                                    {{ translate('Allow your customers to choose from options such as or sizes on your store') }}
                                </span>
                            </h4>
                            <ul class="box-controls pull-right">
                                <li><a class="box-btn-slide" href="#"></a></li>

                            </ul>
                        </div>
                        <div class="box-body" style="display: block;">
                            <div class="form-group row">
                                <div class="col-md-3">
                                    <input type="text" class="form-control" value="{{ translate('Attributes') }}"
                                        disabled>
                                </div>
                                <div class="col-md-8">
                                    {!! Form::select('choice_attributes[]', $attributes, json_decode($product->attributes, true), ['style' => 'width: 100%;', 'multiple' => 'multiple', 'class' => 'form-control select2', 'id' => 'choice_attributes']) !!}
                                </div>
                            </div>
                            <div class="" style="margin-bottom: 1em;">
                                {{ translate('Choose the attributes of this product and then input values of each attribute') }}
                            </div>
                            <div class="customer_choice_options" id="customer_choice_options">
                                @foreach (json_decode($product->choice_options) as $key => $choice_option)
                                    <div class="form-group row">
                                        <div class="col-lg-3">
                                            {!! Form::hidden('choice_no[]', $choice_option->attribute_id) !!}
                                            @php
                                                $attr_title = \App\Attribute::with([
                                                    'attribute_translations' => function ($tr) {
                                                        $tr->where('lang', App::getLocale());
                                                    },
                                                ])->find($choice_option->attribute_id);
                                            @endphp
                                            {!! Form::text('choice[]', getTranslation($attr_title, 'attribute_translations', 'title'), ['disabled' => 'disabled', 'class' => 'form-control', 'placeholder' => translate('Choice title')]) !!}
                                        </div>
                                        @php
                                            $attributes_options_arr = \App\AttributOption::select('id', 'title')
                                                ->with([
                                                    'attribut_option_translations' => function ($tr) {
                                                        $tr->where('lang', App::getLocale());
                                                    },
                                                ])
                                                ->get()
                                                ->toArray();
                                            $this->choices_options = [];
                                            $attributes_collection = collect($attributes_options_arr);
                                            $attributes_collection = $attributes_collection->map(function ($item, $key) {
                                                $this->choices_options[$item['id']] = sizeof($item['attribut_option_translations']) > 0 ? $item['attribut_option_translations'][0]['title'] : $item['title'];
                                                return $this->choices_options;
                                            });
                                            $selected_choices_options = $this->choices_options;
                                        @endphp

                                        <div class="col-lg-8">
                                            {!! Form::select('choice_options_' . $choice_option->attribute_id . '[]', $selected_choices_options, $choice_option->values, ['style' => 'width:100%;', 'onchange' => 'update_sku()', 'multiple' => 'multiple', 'class' => 'form-control select2']) !!}
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="sku_combination" id="sku_combination">

                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-xl-12 col-12 col-md-12" style="padding: 0;">
                    <div class="box box-slided-up box box-solid bg-warning orang-bg">
                        <div class="box-header with-border with-border orang-bg">
                            <h4 class="box-title">
                                {{ translate('Specs') }}
                                {{-- <span class="text-mute">
                                    {{ translate('Allow your customers to choose from options such as or sizes on your store') }}
                                </span> --}}
                            </h4>

                            <ul class="box-controls pull-right">
                                <li><a class="box-btn-slide" href="#"></a></li>

                            </ul>
                        </div>
                        <div id="serialized_specs" class="box-body" style="display: block;">
                            <div class="row">
                                <div class="col-md-4 col-xl-4 col-12">
                                    <h5>
                                        {{ translate('Show the product features in a simplified way to your customer, for example (length: 10 cm - width: 10 cm)') }}
                                    </h5>
                                </div>
                                <div class="col-md-4 col-xl-4 col-12">
                                    <div onclick="add_specs()"
                                        class="waves-effect waves-light btn  btn-dark mb-5 padding-label-dashbord">
                                        <i class="fa fa-plus"></i> {{ translate('Add spec') }}
                                    </div>
                                </div>
                                <div class="col-md-4 col-xl-4 col-12">
                                </div>
                            </div>
                            <hr>
                            @if (Session::get('serialized_specs_edit_array'))
                                @foreach (Session::get('serialized_specs_edit_array') as $key => $value)
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="serialized_specs">{{ translate('Spec key') }}
                                                </label>
                                                <div>
                                                    {!! Form::text('serialized_specs[key][]', $key, ['class' => 'form-control', 'placeholder' => translate('Spec key')]) !!}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <label for="serialized_specs">{{ translate('Spec value') }}
                                                </label>
                                                <div>
                                                    {!! Form::text('serialized_specs[value][]', $value, ['class' => 'form-control', 'placeholder' => translate('Spec value')]) !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                @if ($product->serialized_specs)
                                    @forelse (json_decode($product->serialized_specs) as $key => $value)
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="serialized_specs">{{ translate('Spec key') }}
                                                    </label>
                                                    <div>
                                                        {!! Form::text('serialized_specs[key][]', $key, ['class' => 'form-control', 'placeholder' => translate('Spec key')]) !!}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="form-group">
                                                    <label for="serialized_specs">{{ translate('Spec value') }}
                                                    </label>
                                                    <div>
                                                        {!! Form::text('serialized_specs[value][]', $value, ['class' => 'form-control', 'placeholder' => translate('Spec value')]) !!}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @empty

                                    @endforelse
                                @endif

                            @endif


                        </div>
                    </div>
                </div>
                @if (Session::get('tenant_subscribtion_data')['meta_data']['belongs_to_subscribtion'] == true && Session::get('tenant_controle_modules')['meta_data'] == 1)
                    <div class="box box-slided-up box box-solid bg-warning orang-bg">
                        <div class="box-header with-border with-border orang-bg">
                            <h4 class="box-title">
                                {{ translate('Meta') }}
                                <span class="text-mute">
                                    {{ translate('SEO results control what you see when this product is displayed in a search engine') }}
                                </span>
                            </h4>
                            <ul class="box-controls pull-right">
                                <li><a class="box-btn-slide" href="#"></a></li>

                            </ul>
                        </div>
                        <div class="box-body" style="display: block;">
                            <div class="row">
                                <div class="col-md-8 col-12">
                                    <div class="row">
                                        <div class="col-md-12 col-12">
                                            <div class="form-group">
                                                <label for="meta_title">{{ translate('Meta title') }}
                                                </label>
                                                <div>
                                                    {!! Form::text('meta_title', getTranslation($product, 'product_translations', 'meta_title'), ['class' => 'form-control', 'placeholder' => translate('Meta title')]) !!}
                                                </div>
                                                @error('meta_title')
                                                    <div class="badge badge-danger text-center" style="width: 100%">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-12">
                                            <div class="form-group">
                                                <label for="meta_description">{{ translate('Meta description') }}
                                                </label>
                                                <div>
                                                    {!! Form::textarea('meta_description', getTranslation($product, 'product_translations', 'meta_description'), ['rows' => 4, 'class' => 'form-control', 'placeholder' => translate('Meta description')]) !!}
                                                </div>
                                                @error('meta_description')
                                                    <div class="badge badge-danger text-center" style="width: 100%">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-12">
                                    <div class="row">

                                        <div class="col-md-12 col-12">

                                            <div class="form-group">
                                                <label for="meta_description">{{ translate('Meta Image') }}
                                                </label>
                                                <div class="custom-file-container">
                                                    <div class="custom-file">
                                                        <input type="file" name="meta_image" class="custom-file-input"
                                                            id="meta_image">
                                                        <label class="custom-file-label"
                                                            for="meta_image">{{ translate('Meta image') }}</label>
                                                    </div>

                                                    <div class="bg-lightest p-10 rounded5 dvPreview text-center"
                                                        style="width: 100%;margin-top: 1em;height: 10em;">
                                                        <img style="max-width: 100%;height: 100%;"
                                                            src="{{ $product->meta_image ? url($product->meta_image) : url('/images/noimg.png') }}"
                                                            alt="">
                                                    </div>
                                                </div>
                                                @error('meta_image')
                                                    <div class="badge badge-danger text-center" style="width: 100%">
                                                        {{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
        {!! Form::Close() !!}
        <!-- Start Multi Upload File -->
        <div class="box box-slided-up box box-solid bg-warning orang-bg">
            <div class="box-header with-border with-border orang-bg">
                <h4 class="box-title">{{ translate('Product attaches') }}
                    <span class="text-danger">*</span>
                </h4>
                <ul class="box-controls pull-right">
                    <li><a class="box-btn-slide" href="#"></a></li>

                </ul>
            </div>

            <div class="box-body" style="display: block;">

                <!-- ul append images -->
                <ul class="visualizacao sortable dropzone-previews b-dashed b-1 bg-lightest" style="display: none"></ul>

                <form action="{{ route('Product.fileupload') }}" class="dropzone" drop-zone="" id="file-dropzone">
                    <div class="fallback">
                        <input name="file" type="file" multiple />
                    </div>

                </form>
                <div class="preview" style="display:none;">
                    <li>
                        <div>
                            <div class="dz-preview dz-file-preview">
                                <img data-dz-thumbnail />
                                <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span>
                                </div>
                                <div class="dz-error-message"><span data-dz-errormessage></span></div>
                            </div>
                        </div>
                    </li>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('modal')
    <div class="modal modal-danger fade" id="error-modal-danger">
        <div class="modal-dialog">
            <div class="modal-content bg-danger">
                <div class="modal-header">
                    <h4 class="modal-title">{{ translate('Important') }}</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">

                    @if (count($errors) > 0)
                        @foreach ($errors->all() as $error)
                            <div class="alert alert-danger alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert"
                                    aria-hidden="true">&times;</button>
                                {{ $error }}
                            </div>
                        @endforeach
                    @endif
                </div>

            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal modal-secondary fade" id="improve-modal-primary">
        <div class="modal-dialog">
            <div class="modal-content bg-secondary">
                <div class="modal-header">
                    <h4 class="modal-title">{{ translate('For Improvements') }}</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <div class="btn btn-primary" onclick="submitdirectly()">{{ translate('Okay! save.') }}</div>
                </div>

            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection
@section('script')

    <script>
        $(document).ready(function() {
            var $sortableList = $('.sortable');
            $sortableList.sortable({
                stop: function(event, ui) {
                    $('.dz-complete').each(function(i) {
                        var data_id = $(this).data('id')
                        var id_sort = data_id + "_" + i;
                        console.log('data_id-- ' + data_id + " || sort --" + i)
                        $("input[data-id=" + data_id + "]").val(id_sort)
                    });
                }
            });

            $('.dz-default').addClass('b-dashed b-1 bg-lightest');
            $('.dropzone-previews').show();
        });
        Dropzone.autoDiscover = false;
        var myDropzone = new Dropzone("#file-dropzone", {
            url: "{{ route('Product.fileupload') }}",
            maxFilesize: 100,
            acceptedFiles: ".jpeg,.jpg,.png,.pdf",
            dictDefaultMessage: `<i style="font-size: 4em" class="fa fa-cloud-upload" aria-hidden="true"></i>
            <p class="ant-upload-text">{{ translate('Click and drag the file to this area to upload') }}</p>
            <p class="ant-upload-hint">{{ translate('Single or group lift support') }}</p>`,
            paramName: "uploadfile",
            maxThumbnailFilesize: 99999,
            previewsContainer: '.visualizacao',
            previewTemplate: $('.preview').html(),
            init: function() {
                $.ajax({
                    url: "{{ route('Product.getUploadedFiles') }}",
                    type: 'post',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: {{ $product->id }},
                    },
                    dataType: 'json',
                    success: function(response) {
                        console.log(response);
                        $.each(response, function(key, value) {
                            var mockFile = {
                                id: value.id,
                                name: value.name,
                                size: value.size,
                                sort: value.sort
                            };
                            myDropzone.emit("addedfile", mockFile);
                            myDropzone.emit("thumbnail", mockFile, value.path);
                            myDropzone.emit("complete", mockFile);
                            $(mockFile.previewElement).attr('data-id', value.id);
                            var id_sort = value.id + "_" + value.sort;
                            $('.form_to_submit').append(
                                '<input type="hidden" name="attatches[]" data-id="' +
                                value.id + '" value="' +
                                id_sort + '">');

                        });

                    }
                });
                this.on('completemultiple', function(file, json) {
                    $sortableList.sortable('enable');
                });
                this.on('success', function(file, response) {
                    $(file.previewElement).attr('data-id', response.id);
                    var id_sort = response.id + "_" + response.sort;
                    $('.form_to_submit').append(
                        '<input type="hidden" name="attatches[]" data-id="' + response.id +
                        '" value="' +
                        id_sort + '">');
                    $('.sortable').sortable('enable');

                });

                this.on('addedfile', function(file) {
                    var _this = this;
                    var removeButton = Dropzone.createElement(
                        "<span data-dz-remove class='glyphicon glyphicon-trash del_thumbnail'></span>"
                    );
                    removeButton.addEventListener("click", function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        var fileName = file.name;
                        var fileid = $(file.previewElement).attr('data-id');
                        $.post(`{{ route('Product.fileupload') }}`, {
                            _token: '{{ csrf_token() }}',
                            name: fileName,
                            id: fileid,
                            type: 'delete'
                        }, function(data) {
                            $('.form_to_submit').find(
                                    'input[name="attatches[]"][data-id="' + data.id +
                                    '"]')
                                .remove();
                        });
                        _this.removeFile(file);
                    });
                    file.previewElement.appendChild(removeButton);
                });

                this.on('drop', function(file) {});
            }
        });
        myDropzone.on("sending", function(file, xhr, formData) {
            formData.append("_token", '{{ csrf_token() }}');
            formData.append("filesize", file.size);
            formData.append("filesize", file.size);
            formData.append("type", 'add');
        });

        @if (count($errors) > 0)
            $('#error-modal-danger').modal();
        @endif
        CKEDITOR.replace('e1', {
            language: '{{ App::getLocale() }}'

        });
        @if ($product->current_stock_unlimited == 1)
            $('#current_stock_id').prop('disabled', true);
        @endif
        $('input[name="current_stock_unlimited"]').on('change', function() {
            if (!$('input[name="current_stock_unlimited"]').is(':checked')) {
                $('#current_stock_id').prop('disabled', false);
            } else {
                $('#current_stock_id').prop('disabled', true);
            }
        });

        $('#header_to_save_form').show();
        $('.select2').select2();

        function add_more_customer_choice_option(i, name) {
            var i_name = {
                "_token": "{{ csrf_token() }}",
                "i": i,
                "name": name
            }
            $.ajax({
                type: "POST",
                url: '{{ route('Product.productAddAttr') }}',
                data: i_name,
                success: function(data) {
                    $('#customer_choice_options').append(data);
                    $(".select2").select2();
                }
            });


        }

        function delete_row(em) {
            $(em).closest('.form-group').remove();
            update_sku();
        }

        function delete_variant(em) {
            $(em).closest('.variant').remove();
        }

        function update_sku() {
            $.ajax({
                type: "POST",
                url: '{{ route('Product.sku_combination_edit') }}',
                data: $('#choice_form').serialize(),
                success: function(data) {
                    $('#sku_combination').html(data);
                    if (data.length > 1) {
                        $('.quantity-limit-weight').hide();
                    } else {
                        $('.quantity-limit-weight').show();
                    }
                }
            });
        }
        $("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();

        function add_specs() {
            $.ajax({
                type: "POST",
                url: '{{ route('Product.add_specs') }}',
                data: $('#choice_form').serialize(),
                success: function(data) {
                    $('#serialized_specs').append(data);
                }
            });
        }

        $(document).ready(function() {
            update_sku();
            $('#choice_attributes').on('change', function() {
                $.each($("#choice_attributes option:selected"), function(j, attribute) {
                    flag = false;
                    $('input[name="choice_no[]"]').each(function(i, choice_no) {
                        if ($(attribute).val() == $(choice_no).val()) {
                            flag = true;
                        }
                    });
                    if (!flag) {
                        add_more_customer_choice_option($(attribute).val(), $(attribute).text());
                    }
                });

                var str = @php echo $product->attributes @endphp;
                $.each(str, function(index, value) {
                    flag = false;
                    $.each($("#choice_attributes option:selected"), function(j, attribute) {
                        console.log($(attribute).val())
                        if (value == $(attribute).val()) {
                            flag = true;
                        }
                    });
                    if (!flag) {
                        $('input[name="choice_no[]"][value="' + value + '"]').parent().parent()
                            .remove();
                    }
                });

                update_sku();
            });

            var selected_categories = @json(array_values($productcategories));
            $.post(`{{ route('OfferGroup.getofferGroupByCategory') }}`, {
                _token: '{{ csrf_token() }}',
                selected_categories: selected_categories
            }, function(data) {
                $('#offer_group_id').html(null);
                $.each(data, function(i, item) {
                    if (`{{ $product->offer_group_id }}` == i) {
                        $('#offer_group_id').append($('<option>', {
                            value: i,
                            text: item,
                            selected: true
                        }));
                    } else {
                        $('#offer_group_id').append($('<option>', {
                            value: i,
                            text: item
                        }));
                    }
                });
            });
            $('#category-id').on('select2:select', function(e) {
                selected_categories.push(e.params.data.id);
                $.post(`{{ route('OfferGroup.getofferGroupByCategory') }}`, {
                    _token: '{{ csrf_token() }}',
                    selected_categories: selected_categories
                }, function(data) {
                    $('#offer_group_id').html(null);
                    $.each(data, function(i, item) {
                        $('#offer_group_id').append($('<option>', {
                            value: i,
                            text: item
                        }));
                    });
                });
            });
            $('#category-id').on("select2:unselect", function(e) {
                var removeItemIndex = selected_categories.indexOf(e.params.data.id);
                if (removeItemIndex != -1) selected_categories.splice(removeItemIndex, 1);
                console.log(selected_categories);
                $.post(`{{ route('OfferGroup.getofferGroupByCategory') }}`, {
                    _token: '{{ csrf_token() }}',
                    selected_categories: selected_categories
                }, function(data) {
                    console.log(data);
                    $('#offer_group_id').html(null);
                    $.each(data, function(i, item) {
                        $('#offer_group_id').append($('<option>', {
                            value: i,
                            text: item
                        }));
                    });
                });
            });


        });
    </script>

@endsection