@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 }}" @if($item->id == $vendor_id) selected @endif>{{ $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="">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 class="col-md-4">
                        <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="">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-4">
                        <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-8">--}}
{{--                        <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-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.addEventListener('livewire:load', function () {
            $('#vendor_select2-dropdown').select2();
            $('#select2-dropdown').select2();
            $('#sub_catselect2-dropdown').select2();
        });

        Livewire.hook('message.processed', (message, component) => {
            $('#vendor_select2-dropdown').select2();
            $('#select2-dropdown').select2();
            $('#sub_catselect2-dropdown').select2();
        });

        $(document).ready(function() {

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


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


            $('#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