@extends('seller.layout')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{ url('./Panel/adminAssets/lou-multi/css/multi-select.css') }}">
    <link href="{{ url('./Panel/adminAssets/bootstrap-tagsinput/bootstrap-tagsinput.min.css') }}" rel="stylesheet">
    <script src="{{ url('./Panel/adminAssets/jquery-3.2.1.min.js') }}"></script>
    <script src="{{ url('./Panel/adminAssets/bootstrap-tagsinput/bootstrap-tagsinput.min.js') }}"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script>
        $(document).ready(function() {
            $('.manue-active ul').removeClass('mm-show').find('a').removeClass('mm-active');
            $('#Product ul').addClass('mm-show').find('#ProductCreate').addClass('mm-active');
        });
    </script>
    <style>
        .fa-cloud-upload-alt {
            font-size: 2em;
            color: #fb743e
        }

        .upload-btn-wrapper {
            position: relative;
            overflow: hidden;
            display: inline-block;
        }

        .upload-btn-wrapper input[type=file] {
            font-size: 100px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }


        .bootstrap-filestyle {
            border-radius: 30%;
        }

        .bootstrap-filestyle span {
            width: 100%;
        }

        .add_feature_meal {
            font-size: 1.5em;
            cursor: pointer;
            color: #D80200;
        }

        .ms-list {
            padding: 1em !important;
        }

        .ms-optgroup-label {
            color: #D80200 !important;
        }

    </style>
    <div class="parts form">
        @if (count($errors) > 0)
            <div id="accordion" class="container">
                <div class="card">
                    <div class="card-header" id="headingOne">
                        <h5 class="mb-0">
                            <button class="btn btn-primary" data-toggle="collapse" data-target="#collapseOne"
                                aria-expanded="true" aria-controls="collapseOne">
                                {{ __('General.errors') }}
                            </button>
                        </h5>
                    </div>

                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                        <div class="card-body">
                            @foreach ($errors->all() as $error)
                                <div class="alert alert-danger text-center"
                                    style="width: 90%;margin: auto;margin-bottom: 0.2em;padding: .5em;">
                                    {{ $error }}
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endif
        {!! Form::open(['method' => 'POST', 'id' => 'choice_form', 'action' => ['Admin\ProductController@update', $product->id], 'files' => true]) !!}
        <input type="hidden" name="id" value="{{ $product->id }}">
        <div class="main-card mb-3 card">
            <div class="card-body">
                <div id="smartwizard3" class="forms-wizard-vertical">
                    <ul class="forms-wizard">
                        <li>
                            <a href="#step-122">
                                <em>1</em><span>{{ __('Product.Initial info') }}</span>
                            </a>
                        </li>
                        <li>
                            <a href="#step-222">
                                <em>2</em><span>{{ __('Product.Variations') }}</span>
                            </a>
                        </li>
                        <li>
                            <a href="#step-322">
                                <em>3</em><span>{{ __('Product.desc') }}</span>
                            </a>
                        </li>
                        <li>
                            <a href="#step-422">
                                <em>4</em><span>{{ __('Product.Specs') }}</span>
                            </a>
                        </li>
                        <li>
                            <a href="#step-522">
                                <em>5</em><span>{{ __('Product.attachments') }}</span>
                            </a>
                        </li>
                        <li>
                            <a href="#step-622">
                                <em>6</em><span>{{ __('Product.meta') }}</span>
                            </a>
                        </li>
                    </ul>
                    <div class="form-wizard-content">
                        <div id="step-122">
                            <div class="row">
                                <div class="col-md">
                                    <div class="form-group">
                                        <label for="name">{{ __('Product.brand_id') }}
                                        </label>
                                        <div>
                                            {!! Form::select('brand_id', $brands, $product->brand_id, [
    'class' => 'form-control
                                            multiselect-dropdown',
    'placeholder' => __('Product.brand_id'),
]) !!}
                                        </div>
                                        @error('brand_id')
                                            <small class="form-text text-muted">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md">
                                    <div class="form-group">
                                        <label for="name">{{ __('Product.country_id') }}
                                        </label>
                                        <div>
                                            {!! Form::select('country_id', $countries, $product->country_id, [
    'class' => 'form-control multiselect-dropdown',
    'id' => 'country_id',
    'placeholder' => __('General.countries'),
]) !!}
                                        </div>
                                        @error('country_id')
                                            <small class="form-text text-muted">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">

                                <div class="col-md">
                                    <div class="form-group">
                                        <label for="title_en">{{ __('General.title_en') }}<span
                                                style="font-size: 1.2em;color: red">*</span>
                                        </label>
                                        <div>
                                            {!! Form::text('title_en', $product->title_en, ['class' => 'form-control', 'placeholder' => __('General.title_en')]) !!}
                                        </div>
                                        @error('title_en')
                                            <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>

                            </div>
                            <div class="row">

                                <div class="col-md">
                                    <div class="form-group">
                                        <label for="tags_en">{{ __('Product.tags_en') }}
                                        </label>
                                        <div>
                                            {!! Form::text('tags_en', $product->tags_en, ['data-role' => 'tagsinput', 'class' => 'form-control', 'placeholder' => __('Product.tags_en')]) !!}
                                        </div>
                                        @error('tags_en')
                                            <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>



                            <div class="form-group">
                                <label for="title_en">{{ __('Product.Categories') }}</label>
                                {!! Form::select('categories[]', $categories, $productcategories, ['id' => 'category-id', 'class' => 'form-control', 'multiple']) !!}
                            </div>

                            <div class="row">
                                <div class="col-md">
                                    <div class="form-group">
                                        <label style="width:150px" for="name">{{ __('Product.refundable') }}</label>
                                        {!! Form::checkbox('refundable', null, $product->refundable, ['class' => 'form-control', 'data-toggle' => 'toggle', 'data-onstyle' => 'primary']) !!}
                                    </div>
                                </div>
                                <div class="col-md">
                                    <div class="form-group">
                                        <label for="name">{{ __('Product.product_date') }}
                                        </label>
                                        <div>
                                            {!! Form::text('product_date', $product->product_date, ['id' => 'product_date', 'class' => 'form-control', 'placeholder' => __('Product.product_date')]) !!}
                                        </div>
                                        @error('product_date')
                                            <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>





                        </div>
                        <div id="step-222">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="mb-0 h6">{{ __('Product.Variations') }}</h3>
                                </div>
                                <div class="card-body">
                                    @php
                                        $colors_active = count(json_decode($product->colors)) > 0 ? 1 : 0;
                                        $colors_active_disabled = count(json_decode($product->colors)) > 0 ? false : true;
                                    @endphp
                                    <div class="form-group row">
                                        <div class="col-lg-3">
                                            <input type="text" class="form-control" value="{{ __('Product.Colors') }}"
                                                disabled>
                                        </div>
                                        <div class="col-lg-8">
                                            {!! Form::select('colors[]', $colors, json_decode($product->colors), ['disabled' => $colors_active_disabled, 'multiple' => 'multiple', 'class' => 'form-control select_like_tag', 'id' => 'colors']) !!}
                                        </div>
                                        <div class="col-lg-1">

                                            {!! Form::checkbox('colors_active', null, $colors_active) !!}
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <div class="col-lg-3">
                                            <input type="text" class="form-control"
                                                value="{{ __('Product.Attributes') }}" disabled>
                                        </div>
                                        <div class="col-lg-8">
                                            {!! Form::select('choice_attributes[]', $attributes, json_decode($product->attributes, true), ['multiple' => 'multiple', 'class' => 'form-control select_like_tag', 'id' => 'choice_attributes']) !!}

                                        </div>
                                    </div>

                                    <div class="">
                                        <p>{{ __('Product.Choose the attributes of this product and then input values of each attribute') }}
                                        </p>
                                        <br>
                                    </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) !!}
                                                    {!! Form::text('choice[]', \App\Attribute::find($choice_option->attribute_id)->{'title_' . App::getLocale()}, ['disabled' => 'disabled', 'class' => 'form-control', 'placeholder' => __('Product.Choice Title')]) !!}
                                                </div>

                                                <div class="col-lg-8">
                                                    {!! Form::select(
    'choice_options_' . $choice_option->attribute_id . '[]',
    \App\AttributOption::where('attribute_id', $choice_option->attribute_id)->pluck('title_' . App::getLocale(), 'title_en')->all(),
    $choice_option->values,
    ['onchange' => 'update_sku()', 'multiple' => 'multiple', 'class' => 'form-control select_like_tag'],
) !!}
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header">
                                    <h3 class="mb-0 h6">{{ __('Product.price + stock') }}</h3>
                                </div>
                                <div class="card-body">
                                    <div class="form-group row">
                                        <label class="col-lg-3 col-from-label">{{ __('Product.Unit price') }}</label>
                                        <div class="col-lg-6">
                                            {!! Form::number('unit_price', $product->unit_price, ['min' => '0', 'step' => '0.01', 'required' => 'required', 'class' => 'form-control', 'placeholder' => __('Product.Unit price')]) !!}

                                        </div>
                                    </div>
                                    <div class="form-group row" id="quantity">
                                        <label class="col-lg-3 col-from-label">{{ __('Product.Quantity') }}</label>
                                        <div class="col-lg-6">
                                            {!! Form::number('current_stock', $product->current_stock, ['min' => '0', 'step' => '1', 'required' => 'required', 'class' => 'form-control', 'placeholder' => __('Product.Quantity')]) !!}
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-lg-3 col-from-label">{{ __('Product.Discount') }}</label>
                                        <div class="col-lg-6">
                                            {!! Form::number('discount', $product->discount, ['min' => '0', 'step' => '0.01', 'required' => 'required', 'class' => 'form-control', 'placeholder' => __('Product.Discount')]) !!}
                                        </div>
                                        <div class="col-lg-3">
                                            {!! Form::select('discount_type', ['amount' => __('Product.Amount'), 'percent' => __('Product.Percent')], $product->discount_type, ['class' => 'form-control']) !!}
                                        </div>
                                    </div>
                                    <br>
                                    <div class="sku_combination" id="sku_combination">

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="step-322">
                            <div class="row">

                                <div class="col-md">
                                    <div class="form-group">
                                        <label for="short_desc_en">{{ __('Product.short_desc_en') }}<span
                                                style="font-size: 1.2em;color: red">*</span>
                                        </label>
                                        <div>
                                            {!! Form::textarea('short_desc_en', $product->short_desc_en, ['rows' => 4, 'class' => 'form-control', 'placeholder' => __('Product.short_desc_en')]) !!}
                                        </div>
                                        @error('short_desc_en')
                                            <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="desc_en">{{ __('General.desc_en') }}
                                </label>
                                <div>
                                    {!! Form::textarea('desc_en', $product->desc_en, ['id' => 'e2', 'class' => 'form-control', 'placeholder' => __('General.desc_en')]) !!}
                                </div>
                                @error('desc_en')
                                    <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div id="step-422">
                            <h5 class="card-title">{{ __('Product.specs_ar') }}</h5>
                            <div id="serialized_specs_ar">
                                <div class="row">
                                    <div class="col-md"></div>
                                    <div class="col-md">
                                        <input type="button" onclick="add_specs_ar()"
                                            value="{{ __('Product.Add_specs_ar') }}" class="btn btn-primary" />
                                    </div>
                                    <div class="col-md"></div>
                                </div>
                                <hr>
                                @if (Session::get('serialized_specs_ar_edit_array'))
                                    @foreach (Session::get('serialized_specs_ar_edit_array') as $key => $value)
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="serialized_specs_ar">{{ __('Product.specs_ar_key') }}
                                                    </label>
                                                    <div>
                                                        {!! Form::text('serialized_specs_ar[key][]', $key, ['class' => 'form-control', 'placeholder' => __('Product.specs_ar_key')]) !!}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="form-group">
                                                    <label for="serialized_specs_ar">{{ __('Product.specs_ar_value') }}
                                                    </label>
                                                    <div>
                                                        {!! Form::text('serialized_specs_ar[value][]', $value, ['class' => 'form-control', 'placeholder' => __('Product.specs_ar_value')]) !!}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    @forelse (json_decode($product->serialized_specs_ar) as $key => $value)
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="serialized_specs_ar">{{ __('Product.specs_ar_key') }}
                                                    </label>
                                                    <div>
                                                        {!! Form::text('serialized_specs_ar[key][]', $key, ['class' => 'form-control', 'placeholder' => __('Product.specs_ar_key')]) !!}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="form-group">
                                                    <label for="serialized_specs_ar">{{ __('Product.specs_ar_value') }}
                                                    </label>
                                                    <div>
                                                        {!! Form::text('serialized_specs_ar[value][]', $value, ['class' => 'form-control', 'placeholder' => __('Product.specs_ar_value')]) !!}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @empty

                                    @endforelse
                                @endif

                            </div>
                            <h5 class="card-title">{{ __('Product.specs_en') }}</h5>
                            <div id="serialized_specs_en">
                                <div class="row">
                                    <div class="col-md"></div>
                                    <div class="col-md">
                                        <input type="button" onclick="add_specs_en()"
                                            value="{{ __('Product.Add_specs_en') }}" class="btn btn-primary" />
                                    </div>
                                    <div class="col-md"></div>
                                </div>
                                <hr>
                                @if (Session::get('serialized_specs_en_edit_array'))
                                    @foreach (Session::get('serialized_specs_en_edit_array') as $key => $value)
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="serialized_specs_en">{{ __('Product.specs_en_key') }}
                                                    </label>
                                                    <div>
                                                        {!! Form::text('serialized_specs_en[key][]', $key, ['class' => 'form-control', 'placeholder' => __('Product.specs_en_key')]) !!}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="form-group">
                                                    <label for="serialized_specs_en">{{ __('Product.specs_en_value') }}
                                                    </label>
                                                    <div>
                                                        {!! Form::text('serialized_specs_en[value][]', $value, ['class' => 'form-control', 'placeholder' => __('Product.specs_en_value')]) !!}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    @forelse (json_decode($product->serialized_specs_en) as $key => $value)
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="serialized_specs_en">{{ __('Product.specs_ar_key') }}
                                                    </label>
                                                    <div>
                                                        {!! Form::text('serialized_specs_en[key][]', $key, ['class' => 'form-control', 'placeholder' => __('Product.specs_ar_key')]) !!}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="form-group">
                                                    <label for="serialized_specs_en">{{ __('Product.specs_ar_value') }}
                                                    </label>
                                                    <div>
                                                        {!! Form::text('serialized_specs_en[value][]', $value, ['class' => 'form-control', 'placeholder' => __('Product.specs_ar_value')]) !!}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @empty

                                    @endforelse
                                @endif

                            </div>
                        </div>
                        <div id="step-522">
                            <div class="multiupload-images">
                                <div class="form-group">
                                    <label
                                        class="control-label mb-10 text-left">{{ __('Product.product_attaches') }}</label>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div id="fine-uploader-gallery"></div>
                                    </div>
                                </div>

                                <link href="{{ url('fine-uploader/fine-uploader-gallery.css') }}" rel="stylesheet">
                                <script src="{{ url('fine-uploader/fine-uploader.js') }}"></script>
                                <script type="text/template" id="qq-template-gallery">

                                    <div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
                                                                        <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                                                                            <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                                                                                class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
                                                                        </div>
                                                                        <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                                                                            <span class="qq-upload-drop-area-text-selector"></span>
                                                                        </div>
                                                                        <div class="qq-upload-button-selector qq-upload-button">
                                                                            
                                                                        </div>
                                                                        <span class="qq-drop-processing-selector qq-drop-processing">
                                                                            <span>Processing dropped files...</span>
                                                                            <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
                                                                        </span>
                                                                        <ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite"
                                                                            aria-relevant="additions removals">
                                                                            <li>
                                                                                <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                                                                                <div class="qq-progress-bar-container-selector qq-progress-bar-container">
                                                                                    <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                                                                                        class="qq-progress-bar-selector qq-progress-bar"></div>
                                                                                </div>
                                                                                <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                                                                                <div class="qq-thumbnail-wrapper">
                                                                                    <img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
                                                                                </div>
                                                                                <button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
                                                                                <button type="button" class="qq-upload-retry-selector qq-upload-retry">
                                                                                    <span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
                                                                                    Retry
                                                                                </button>
                                        
                                                                                <div class="qq-file-info">
                                                                                    <div class="qq-file-name">
                                                                                        <span class="qq-upload-file-selector qq-upload-file"></span>
                                                                                        <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"
                                                                                            aria-label="Edit filename"></span>
                                                                                    </div>
                                                                                    <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                                                                                    <span class="qq-upload-size-selector qq-upload-size"></span>
                                                                                    <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
                                                                                        <span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
                                                                                    </button>
                                                                                    <button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
                                                                                        <span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
                                                                                    </button>
                                                                                    <button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
                                                                                        <span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
                                                                                    </button>
                                                                                </div>
                                                                            </li>
                                                                        </ul>
                                        
                                                                        <dialog class="qq-alert-dialog-selector">
                                                                            <div class="qq-dialog-message-selector"></div>
                                                                            <div class="qq-dialog-buttons">
                                                                                <button type="button" class="qq-cancel-button-selector">Close</button>
                                                                            </div>
                                                                        </dialog>
                                        
                                                                        <dialog class="qq-confirm-dialog-selector">
                                                                            <div class="qq-dialog-message-selector"></div>
                                                                            <div class="qq-dialog-buttons">
                                                                                <button type="button" class="qq-cancel-button-selector">No</button>
                                                                                <button type="button" class="qq-ok-button-selector">Yes</button>
                                                                            </div>
                                                                        </dialog>
                                        
                                                                        <dialog class="qq-prompt-dialog-selector">
                                                                            <div class="qq-dialog-message-selector"></div>
                                                                            <input type="text">
                                                                            <div class="qq-dialog-buttons">
                                                                                <button type="button" class="qq-cancel-button-selector">Cancel</button>
                                                                                <button type="button" class="qq-ok-button-selector">Ok</button>
                                                                            </div>
                                                                        </dialog>
                                                                    </div>
                                        
                                                                </script>
                            </div>
                            <br>

                        </div>
                        <div id="step-622">
                            <div class="row">
                                <div class="col-md-2"></div>
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <label for="name">{{ __('Product.meta_image') }}</label>
                                        <div class="row">
                                            <div class="col-md text-center">
                                                {!! Form::file('meta_image', null, ['class' => 'form-control', 'placeholder' => __('Product.meta_image')]) !!}
                                            </div>
                                            <div class="col-md text-center">
                                                <img id="meta_image"
                                                    src="{{ $product->meta_image ? url($product->meta_image) : url('/images/noimg.jpg') }}"
                                                    style="width: 80%;object-fit: cover;" alt="your image"
                                                    width="100" /><br />

                                            </div>
                                            @error('meta_image')
                                                <div class="badge badge-danger text-center" style="width: 100%">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2"></div>

                            </div>
                            <div class="row">

                                <div class="col-md">
                                    <div class="form-group">
                                        <label for="meta_title_en">{{ __('Product.meta_title_en') }}
                                        </label>
                                        <div>
                                            {!! Form::text('meta_title_en', $product->meta_title_en, ['required' => 'required', 'class' => 'form-control', 'placeholder' => __('Product.meta_title_en')]) !!}
                                        </div>
                                        @error('meta_title_en')
                                            <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>

                            </div>

                            <div class="col-md">
                                <div class="form-group">
                                    <label for="meta_description_en">{{ __('Product.meta_description_en') }}
                                    </label>
                                    <div>
                                        {!! Form::textarea('meta_description_en', $product->meta_description_en, ['rows' => 4, 'class' => 'form-control', 'placeholder' => __('Product.meta_description_en')]) !!}
                                    </div>
                                    @error('meta_description_en')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="divider"></div>
                <div class="clearfix" style="text-align: center">
                    {!! Form::submit(translate('Save'), ['class' => 'btn-shadow btn-wide float-left btn-pill btn-hover-shine btn btn-primary']) !!}

                    <button type="button" id="next-btn22"
                        class="btn-shadow float-right btn-wide btn-pill mr-3 btn btn-outline-secondary">{{ __('General.Next') }}</button>
                    <button type="button" id="prev-btn22"
                        class="btn-shadow float-right btn-wide btn-pill mr-3 btn btn-outline-secondary">{{ __('General.Previous') }}</button>
                </div>
            </div>
        </div>


        {!! Form::Close() !!}
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/ripples.min.js">
    </script>


    <script type="text/javascript" src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>
    <script type="text/javascript" src="{{ url('./Panel/adminAssets/bootstrap-material-datetimepicker.js') }}">
    </script>
    <script type="text/javascript" src="{{ url('./Panel/adminAssets/bootstrap-filestyle.min.js') }}"></script>
    <script src="{{ url('./Panel/adminAssets/lou-multi/js/jquery.multi-select.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

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


        }
        $('input[name="colors_active"]').on('change', function() {
            if (!$('input[name="colors_active"]').is(':checked')) {
                $('#colors').prop('disabled', true);
            } else {
                $('#colors').prop('disabled', false);
            }
            update_sku();
        });

        $('#colors').on('change', function() {
            update_sku();
        });

        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').hide();
                    } else {
                        $('#quantity').show();
                    }
                }
            });
        }
        $("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();

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

        function add_specs_en() {
            $.ajax({
                type: "POST",
                url: '{{ route('Product.add_specs_en') }}',
                data: $('#choice_form').serialize(),
                success: function(data) {
                    $('#serialized_specs_en').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) {
                        if (value == $(attribute).val()) {
                            flag = true;
                        }
                    });
                    if (!flag) {
                        $('input[name="choice_no[]"][value="' + value + '"]').parent().parent()
                            .remove();
                    }
                });

                update_sku();
            });
            $('#product_date')
                .bootstrapMaterialDatePicker({
                    time: true,
                    clearButton: true,
                    format: 'Y-M-D HH:mm'
                });
            var selected_categories = @json(array_values($productcategories));
            console.log(selected_categories);
            $.post(`{{ route('OfferGroup.getofferGroupByCategory') }}`, {
                _token: '{{ csrf_token() }}',
                selected_categories: selected_categories
            }, function(data) {
                $('#offer_group_id').html(null);
                $('#offer_group_id').append($('<option>', {
                    value: 0,
                    text: `{{ __('Product.choose_offer_group') }}`
                }));
                $.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').multiSelect({
                afterSelect: function(values) {
                    selected_categories.push(parseInt(values[0]));
                    console.log(selected_categories);
                    $.post(`{{ route('OfferGroup.getofferGroupByCategory') }}`, {
                        _token: '{{ csrf_token() }}',
                        selected_categories: selected_categories
                    }, function(data) {
                        $('#offer_group_id').html(null);
                        $('#offer_group_id').append($('<option>', {
                            value: 0,
                            text: `{{ __('Product.choose_offer_group') }}`
                        }));
                        $.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
                                }));
                            }
                        });
                    });
                },
                afterDeselect: function(values) {
                    var removeItemIndex = selected_categories.indexOf(parseInt(values[0]));
                    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);
                        $('#offer_group_id').append($('<option>', {
                            value: null,
                            text: `{{ __('Product.choose_offer_group') }}`
                        }));
                        $.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
                                }));
                            }
                        });
                    });
                }
            });
            $('input[type=file]').change(function() {
                console.log(this.name)
                readURL(this)
            });


            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function(e) {
                        // $('#' + input.id + '_im').attr('src', e.target.result);
                        $('#' + input.name).attr('src', e.target.result);

                    }

                    reader.readAsDataURL(input.files[0]);
                }
            }
            $('input[type=file]').filestyle({
                badge: true,
                input: false,
                text: '',
                htmlIcon: '<i class="fas fa-cloud-upload-alt"></i>'
            });
            $('input[type=file] badge').text('');

        });
    </script>
    <script type="text/javascript">
        CKEDITOR.replace('e1', {
            language: 'ar',
            extraPlugins: 'imageuploader'
        });

        CKEDITOR.replace('e2', {
            language: 'en',
            extraPlugins: 'imageuploader'
        });
    </script>
    <script>
        var galleryUploader = new qq.FineUploader({
            debug: true,
            params: {
                _token: '{{ csrf_token() }}'
            },
            element: document.getElementById("fine-uploader-gallery"),
            template: 'qq-template-gallery',
            request: {
                endpoint: "{{ url('./imageuploads') }}",
            },
            session: {
                endpoint: "{{ url('./getuploadedImages/' . $product->id) }}"
            },
            thumbnails: {
                placeholders: {
                    waitingPath: "{{ url('fine-uploader/placeholders/waiting-generic.png') }}",
                    notAvailablePath: "{{ url('fine-uploader/placeholders/not_available-generic.png') }}"
                }
            },
            validation: {
                allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
            },
            deleteFile: {
                enabled: true, // defaults to false
                endpoint: "{{ url('./imageuploadsdelete') }}",
            },
            callbacks: {
                onSessionRequestComplete: function(response, success, xhrOrXdr) {
                    for (var i = 0; i < response.length; i++) {
                        var obj = response[i];
                    }
                },
                onSubmitDelete: function(id) {
                    this.setDeleteFileParams({
                        _token: '{{ csrf_token() }}',
                        id: this.getUuid(id)
                    }, id);
                },
                onSubmit: function(id, fileName) {
                    var newParams = {
                            newPar: 321
                        },
                        finalParams = {
                            _token: '{{ csrf_token() }}'
                        };

                    qq.extend(finalParams, newParams);
                    this.setParams(finalParams);
                },
                onComplete: function(id, xhr, isError) {
                    this.setDeleteFileParams({
                        _token: '{{ csrf_token() }}',
                        id: this.getUuid(id)
                    }, id);
                },
                onDelete: function(id) {
                    var newParams = {
                            newPar: 321
                        },
                        finalParams = {
                            _token: '{{ csrf_token() }}',
                            id: this.getUuid(id)
                        };
                    this.setDeleteFileParams({
                        _token: '{{ csrf_token() }}',
                        id: this.getUuid(id)
                    }, id);
                },
            }
        });
    </script>
@endsection