@extends('layouts.app')

@section('title', 'Product')
@section('extrastyles')
    <link href="{{ asset('/plugins/dataTables/datatables.min.css') }}" rel="stylesheet">
@endsection

@section('content')

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title2">
                    <h5>Blocked Products</h5>

                    <div class="search-filters" style="display: none">
                        {!! Form::select('category_id', $categories, null, ['class' => 'form-control category_id', 'style' => 'margin-left: 10px;', 'placeholder' => 'All Categories']) !!}
                        {!! Form::select('brand_id', $brands, null, ['class' => 'form-control brand_id', 'style' => 'margin-left: 10px;', 'placeholder' => 'All Brands']) !!}
                    </div>
                </div>
                <div class="ibox-content p-md">
        <div class="row">
            <div class="col-6 offset-1">
                <input id="basicAutoComplete" class="form-control loading" type="text" autocomplete="on"
                    placeholder="Search products to block...">
            </div>
            <div class="col-2">
                <button type="button" class="btn btn-block btn-outline-secondary" id="btnAddProduct">
                    Block Product
                </button>
            </div>
            <div class="col-2">
                <button type="button" class="btn btn-block btn-outline-secondary" id="btnUnblockAll">
                    Unblock all products
                </button>
            </div>
        </div>
                    @include('flash::message')
        <div class=" row pt-4 pb-4">
            <div class="card col-4 offset-4 p-4" >
                <div class="clearfix"></div>
                    <h4>Block/unblock a list of products</h4>
                    {!! Form::open(['id' => 'upload_csv', 'files' => true, 'url' => url('product/import-blocked/')]) !!}
                    <p>
                        Download this <a target="_blank" href="{{ url('retailer/import-blocked-sample') }}">sample spreadsheet</a> and fill in the product information
                    </p>
                    <div class="form-group">
                        {!! Form::label('csv_file','Choose CSV') !!}
                        {!! Form::file('csv_file') !!}
                    </div>
                    <div class="form-group">
                        {!! Form::checkbox('unblock', '1') !!}
                        <label>Unblock Products</label>
                    </div>
                    <button type="submit" class="btn btn-primary">Import spreadsheet</button>
                    {!! Form::close() !!}
            </div>
        </div>
                    <div class="clearfix"></div>
                    <div class="table-responsive">
                        <table style="width: 100%;" class="table table-striped table-bordered table-hover"  id="product_listing">
                            <thead>
                            <tr>
                                <th style="width: 150px;">Image</th>
                                <th>Name</th>
                                <th>Category</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                        </table>
                        <tbody></tbody>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer')
    <script src="{{ asset('/plugins/dataTables/datatables.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/gh/xcash/bootstrap-autocomplete@v2.3.7/dist/latest/bootstrap-autocomplete.min.js"></script>
    <script>
        let blockedProductsTable;
        var $activeProduct = null;
        $(document).ready(function() {
            blockedProductsTable = $('#product_listing').dataTable({

                responsive: true,
                processing: true,
                serverSide: true,
                dom: 'lftip',
                language: {
                    lengthMenu: " _MENU_ ",
                    searchPlaceholder: "Search...",
                    search: '', /* removed search label */
                },
                ajax : {
                    url: "{{ url('product/blocked-listing') }}",
                    data: function (data) {
                        data.category_id = $('select[name="category_id"]').val();
                        data.brand_id = $('select[name="brand_id"]').val();
                    }
                }
            });
            $('#product_listing_filter').find('label').append($('.search-filters').html());
            $('.search-filters').html('');
        });
      
            $('#basicAutoComplete').autoComplete({
                minLength: 2,
                resolverSettings: {
                    url: '/product/unblocked-search'
                },
                events: {
                    search: function (qry, callback) {
                        $.ajax({
                            type: 'GET',
                            url: '/product/unblocked-search',
                            data: `q=${qry}`
                        }).done(function (data) {
                            callback(data)
                        })
                    }
                }
            });
            $('#basicAutoComplete').on('change', function () {
                selectedValue = '';
            });
            $('#basicAutoComplete').on('autocomplete.select', function (evt, item) {
                selectedValue = item.value;
            });

            $("#btnAddProduct").on('click', function () {
                if (selectedValue !== '') {
                    $.ajax({
                        type: 'POST',
                        url: '/product/block-product',
                        data: `id=${selectedValue}&_token=`+csrf_token,
                    }).done(function () {
                        blockedProductsTable.DataTable().ajax.reload();
                        $('#basicAutoComplete').autoComplete('clear');
                    });
                } 
            })
     $(document).on('change', 'select.category_id,select.brand_id', function () {
            $('#product_listing').dataTable().fnFilter('', 0, false);
        });
     $("#btnUnblockAll").on('click', function () {
                $.ajax({
                    type: 'POST',
                    url: '/product/unblock-all',
                    data: `_token=`+csrf_token,
                }).done(function () {
                    blockedProductsTable.DataTable().ajax.reload();
                    $('#basicAutoComplete').autoComplete('clear');
                });
            })
           function unblockProduct(id,type){
                if (id !== '') {
                    $.ajax({
                        type: 'POST',
                        url: '/product/unblock-product',
                        data: `id=${id}&_token=`+csrf_token,
                    }).done(function () {
                        blockedProductsTable.DataTable().ajax.reload();
                        $('#basicAutoComplete').autoComplete('clear');
                    });
                }
            }
    </script>
@endsection