@extends('admin.layout.app')

@section('content')
<!-- [ Main Content ] start -->
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="page-header-title">
                                    <h5 class="m-b-10">Products</h5>
                                </div>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="javascript:void(0)">Products</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [ breadcrumb ] end -->
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ Main Content ] start -->
                        <div class="row">

                            <!-- [ Hover-table ] start -->
                            <div class="col-xl-12">

                                @include('admin.layout.session')

                                <form action="{{ route('admin.products.store') }}" method="post" enctype="multipart/form-data" class="product_form" autocomplete="off">
                                @csrf
                                    <!-- Product form -->
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Add New Product</h5>
                                            <div class="d-inline-block dropdown float-right">
                                                <a href="{{ route('admin.products.index') }}" class="btn btn-glow-dark btn-dark btn-sm"><i class="feather icon-chevrons-left"></i>Back</a>
                                            </div>
                                        </div>

                                        <div class="card-body">

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="position-relative form-group">
                                                        <label>Category</label>
                                                        <select name="category_id" class="form-control category_id choices_dropdown" required>
                                                            <option value="">-Select category-</option>
                                                            @forelse($categories as $key => $value)
                                                                <option value="{{$value->id}}" {{$value->id == old('category_id')? 'selected' : ''}}>{{$value->name}}</option>
                                                            @empty
                                                                <option value="">No Category</option>
                                                            @endforelse
                                                        </select>
                                                        @if ($errors->has('category_id'))
                                                            <div class="invalid-feedback">{{ $errors->first('category_id') }}</div>
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="position-relative form-group">
                                                        <label>Product Name</label>
                                                        <input type="text" name="name" class="form-control" placeholder="Enter Product Name" value="{{old('name')}}" required>
                                                        @if ($errors->has('name'))
                                                            <div class="invalid-feedback">{{ $errors->first('name') }}</div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="position-relative form-group">
                                                        <label>Default Price</label>
                                                        <input type="number" name="default_price" class="form-control" min="0" placeholder="Enter Default Price" value="{{old('default_price')}}" required>
                                                        @if ($errors->has('default_price'))
                                                            <div class="invalid-feedback">{{ $errors->first('default_price') }}</div>
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="position-relative form-group">
                                                        <label>Old Price</label>
                                                        <input type="number" name="old_price" class="form-control" min="0" placeholder="Enter Old Price" value="{{old('old_price')}}" required>
                                                        @if ($errors->has('old_price'))
                                                            <div class="invalid-feedback">{{ $errors->first('old_price') }}</div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="position-relative form-group">
                                                        <label>Product Description</label>
                                                        <textarea name="description" class="form-control tinyMCE_textarea" placeholder="Enter Product Description" required>{{old('description')}}</textarea>
                                                        @if ($errors->has('description'))
                                                            <div class="invalid-feedback">{{ $errors->first('description') }}</div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="position-relative form-group">
                                                        <label>Product Images</label>
                                                        <div class="upload-zone dropzone dz-clickable" id="product_images_dropzone_div">
                                                            <div class="dz-message" data-dz-message=""><em class="icon ni ni-clip"></em><span class="dz-message-text">Drag your file</span><span class="dz-message-or"> or</span><button type="button"  class="btn btn-primary">Select</button></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- <div class="row">
                                                <div class="col-md-6">
                                                    <div class="position-relative form-group">
                                                        <label>Product Image</label>
                                                        <input type="file" name="product_image" id="product_image_file" class="form-control">
                                                        <small class="form-text text-muted">Accepted formats: png, jpg, jpeg. Max file size 5Mb</small>
                                                        @if ($errors->has('product_image'))
                                                            <div class="invalid-feedback">{{ $errors->first('product_image') }}</div>
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <img src="{{asset('/backend/assets/images/product_images/noimage.png/')}}" id="preview_image" width="100">
                                                </div>
                                            </div> --}}

                                            {{-- @if(count($attributes) == 0) --}}
                                                <button type="submit" class="btn btn-glow-primary btn-primary btn-sm">Submit</button>
                                                <a href="{{ route('admin.products.index') }}" class="btn btn-glow-dark btn-dark btn-sm"><i class="feather icon-chevrons-left"></i>Back</a>
                                            {{-- @endif --}}

                                        </div>
                                    </div>


                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Add Attribute</h5>
                                        </div>

                                        <div class="card-body">
                                            <div class="attribute_main_div">
                                                @include('admin.product._attribute')
                                            </div>
                                            <button type="submit" class="btn btn-glow-primary btn-primary btn-sm">Submit</button>
                                            <a href="{{ route('admin.products.index') }}" class="btn btn-glow-dark btn-dark btn-sm"><i class="feather icon-chevrons-left"></i>Back</a>
                                        </div>
                                    </div>


                                    <!-- Attribute form-->
                                    {{-- @if(count($attributes) > 0)
                                        <div class="card">
                                            <div class="card-header">
                                                <h5>Add Attribute</h5>
                                            </div>

                                            <div class="card-body">
                                                <div class="attribute_main_div">
                                                    <div class="row attribute_clone_div">
                                                        <div class="col-md-2">
                                                            <div class="position-relative form-group">
                                                                <label>Attributes</label>
                                                                <select name="attribute_id[]" class="form-control attribute_id" required>
                                                                    @forelse($attributes as $key => $attribute)
                                                                        <option value="{{$attribute->id}}" {{$attribute->id == old('attribute_id')? 'selected' : ''}}>{{$attribute->name}}</option>
                                                                    @empty
                                                                        <option value="">No Attribute</option>
                                                                    @endforelse
                                                                </select>
                                                                @if ($errors->has('attribute_id'))
                                                                    <div class="invalid-feedback">{{ $errors->first('attribute_id') }}</div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="position-relative form-group">
                                                                <label>Value</label>
                                                                <select name="a_value_id[]" class="form-control a_value_id" required>
                                                                    @forelse($attributes[0]->values as $key => $value)
                                                                        <option value="{{$value->id}}" {{$value->value == '1kg' ? 'selected' : ''}}>{{$value->value}}</option>
                                                                    @empty
                                                                        <option value="">No Attribute Value</option>
                                                                    @endforelse
                                                                </select>
                                                                @if ($errors->has('a_value_id'))
                                                                    <div class="invalid-feedback">{{ $errors->first('a_value_id') }}</div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="position-relative form-group">
                                                                <label>Price</label>
                                                                <input type="number" name="attr_price[]" class="form-control price" placeholder="price" value="{{old('attr_price')}}" min="0" required>
                                                                @if ($errors->has('attr_price'))
                                                                    <div class="invalid-feedback">{{ $errors->first('attr_price') }}</div>
                                                                @endif
                                                            </div>
                                                        </div>

                                                        <div class="col-md-2">
                                                            <div class="position-relative form-group mt-4">
                                                                <a href="javascript:void(0)" class="attribute_add_btn"><span class="fa fa-plus-circle"></span></a>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="position-relative form-group">
                                                                <label>Description</label>
                                                                <textarea name="attr_description[]" class="form-control tinyMCE_textarea" placeholder="Enter Description">{!!old('attr_description')!!}</textarea>

                                                                @if ($errors->has('description'))
                                                                    <div class="invalid-feedback">{{ $errors->first('description') }}</div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <button type="submit" class="btn btn-glow-primary btn-primary btn-sm">Submit</button>
                                                <a href="{{ route('admin.products.index') }}" class="btn btn-glow-dark btn-dark btn-sm"><i class="feather icon-chevrons-left"></i>Back</a>

                                            </div>
                                        </div>
                                    @endif --}}

                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- [ Main Content ] end -->
