@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">
            <form wire:submit.prevent="productSave">
                <div class="row mb-4">
                    <div class="col-sm-4">
                        <div class="search-box mr-2 mb-2 d-inline-block">
                            <div class="position-relative">
                                <h4>Add New Product</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="text-sm-right">
                            <a href="{{ route('product.product-list') }}"
                                class="btn btn-info mr-1 waves-effect waves-light">All Product List</a>
                        </div>
                    </div><!-- end col-->
                </div>
                <div class="row">
                    <input id="code" type="hidden" wire:model.lazy="code">
                    <div class="col-sm-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 class="col-sm-6">
                        <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 Category</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 class="col-sm-6">
                        <div class="form-group">
                            <label class="control-label">Sub Category</label>
                            <select class="form-control select2" wire:model.lazy="sub_category_id"
                                id="select2-dropdown">
                                <option value=" ">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 class="col-sm-6">
                        <div class="form-group">
                            <label class="control-label">Brand</label>
                            <select class="form-control" wire:model.lazy="brand_id" id="select2-dropdown1">
                                <option value="">Select Brand</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-sm-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-sm-6">
                        <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">
                            @error('min_order_qty')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <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">
                            @error('guarantee')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <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">
                            @error('stock_in_opening')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <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">
                            @error('low_alert')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-sm-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-sm-6">
                        <div class="form-group">
                            <label class="control-label">Status</label>
                            <select class="form-control" wire:model.lazy="is_active">
                                {{-- <option value="">Select</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-sm-6">
                        <div wire:ignore class="form-group">
                            <label for="basicpill-lastname-input">Long Description</label>
                            <textarea class="form-control" id="long_description" rows="3" wire:model.lazy="long_description"
                                placeholder="Long Description" rows="8">{{ $long_description }}</textarea>
                            @error('long_description')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div wire:ignore class="form-group">
                            <label for="basicpill-lastname-input">Key Word</label>
                            <textarea class="form-control" id="key_word" rows="3" wire:model.lazy="key_word" placeholder="Key Word"
                                rows="8">{{ $key_word }}</textarea>
                            @error('key_word')
                                <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-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-4">
                                <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-4">
                                <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">
                                    @error('to_qty')
                                        <span class="error">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Price</label>
                                    <input type="number" step="any" class="form-control"
                                        wire:model.lazy="multiple_product_price.{{$key}}"
                                        placeholder="Enter Amount" min="1" step="any">
                                    @error('multiple_product_price')
                                        <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>
                        @endforeach
                        @endif
                    @endif
                </div>
                <div class="row">
                    <div class="col-md-12 text-center">
                        <button type="submit" class="btn btn-primary mr-1 waves-effect waves-light"
                            wire:target="product_image, images" wire:loading.attr="disabled">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@push('scripts')
    <script>
        // $(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() {
            $('#select2-dropdown1').select2();
            $('#select2-dropdown1').on('change', function(e) {
                var data = $('#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