@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" type="text/css" href="https://unpkg.com/file-upload-with-preview@4.0.2/dist/file-upload-with-preview.min.css">
@endsection

@section('content')

<div class="card">
    <div class="card-header">
        {{ trans('global.create') }} {{ trans('global.product.title_singular') }}
    </div>
    <div class="card-body">
        <form action="{{ route("admin.products.store") }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('category') ? 'has-error' : '' }}">
                        <label for="category">{{ trans('global.product.fields.category') }}*</label>
                        <select onchange="handleSelectChange(event)" name="category_id" id="category" class="form-control" required>
                            <option value="">Choose</option>
                            {{--  @foreach($category as $id => $category)
                                <option value="{{ $id }}" {{ (in_array($id, old('category', [])) && $category->contains($id)) ? 'selected' : '' }}>{{ $category }}</option>
                            @endforeach  --}}
                            @foreach($category as $id => $category)
                                <option value="{{ $id }}" {{ (in_array($id, old('category', [])) && $category->contains($id)) ? 'selected' : '' }}>{{ $category }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <hr/>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('name_en') ? 'has-error' : '' }}">
                        <label for="name">{{ trans('global.product.fields.name_en') }}*</label>
                        <input type="text" id="name_en" name="name_en" class="form-control" required value="{{ old('name_en', isset($product) ? $product->name_en : '') }}">
                        @if($errors->has('name'))
                            <p class="help-block">
                                {{ $errors->first('name') }}
                            </p>
                        @endif
                        <p class="helper-block">

                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('name_mm') ? 'has-error' : '' }}">
                        <label for="name">{{ trans('global.product.fields.name_mm') }}</label>
                        <input type="text" id="name_mm" name="name_mm" class="form-control" value="{{ old('name_mm', isset($product) ? $product->name_mm : '') }}">
                        @if($errors->has('name'))
                            <p class="help-block">
                                {{ $errors->first('name') }}
                            </p>
                        @endif
                        <p class="helper-block">

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

            <div class="row">

                <div class="col-md-6">
                    <div class="form-group">
                        <label for="status">Brand Status *</label>
                        <select class="form-control" id="brand_status" name="brand_status" required="">
                            @foreach (App\Product::BRAND_STATUS as $key=>$item)
                                <option value="{{$key}}" {{ (isset($product) ? $product->brand_status : old('brand_status')) == $key ? 'selected' : '' }}>{{$item}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label for="status">Preorder</label>
                        <select class="form-control" id="preorder" name="preorder">
                            @foreach (App\Product::PREORDER as $key=>$item)
                                <option value="{{$key}}" {{ (isset($product) ? $product->preorder : old('preorder')) == $key ? 'selected' : '' }}>{{$item}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

            </div>

          {{-- start specification --}}

          <div class="row">
              <div class="col-md-8">
                <h5>Product Specification</h5>
                <div class="repeater">
                    <input data-repeater-create type="button" class="btn btn-sm btn-success my-2" value="Add More"/>
                    <div data-repeater-list="outer-list">
                      <div data-repeater-item class="card">
                            <div class="card-body">
                                <!-- innner repeater -->
                                 <div class="inner-repeater row">
                                    <div data-repeater-list="inner-list" class="select-data col-md-10">
                                        <div data-repeater-item>
                                            <div class="row my-2">
                                                <div class="col-md-6">
                                                    <select name="specification_id" id="specification_id" class="form-control specification" required>
                                                        <option value="">Specification</option>
                                                        @foreach ($specifications as $id=>$specification)
                                                            <option value="{{$id}}">{{$specification}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-5">
                                                    <select name="specification_value_id" id="specification_value_id" class="form-control specification_value">
                                                        <option value="">Specification Value</option>

                                                    </select>
                                                </div>
                                                <div class="col-md-1 my-2">
                                                    <input data-repeater-delete type="button" class="btn btn-xs btn-danger" value="x"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="my-2 col-md-2">
                                        <div class="col-md-10 text-right">
                                            <input data-repeater-create type="button" class="btn btn-sm btn-success" value="Add"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-md-5">
                                        <input type="number" name="price" id="price" placeholder="Price" class="form-control" value=""/>
                                    </div>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-md-5">
                                        <input type="number" name="discount_price" id="discount_price" placeholder="Discount Price" class="form-control" value=""/>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group{{ $errors->has('dis_start_date') ? ' has-error' : '' }}">
                                        <label for="dis_start_date">Discount Start Date <span class="text-danger">*</span></label>
                                        {!! Form::date('dis_start_date', null, ['class' => 'form-control']) !!}
                                        <small class="text-danger">{{ $errors->first('dis_start_date') }}</small>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group{{ $errors->has('dis_end_date') ? ' has-error' : '' }}">
                                        <label for="dis_end_date">Discount End Date <span class="text-danger">*</span></label>
                                        {!! Form::date('dis_end_date', null, ['class' => 'form-control']) !!}
                                        <small class="text-danger">{{ $errors->first('dis_end_date') }}</small>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group{{ $errors->has('dis_gift') ? ' has-error' : '' }}">
                                        <label for="dis_gift">Discount Gift</label><br>
                                        <input type="text" name="dis_gift" id="dis_gift" class="form-control" placeholder="Enter Discount Gift" value="{{ old('dis_gift') }}">
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group{{ $errors->has('dis_image') ? ' has-error' : '' }}">
                                        <label for="dis_image">{{ trans('global.product.fields.dis_image') }}</label><br>
                                        {!! Form::file('dis_image', ['class' => 'form-control', 'accept' => 'image/*']) !!} <br>
                                        <small class="text-danger">{{ $errors->first('dis_image') }}</small>
                                    </div>
                                </div>

                                <div class="row mt-2">
                                    <div class="col-md-5">
                                        <input type="number" name="qty" id="qty" placeholder="Qty" class="form-control" value=""/>
                                    </div>
                                    <div class="col-md-2">
                                        <input data-repeater-delete type="button" class="btn btn-xs btn-danger" value="x"/>
                                    </div>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-md-5">
                                        <input type="text" name="sku" id="sku" placeholder="SKU" class="form-control" value=""/>
                                    </div>
                                </div>
                                {{-- <div class="row my-3">
                                    <div class="col-md-12">
                                        <label for="">Feature image</label> <br>
                                        <img src="" id="img" width="200">
                                        <input type="file" name="feature_image" id="feature_image" class="form-control" onchange="preview(event)">
                                    </div>
                                </div> --}}
                                <br>
                                <div class="custom-file-container feature-container" data-upload-id="featureUniqueUploadId">
                                    <label>Feature image <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image"> x</a></label>
                                    <label class="custom-file-container__custom-file">
                                        <input type="file" name="feature_image" id="feature_image" class="custom-file-container__custom-file__custom-file-input" accept="*" aria-label="Choose File">
                                        <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
                                        <span class="custom-file-container__custom-file__custom-file-control"></span>
                                    </label>

                                    <div class="custom-file-container__image-preview" style="width: 40%; height: 300px; overflow: hidden;"></div>
                                </div>
                                {{-- <div class="row my-3">
                                    <div class="col-md-12">
                                        <label for="">Gallery image</label>
                                        <input type="file" name="gallery_image" id="gallery_image" class="form-control" multiple>
                                    </div>
                                </div> --}}
                                <div class="custom-file-container gallery-container" data-upload-id="galleryUniqueUploadId">
                                    <label>Gallery image <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image"> x</a></label>
                                    <label class="custom-file-container__custom-file">
                                        <input type="file" name="gallery_image" id="gallery_image" class="custom-file-container__custom-file__custom-file-input" accept="*" multiple aria-label="Choose File">
                                        <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
                                        <span class="custom-file-container__custom-file__custom-file-control"></span>
                                    </label>

                                    <div class="custom-file-container__image-preview"></div>
                                </div>
                            </div>
                      </div>
                    </div>
                </div>
              </div>
          </div>

          {{-- end specification --}}

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="status">Status</label>
                        <select class="form-control" id="status" name="status">
                            @foreach (App\Product::STATUS as $key=>$item)
                                <option value="{{$key}}" {{ (isset($product) ? $product->status : old('status')) == $key ? 'selected' : '' }}>{{$item}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('slug') ? 'has-error' : '' }}">
                        <label for="slug">{{ trans('global.product.fields.slug') }}*</label>
                        <input type="text" id="slug" name="slug" class="form-control" value="{{ old('slug', isset($product) ? $product->slug : '') }}">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('description_en') ? 'has-error' : '' }}">
                        <label for="description_en">{{ trans('global.product.fields.description_en') }}</label>
                        <textarea id="description_en" name="description_en" class="form-control ">{{ old('description_en', isset($product) ? $product->description_en : '') }}</textarea>
                        @if($errors->has('description'))
                            <p class="help-block">
                                {{ $errors->first('description') }}
                            </p>
                        @endif
                        <p class="helper-block">

                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('description_mm') ? 'has-error' : '' }}">
                        <label for="description_mm">{{ trans('global.product.fields.description_mm') }}</label>
                        <textarea id="description_mm" name="description_mm" class="form-control ">{{ old('description_mm', isset($product) ? $product->description_mm : '') }}</textarea>
                        @if($errors->has('description'))
                            <p class="help-block">
                                {{ $errors->first('description') }}
                            </p>
                        @endif
                        <p class="helper-block">

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('details') ? 'has-error' : '' }}">
                        <label for="details">{{ trans('global.product.fields.details') }}</label>
                        <textarea id="details" name="details" class="form-control ">{{ old('details', isset($product) ? $product->details : '') }}</textarea>
                        @if($errors->has('details'))
                            <p class="help-block">
                                {{ $errors->first('details') }}
                            </p>
                        @endif
                        <p class="helper-block">

                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group {{ $errors->has('specifications') ? 'has-error' : '' }}">
                        <label for="specifications">{{ trans('global.product.fields.specifications') }}</label>
                        <textarea id="specifications" name="specifications" class="form-control ">{{ old('specifications', isset($product) ? $product->specifications : '') }}</textarea>
                        @if($errors->has('specifications'))
                            <p class="help-block">
                                {{ $errors->first('specifications') }}
                            </p>
                        @endif
                        <p class="helper-block">

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

            <!-- For New Product -->
            <div class="new-model">
                <hr/>
                <div class="form-group">
                    <label for="news_banner_image">{{ trans('global.product.fields.news_banner_image') }}</label>
                    <div class="needsclick dropzone {{ $errors->has('news_banner_image') ? 'is-invalid' : '' }}" id="news_banner_image-dropzone">
                    </div>
                    @if($errors->has('news_banner_image'))
                        <div class="invalid-feedback">
                            {{ $errors->first('news_banner_image') }}
                        </div>
                    @endif
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group {{ $errors->has('slogan') ? 'has-error' : '' }}">
                            <label for="slogan">{{ trans('global.product.fields.slogan') }}</label>
                            <input type="text" id="slogan" name="slogan" class="form-control" value="{{ old('slogan', isset($product) ? $product->slogan : '') }}">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group {{ $errors->has('new_model_title1') ? 'has-error' : '' }}">
                            <label for="new_model_title1">{{ trans('global.product.fields.new_model_title1') }}</label>
                            <input type="text" id="new_model_title1" name="new_model_title1" class="form-control" value="{{ old('new_model_title1', isset($product) ? $product->new_model_title1 : '') }}">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="new_model_body1">{{ trans('global.product.fields.new_model_body1') }}</label>
                            <textarea id="new_model_body1" name="new_model_body1"></textarea>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="new_model_summary1">{{ trans('global.product.fields.new_model_summary1') }}</label>
                            <textarea id="new_model_summary1" name="new_model_summary1"></textarea>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group {{ $errors->has('products1_images') ? 'has-error' : '' }}">
                            <label for="products1_images">{{ trans('global.product.fields.new_model_image1') }}</label>
                            <div class="needsclick dropzone" id="products1_images-dropzone">
                            </div>
                            @if($errors->has('products1_images'))
                                <p class="help-block">
                                    {{ $errors->first('products1_images') }}
                                </p>
                            @endif
                        </div>
                    </div>
                </div>

                 <div class="row">
                    <div class="col-md-6">
                        <div class="form-group {{ $errors->has('new_model_title2') ? 'has-error' : '' }}">
                            <label for="new_model_title2">{{ trans('global.product.fields.new_model_title2') }}</label>
                            <input type="text" id="new_model_title2" name="new_model_title2" class="form-control" value="{{ old('new_model_title2', isset($product) ? $product->new_model_title2 : '') }}">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="new_model_body2">{{ trans('global.product.fields.new_model_body2') }}</label>
                            <textarea id="new_model_body2" name="new_model_body2"></textarea>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="new_model_summary2">{{ trans('global.product.fields.new_model_summary2') }}</label>
                            <textarea id="new_model_summary2" name="new_model_summary2"></textarea>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group {{ $errors->has('products2_images') ? 'has-error' : '' }}">
                            <label for="products2_images">{{ trans('global.product.fields.new_model_image2') }}</label>
                            <div class="needsclick dropzone" id="products2_images-dropzone">
                            </div>
                            @if($errors->has('products2_images'))
                                <p class="help-block">
                                    {{ $errors->first('products2_images') }}
                                </p>
                            @endif
                        </div>
                    </div>
                </div>

                 <div class="row">
                    <div class="col-md-6">
                        <div class="form-group {{ $errors->has('new_model_title3') ? 'has-error' : '' }}">
                            <label for="new_model_title3">{{ trans('global.product.fields.new_model_title3') }}</label>
                            <input type="text" id="new_model_title3" name="new_model_title3" class="form-control" value="{{ old('new_model_title3', isset($product) ? $product->new_model_title3 : '') }}">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="new_model_body3">{{ trans('global.product.fields.new_model_body3') }}</label>
                            <textarea id="new_model_body3" name="new_model_body3"></textarea>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="new_model_summary3">{{ trans('global.product.fields.new_model_summary3') }}</label>
                            <textarea id="new_model_summary3" name="new_model_summary3"></textarea>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group {{ $errors->has('products1_images') ? 'has-error' : '' }}">
                            <label for="products1_images">{{ trans('global.product.fields.new_model_image3') }}</label>
                            <div class="needsclick dropzone" id="products1_images-dropzone">
                            </div>
                            @if($errors->has('products1_images'))
                                <p class="help-block">
                                    {{ $errors->first('products1_images') }}
                                </p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <!-- For New Product -->
            <div class="text-right">
                <input class="btn btn-info" type="submit" value="{{ trans('global.save') }}">
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('js/summernote-bs4.min.js') }}"></script>
    <script src="https://unpkg.com/file-upload-with-preview@4.0.2/dist/file-upload-with-preview.min.js"></script>
    <script>
        var upload = new FileUploadWithPreview('galleryUniqueUploadId')
        var upload = new FileUploadWithPreview('featureUniqueUploadId')
    </script>
    <script>
        $("#new_model_summary1,#new_model_summary2,#new_model_summary3").summernote({
            height: 200,
            tabsize: 4
        });
    </script>