@endsection

@push('js')
<script type="text/javascript">
$(function(){
    $('.main_products').addClass('active');
    $('.main_products').addClass('pcoded-trigger');
    $('.products').addClass('active');

    addTinyMCE();

    //add
    $(document.body).on('click','.attribute_add_btn',function(){
        {{-- var attribute_input_html = `@include('admin.product._attribute')`; --}}
        var me = $(this);
        var attribute_main_div = me.closest('.card').find('.attribute_main_div');
        var attribute_clone = attribute_main_div.find('.attribute_clone_div:last');
        var attribute_clone_div = attribute_clone.clone();

        // INFO: Get last price,quantity input value
        var price_last_val = attribute_clone_div.find('.price:last').val();
        var quantity_last_val = attribute_clone_div.find('.quantity:last').val();

        attribute_clone_div.find('.price:last').val('');
        attribute_clone_div.find('.quantity:last').val('');

        // INFO: add button to remove button replace
        attribute_clone_div.find('.attribute_add_remove_div:last').html('<a href="javascript:void(0)" class="attribute_remove_btn"><span class="fa fa-minus-circle"></span></a>');

        // var attribute_wrapper = $('.attribute_main_div');
        // var price_last_val = attribute_wrapper.find('.price:last').val();
        // var quantity_last_val = attribute_wrapper.find('.quantity:last').val();

        //INFO: Required validation
        if (typeof(price_last_val) == "undefined" || price_last_val == null || price_last_val == '' || typeof(quantity_last_val) == "undefined" || quantity_last_val == null || quantity_last_val == ''){
            alert('Please fill up all fields');
        }else{
            attribute_clone_div.insertAfter(attribute_main_div.find('.attribute_clone_div:last'));
            attribute_main_div.find('.attribute_clone_div').each(function(i) {
                $(this).find("input.attribute_value").attr('id', 'attribute_value_'+i);
                $(this).find("input.price").attr('id', 'price_'+i);
                $(this).find("input.quantity").attr('id', 'price_'+i);
            });

            // attribute_wrapper.append(attribute_input_html);
            // addTinyMCE();
            // question_counter++;
        }
    });

    //Remove
    $(document.body).on('click', '.attribute_remove_btn',function(e){
        e.preventDefault();
        var me = $(this);
        me.closest('.attribute_clone_div').remove();
    });



    // $("#product_image_file").on('change', function(){
    //     readURL(this);
    // });

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

    //         reader.onload = function (e) {
    //             $('#preview_image').attr('src', e.target.result);
    //         }
    //         reader.readAsDataURL(input.files[0]);
    //     }
    // }

    {{--
    @if(count($attributes) > 0)

        $(document.body).on('change', '.attribute_id', function(){
            var me = $(this);
            var attribute_id = me.val();

            $.ajax({
                type: 'post',
                url: '{{ route("ajax.get_attribute_value")}}',
                data:{
                    '_token': '{{csrf_token()}}',
                    'attribute_id': attribute_id
                },
                success:function(response){
                    if(response.status){
                        me.closest('.attribute_clone_div').find('.a_value_id').html(response.html);
                    }else{
                        me.closest('.attribute_clone_div').find('.a_value_id').html('<option value="">-Select Value-</option>');
                    }
                }
            });
        });

        // Question Add more
        var attribute_input_html = '';
        // var question_maxField = 5;

        // attribute_counter = $(".question").length;
        var attributes = {!! $attributes->toJson() !!};
        var attribute_values = {!! $attributes[0]->values->toJson() !!};
        // console.log(attribute_values);
        // $.each( attributes, function( key, value ) {
        //     console.log( value );
        // });

        attribute_input_html += '<div class="row attribute_clone_div">';
            attribute_input_html += '<div class="col-md-2">';
                attribute_input_html += '<div class="position-relative form-group">';
                    attribute_input_html += '<label>Attributes</label>';
                    attribute_input_html += '<select name="attribute_id[]" class="form-control attribute_id" required>';
                        $.each( attributes, function( key, value ) {
                            attribute_input_html += '<option value="'+value.id+'">'+value.name+'</option>';
                        })
                    attribute_input_html += '</select>';
                attribute_input_html += '</div>';
            attribute_input_html += '</div>';
            attribute_input_html += '<div class="col-md-2">';
                attribute_input_html += '<div class="position-relative form-group">';
                    attribute_input_html += '<label>Value</label>';
                    attribute_input_html += '<select name="a_value_id[]" class="form-control a_value_id" required>';
                        $.each( attribute_values, function( key, value ) {
                            attribute_input_html += '<option value="'+value.id+'">'+value.value+'</option>';
                        })
                    attribute_input_html += '</select>';
                attribute_input_html += '</div>';
            attribute_input_html += '</div>';
            attribute_input_html += '<div class="col-md-2">';
                attribute_input_html += '<div class="position-relative form-group">';
                    attribute_input_html += '<label>Price</label>';
                    attribute_input_html += '<input type="number" name="attr_price[]" class="form-control price" placeholder="price" min="0" required>';
                attribute_input_html += '</div>';
            attribute_input_html += '</div>';
            attribute_input_html += '<div class="col-md-2">';
                attribute_input_html += '<div class="position-relative form-group mt-4">';
                    attribute_input_html += '<a href="javascript:void(0)" class="attribute_remove_btn"><span class="fa fa-minus-circle"></span></a>';
                attribute_input_html += '</div>';
            attribute_input_html += '</div>';
            attribute_input_html += '<div class="col-md-6">';
                attribute_input_html += '<div class="position-relative form-group">';
                    attribute_input_html += '<label>Description</label>';
                    attribute_input_html += '<textarea name="attr_description[]" class="form-control tinyMCE_textarea" placeholder="Enter Description"></textarea>';
                attribute_input_html += '</div>';
            attribute_input_html += '</div>';
        attribute_input_html += '</div>';

        //add
        $(document.body).on('click','.attribute_add_btn',function(){
            var attribute_wrapper = $('.attribute_main_div');
            var attribute_id_last_val = attribute_wrapper.find('.attribute_id:last').val();
            var a_value_id_last_val = attribute_wrapper.find('.a_value_id:last').val();
            var price_val_last_val = attribute_wrapper.find('.price:last').val();

            // console.log(price_val_last_val)
            //max feild validation
            // if (question_counter < question_maxField) {

                //required validation
                if (typeof(attribute_id_last_val) == "undefined" || attribute_id_last_val == null || attribute_id_last_val == '' || typeof(a_value_id_last_val) == "undefined" || a_value_id_last_val == null || a_value_id_last_val == '' || typeof(price_val_last_val) == "undefined" || price_val_last_val == null || price_val_last_val == ''){
                    alert('Please fill up all fields');
                }else{
                    attribute_wrapper.append(attribute_input_html);
                    addTinyMCE();
                    // question_counter++;
                }

            // }else{
            //     alert('Maximum '+question_maxField+' fields allows');
            // }
        });

        //Remove
        $(document.body).on('click','.attribute_remove_btn',function(e){
            e.preventDefault();
            var me = $(this);
            me.closest('.attribute_clone_div').remove();
            // var data_url = me.attr('data-url');
            // if(typeof(data_url) != "undefined" && data_url !== null) {
            //     var first_messages = 'Are you sure you want to delete this Attribute? This process is not reversable.';
            //     var final_messages = 'Are you sure ?';
            //     var datatable_name = '';
            //     UserDeleteConfirmAlert(me, first_messages, final_messages, datatable_name, question_counter, 'question_counter');
            // }else{
            //     me.closest('.form-row').remove();
            //     question_counter--;
            // }
        });

    @endif
    --}}







    // $( ".publish_date" ).datepicker({
    //     changeMonth: true,
    //     changeYear: true,
    //     // minDate: '0',
    //     dateFormat: 'yy-mm-dd'
    // });





    // // category change
    // $(document.body).on('change','.category_id', function(){
    //     var category_id = $(this).val();
    //     if(typeof(category_id) == "undefined" || category_id == null || category_id == '') {
    //         // $('#state_id').html('<option value="">Select State</option>');
    //         // $('#state_id').selectpicker('render').selectpicker('refresh');
    //         return false;
    //     }
    //     getTypeFromCategory(category_id);
    // });

});

