@extends('layouts.master')

@section('pagetitle')
Edit Menu
@endsection
@section('title')
Edit Menu
@endsection

@section('content')

@php
    use App\Models\MerchantSite;
    $merchant_sites = MerchantSite::where('merchant_id', @auth('web')->user()->id)->first(); 
@endphp

<style>
    .fileinput-button {
        position: relative;
        overflow: hidden;
    }

    .fileinput-button input {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        opacity: 0;
        -ms-filter: "alpha(opacity=0)";
        font-size: 200px;
        direction: ltr;
        cursor: pointer;
    }

    .thumb {
        height: 100px;
        width: 100px;
        border: 1px solid #d1ca09;
        object-fit: cover;
    }

    ul.thumb-Images li {
        width: 120px;
        float: left;
        display: inline-block;
        vertical-align: top;
        height: 120px;
    }

    .img-wrap {
        position: relative;
        display: inline-block;
        font-size: 0;
    }

    .img-wrap .close {
        position: absolute;
        top: 0px;
        right: 2px;
        z-index: 100;
        /* background-color: #555316; */
        padding: 5px 2px 2px;
        /* color: #000; */
        font-weight: bolder;
        cursor: pointer;
        opacity: 0.5;
        font-size: 23px;
        line-height: 10px;
        border-radius: 50%;
    }

    .img-wrap:hover .close {
        opacity: 1;
        /* background-color: #ff0000; */
    }

    .FileNameCaptionStyle {
        font-size: 12px;
    }
</style>


<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h4 class="text-themecolor" style="font-weight: 600;">Menus</h4>
    </div>
    <div class="col-md-7 align-self-center text-right">
        <div class="d-flex justify-content-end align-items-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                <li class="breadcrumb-item active">Menu</li>
            </ol>
        </div>
    </div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->

