@section('title', 'Pending Product List')
<div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-sm-2">
                            <div class="search-box mr-2 mb-2 d-inline-block">
                                <div class="position-relative">
                                    <h4>Pending Product List</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-10">
                            <div class="row">
                                <div class="col-md-2">
                                    <div wire:ignore class="form-group">
                                        <select class="form-control form-select select2 updateTable"
                                            placeholder="Status" name="is_active" id="is_active">
                                            <option value="">Select Status</option>
                                            <option value="1">Active</option>
                                            <option value="2">Inactive</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div wire:ignore class="form-group">
                                        <select class="form-control form-select select2 updateTable" placeholder="Stock"
                                            name="in_stock" id="in_stock">
                                            <option value="">Select Stock</option>
                                            <option value="In Stock">In Stock</option>
                                            <option value="Out of Stock">Out of Stock</option>
                                        </select>
                                    </div>
                                </div>
                                @if (!Auth::user()->hasAnyRole('seller'))
                                <div class="col-md-2">
                                    <div wire:ignore class="form-group">
                                        <select class="form-control form-select select2 updateTable"
                                            placeholder="Featured" name="featured" id="featured">
                                            <option value="">Select Featured</option>
                                            <option value="None">None</option>
                                            <option value="New Product">New Product</option>
                                            <option value="Trending Product">Trending Product</option>
                                            <option value="Best Selling Product">Best Selling Product</option>
                                        </select>
                                    </div>
                                </div>
                                @endif

                                {{-- <div class="col-md-3">
                                    <div wire:ignore class="form-group">
                                        <select class="form-control updateTable" placeholder="approved_status"
                                            name="approved_status" id="approved_status">
                                            <option value="">Select Approval Status</option>
                                            <option value="Pending">Pending</option>
                                            <option value="Approved">Approved</option>
                                            <option value="Reject">Reject</option>
                                        </select>
                                    </div>
                                </div> --}}

                                <div class="col-md-3">
                                    <div wire:ignore class="form-group">
                                        <select class="form-control form-select select2 updateTable"
                                            name="sub_category" id="sub_category">
                                            <option value=" ">Select SubCategory</option>
                                            @foreach ($subCat as $item)
                                                <option value="{{$item->id}}">{{$item->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div wire:ignore class="form-group">
                                        <select class="form-control form-select select2 updateTable"
                                            name="vendor_wise_search" id="vendor_wise_search">
                                            <option value=" ">Select Vendor</option>
                                            @foreach ($vendors as $item)
                                                <option value="{{$item->id}}">{{$item->business_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div><!-- end col-->
                    </div>
                    <div class="col-xl-12">
                        <div wire:ignore class="table-responsive">
                            <table class="table table-bordered dt-responsive nowrap updateTable" id="ProductTable"
                                style="border-collapse: collapse; border-spacing: 0;"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--  Modal content for the above example -->
    <div wire:ignore.self class="modal fade" id="productDetailModal" tabindex="-1" role="dialog"
        aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title mt-0" id="myLargeModalLabel">Product Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group move">
                                <label for="basicpill-firstname-input">Image</label>
                                <div class="card" style="width: 15rem;">
                                    <img loading="lazy"
                                        @if ($ProductDetail) src="{{ asset('storage/photo/' . $ProductDetail->ProductImageFirst->image) }}" @endif
                                        class="card-img-top" alt="...">
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6 font">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">Name: @if ($ProductDetail)
                                        {{ $ProductDetail->name }}
                                    @endif
                                </label>
                            </div>
                        </div>
                        <div class="col-lg-6 font">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">Category:
                                    @if ($ProductDetail)
                                        @if ($ProductDetail->Category)
                                            {{ $ProductDetail->Category->name }}
                                        @endif
                                    @endif
                                </label>
                            </div>
                        </div>
                        <div class="col-lg-6 font">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">Brand: @if ($ProductDetail)
                                        {{ $ProductDetail->Brand->name }}
                                    @endif
                                </label>
                            </div>
                        </div>
                        <div class="col-lg-6 font">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">Regular price: @if ($ProductDetail)
                                        {{ $ProductDetail->regular_price }}
                                    @endif
                                </label>
                            </div>
                        </div>
                        <div class="col-lg-6 font">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">Special price: @if ($ProductDetail)
                                        {{ $ProductDetail->special_price }}
                                    @endif
                                </label>
                            </div>
                        </div>

                        <div class="col-lg-6 font">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">wholesale_price: @if ($ProductDetail)
                                        {{ $ProductDetail->wholesale_price }}
                                    @endif
                                </label>
                            </div>
                        </div>

                        <div class="col-lg-6 font">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">purchase price: @if ($ProductDetail)
                                        {{ $ProductDetail->purchase_price }}
                                    @endif
                                </label>
                            </div>
                        </div>

                        <div class="col-lg-6 font">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">discount: @if ($ProductDetail)
                                        {{ $ProductDetail->discount }}
                                    @endif
                                </label>
                            </div>
                        </div>

                        <div class="col-lg-6 font">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">Low alert: @if ($ProductDetail)
                                        {{ $ProductDetail->low_alert }}
                                    @endif
                                </label>
                            </div>
                        </div>
                        <div class="col-lg-6 font">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">Minium Order Quantity: @if ($ProductDetail)
                                        {{ $ProductDetail->min_order_qty }}
                                    @endif
                                </label>
                            </div>
                        </div>
                        @if ($ProductDetail && $ProductDetail->guarantee > 0)
                            <div class="col-lg-6 font">
                                <div class="form-group">
                                    <label for="basicpill-firstname-input">Guarantee:
                                        @if ($ProductDetail)
                                            {{ $ProductDetail->guarantee }}
                                        @endif
                                        Month
                                    </label>
                                </div>
                            </div>
                        @endif
                        <div class="col-lg-6 font">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">
                                    Status:
                                    @if ($ProductDetail)
                                        @if ($ProductDetail->is_active == 1)
                                            <span class="badge badge-info">Active</span>
                                        @else
                                            <span class="badge badge-danger">Inactive</span>
                                        @endif
                                    @endif
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <!--  Product Info Quick Edit Modal Start -->
    <div class="modal fade" id="productQuickEditModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title mt-0" id="myLargeModalLabel">Product Quick Update</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form wire:submit.prevent="productSave">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="basicpill-firstname-input">Name</label>
                                    <input class="form-control" type="text" wire:model.lazy="name" placeholder="Enter Product Name">
                                    @error('name') <span class="error">{{ $message }}</span> @enderror
                                </div>
                            </div>

                            <div class="col-md-3">
                                <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-3">
                                <div class="form-group">
                                    <label for="special_price"> Wholesale Price</label>
                                    <input id="special_price" type="number" step="any" class="form-control"
                                        wire:model.debounce.150ms="special_price" placeholder="Special Price">
                                    @error('special_price')
                                        <span class="error">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-3">
                                <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-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">
                                </div>
                            </div>

                            <div class="col-md-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">
                                </div>
                            </div>

                            <div class="col-md-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">
                                </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>

                            @if (!Auth::user()->hasAnyRole('seller'))
                            <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="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>
                            @endif

                            @if (!Auth::user()->hasAnyRole('seller'))
                            <div class="col-md-3">
                                <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>
                            </div>
                            @endif


                            <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>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    {{-- Product Info Edit Modal Start --}}

</div>
@push('scripts')
    <script>
        $(document).ready(function() {
            $('#sub_category').select2();
            $('#sub_category').on('change', function(e) {
                var data = $('#sub_category').select2("val");
                @this.set('sub_category', data);
            });
        });

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

        function callEdit(id) {
            @this.call('productEdit', id);
        }

        function callDetail(id) {
            @this.call('ProductDetails', id);
        }

        // function callDelete(id) {
        //     @this.call('DeleteModal', id);
        // }

        function callDelete(id) {
            Swal.fire({
                title: 'Are You Sure?',
                text: 'Order record will be deleted!',
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: 'var(--danger)',
                cancelButtonColor: 'var(--primary)',
                confirmButtonText: 'Delete!'
            }).then((result) => {
                if (result.value) {
                    @this.call('deleteProduct', id);
                    responseAlert({
                        title: session('message'),
                        type: 'success'
                    });
                } else {
                    responseAlert({
                        title: 'Operation Cancelled!',
                        type: 'success'
                    });
                }
            });
        };

        $(document).ready(function() {
            var datatable = $('#ProductTable').DataTable({
                processing: true,
                serverSide: true,
                // ajax: "{{ route('data.product_table') }}",
                ajax: {
                    url: "{{ route('data.pending_product_table') }}",
                    type: 'GET',
                    cache: false,
                    data: function(d) {
                        d.is_active = $('#is_active').val();
                        d.in_stock = $('#in_stock').val();
                        d.featured = $('#featured').val();
                        d.sub_category = $('#sub_category').val();
                        d.vendor_wise_search = $('#vendor_wise_search').val();
                        d.approved_status = $('#approved_status').val();
                    }
                },
                columns: [{
                        title: 'SL',
                        data: 'id'
                    },
                    // {
                    //     title: 'Code',
                    //     data:   'code',
                    //     name:   'code'
                    // },

                    {
                        title: 'Image',
                        data: 'product_id',
                        name: 'product_id'
                    },

                    {
                        title: 'Name',
                        data: 'name',
                        name: 'name',
                        searchable: true,
                        "orderable": false
                    },
                    {
                        title: 'Category',
                        data: 'category.name',
                        name: 'Category.name',
                        searchable: true,
                        "orderable": false
                    },

                    // {
                    //     title: 'SubCategory',
                    //     data: 'SubCategory.name',
                    //     name: 'SubCategory.name',
                    //     searchable: true,
                    //     "orderable": false
                    // },

                    {
                        title: 'SubCategory',
                        data: 'sub_category_id',
                        name: 'sub_category_id',
                        searchable: true,
                        "orderable": false
                    },

                    {
                        title: 'Special Price',
                        data: 'special_price',
                        name: 'special_price'
                    },
                    // {
                    //     title: 'Wholesale Price',
                    //     data: 'wholesale_price',
                    //     name: 'wholesale_price'
                    // },
                    {
                        title: 'Stock',
                        data: 'in_stock',
                        name: 'in_stock'
                    },
                    {
                        title: 'Status',
                        data: 'is_active',
                        name: 'is_active'
                    },
                     {
                        title: 'Vendor Name',
                        data: 'vendor_name',
                        name: 'vendor_name'
                    },
                    {
                        title: 'Approved Status',
                        data: 'approved_status',
                        name: 'approved_status'
                    },
                    {
                        title: 'Action',
                        data: 'action',
                        name: 'action'
                    },
                ]
            });
            // window.livewire.on('success', message => {
            //     datatable.draw(true);
            // });

            $(document).on('change', '.updateTable', function() {
                $('#ProductTable').DataTable().draw(true);
            });

            window.livewire.on('success', message => {
                datatable.draw(true);
            });

        });

          //product clone fun
          function callCloneForSeller(id) {
            Swal.fire({
                title: 'Are You Sure?',
                text: 'you want to clone this product.',
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: 'var(--danger)',
                cancelButtonColor: 'var(--primary)',
                confirmButtonText: 'Yes, Clone It'
            }).then((result) => {
                if (result.value) {
                    @this.call('cloneProductForSeller', id);
                    responseAlert({
                        title: session('message'),
                        type: 'success'
                    });
                } else {
                    responseAlert({
                        title: 'Operation Cancelled!',
                        type: 'success'
                    });
                }
            });
        };

        function callCloneForAdmin(id) {
            Swal.fire({
                title: 'Are You Sure?',
                text: 'you want to clone this product.',
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: 'var(--danger)',
                cancelButtonColor: 'var(--primary)',
                confirmButtonText: 'Yes, Clone It'
            }).then((result) => {
                if (result.value) {
                    @this.call('cloneProductForAdmin', id);
                    responseAlert({
                        title: session('message'),
                        type: 'success'
                    });
                } else {
                    responseAlert({
                        title: 'Operation Cancelled!',
                        type: 'success'
                    });
                }
            });
        };

    </script>
@endpush