<script>
    $(document).ready(function(){
        $(".new-model").hide();
        $("#brand_status").change(function(){
            $(this).find("option:selected").each(function(){
                var optionValue = $(this).attr("value");
                if(optionValue == 1){
                    $(".new-model").hide();
                } else{
                    $(".new-model").show();
                }
            });
        });
    });
</script>
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/summernote-bs4.min.js') }}"></script>
<script src="{{ asset('js/jquery.repeater.js') }}"></script>
<script>
    $('.specification').on('change',function(){
        // console.log($(this).closest('select').val);
        var spec_id = $(this).val();
        var spec_value =$('.specification_value');
        get_specification_value(spec_id,spec_value);
    })
    function get_specification_value(spec_id,spec_value){
        $.ajax({
            method : 'get',
            url : '/admin/get_specification_value/'+spec_id,
            success : function(response){
                if (response.success) {
                    spec_value.find('option').remove();
                    $.each(response.data, function(index, item) {
                        var name = item.name;
                        if(item.color_name != null){
                            name = item.color_name;
                        }
                        if(item.specification.name == 'Color'){
                            spec_value.append(new Option(name, item.id));
                        }else{
                            spec_value.append(new Option(name, item.id));
                        }

                      //  console.log(item);
                    });
                }
            }
        })
    }