<div class="card">
    <div class="card-body">
        <!-- Nav tabs -->
        <form action="{{  url('menu/'.$menus->id.'/update') }}" id="form" method="POST" enctype="multipart/form-data" data-parsley-validate>
            @csrf
            
            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input">Menu Type*</label>
                <div class="col-10">
                <select name="menu_type_id" data-parsley-required data-parsley-required-message="The menu type field is required" class="form-control">
                <option value="">Select Menu Type</option>
                    @foreach($menutypes as $m )
                    <option value="{{ $m->id }}"  {{ $m->id == @$menus['menu_type_id'] ? "selected" : "" }} >
                         {{ ucfirst($m->name) }} </option>
                    @endforeach
                </select>
                </div>
            </div>

            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input">Name*</label>
                <div class="col-10">
                <input type="text" name="name" data-parsley-required data-parsley-required-message="The name field is required" value="{{ $menus->name }}" class="form-control" autocomplete="off" placeholder="Enter product name" >
                @error('name')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
                </div>
            </div>

            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input">Short Description</label>
                <div class="col-10">
                    <textarea class="md-textarea form-control {{ $errors->has('short_description') ? 'is-invalid' : '' }}" rows="3" name="short_description" placeholder="Enter short description">{{ $menus->short_description }}</textarea>
                    <!-- <textarea class="md-textarea form-control {{ $errors->has('short_description') ? 'is-invalid' : '' }}" rows="3" name="short_description" placeholder="Enter short description"> {{ $menus->short_description }}</textarea> -->
                    @error('short_description')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div>

            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input"> Description</label>
                <div class="col-10">
                    <textarea class="md-textarea form-control {{ $errors->has('description') ? 'is-invalid' : '' }}" rows="3" name="description" placeholder="Enter Description">{{ $menus->description }}</textarea>
                    <!-- <textarea id="form7" class="md-textarea form-control {{ $errors->has('description') ? 'is-invalid' : '' }}" rows="3" name="description"> {{ $menus->description }}</textarea> -->
                    @error('description')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div>

            @if($merchant_sites->business_type == 'restaurant')

            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input">Addon*</label>
                <div class="col-10">
                <select class="select2 m-b-10 select2-multiple" data-parsley-required data-parsley-required-message="The addon field is required" data-parsley-errors-container="#addon_error" name="addon_id[]" style="width: 100%" multiple="multiple" data-placeholder="Choose" id="addon-options">
                @foreach($addons as $a )
                    <option value="{{ $a->id }}" {{ in_array( $a->id , $menus->addons) ? "selected" : "" }}>{{ ucfirst($a->name) }}</option>
                @endforeach 
                </select>
                <div id="addon_error"></div>
                </div>  
            </div>

            <div class="mb-4 p-2">
                <div class="form-group row">
                    <label class="col-2 col-form-label" for="example-color-input"> Attribute*</label>
                    <div class="col-10">
                    <select class="select2 m-b-10 select2-multiple" data-parsley-required data-parsley-required-message="The attribute field is required" data-parsley-errors-container="#attribute_error" name="attribute_id[]" style="width: 100%" multiple="multiple" data-placeholder="Choose" id="attr-options">
                    @foreach($attributes as $at )
                        <option value="{{ $at->id }}" {{ in_array( $at->id , $menus->attributes) ? "selected" : "" }} >{{ ucfirst($at->name) }}</option>
                    @endforeach 
                    </select>
                    <div id="attribute_error"></div>
                </div>  
                </div>
                
                <div class="mb-4">
                <div class="border" id="option-values" style="margin-left: 178px;">
                    @foreach($menus->menuAttribute as $ma)
                  
                    @if($menus->menuAttribute !== null)
                    <div class="mb-4 p-2" id="option-{{$ma->option->id}}" >
                        <div>
                            <label>{{ $ma->option->name }}</label>
                            <button onclick="addRow('#option-{{$ma->option->id}}', {{ $ma->option->id }})" class="btn btn-warning btn-sm"  type="button"><i class="icon-plus"></i></button>
                        </div>

                        @foreach($ma->attributeValues as $key => $av)
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <input type="hidden" name="attribute[{{ $ma->option->id }}][{{ $key }}][id]" value="{{ $av->id }}">
                                <input type="hidden" name="attribute[{{ $ma->option->id }}][{{ $key }}][attribute_id]" value="${{ $ma->option->id }}">
                                <input type="text" name="attribute[{{ $ma->option->id }}][{{ $key }}][description]" value="{{ @$av->description }}" class="form-control" placeholder="Option">
                            </div>
                            <div class="col-sm-4">
                                <input type="number" name="attribute[{{ $ma->option->id }}][{{ $key }}][price]" value="{{ @$av->price }}" class="form-control" placeholder="Price">
                            </div>
                            <div class="col-sm-4">
                                <button type="button" onclick="removeRow(this)" class="btn btn-danger"><i class="ti-trash"></i></button>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @endif
                    @endforeach
                </div>
                </div>
            </div>

            @elseif($merchant_sites->business_type == 'pharmacy')
            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input">Addon</label>
                <div class="col-10">
                <select data-parsley-required data-parsley-required-message="The addon field is required" data-parsley-errors-container="#addon_error" class="select2 m-b-10 select2-multiple" name="addon_id[]" style="width: 100%" multiple="multiple" data-placeholder="Choose" id="addon-options">
                @foreach($addons as $a )
                    <option value="{{ $a->id }}" {{ in_array( $a->id , $menus->addons) ? "selected" : "" }}>{{ ucfirst($a->name) }}</option>
                @endforeach 
                </select>
                <div id="addon_error"></div>
                </div>  
            </div>

            <div class="mb-4 p-2">
                <div class="form-group">
                    <label class="col-2 col-form-label" for="example-color-input"> Attribute</label>
                    <div class="col-10">
                    <select data-parsley-required data-parsley-required-message="The attribute field is required" data-parsley-errors-container="#attribute_error" class="select2 m-b-10 select2-multiple" name="attribute_id[]" style="width: 100%" multiple="multiple" data-placeholder="Choose" id="attr-options">
                    @foreach($attributes as $at )
                        <option value="{{ $at->id }}" {{ in_array( $at->id , $menus->attributes) ? "selected" : "" }} >{{ ucfirst($at->name) }}</option>
                    @endforeach 
                    </select>
                    <div id="attribute_error"></div>
                </div>  
                </div>
                
                <div id="option-values">
                    @foreach($menus->menuAttribute as $ma)
                  
                    <div class="mb-4 p-2" id="option-{{$ma->option->id}}" >
                        <div>
                            <label>{{ $ma->option->name }}</label>
                            <button onclick="addRow('#option-{{$ma->option->id}}', {{ $ma->option->id }})" class="btn btn-warning btn-sm"  type="button"><i class="icon-plus"></i></button>
                        </div>

                        @foreach($ma->attributeValues as $key => $av)
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <input type="hidden" name="attribute[{{ $ma->option->id }}][{{ $key }}][id]" value="{{ $av->id }}">
                                <input type="hidden" name="attribute[{{ $ma->option->id }}][{{ $key }}][attribute_id]" value="${{ $ma->option->id }}">
                                <input type="text" name="attribute[{{ $ma->option->id }}][{{ $key }}][description]" value="{{ @$av->description }}" class="form-control" placeholder="Option">
                            </div>
                            <div class="col-sm-4">
                                <input type="number" name="attribute[{{ $ma->option->id }}][{{ $key }}][price]" value="{{ @$av->price }}" class="form-control" placeholder="Price">
                            </div>
                            <div class="col-sm-4">
                                <button type="button" onclick="removeRow(this)" class="btn btn-danger"><i class="ti-trash"></i></button>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            <div class="form-group row">
                <label  class="col-2 col-form-label" for="example-color-input"> Price*</label>
                <div class="col-10">
                <input type="number" min="1" name="price" data-parsley-required data-parsley-required-message="The price field is required" value="{{ $menus->price }}" autocomplete="off" class="form-control" placeholder="Enter price">
                </div>
            </div> 

            <div class="form-group row">
                <label  class="col-2 col-form-label" for="example-color-input"> Discount</label>
                <div class="col-10">
                <input type="number" min="1" name="discount" value="{{ $menus->discount }}" autocomplete="off" class="form-control" placeholder="Enter discount">
                </div>
            </div> 

            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input"> Discount Type</label>
                <div class="col-10">
                <select name="discount_type"  class="form-control">
                <option value="" >Select Discount Type</option>
                    <option value="{{ $menus->discount_type }} " selected>Percent</option>
                    <option value="{{ $menus->discount_type }}" selected>Amount</option>
                </select>
                </div> 
            </div> 

            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input"> Time Starts*</label>
                <div class="col-10">
                <input type="time" data-parsley-required data-parsley-required-message="The time starts field is required" name="available_time_starts" value="{{ $menus->available_time_starts }}" autocomplete="off" class="form-control">
                </div>  
            </div> 

            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input"> Time Ends*</label>
                <div class="col-10"> 
                <input type="time" data-parsley-required data-parsley-required-message="The time ends field is required" name="available_time_ends" value="{{ $menus->available_time_ends }}" autocomplete="off" class="form-control">
                </div>
            </div> 
            
            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input"> Menu Cover Image*</label> 
                <div class="col-10">
                <!-- <label class="btn btn-cyan">
                <i class="fa fa-image"></i> Choose Files
                <input type="file" type="file" id="fileInput" class="form-control" style="display: none;" name="image" onchange="previewFile(this);"> 
                </label> -->
                
                <input type="file" id="fileInput" name="image" class="form-control" onchange="previewFile(this);">
                <span id="error"></span>
                <img id="previewImg" src="{{ env('UPLOAD_URL') .'/'.$menus->image }}" data-parsley-required data-parsley-required-message="This menu cover image is required." data-toggle="modal" data-target="#exampleModal" data-image-url="{{ env('UPLOAD_URL') .'/'.$menus->image }}" 
                    class="image-preview" style="width:150px; height:150px;object-fit:cover;">
                    <!-- <label class="col-10 col-form-label" for="example-color-input">{{ $menus->image }}</label> -->
                </div> 
            </div> 

            <!-- <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input"> Slider Images</label>
                @foreach($menus->menuImages as $image)
                <img src="{{ env('UPLOAD_URL') .'/'.$image->menu_cover_image }}" data-toggle="modal" data-target="#exampleModal" data-image-url="{{ env('UPLOAD_URL') .'/'.$image->menu_cover_image }}" 
                    class="image-preview" style="width:150px; height:150px;">
                @endforeach
                <div class="col-3">
                    <input type="file" name="menu_cover_image[]" class="form-control {{ $errors->has('menu_cover_image') ? 'is-invalid' : '' }}" multiple="">
                    @error('menu_cover_image')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div> -->
