@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('Add 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('Add 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', 'action' => 'Admin\ProductController@storeRestorant', 'id' => 'choice_form', 'files' => true, 'class' => 'form_to_submit']) !!}
        <div class="row">
            <div class="col-xl-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', null, ['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', null, ['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="arrangement">{{ translate('arrangement') }}

                                    </label>
                                    <div>
                                        {!! Form::text('arrangement', 1, ['required' => 'required', 'class' => 'form-control', 'placeholder' => translate('arrangement')]) !!}
                                    </div>
                                    @error('arrangement')
                                        <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', null, ['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', null, ['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 }}">
                                                    {{ $category->getTranslation('title') }}
                                                </option>
                                                @foreach ($category->childrenCategories as $childCategory)
                                                    @include('categories.child_category', ['child_category' =>
                                                    $childCategory , 'category_id' => null])
                                                @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, 0, ['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', null, 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', null, ['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', null, ['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', null, ['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, 1, ['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', null, ['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', null, ['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', null, ['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">
                                <div class="form-group" id="quantity">
                                    <label for="short_desc_en">{{ translate('Quantity') }}
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div>
                                        {!! Form::number('current_stock', 5, ['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">
                                <div class="checkbox checkbox_limit">
                                    {!! Form::checkbox('current_stock_unlimited', null, 0, ['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">
                                <div class="form-group">
                                    <label for="weight">{{ translate('Weight') }}
                                    </label>
                                    <div>
                                        {!! Form::number('weight', null, ['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">
                                <div class="form-group">
                                    <label for="weight">{{ translate('Unit') }}
                                    </label>
                                    <div>
                                        {!! Form::select('measruing_unit', ['kg' => 'KG', 'g' => 'G', 'lb' => 'LB'], null, ['id' => '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', 0, ['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')], null, ['class' => 'form-control']) !!}
                                            </div>
                                        </div>
                                    </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('Variations') }}
                            <span class="text-mute">
                                {{ translate('Allow your customers to choose from options such as color 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, null, ['style' => 'width: 100%;', 'multiple' => 'multiple', 'class' => 'form-control select2', 'id' => 'choice_attributes']) !!}
                            </div>
                        </div>
                        <div 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">
                        </div>
                        <div class="sku_combination" id="sku_combination">
                        </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('Specs') }}
                        </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_array'))
                            @foreach (Session::get('serialized_specs_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
                        @endif
                    </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', null, ['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', null, ['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="{{ 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
                {!! 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>
                <!-- End Multi Upload File -->
    </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('Danger Modal') }}</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 id="basic-requires-model" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Label"
        aria-hidden="true">
        <div class="modal-dialog" style="margin-top: 15em;">
            <div class="modal-content">
                <button style="width: fit-content;margin: .5em;" type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">×</button>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 mx-auto text-center">
                            <h4 id="UpgradLimitModelH42" style="color: chocolate">
                                {{ translate('You should add at least one category to add product') }}
                            </h4>
                            <br>
                            <a class="btn btn-rounded btn-dark mb-5 padding-label-dashbord orang-bg"
                                href="{{ route('Category.index') }}">{{ translate('Add Category') }}</a>
                        </div>
                    </div>

                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection
@section('script')
    <script type="text/javascript">
        @if ($categoriesCount <= 0)
            $('#basic-requires-model').modal();
        @endif
        @if (count($errors) > 0)
            $('#error-modal-danger').modal();
        @endif
        CKEDITOR.replace('e1', {
            language: '{{ App::getLocale() }}'
        });
        $('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({
            allowClear: true,
            placeholder: "{{ translate('Search') }}"
        });
        var selected_categories = [];
        $('#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
                    }));
                });
            });
        });

        function add_specs() {
            $.ajax({
                type: "POST",
                url: '{{ route('Product.add_specs') }}',
                data: $('#choice_form').serialize(),
                success: function(data) {
                    $('#serialized_specs').append(data);
                }
            });
        }
        $.each($("#choice_attributes option:selected"), function() {
            add_more_customer_choice_option($(this).val(), $(this).text());
        });

        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);
                    $(".select_like_tag").select2();
                }
            });


        }
        $('input[name="unit_price"] , input[name="cost_price"], input[name="market_price"], input[name="weight"]').on(
            'keyup',
            function() {
                update_sku();
            });

        $('input[name="name"]').on('keyup', function() {
            update_sku();
        });
        $('#measruing_unit').on('change', function() {
            update_sku();
        })

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

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

        function removeA(arr) {
            var what, a = arguments,
                L = a.length,
                ax;
            while (L > 1 && arr.length) {
                what = a[--L];
                while ((ax = arr.indexOf(what)) !== -1) {
                    arr.splice(ax, 1);
                }
            }
            return arr;
        }
        var selected_choice_attributes = [];
        $('#choice_attributes').on('change', function() {
            $.each($("#choice_attributes option"), function() {
                if ($(this).is(':selected') == false) {
                    removeA(selected_choice_attributes, parseInt($(this).val()));
                    $('#choice_options_' + $(this).val()).remove();
                }

            });
            $.each($("#choice_attributes option:selected"), function() {
                if (selected_choice_attributes.includes(parseInt($(this).val()))) {

                } else {
                    selected_choice_attributes.push(parseInt($(this).val()))
                    add_more_customer_choice_option($(this).val(), $(this).text());
                }

            });
            update_sku();
        });

        function update_sku() {
            $.ajax({
                type: "POST",
                url: '{{ route('Product.sku_combination') }}',
                data: $('#choice_form').serialize(),
                success: function(data) {
                    $('#sku_combination').html(data);
                    if (data.length > 1) {
                        $('.quantity').hide();
                    } else {
                        $('.quantity').show();
                    }
                }
            });
        }
        $(document).ready(function() {
            setTimeout(() => {
                update_sku();
            }, 1000);



        });
    </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.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() {
                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');
                    $('.dropzone-previews').show();

                });
                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');
        });
    </script>
@endsection