@extends('layouts.master')

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

@section('content')

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

<style>
    /* .btn {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
    } */

    /*Also */
    /* .btn-success {
        border: 1px solid #c5dbec;
        background: #d0e5f5;
        font-weight: bold;
        color: #2e6e9e;
    } */

    .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/postCreate') }}" 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 {{ $errors->has('menu_type_id') ? 'is-invalid' : '' }}">
                        <option value="">Select Menu Type</option>
                        @foreach($menutypes as $m)
                        <option value="{{ $m->id }}">{{ ucfirst($m->name) }}</option>
                        @endforeach

                        @error('menu_type_id')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror
                    </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" data-parsley-required data-parsley-required-message="The name field is required" name="name" class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}" value="{{ old('name') }}" 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">{{ old('short_description') }}</textarea>
                    <!-- <textarea class="md-textarea form-control {{ $errors->has('short_description') ? 'is-invalid' : '' }}" rows="3" name="short_description" placeholder="Enter Short description"> {{ old('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">{{ old('description') }}</textarea>
                    <!-- <textarea id="form7" class="md-textarea form-control {{ $errors->has('description') ? 'is-invalid' : '' }}" rows="3" name="description">{{ old('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 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">
                        <!-- <select data-parsley-required data-parsley-required-message="The addon field is required" 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 }}">{{ ucfirst($a->name) }}</option>
                        @endforeach
                    </select>
                    <div id="addon_error"></div>
                </div>
            </div>

            <div class="mb-4">
                <div class="form-group row">
                    <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 }}">{{ 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;"></div>

                    <div id="option-multi-row"></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 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 }}">{{ ucfirst($a->name) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="border mb-4 p-2">
                <div class="form-group">
                    <label class="col-2 col-form-label" for="example-color-input"> Attribute</label>
                    <div class="">
                        <select 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 }}">{{ ucfirst($at->name) }}</option>
                            @endforeach

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

                <div id="option-values"></div>

                <div id="option-multi-row"></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" data-parsley-required data-parsley-required-message="The price field is required" min="1" name="price" autocomplete="off" value="{{ old('price') }}" class="form-control {{ $errors->has('price') ? 'is-invalid' : '' }}" placeholder="Enter price">
                    @error('price')
                    <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"> Discount</label>
                <div class="col-10">
                    <input type="number" min="1" name="discount" autocomplete="off" value="{{ old('discount') }}" class="form-control {{ $errors->has('discount') ? 'is-invalid' : '' }}" placeholder="Enter discount">
                    @error('discount')
                    <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"> Discount Type</label>
                <div class="col-10">
                    <select name="discount_type" value="{{ old('discount_type') }}" class="form-control {{ $errors->has('discount_type') ? 'is-invalid' : '' }}">
                        <option value="">Select Discount Type</option>
                        <option value="Percent">Percent</option>
                        <option value="Amount">Amount</option>
                        @error('discount_type')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror
                    </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 start field is required" name="available_time_starts" value="{{ old('available_time_starts') }}" autocomplete="off" class="form-control {{ $errors->has('available_time_starts') ? 'is-invalid' : '' }}">
                    @error('available_time_starts')
                    <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"> Time Ends*</label>
                <div class="col-10">
                    <input type="time" data-parsley-required data-parsley-required-message="The time end field is required" name="available_time_ends" value="{{ old('available_time_ends') }}" autocomplete="off" class="form-control {{ $errors->has('available_time_ends') ? 'is-invalid' : '' }}">
                    @error('available_time_starts')
                    <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"> Menu Cover Image*</label>
                <div class="col-10">
                    <input type="file" id="fileInput" data-parsley-required data-parsley-required-message="This menu cover image is required" name="image" class="form-control {{ $errors->has('image') ? 'is-invalid' : '' }}" onchange="preview_image(event)">
                    <img id="output_image" style="width: 30%; object-fit: cover;">
                    <span id="error"></span>
                    @error('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">
           
                <input type="file" class="form-control" name="menu_cover_image[]" id="files" multiple accept="image/jpeg,image/jpg, image/tiff, image/bmp image/png, image/gif,">
                        <br>
                        <span id="slider_error"></span>
                    <output id="Filelist"></output>
                </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="ckeditor" name="ingridients" data-parsley-required="true" data-parsley-errors-container="#description-errors" data-parsley-required-message="This ingridients field is required" rows="6">{{ old('ingridients') }}</textarea>

                    <div id="description-errors"></div>
                    <!-- <textarea class="ckeditor {{ $errors->has('ingridients') ? 'is-invalid' : '' }}" rows="25" cols="15" id="ingridients" name="ingridients">{{ old('ingridients') }} </textarea> -->
                    @error('ingridients')
                    <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"> 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">{{ old('calories') }}</textarea>

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

                    <!-- <textarea class="ckeditor {{ $errors->has('calories') ? 'is-invalid' : '' }}" rows="25" cols="15" id="calories" name="calories">{{ old('calories') }}</textarea> -->
                    @error('calories')
                    <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"> 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">{{ old('allergies') }}</textarea>

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

                    <!-- <textarea class="ckeditor {{ $errors->has('allergies') ? 'is-invalid' : '' }}" rows="25" cols="15" id="allergies" name="allergies">{{ old('allergies') }}</textarea> -->
                    @error('allergies')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </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="ckeditor" name="ingridients" rows="6">{{ old('ingridients') }}</textarea>
                    <!-- <textarea class="ckeditor {{ $errors->has('ingridients') ? 'is-invalid' : '' }}" rows="25" cols="15" id="ingridients" name="ingridients">{{ old('ingridients') }} </textarea> -->
                    @error('ingridients')
                    <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"> Calories</label>
                <div class="col-10">
                    <textarea id="calories" name="calories" rows="6">{{ old('calories') }}</textarea>

                    <!-- <textarea class="ckeditor {{ $errors->has('calories') ? 'is-invalid' : '' }}" rows="25" cols="15" id="calories" name="calories">{{ old('calories') }}</textarea> -->
                    @error('calories')
                    <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"> Allergies</label>
                <div class="col-10">
                    <textarea id="allergies" name="allergies" rows="6">{{ old('allergies') }}</textarea>

                    <!-- <textarea class="ckeditor {{ $errors->has('allergies') ? 'is-invalid' : '' }}" rows="25" cols="15" id="allergies" name="allergies">{{ old('allergies') }}</textarea> -->
                    @error('allergies')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div>
            @endif

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

        </form>
    </div>
</div>
@endsection

@push('script')

<script>
    $("#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 ($("#output_image").is(":hidden")) {
                    $("#output_image").show().css("display", "block");
                }
                break;
            default:
                $(this).val('');
                $("#output_image").hide();
                error.innerHTML = "<span style='color: red;'>" +
                    "Allowed file format: JPEG, GIF, BMP, TIFF and PNG.</span>"
                break;
        }
    });

    function preview_image(event) {
        var reader = new FileReader();
        reader.onload = function() {
            var output = document.getElementById('output_image');
            output.src = reader.result;
        }
        reader.readAsDataURL(event.target.files[0]);
    }

    CKEDITOR.replace('ckeditor');
    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();
                }
            });
        });
    });

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

    $("#attr-options").select2({
        placeholder: ' Enter Attribute'
    });

    $('#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" data-parsley-required data-parsley-required-message="The option field is required" name="attribute[${data.id}][0][description]" class="form-control" placeholder="Option">
                    </div>
                    <div class="col-sm-4">
                        <input type="number" data-parsley-required data-parsley-required-message="The number field is required" name="attribute[${data.id}][0][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>
            </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) {
        var error = document.getElementById("slider_error")
        //To check file type according to upload conditions
        if (CheckFileType(readerEvt.type) == false) {

            error.innerHTML = "<span style='color: red;'>" +
                    "Allowed file format: JPEG, GIF, BMP, TIFF and PNG.</span>"
            // 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) {

            error.innerHTML = "<span style='color: red;'>" +
                    "The file (" +
                readerEvt.name +
                ") does not match the upload conditions, The maximum file size for uploads should not exceed 300 KB. </span>"
            // 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; 
                
                error.innerHTML = "<span style='color: red;'>" +
                    "You have added more than 10 files. According to upload conditions you can upload 10 files maximum</span>"
                // 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 < 300000) {
            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>
@endpush