<!-- 
            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input"> Slider Images</label>
                <div class="col-10">
                    <a href="javascript:void(0)" onclick="$('#pro-image').click()"></a>
                    <input type="file" id="slider_images" class="form-control {{ $errors->has('menu_cover_image') ? 'is-invalid' : '' }}" name="menu_cover_image[]" multiple>
                    <div class="preview-images-zone">
                
                    @foreach($menus->menuImages as $image)
                    <img id="pro-img-1" src="{{ env('UPLOAD_URL') .'/'.$image->menu_cover_image }}" style="width:150px; height:150px;object-fit:cover;">
                    <div class="preview-image preview-show-1">
                        <div class="image-zone">
                        <img id="pro-img-1" src="{{ env('UPLOAD_URL') .'/'.$image->menu_cover_image }}"></div>
                        <div class="tools-edit-image"><a href="javascript:void(0)" data-no="1" class="btn btn-light btn-edit-image">edit</a></div>
                    </div>
                    @endforeach
                    </div>
                    <span id="error-slider-image"></span>
                    <input type="file" name="menu_cover_image[]" value="{{ old('menu_cover_image') }}" class="form-control {{ $errors->has('menu_cover_image') ? 'is-invalid' : '' }}" multiple="">
                    @error('menu_cover_image')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div> -->

            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input"> Slider Images</label>
                <div class="col-10">
                    @foreach($menus->menuImages as $image)
                        <img id="pro-img-1" src="{{ env('UPLOAD_URL') .'/'.$image->menu_cover_image }}" style="width:150px; height:150px;object-fit:cover;">
                    @endforeach
                    <input type="file" class="form-control" name="menu_cover_image[]" id="files" multiple >
                    <br>
                    <output id="Filelist"></output>
                    <span id="error-slider-image"></span>
                </div>
            </div>

            @if($merchant_sites->business_type == 'restaurant')

            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input"> Ingridients*</label>
                    <div class="col-10">
                    <textarea id="ingridients" name="ingridients" data-parsley-required="true" data-parsley-errors-container="#ingridients-errors" data-parsley-required-message="This ingridients field is required" rows="6">{{ $menus->ingridients }}</textarea>

                    <div id="ingridients-errors"></div> 

                    <!-- <textarea class="ckeditor" data-parsley-required rows="25" cols="15" id="ingridients" name="ingridients"> {{ $menus->ingridients }} </textarea> -->
                </div>
            </div>

            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input"> Calories*</label>
                    <div class="col-10">
                    <textarea id="calories" name="calories" data-parsley-required="true" data-parsley-errors-container="#calories-errors" data-parsley-required-message="This calories field is required" rows="6">{{ $menus->calories }}</textarea>

                    <div id="calories-errors"></div>         
                    <!-- <textarea class="ckeditor" data-parsley-required rows="25" cols="15" id="calories" name="calories"> {{ $menus->calories }} </textarea> -->
                </div>
            </div>

            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input"> Allergies*</label>
                    <div class="col-10">
                    <textarea id="allergies" name="allergies" data-parsley-required="true" data-parsley-errors-container="#allergies-errors" data-parsley-required-message="This allergies field is required" rows="6">{{ $menus->allergies }}</textarea>

                    <div id="allergies-errors"></div>
                    <!-- <textarea class="ckeditor" data-parsley-required rows="25" cols="15" id="allergies" name="allergies"> {{ $menus->allergies }} </textarea> -->
                </div>
            </div>

            @elseif($merchant_sites->business_type == 'pharmacy')
            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input"> Ingridients</label>
                    <div class="col-10">
                    <textarea id="ingridients" name="ingridients" rows="6">{{ $menus->ingridients }}</textarea>

                    <!-- <textarea class="ckeditor" data-parsley-required rows="25" cols="15" id="ingridients" name="ingridients"> {{ $menus->ingridients }} </textarea> -->
                </div>
            </div>

            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input"> Calories</label>
                    <div class="col-10">
                    <textarea id="calories" name="calories" rows="6">{{ $menus->calories }}</textarea>       
                    <!-- <textarea class="ckeditor" data-parsley-required rows="25" cols="15" id="calories" name="calories"> {{ $menus->calories }} </textarea> -->
                </div>
            </div>

            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input"> Allergies</label>
                    <div class="col-10">
                    <textarea id="allergies" name="allergies" rows="6">{{ $menus->allergies }}</textarea>

                    <!-- <textarea class="ckeditor" data-parsley-required rows="25" cols="15" id="allergies" name="allergies"> {{ $menus->allergies }} </textarea> -->
                </div>
            </div>
            @endif

             <!-- image preview modal-->
             <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <img src="" id="modaltitlee" class="img-responsive" width="500" />
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end image preview modal-->

            <div class="mt-2 text-right">
                <button class="btn btn-warning">Save</button>
            </div>
        </form>
    </div>