</script>
<script>
    $("#new_model_body1,#new_model_body2,#new_model_body3,#description_en,#description_mm,#details,#specifications").summernote({
        height: 200,
        tabsize: 4
    });
</script>
{{-- <script>
    function preview(event) {
        var input = event.target.files[0];
        var reader = new FileReader();
        reader.onload = function() {
            var result = reader.result;
            var img = document.getElementById('img');
            img.src = result;
        }
        reader.readAsDataURL(input);

    }
</script> --}}
<script>
    Dropzone.options.newsBannerImageDropzone = {
    url: '{{ route('admin.products.storeMedia') }}',
    maxFilesize: 5, // MB
    acceptedFiles: '.jpeg,.jpg,.png,.gif,.webp',
    maxFiles: 1,
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    success: function (file, response) {
      $('form').find('input[name="news_banner_image"]').remove()
      $('form').append('<input type="hidden" name="news_banner_image" value="' + response.name + '">')
    },
    removedfile: function (file) {
      file.previewElement.remove()
      if (file.status !== 'error') {
        $('form').find('input[name="news_banner_image"]').remove()
        this.options.maxFiles = this.options.maxFiles + 1
      }
    },
    init: function () {
@if(isset($product) && $product->news_banner_image)
      var file = {!! json_encode($product->news_banner_image) !!}
          this.options.addedfile.call(this, file)
      this.options.thumbnail.call(this, file, file.preview)
      file.previewElement.classList.add('dz-complete')
      $('form').append('<input type="hidden" name="news_banner_image" value="' + file.file_name + '">')
      this.options.maxFiles = this.options.maxFiles - 1
@endif
    },
    error: function (file, response) {
        if ($.type(response) === 'string') {
            var message = response //dropzone sends it's own error messages in string
        } else {
            var message = response.errors.file
        }
        file.previewElement.classList.add('dz-error')
        _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
        _results = []
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            node = _ref[_i]
            _results.push(node.textContent = message)
        }

        return _results
    }
}
</script>
<script>
    Dropzone.options.products1ImagesDropzone = {
    url: '{{ route('admin.products.storeMedia') }}',
    maxFiles: 1,
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    success: function (file, response) {
      $('form').find('input[name="products1_images"]').remove()
      $('form').append('<input type="hidden" name="products1_images" value="' + response.name + '">')
    },
    removedfile: function (file) {
      file.previewElement.remove()
      if (file.status !== 'error') {
        $('form').find('input[name="products1_images"]').remove()
        this.options.maxFiles = this.options.maxFiles + 1
      }
    },
    init: function () {
@if(isset($product) && $product->products1_images)
      var file = {!! json_encode($product->products1_images) !!}
          this.options.addedfile.call(this, file)
      this.options.thumbnail.call(this, file, file.preview)
      file.previewElement.classList.add('dz-complete')
      $('form').append('<input type="hidden" name="products1_images" value="' + file.file_name + '">')
      this.options.maxFiles = this.options.maxFiles - 1
@endif
    },
    error: function (file, response) {
        if ($.type(response) === 'string') {
            var message = response //dropzone sends it's own error messages in string
        } else {
            var message = response.errors.file
        }
        file.previewElement.classList.add('dz-error')
        _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
        _results = []
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            node = _ref[_i]
            _results.push(node.textContent = message)
        }

        return _results
    }
}
</script>
<script>
    Dropzone.options.products2ImagesDropzone = {
    url: '{{ route('admin.products.storeMedia') }}',
    maxFiles: 1,
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    success: function (file, response) {
      $('form').find('input[name="products2_images"]').remove()
      $('form').append('<input type="hidden" name="products2_images" value="' + response.name + '">')
    },
    removedfile: function (file) {
      file.previewElement.remove()
      if (file.status !== 'error') {
        $('form').find('input[name="products2_images"]').remove()
        this.options.maxFiles = this.options.maxFiles + 1
      }
    },
    init: function () {
@if(isset($product) && $product->products2_images)
      var file = {!! json_encode($product->products2_images) !!}
          this.options.addedfile.call(this, file)
      this.options.thumbnail.call(this, file, file.preview)
      file.previewElement.classList.add('dz-complete')
      $('form').append('<input type="hidden" name="products2_images" value="' + file.file_name + '">')
      this.options.maxFiles = this.options.maxFiles - 1
@endif
    },
    error: function (file, response) {
        if ($.type(response) === 'string') {
            var message = response //dropzone sends it's own error messages in string
        } else {
            var message = response.errors.file
        }
        file.previewElement.classList.add('dz-error')
        _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
        _results = []
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            node = _ref[_i]
            _results.push(node.textContent = message)
        }

        return _results
    }
}
</script>
<script>
    Dropzone.options.products3ImagesDropzone = {
    url: '{{ route('admin.products.storeMedia') }}',
    maxFiles: 1,
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    success: function (file, response) {
      $('form').find('input[name="products3_images"]').remove()
      $('form').append('<input type="hidden" name="products3_images" value="' + response.name + '">')
    },
    removedfile: function (file) {
      file.previewElement.remove()
      if (file.status !== 'error') {
        $('form').find('input[name="products3_images"]').remove()
        this.options.maxFiles = this.options.maxFiles + 1
      }
    },
    init: function () {
@if(isset($product) && $product->products3_images)
      var file = {!! json_encode($product->products3_images) !!}
          this.options.addedfile.call(this, file)
      this.options.thumbnail.call(this, file, file.preview)
      file.previewElement.classList.add('dz-complete')
      $('form').append('<input type="hidden" name="products3_images" value="' + file.file_name + '">')
      this.options.maxFiles = this.options.maxFiles - 1
@endif
    },
    error: function (file, response) {
        if ($.type(response) === 'string') {
            var message = response //dropzone sends it's own error messages in string
        } else {
            var message = response.errors.file
        }
        file.previewElement.classList.add('dz-error')
        _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
        _results = []
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            node = _ref[_i]
            _results.push(node.textContent = message)
        }

        return _results
    }
}
/*select change by choosing category*/
function handleSelectChange(event) {
    document.getElementById("specification_id").classList.add("otherclass");
    var selectElement = event.target;
    var category_id = selectElement.value;
    var spec =$('.specification');
    getSpecVal(category_id,spec);
}
function getSpecVal(category_id,spec){
    $.ajax({
        method : 'get',
        url : '/admin/get_specification/'+category_id,
        success : function(response){
                    if (response.success) {
                        spec.find('option').remove();
                        spec.append(new Option('Specification',''));
                        $.each(response.data, function(index, item) {
                            spec.append(new Option(item.name, item.id));
                            //console.log(item.name);
                        });
                    }
                }
       });
}
$('.repeater').repeater({
            isFirstItemUndeletable: true,
            show: function () {
				var selectElement = event.target;
                var category_id = document.getElementById("category").value;
                var spec= $(this).find('.specification');
                var spec_value= $(this).find('.specification_value');
				//get specification by category id
                getSpecVal(category_id,spec);
                spec.on('change',function(){
                    var spec_id = spec.val();
                    get_specification_value(spec_id,spec_value);
                });
                $(this).slideDown();
                // console.log($(this).find('.gallery-container'));

                // for gallery image
                let upload_id = 'galleryUniqueUploadId'+$('.repeater .card').length;
                let feature_upload_id = 'featureUniqueUploadId'+$('.repeater .card').length;

                $(this).find('.gallery-container').attr('data-upload-id', upload_id)
                new FileUploadWithPreview(upload_id)

                // for feature image

                $(this).find('.feature-container').attr('data-upload-id', feature_upload_id)
                new FileUploadWithPreview(feature_upload_id)
            },
            // (Required if there is a nested repeater)
            // Specify the configuration of the nested repeaters.
            // Nested configuration follows the same format as the base configuration,
            // supporting options "defaultValues", "show", "hide", etc.
            // Nested repeaters additionally require a "selector" field.
            repeaters: [{
                // (Required)
                // Specify the jQuery selector for this nested repeater
                selector: '.inner-repeater',
                isFirstItemUndeletable: true,
                show: function () {
                    var selectElement = event.target;
                    var category_id = document.getElementById("category").value;
                    var spec= $(this).find('.specification');
                    var spec_value= $(this).find('.specification_value');
                    //get specification by category id
                    getSpecVal(category_id,spec);
                    spec.on('change',function(){
                        //console.log(spec.val()+'mm');
                        var spec_id = spec.val();
                        get_specification_value(spec_id,spec_value);
                    });
                    $(this).slideDown();
                },
            }]
        });
</script>



@stop