function addTinyMCE(){
  // Initialize
  tinyMCE.init({
        selector: ".tinyMCE_textarea",
        theme: "modern",
        // object_resizing: false,
        // relative_urls: false,
        // remove_script_host: false,

        // allow_script_urls: true,
        // extended_valid_elements: 'span,script[language|type|src]',
        // browser_spellcheck: true,
        // force_br_newlines: true,
        // force_p_newlines: false,
        // forced_root_block: '',

        paste_as_text: true,
        browser_spellcheck: true,

        plugins: ["code", "textcolor", "advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table", "image"],
        toolbar: "codesample | code | fontselect | fontsizeselect | forecolor backcolor | insertfile undo redo | select_all | removeformat | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        content_css: [
            '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
            '//www.tiny.cloud/css/codepen.min.css'
        ],
        valid_elements : '*[*]',
        height: 200,
        setup: function (editor) {
            editor.on('init', function (args) {
                //doeditbuttons()
                // args.target.editorCommands.execCommand("fontName", false, "Roboto Light");
                this.getDoc().body.style.fontFamily = 'Roboto_Light';
            });
            editor.on('change', function (e) {
                //doeditbuttons()
            });

            editor.addButton('select_all', {
                text: 'Select all',
                icon: false,
                onclick: function () {
                    // editor.insertContent("<pre>" + editor.selection.getContent() + "</pre>");
                    // tinyMCE.activeEditor.selection.select(tinyMCE.activeEditor.getBody());
                    tinymce.activeEditor.execCommand('selectAll');
                }
            });
        },
        // formats: {
        //     alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'left' },
        //     aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'center' },
        //     alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'right' },
        //     alignfull: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'full' },
        //     bold: { inline: 'span', classes: 'bold' },
        //     italic: { inline: 'span', classes: 'italic' },
        //     underline: { inline: 'span', classes: 'underline', exact: true },
        //     strikethrough: { inline: 'del' },
        //     customformat: { inline: 'span', styles: { color: '#00ff00', fontSize: '20px' }, attributes: { title: 'My custom format'} , classes: 'example1'}
        // },
        // style_formats: [
        //     { title: 'Custom format', format: 'customformat' },
        //     { title: 'Align left', format: 'alignleft' },
        //     { title: 'Align center', format: 'aligncenter' },
        //     { title: 'Align right', format: 'alignright' },
        //     { title: 'Align full', format: 'alignfull' },
        //     { title: 'Bold text', inline: 'strong' },
        //     { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
        //     { title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
        //     { title: 'Badge', inline: 'span', styles: { display: 'inline-block', border: '1px solid #2276d2', 'border-radius': '5px', padding: '2px 5px', margin: '0 2px', color: '#2276d2' } },
        //     { title: 'Table row 1', selector: 'tr', classes: 'tablerow1' },
        //     { title: 'Image formats' },
        //     { title: 'Image Left', selector: 'img', styles: { 'float': 'left', 'margin': '0 10px 0 10px' } },
        //     { title: 'Image Right', selector: 'img', styles: { 'float': 'right', 'margin': '0 0 10px 10px' } },
        // ]
        /* enable title field in the Image dialog*/
        image_title: true,
        /* enable automatic uploads of images represented by blob or data URIs*/
        automatic_uploads: true,
        /*
            URL of our upload handler (for more details check: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url)
            images_upload_url: 'postAcceptor.php',
            here we add custom filepicker only to Image dialog
        */
        file_picker_types: 'image',
        /* and here's our custom image picker*/
        file_picker_callback: function (cb, value, meta) {
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');

            /*
            Note: In modern browsers input[type="file"] is functional without
            even adding it to the DOM, but that might not be the case in some older
            or quirky browsers like IE, so you might want to add it to the DOM
            just in case, and visually hide it. And do not forget do remove it
            once you do not need it anymore.
            */

            input.onchange = function () {
            var file = this.files[0];

            var reader = new FileReader();
            reader.onload = function () {
                /*
                Note: Now we need to register the blob in TinyMCEs image blob
                registry. In the next release this part hopefully won't be
                necessary, as we are looking to handle it internally.
                */
                var id = 'blobid' + (new Date()).getTime();
                var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                var base64 = reader.result.split(',')[1];
                var blobInfo = blobCache.create(id, file, base64);
                blobCache.add(blobInfo);

                /* call the callback and populate the Title field with the file name */
                cb(blobInfo.blobUri(), { title: file.name });
            };
            reader.readAsDataURL(file);
            };

            input.click();
        }
    });
}
{{--
function getTypeFromCategory(category_id){
    showLoader();
    $.ajax({
        type:'post',
        url:'{!! route('ajax.get_type_from_category') !!}',
        data: {
            'category_id': category_id,
            '_token': '{{csrf_token()}}',
        },
        dataType:'json',
        success:function(response){
            hideLoader();
            if(response.status == 'success'){
                $(".type").html(response.html);
            }
        }
    });
}
--}}
</script>
@endpush