</div>

@endsection

@section('script')

<script>
    $('.image-preview').click(function() {
        $("#modaltitlee").attr('src', $(this).data('image-url'));
    })

    // File type validation
    $("#fileInput").change(function() {
        var error = document.getElementById("error")
        var val = $(this).val();

        switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
            case 'gif': case 'jpg': case 'png': case 'jpeg': case 'tiff': case 'bmp':
            if ($("#previewImg").is(":hidden")) {
             $("#previewImg").show().css("display", "block");
            }
            break;
            default:
            $(this).val('');
            $("#previewImg").hide();
            error.innerHTML = "<span style='color: red;'>"+
                "Please select a valid file JPEG/JPG/PNG/GIF/BMP/TIFF to upload!</span>"
            break;
        }
    });

    // File type validation
    $("#slider_images").change(function() {
        var error = document.getElementById("error-slider-image")
        var val = $(this).val();

        switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
            case 'gif': case 'jpg': case 'png': case 'jpeg': case 'tiff': case 'bmp':
            break;
            default:
            $(this).val('');
            error.innerHTML = "<span style='color: red;'>"+
                "Allowed file format: JPEG, GIF, BMP, TIFF and PNG.</span>"
            break;
        }
    });

    function previewFile(input) {
        var file = $("input[type=file]").get(0).files[0];

        if (file) {
            var reader = new FileReader();

            reader.onload = function() {
                $("#previewImg").attr("src", reader.result);
            }

            reader.readAsDataURL(file);
        }
    }

    CKEDITOR.replace('ingridients');
        CKEDITOR.replace('calories');
        CKEDITOR.replace('allergies');
           CKEDITOR.config = {
            autoUpdateElement: true,
        }

        CKEDITOR.on('instanceReady', function () {
      
            $.each(CKEDITOR.instances, function (instance) {
                CKEDITOR.instances[instance].on("change", function (e) {
                    for (instance in CKEDITOR.instances) {
                        CKEDITOR.instances[instance].updateElement();
                        $('form').parsley().validate();
                    }
                });
            });
        });

    $(document).ready(function() {
        $("#addon-options").select2({
            placeholder: ' Enter Addon'
        });

        $("#attr-options").select2({ 
            placeholder: ' Enter Attribute'
        });
    });
    // // $("#addon-options").select2();
    // $("#attr-options").select2();
    
    $('#attr-options').on('select2:unselecting', function (e) {
        var data = e.params.args.data;
        console.log(data, e);

        $(`#${ data.text }-${ data.id }`).remove()

    });

    $('#attr-options').on('select2:select', function (e) {
        var data = e.params.data;
        console.log(data);

        const elemId =  "option-"+ data.id; // option-1, option-2

        $("#option-values").append( `
            <div class="mb-4 p-2" id="${ elemId  }" >
                <div>
                    <label>${ data.text }</label>
                    <button onclick="addRow('#${ elemId  }', ${data.id})" class="btn btn-warning btn-sm"  type="button"><i class="icon-plus"></i></button>
                </div>
                <div class="row mb-2">
                    <div class="col-sm-4">
                        <input type="text" name="attribute[${data.id}][0][description]" data-parsley-required data-parsley-required-message="The option field is required" class="form-control" placeholder="Option">
                    </div>
                    <div class="col-sm-4">
                        <input type="number" name="attribute[${data.id}][0][price]" data-parsley-required data-parsley-required-message="The option field is required" class="form-control" placeholder="Price">
                    </div>
                    <div class="col-sm-4">
                        <button type="button" onclick="removeRow(this)" class="btn btn-danger"><i class="ti-trash"></i></button>
                    </div>
                </div>
            </div>` );
    });

    function addRow(elem, id){

        var index = $(elem).find('.row').length;
        console.log(index, elem, id)

        $(elem).append(`
        <div class="row mb-2">
            <div class="col-sm-4">
                <input type="text" name="attribute[${ id }][${index}][description]" class="form-control" placeholder="Option">
            </div>
            <div class="col-sm-4">
                <input type="number" name="attribute[${ id }][${index}][price]" class="form-control" placeholder="Price">
            </div>
            <div class="col-sm-4">
                <button type="button" onclick="removeRow(this)" class="btn btn-danger"><i class="ti-trash"></i></button>
            </div>
        </div>`);
    }

    function removeRow(elem){
        $(elem).parent().parent().remove();
        // $(elem)
    }


    //I added event handler for the file upload control to access the files properties.
    document.addEventListener("DOMContentLoaded", init, false);

    //To save an array of attachments
    var AttachmentArray = [];

    //counter for attachment array
    var arrCounter = 0;

    //to make sure the error message for number of files will be shown only one time.
    var filesCounterAlertStatus = false;

    //un ordered list to keep attachments thumbnails
    var ul = document.createElement("ul");
    ul.className = "thumb-Images";
    ul.id = "imgList";

    function init() {
        //add javascript handlers for the file upload event
        document
            .querySelector("#files")
            .addEventListener("change", handleFileSelect, false);
    }

    //the handler for file upload event
    function handleFileSelect(e) {
        //to make sure the user select file/files
        if (!e.target.files) return;

        //To obtaine a File reference
        var files = e.target.files;

        // Loop through the FileList and then to render image files as thumbnails.
        for (var i = 0, f;
            (f = files[i]); i++) {
            //instantiate a FileReader object to read its contents into memory
            var fileReader = new FileReader();

            // Closure to capture the file information and apply validation.
            fileReader.onload = (function(readerEvt) {
                return function(e) {
                    //Apply the validation rules for attachments upload
                    ApplyFileValidationRules(readerEvt);

                    //Render attachments thumbnails.
                    RenderThumbnail(e, readerEvt);

                    //Fill the array of attachment
                    FillAttachmentArray(e, readerEvt);
                };
            })(f);

            // Read in the image file as a data URL.
            // readAsDataURL: The result property will contain the file/blob's data encoded as a data URL.
            // More info about Data URI scheme https://en.wikipedia.org/wiki/Data_URI_scheme
            fileReader.readAsDataURL(f);
        }
        document
            .getElementById("files")
            .addEventListener("change", handleFileSelect, false);
    }

    //To remove attachment once user click on x button
    jQuery(function($) {
        $("div").on("click", ".img-wrap .close", function() {
            var id = $(this)
                .closest(".img-wrap")
                .find("img")
                .data("id");

            //to remove the deleted item from array
            var elementPos = AttachmentArray.map(function(x) {
                return x.FileName;
            }).indexOf(id);
            if (elementPos !== -1) {
                AttachmentArray.splice(elementPos, 1);
            }

            //to remove image tag
            $(this)
                .parent()
                .find("img")
                .not()
                .remove();

            //to remove div tag that contain the image
            $(this)
                .parent()
                .find("div")
                .not()
                .remove();

            //to remove div tag that contain caption name
            $(this)
                .parent()
                .parent()
                .find("div")
                .not()
                .remove();

            //to remove li tag
            var lis = document.querySelectorAll("#imgList li");
            for (var i = 0;
                (li = lis[i]); i++) {
                if (li.innerHTML == "") {
                    li.parentNode.removeChild(li);
                }
            }
        });
    });

    //Apply the validation rules for attachments upload
    function ApplyFileValidationRules(readerEvt) {
        //To check file type according to upload conditions
        if (CheckFileType(readerEvt.type) == false) {
            alert(
                "The file (" +
                readerEvt.name +
                ") does not match the upload conditions, You can only upload jpg/png/gif files"
            );
            e.preventDefault();
            return;
        }

        //To check file Size according to upload conditions
        if (CheckFileSize(readerEvt.size) == false) {
            alert(
                "The file (" +
                readerEvt.name +
                ") does not match the upload conditions, The maximum file size for uploads should not exceed 300 KB"
            );
            e.preventDefault();
            return;
        }

        //To check files count according to upload conditions
        if (CheckFilesCount(AttachmentArray) == false) {
            if (!filesCounterAlertStatus) {
                filesCounterAlertStatus = true;
                alert(
                    "You have added more than 10 files. According to upload conditions you can upload 10 files maximum"
                );
            }
            e.preventDefault();
            return;
        }
    }

    //To check file type according to upload conditions
    function CheckFileType(fileType) {
        if (fileType == "image/jpeg") {
            return true;
        } else if (fileType == "image/png") {
            return true;
        } else if (fileType == "image/gif") {
            return true;
        } else if (fileType == "image/jpg") {
            return true;
        } else if (fileType == "image/tiff") {
            return true;
        } else if (fileType == "image/bmp") {
            return true;
        } else {
            return false;
        }
        return true;
    }

    //To check file Size according to upload conditions
    function CheckFileSize(fileSize) {
        if (fileSize < 800000) {
            return true;
        } else {
            return false;
        }
        return true;
    }

    //To check files count according to upload conditions
    function CheckFilesCount(AttachmentArray) {
        //Since AttachmentArray.length return the next available index in the array,
        //I have used the loop to get the real length
        var len = 0;
        for (var i = 0; i < AttachmentArray.length; i++) {
            if (AttachmentArray[i] !== undefined) {
                len++;
            }
        }
        //To check the length does not exceed 10 files maximum
        if (len > 9) {
            return false;
        } else {
            return true;
        }
    }

    //Render attachments thumbnails.
    function RenderThumbnail(e, readerEvt) {
        var li = document.createElement("li");
        ul.appendChild(li);
        li.innerHTML = [
            '<div class="img-wrap"> <span class="close">&times;</span>' +
            '<img class="thumb" src="',
            e.target.result,
            '" title="',
            escape(readerEvt.name),
            '" data-id="',
            readerEvt.name,
            '"/>' + "</div>"
        ].join("");

        var div = document.createElement("div");
        div.className = "FileNameCaptionStyle";
        li.appendChild(div);
        div.innerHTML = [readerEvt.name].join("");
        document.getElementById("Filelist").insertBefore(ul, null);
    }

    //Fill the array of attachment
    function FillAttachmentArray(e, readerEvt) {
        AttachmentArray[arrCounter] = {
            AttachmentType: 1,
            ObjectType: 1,
            FileName: readerEvt.name,
            FileDescription: "Attachment",
            NoteText: "",
            MimeType: readerEvt.type,
            Content: e.target.result.split("base64,")[1],
            FileSizeInBytes: readerEvt.size
        };
        arrCounter = arrCounter + 1;
    }
</script>
@endsection