@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', 'action' => 'Admin\ProductController@store', 'id' => 'choice_form', 'files' => true]) !!}

        <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, null, ['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, null, ['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', null, ['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', null, ['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, [], ['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, 1, ['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', date('Y-m-d H:i'), ['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">
                                    <h5 class="mb-0 h6">{{ __('Product.Variations') }}</h5>
                                </div>
                                <div class="card-body">
                                    <div class="form-group row">
                                        <div class="col-md-3">
                                            <input type="text" class="form-control" value="{{ __('Product.Colors') }}"
                                                disabled>
                                        </div>
                                        <div class="col-md-8">
                                            {!! Form::select('colors[]', $colors, null, ['disabled' => 'disabled', 'multiple' => 'multiple', 'class' => 'form-control select_like_tag', 'id' => 'colors']) !!}

                                        </div>
                                        <div class="col-md-1">

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

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

                                        </div>
                                    </div>
                                    <div>
                                        <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">

                                    </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-md-3 col-from-label">{{ __('Product.Unit price') }}</label>
                                        <div class="col-md-8">
                                            {!! Form::number('unit_price', 0, ['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-md-3 col-from-label">{{ __('Product.Quantity') }}</label>
                                        <div class="col-md-8">
                                            {!! Form::number('current_stock', 0, ['min' => '0', 'step' => '1', 'required' => 'required', 'class' => 'form-control', 'placeholder' => __('Product.Quantity')]) !!}
                                        </div>
                                    </div>
                                    <br>
                                    <div class="form-group row">
                                        <label class="col-md-3 col-from-label">{{ __('Product.Discount') }}</label>
                                        <div class="col-md-7">
                                            {!! Form::number('discount', 0, ['min' => '0', 'step' => '0.01', 'required' => 'required', 'class' => 'form-control', 'placeholder' => __('Product.Discount')]) !!}
                                        </div>
                                        <div class="col-md-2">
                                            {!! Form::select('discount_type', ['amount' => __('Product.Amount'), 'percent' => __('Product.Percent')], null, ['class' => 'form-control']) !!}
                                        </div>
                                    </div>
                                    <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', null, ['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', null, ['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_array'))
                                    @foreach (Session::get('serialized_specs_ar_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
                                @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_array'))
                                    @foreach (Session::get('serialized_specs_en_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
                                @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 class="col-sm-12 offset-sm-2">
                                {!! Form::submit(translate('Save'), ['class' => 'btn btn-primary form-control']) !!}
                            </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="filestyle-0_im" src="{{ 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', null, ['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', null, ['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">
                    <button type="button" id="next-btn22"
                        class="btn-shadow btn-wide float-right btn-pill btn-hover-shine btn btn-primary">{{ __('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 src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/material.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();
        $.each($("#choice_attributes option:selected"), function() {
            //console.log($(this).val());
            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();
                }
            });


        }
        if (!$('input[name="colors_active"]').is(':checked')) {
            $('#colors').prop('disabled', true);
        } else {
            $('#colors').prop('disabled', false);
        }
        $('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();
        });
        $('input[name="unit_price"]').on('keyup', function() {
            update_sku();
        });

        $('input[name="name"]').on('keyup', 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() {
            // $('#customer_choice_options').html(null);
            console.log('nader');
            $.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();
                    }
                }
            });
        }


        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() {
            setTimeout(() => {
                update_sku();
            }, 1000);
            $('#product_date')
                .bootstrapMaterialDatePicker({
                    time: true,
                    clearButton: true,
                    format: 'Y-M-D HH:mm'
                });
            var selected_categories = [];
            $('#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: null,
                            text: `{{ __('Product.choose_offer_group') }}`
                        }));
                        $.each(data, function(i, item) {
                            $('#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) {
                            $('#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') }}"
            },
            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: '33082e10-38e9-4888-8d95-19c34de63d03'
                        };
                    this.setDeleteFileParams({
                        _token: '{{ csrf_token() }}',
                        id: this.getUuid(id)
                    }, id);
                },
            }
        });
    </script>
@endsection