@push('js')
    <script>
        Dropzone.autoDiscover = false;
        var product_images_uploadedDocumentMap = {};
        var product_images_CountFiles = 0;
        $(function(){
            var myDropzoneTheFirst = new Dropzone(
                //id of drop zone element 1
                '#product_images_dropzone_div', {
                    url: "{{ route('admin.products.storeMedia') }}",
                    maxFilesize: 10, // MB
                    maxFiles:40,
                    addRemoveLinks: true,
                    autoProcessQueue: true,
                    autoQueue:true,
                    acceptedFiles: ".jpeg,.jpg,.png,.gif,.webp",
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    success: function (file, response) {
                        $('.product_form').append('<input type="hidden" name="product_images[]" value="' + response.name + '">')
                        product_images_uploadedDocumentMap[file.name] = response.name;
                        product_images_CountFiles++;
                    },
                    removedfile: function (file) {
                        file.previewElement.remove()
                        var name = file.name;

                        console.log(name);
                        // console.log(product_images_uploadedDocumentMap);

                        // if(typeof product_images_uploadedDocumentMap[file.name] !== 'undefined'){
                        //     name = product_images_uploadedDocumentMap[file.name].file_name;
                        // }

                        $.ajax({
                            url : '{{route("admin.products.removeMedia")}}',
                            data: {
                                'file_name': name,
                            },
                            success:function(data)
                            {
                                console.log(data);
                            }
                        })
                        $('.product_form').find('input[name="product_images[]"][value="' + name + '"]').remove();
                        if(product_images_CountFiles >= 1){
                            product_images_CountFiles--;
                        }
                    },
                    init: function () {
                        this.on("complete", function(file) {
                            $(".dz-remove").html("<div><span class='fa fa-trash text-danger' style='font-size: 1em'></span></div>");
                        });

                        var files =  [];
                        var path = '';
                        @if(!empty(old('product_images')))
                            files = {!! json_encode(old('product_images')) !!};
                            path = '/images/tmp/uploads/';
                            if (files.length > 0) {
                                for (var i in files) {
                                    product_images_CountFiles++;
                                    var file = files[i];
                                    var mockFile = { name: file, size: '' };
                                    this.options.addedfile.call(this, mockFile)
                                    this.options.thumbnail.call(this, mockFile, "{{ asset(Storage::url('')) }}" + path + file  );
                                    product_images_uploadedDocumentMap[file] = file;
                                    mockFile.previewElement.classList.add('dz-complete');
                                    $(".dz-remove").html("<div><span class='fa fa-trash text-danger' style='font-size: 1em'></span></div>");
                                    $('.product_form').append('<input type="hidden" name="product_images[]" value="' + file + '">');
                                }
                            }
                        @endif
                    }
                }
            );
        });

        $('button[type="submit"]').on("click", function (e) {
            if (product_images_CountFiles < 1) {
                alert("Please Add Products Images.");
                return false;
            }
        });
    </script>
@endpush