@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.update', $product->id) }}" method="post" enctype="multipart/form-data" class="product_form" autocomplete="off">
                                @csrf
                                @method('put')

                                    <!-- Product form -->
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Edit Products</h5>
                                        </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 == $product->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="{{$product->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="{{$product->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="{{$product->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>{!! $product->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">
                                                    @if($product->product_image == '' || !File::exists('backend/assets/images/product_images/thumbnail/'.$product->product_image))
                                                        <img src="{{asset('/backend/assets/images/product_images/noimage.png/')}}" id="preview_image" width="100">
                                                    @else
                                                        <img src="{{asset('/backend/assets/images/product_images/thumbnail/')}}/{{$product->product_image}}" alt="{{$product->product_name}}" id="preview_image" width="100">
                                                    @endif
                                                </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>

                                    <!-- Attribute form-->
                                    <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>

                                </form>

                            </div>
                            <!-- [ Hover-table ] end -->


                        </div>
                        <!-- [ Main Content ] end -->
                    </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 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>');

        //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);
            });
        }
    });

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

});

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();
        }
    });
}

</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 product_image_id = '';
                        var name = file.name;

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

                        $.ajax({
                            url : '{{route("admin.products.removeMedia")}}',
                            data: {
                                'file_name': name,
                                'product_image_id': product_image_id
                            },
                            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_name] = 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 + '">');
                                }
                            }

                        @elseif(isset($product) && $product->product_images)
                            files = {!! json_encode($product->product_images) !!};
                            path = '/products/';
                            if (files.length > 0) {
                                for (var i in files) {
                                    product_images_CountFiles++;
                                    var file = files[i];
                                    var mockFile = { name: file.file_name, size: '' };
                                    this.options.addedfile.call(this, mockFile)
                                    this.options.thumbnail.call(this, mockFile, "{{ asset(Storage::url('')) }}" + path + file.file_name );
                                    product_images_uploadedDocumentMap[file.file_name] = 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.file_name + '">');
                                }
                            }
                        @endif
                    }
                }
            );
        });

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