@section('title', 'Product Info')
<div>
    <style>
        .img_wrp {
            display: inline-block;
            position: relative;
        }

        .close {
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>

    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-10 col-md-10">
                    <h4 class="card-title mb-2">Add New Product</h4>
                </div>
                <div class="col-sm-2 col-md-2">
                    <a href="{{ route('product.product-list') }}"
                        class="btn btn-info btn-sm mr-1 waves-effect waves-light">All Product List</a>
                </div>
            </div> <br>
            <form wire:ignore.self wire:submit.prevent="productSave">
                <div class="row">
                    <input id="code" type="hidden" class="form-control" wire:model.lazy="code">
                    <div wire:ignore class="col-md-6">
                        @if (!Auth::user()->hasAnyRole('seller'))
                            <div class="form-group">
                                <label class="control-label">Vendor</label>
                                <select class="form-control select2" wire:model.lazy="vendor_id"
                                    id="vendor_select2-dropdown">
                                    <option value="">Select Vendor</option>
                                    @foreach ($vendors as $item)
                                        <option value="{{ $item->id }}">{{ $item->business_name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('vendor_id')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                            </div>
                        @endif
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="name">Product Name</label>
                            <input id="name" type="text" class="form-control" wire:model.lazy="name"
                                placeholder="Name">
                            @error('name')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div wire:ignore.self class="col-md-4">
                        <div class="form-group">
                            <label class="control-label">Category</label>
                            <select class="form-control select2" wire:model.lazy="category_id" id="select2-dropdown">
                                <option value="null">Select</option>
                                @foreach ($Categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                            @error('category_id')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div wire:ignore.self class="col-md-4">
                        <div class="form-group">
                            <label class="control-label">Sub Category</label>
                            <select class="form-control select2" wire:model.lazy="sub_category_id"
                                id="sub_catselect2-dropdown">
                                <option value="null">Select Sub Category</option>
                                @foreach ($SubCategories as $subcat)
                                    <option value="{{ $subcat->id }}">{{ $subcat->name }}
                                        @if ($subcat->commission)
                                            (Commission - {{ $subcat->commission }}%)
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                            @error('sub_category_id')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    {{-- <div wire:ignore.self class="col-md-4">
                        <div class="form-group">
                            <label class="control-label">Sub Sub Category</label>
                            <select class="form-control select2" wire:model.lazy="sub_sub_category_id"
                                id="sub_sub_select2-dropdown">
                                <option value="null">Select Sub Sub Category</option>
                                @foreach ($SubSubCategories as $suSubCat)
                                    <option value="{{ $suSubCat->id }}">{{ $suSubCat->name }}</option>
                                @endforeach
                            </select>
                            @error('sub_sub_category_id')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div> --}}

                    <div wire:ignore class="col-md-2">
                        <div class="form-group">
                            <label class="control-label">Brand</label>
                            <select class="form-control select2" wire:model.lazy="brand_id"
                                id="brand_select2-dropdown1">
                                <option value="null">Select</option>
                                @foreach ($brands as $brand)
                                    <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                @endforeach
                            </select>
                            @error('brand_id')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>


                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="regular_price">Regular Price</label>
                            <input id="regular_price" type="number" step="any" class="form-control"
                                wire:model.debounce.150ms="regular_price" placeholder="Regular Price">
                            @error('regular_price')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="input_sale_price"> Wholesale Price(Without Comission)</label>
                            <input id="input_sale_price" type="number" step="any" class="form-control"
                                wire:model.debounce.150ms="input_sale_price" placeholder="Special Price">
                            @error('input_sale_price')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="special_price"> Wholesale Price(With Comission)</label>
                            <input id="special_price" type="text" step="any" class="form-control" style="background-color: rgb(225, 225, 225); "
                                wire:model.debounce.150ms="special_price" placeholder="Special Price" readonly>
                            @error('special_price')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>


                    {{-- <div class="col-md-6">
                        <div class="form-group">
                            <label for="wholesale_price">Wholesale Price</label>
                            <input id="wholesale_price" type="number" step="any" class="form-control"
                                wire:model.lazy="wholesale_price" placeholder="Wholesale Price">
                            @error('wholesale_price') <span class="error">{{ $message }}</span> @enderror
                        </div>
                    </div> --}}
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="min_order_qty">Minimum Order Quantity</label>
                            <input id="min_order_qty" type="number" step="any" class="form-control"
                                wire:model.lazy="min_order_qty" placeholder="Minimum Order Quantity">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="multiplication_qty">Multiplication Quantity</label>
                            <input id="multiplication_qty" type="number" step="any" class="form-control"
                                wire:model.lazy="multiplication_qty" placeholder="Multiplication Quantity">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="guarantee">Guarantee(Month)</label>
                            <input id="guarantee" type="number" step="any" class="form-control"
                                wire:model.lazy="guarantee" placeholder="guarantee">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="stock_in_opening">Youtube Link</label>
                            <input type="text" class="form-control form-control inputBox"
                                wire:model.lazy="youtube_link" placeholder="Video Link" />
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="purchase_price">Purchase Price</label>
                            <input id="purchase_price" type="number" step="any" class="form-control"
                                wire:model.lazy="purchase_price" placeholder="Purchase Price">
                            @error('purchase_price')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    {{-- <div class="col-md-2">
                        <div class="form-group">
                            <label class="control-label">Warehouse</label>
                            <select class="form-control" wire:model.lazy="warehouse_id">
                                <option value="">Select one</option>
                                @foreach ($warehouses as $warehouse)
                                    <option value="{{ $warehouse->id }}"
                                        @if ($warehouse->name == 'Default Warehouse') selected @endif>
                                        {{ $warehouse->name }}</option>
                                @endforeach
                            </select>
                            @error('warehouse_id')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div> --}}
                    {{--<div class="col-md-2">
                        <div class="form-group">
                            <label class="control-label">Size</label>
                            <input class="form-control" wire:model.lazy="size" placeholder="ex. x,xl,xxl">
                            @error('size') <span class="error">{{ $message }}</span> @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="control-label">Color</label>
                            <input class="form-control" wire:model.lazy="color" placeholder="ex. white,Red,Yellow">
                            @error('color') <span class="error">{{ $message }}</span> @enderror
                        </div>
                    </div>--}}

                    <div class="col-md-8">
                       {{-- <div class="form-group">
                            <label class="control-label">Model</label>
                            <!-- <input class="form-control" wire:model.lazy="model" placeholder="ex. m1,m2,m3"> -->
			    <textarea class="form-control" wire:model.lazy="model" placeholder="ex. m1,m2,m3"></textarea>
                            @error('model') <span class="error">{{ $message }}</span> @enderror
                        </div> --}}
                        <div class="form-group" wire:ignore>
                            <label class="control-label">Model</label>
                            <div class="tag-wrapper">
                                <div class="tag-content">
                                    <ul><input type="text" spellcheck="false" placeholder="Write Model"></ul>
                                </div>
                            </div>
                            <div class="tag-details" style="opacity:0">Total Number of selected Model <span>0</span></div>

                            @error('model') <span class="error">{{ $message }}</span> @enderror
                        </div>


                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="stock_in_opening">Opening Stock</label>
                            <input id="stock_in_opening" type="number" step="any" class="form-control"
                                wire:model.lazy="stock_in_opening" placeholder="Opening Stock">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="low_alert">Low Alert</label>
                            <input id="low_alert" type="number" step="any" class="form-control"
                                wire:model.lazy="low_alert" placeholder="Low Alert">
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div  class="form-group">
                            <label for="basicpill-lastname-input">Key Word</label>
                            {{--<textarea class="form-control" id="key_word" rows="5" wire:model.lazy="key_word" placeholder="Key Word"
                                rows="8">{{ $key_word }}</textarea> --}}
                             <textarea class="form-control" rows="3"
                                wire:model.lazy="key_word" placeholder="Key Word" rows="8"></textarea>
                        </div>
                    </div>

                    {{-- <div class="col-md-3">
                        <div wire:ignore class="form-group">
                            <label for="basicpill-lastname-input">Short Description</label>
                            <textarea class="form-control" id="short_description" rows="5" wire:model.lazy="short_description"
                                placeholder="Short Description"> {{ $short_description }}</textarea>

                        </div>
                    </div> --}}
                    <div class="col-md-6">
                        <div wire:ignore class="form-group">
                            <label for="basicpill-lastname-input">Long Description</label>
                            <textarea class="form-control" id="long_description" rows="5" wire:model.lazy="long_description"
                                placeholder="Long Description" rows="8">{{ $long_description }}</textarea>
                            {{-- <textarea class="form-control" rows="3"
                                wire:model.lazy="long_description" placeholder="Long Description"
                                rows="8">{{$long_description}}</textarea> --}}
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="low_alert"> Image(Max height 190px) </label>
                            {{-- <div wire:loading wire:target="product_image">
                                Processing Image...
                            </div> --}}
                            <input type="file" class="form-control form-control-lg inputBox"
                                wire:model.lazy="product_image" />
                            @error('product_image')
                                <span class="error">{{ $message }}</span>
                            @enderror

                            @if ($product_image)
                                <img loading="lazy" src="{{ $product_image->temporaryUrl() }}"
                                    style="height:150px; weight:150px;" alt="Image" class="img-circle img-fluid">
                            @endif

                            @if ($QueryUpdate && !$product_image)
                                <div ng-repeat="file in imagefinaldata" class="img_wrp m-1">
                                    @if ($QueryUpdate->ProductImageFirst)
                                        <img loading="lazy" style="height:150px; weight:150px;"
                                            src="{{ asset('storage/photo/' . $QueryUpdate->ProductImageFirst->image) }}"
                                            class="rounded mb-1 imgResponsiveMax" alt="" />
                                        <div class="close text-danger"
                                            wire:click="imageDelete({{ $QueryUpdate->ProductImageFirst->id }})"
                                            style="cursor:pointer;">
                                            <span aria-hidden="true">&times;</span>
                                        </div>
                                    @endif
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="low_alert">Product Gallery Image(Max height 190px)</label><br>
                            <input type="file" class="form-control form-control-lg inputBox"
                                wire:model.lazy="images" multiple />
                        </div>
                        @if ($QueryUpdate)
                            @foreach ($QueryUpdate->ProductImageTop4 as $image)
                                <div ng-repeat="file in imagefinaldata" class="img_wrp m-1">
                                    <img loading="lazy" style="height:150px; weight:150px;"
                                        src="{{ asset('storage/photo/' . $image->image) }}"
                                        class="rounded mb-1 imgResponsiveMax" alt="" />
                                    <div class="close text-danger" wire:click="imageDelete({{ $image->id }})"
                                        style="cursor:pointer;">
                                        <span aria-hidden="true">&times;</span>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                        @foreach ($images as $key => $image)
                            <div ng-repeat="file in imagefinaldata" class="img_wrp m-1">
                                <img loading="lazy" src="{{ $image->temporaryUrl() }}"
                                    style="height:150px; weight:150px;" alt="Image"
                                    class="img-circle img-fluid rounded mb-1 imgResponsiveMax">
                                <div class="close text-danger" wire:click="removeMe({{ $key }})"
                                    style="cursor:pointer;">
                                    <span aria-hidden="true">&times;</span>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="control-label">Featured</label>
                            <select class="form-control" wire:model.lazy="featured">
                                {{-- <option value="">Select</option> --}}
                                <option value="None">None</option>
                                <option value="New Product">New Product</option>
                                <option value="New Glass Protector">New Glass Protector</option>
                                <option value="New Cover">New Cover</option>
                                <option value="Trending Product">Trending Product</option>
                                <option value="Best Selling Product">Best Selling Product</option>
                            </select>
                            @error('featured')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="control-label">Stock</label>
                            <select class="form-control" wire:model.lazy="in_stock">
                                {{-- <option value="">Select</option> --}}
                                <option value="In Stock">In Stock</option>
                                <option value="Out of Stock">Out of Stock</option>
                            </select>
                            @error('in_stock')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="basicpill-lastname-input">Status</label>
                            <select class="form-control" wire:model.lazy="is_active">
                                {{-- <option value="">Select Status</option> --}}
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                            @error('is_active')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        @if (!Auth::user()->hasAnyRole('seller'))
                            <div class="form-group">
                                <label class="control-label">Approved Status</label>
                                <select class="form-control updateTable" placeholder="approved_status"
                                    wire:model.lazy="approved_status" id="approved_status">
                                    <option value="">Select Status</option>
                                    <option value="Pending">Pending</option>
                                    <option value="Approved">Approved</option>
                                    <option value="Reject">Reject</option>
                                </select>
                                @error('approved_status')
                                    <span class="error">{{ $message }}</span>
                                @enderror
                            </div>
                        @endif
                    </div>


                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="low_alert">Quantity For What's Up</label>
                            <input id="low_alert" type="number" step="any" class="form-control"
                                   wire:model.lazy="qty_for_whats_up_contact" placeholder="Quantity for What's up">
                        </div>
                    </div>


{{--                    <div class="col-md-12">--}}
{{--                        <div class="form-group">--}}
{{--                            <label for="name">Product Type</label>--}}
{{--                            <select class="form-control" wire:model="product_type">--}}
{{--                                <option value="0">Normal</option>--}}
{{--                                <option value="1">Multi - model</option>--}}
{{--                                <option value="2">Price Range</option>--}}
{{--                            </select>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    --}}


                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="name">Multiple Product Pricing</label>
                                <button class="from-control btn btn-success btn-sm" type="button"
                                        wire:click="AddPricing">+</button>
                            </div>
                        </div>
                        @if($pricingList)
                            @if($pricingList->count() > 0)
                                @foreach ($pricingList as $key => $item)
                                <div class="col-md-12">
                                    <div class="row">
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label>From Qty</label>
                                            <input type="number" class="form-control"
                                                   wire:model.lazy="from_qty.{{$key}}"
                                                   placeholder="Enter From Qty Amount" min="1">
                                            @error('from_qty')
                                            <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label>To Qty</label>
                                            <input type="number" class="form-control"
                                                   wire:model.lazy="to_qty.{{$key}}"
                                                   placeholder="Enter To Qty Amount" min="1">
                                            <label style="margin-top: 10px;"><input wire:model="is_unlimited.{{$key}}" type="checkbox" value="1"> Unlimited (if your qty is unlimited)</label>
                                            @error('to_qty')
                                            <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
{{--                                    <div class="col-md-2">--}}
{{--                                        <div class="form-group">--}}
{{--                                            <label>Regular Price</label>--}}
{{--                                            <input type="number" step="any" class="form-control"--}}
{{--                                                   wire:model.debounce.150ms="regular_sale_price.{{$key}}"--}}
{{--                                                   placeholder="Enter Amount" min="1" step="any">--}}
{{--                                            @error('sale_price_without_commission')--}}
{{--                                            <span class="error">{{ $message }}</span>--}}
{{--                                            @enderror--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Wholesale Price(Without Commission)</label>
                                            <input type="number" step="any" class="form-control"
                                                   wire:model.debounce.150ms="range_price_without_comission.{{$key}}"
                                                   placeholder="Enter Amount" min="1" step="any">
                                            @error('range_price_without_comission')
                                            <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label>Wholesale Price(With Commission)</label>
                                            <input type="text"  class="form-control" style="background-color: rgb(225, 225, 225);"
                                                   wire:model.lazy="range_price_with_comission.{{$key}}"
                                                   placeholder="Enter Amount" min="1" step="any" readonly>
                                            @error('sale_price_with_commission')
                                            <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-1">
                                        <div class="form-group" style="margin-top: 7px;">
                                            <button type="button" class="mt-4 btn btn-danger btn-sm"
                                                    wire:click="removePricingList({{ $key }})"><i
                                                    class="fa fa-trash"></i></button>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                @endforeach
                        @endif
                    @endif


                </div>
                <div class="row">
                    <div class="col-md-12 text-center">
                        {{-- <button type="reset" class="btn btn-warning mr-1 waves-effect waves-light" >Reset</button> --}}
                        <button type="submit" class="btn btn-primary mr-1 waves-effect waves-light"
                            wire:target="product_image, images" wire:loading.attr="disabled">Publish</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        const ul = document.querySelector(".tag-wrapper ul"),
            input = document.querySelector(".tag-wrapper input"),
            tagNumb = document.querySelector(".tag-details span");
            let maxTags = 300;
            //tags = ["coding", "nepal"];


        let model_data = '{{ $model }}';
        let tags = [];
        if(model_data != ""){
            tags = model_data.split(",");
        }else{
            tags = [];
        }
        // console.log("live model ......");
        // console.log(model_data);

        countTags();
        createTag();
        function countTags(){
            input.focus();
            tagNumb.innerText = maxTags - tags.length;
        }
        function createTag(){
            ul.querySelectorAll("li").forEach(li => li.remove());
            tags.slice().reverse().forEach(tag =>{
                let liTag = `<li>${tag} <i class="mdi mdi-close-circle" onclick="remove(this, '${tag}')"></i></li>`;
                ul.insertAdjacentHTML("afterbegin", liTag);
            });

            let tags_str = tags.join(',');
             Livewire.emit('updateModel', tags_str);
            countTags();

        }
        function remove(element, tag){
            let index  = tags.indexOf(tag);
            tags = [...tags.slice(0, index), ...tags.slice(index + 1)];
            element.parentElement.remove();
            countTags();
            let tags_str = tags.join(',');
            Livewire.emit('updateModel', tags_str);
        }
        function addTag(e){
            if(e.key == ","){
                let tag = e.target.value.replace(/\s+/g, ' ');
                if(tag.length > 1 && !tags.includes(tag)){
                    if(tags.length < 99999){
                        tag.split(',').forEach(tag => {
                            if(tag != ""){
                                tags.push(tag);
                                createTag();
                            }
                        });
                    }
                }
                e.target.value = "";
            }
        }
        input.addEventListener("keyup", addTag);
    </script>
    <script>
        $(document).ready(function() {
            $('#vendor_select2-dropdown').select2();
            $('#vendor_select2-dropdown').on('change', function(e) {
                var data = $('#vendor_select2-dropdown').select2("val");
                @this.set('vendor_id', data);
            });
        });

        // $(document).ready(function() {
        //     $('#select2-dropdown').select2();
        //     $('#select2-dropdown').on('change', function(e) {
        //         var data = $('#select2-dropdown').select2("val");
        //         @this.set('category_id', data);
        //     });
        // });

        // $(document).ready(function() {
        //     $('#sub_catselect2-dropdown').select2();
        //     $('#sub_catselect2-dropdown').on('change', function(e) {
        //         var data = $('#sub_catselect2-dropdown').select2("val");
        //         @this.set('sub_category_id', data);
        //     });
        // });

        // $(document).ready(function() {
        //     $('#sub_sub_select2-dropdown').select2();
        //     $('#sub_sub_select2-dropdown').on('change', function(e) {
        //         var data = $('#sub_sub_select2-dropdown').select2("val");
        //         @this.set('sub_sub_category_id', data);
        //     });
        // });

        $(document).ready(function() {
            $('#brand_select2-dropdown1').select2();
            $('#brand_select2-dropdown1').on('change', function(e) {
                var data = $('#brand_select2-dropdown1').select2("val");
                @this.set('brand_id', data);
            });
        });

        $(document).ready(function() {
            if ($("#short_description").length > 0) {
                tinymce.init({
                    selector: "textarea#short_description",
                    height: 300,
                    forced_root_block: false,
                    setup: function(editor) {
                        editor.on('init change', function() {
                            editor.save();
                        });
                        editor.on('change', function(e) {
                            @this.set('short_description', editor.getContent());
                        });
                    },
                    plugins: [
                        "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
                        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                        "save table contextmenu directionality emoticons template paste textcolor"
                    ],
                    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",
                    style_formats: [{
                        title: 'Bold text',
                        inline: 'b'
                    }, {
                        title: 'Red text',
                        inline: 'span',
                        styles: {
                            color: '#ff0000'
                        }
                    }, {
                        title: 'Red header',
                        block: 'h1',
                        styles: {
                            color: '#ff0000'
                        }
                    }, {
                        title: 'Example 1',
                        inline: 'span',
                        classes: 'example1'
                    }, {
                        title: 'Example 2',
                        inline: 'span',
                        classes: 'example2'
                    }, {
                        title: 'Table styles'
                    }, {
                        title: 'Table row 1',
                        selector: 'tr',
                        classes: 'tablerow1'
                    }]
                });

            }
            if ($("#long_description").length > 0) {
                tinymce.init({
                    selector: "textarea#long_description",
                    height: 300,
                    forced_root_block: false,
                    setup: function(editor) {
                        editor.on('init change', function() {
                            editor.save();
                        });
                        editor.on('change', function(e) {
                            @this.set('long_description', editor.getContent());
                        });
                    },
                    plugins: [
                        "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
                        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                        "save table contextmenu directionality emoticons template paste textcolor"
                    ],
                    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",
                    style_formats: [{
                        title: 'Bold text',
                        inline: 'b'
                    }, {
                        title: 'Red text',
                        inline: 'span',
                        styles: {
                            color: '#ff0000'
                        }
                    }, {
                        title: 'Red header',
                        block: 'h1',
                        styles: {
                            color: '#ff0000'
                        }
                    }, {
                        title: 'Example 1',
                        inline: 'span',
                        classes: 'example1'
                    }, {
                        title: 'Example 2',
                        inline: 'span',
                        classes: 'example2'
                    }, {
                        title: 'Table styles'
                    }, {
                        title: 'Table row 1',
                        selector: 'tr',
                        classes: 'tablerow1'
                    }]
                });

            }
            if ($("#key_word").length > 0) {
                tinymce.init({
                    selector: "textarea#key_word",
                    height: 300,
                    forced_root_block: false,
                    setup: function(editor) {
                        editor.on('init change', function() {
                            editor.save();
                        });
                        editor.on('change', function(e) {
                            @this.set('key_word', editor.getContent());
                        });
                    },
                    plugins: [
                        "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
                        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                        "save table contextmenu directionality emoticons template paste textcolor"
                    ],
                    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",
                    style_formats: [{
                        title: 'Bold text',
                        inline: 'b'
                    }, {
                        title: 'Red text',
                        inline: 'span',
                        styles: {
                            color: '#ff0000'
                        }
                    }, {
                        title: 'Red header',
                        block: 'h1',
                        styles: {
                            color: '#ff0000'
                        }
                    }, {
                        title: 'Example 1',
                        inline: 'span',
                        classes: 'example1'
                    }, {
                        title: 'Example 2',
                        inline: 'span',
                        classes: 'example2'
                    }, {
                        title: 'Table styles'
                    }, {
                        title: 'Table row 1',
                        selector: 'tr',
                        classes: 'tablerow1'
                    }]
                });
            }
        });
    </script>
@endpush