@extends('admin.layout.app')

@section('content')
<!-- [ Main Content ] start -->
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="page-header-title">
                                    <h5 class="m-b-10">Products</h5>
                                </div>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="javascript:void(0)">Products</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [ breadcrumb ] end -->
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ Main Content ] start -->
                        <div class="row">

                            <!-- [ Hover-table ] start -->
                            <div class="col-xl-12">

                                @include('admin.layout.session')

                                <div class="card">
                                    <div class="card-header">
                                        <h5>Products</h5>

                                        <div class="d-inline-block dropdown float-right">
                                            @can('add_products')
                                                <a href="{{ route('admin.products.create') }}" class="btn btn-glow-primary btn-primary btn-sm"><i class="feather icon-plus-circle"></i>Add New Produt</a>
                                            @endcan

                                            @can('delete_products')
                                                <button class="btn btn-glow-danger btn-danger btn-sm attribute_bulk_delete   " data-url="{{ route('admin.products.bulkremove') }}"><i class="feather icon-trash-2"></i>Bulk Delete</button>
                                            @endcan

                                        </div>
                                    </div>
                                    <div class="card-block table-border-style">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    @include('components._categoryDropDown', ['is_required' => false, 'is_multiple' => false, 'is_label' => true, 'is_dash' => true, 'is_subcategory_display' => true, 'is_disabled' => true])
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Status</label>
                                                    <select class="form-control status choices_dropdown">
                                                        <option value="">- All Status -</option>
                                                        <option value="1">Active</option>
                                                        <option value="0">Deactive</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="table-responsive Recent-Users">
                                            <table class="table table-hover product_datatable">
                                                <thead>
                                                    <tr>
                                                        @can('delete_products')
                                                          <th><div class="checkbox checkbox-fill d-inline"><input type="checkbox" name="checkbox-fill-0" id="checkbox-fill-0"><label for="checkbox-fill-0" class="cr"></label></div></th>
                                                        @endcan
                                                        <th>Category</th>
                                                        <th>Name</th>
                                                        <th>Code</th>
                                                        <th>Status</th>
                                                        <th>Created On</th>
                                                        @if(auth()->user()->can('edit_products') || auth()->user()->can('delete_products'))
                                                          <th>Action</th>
                                                        @endif
                                                    </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ Hover-table ] end -->


                        </div>
                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- [ Main Content ] end -->
@endsection

@push('js')
<script type="text/javascript">
    $(function(){
        $('.main_products').addClass('active');
        $('.main_products').addClass('pcoded-trigger');
        $('.products').addClass('active');

        var oTable = $('.product_datatable').DataTable({
            processing: false,
            serverSide: true,
            ajax: {
                url: '{!! route('admin.products.index') !!}',
                data: function (d) {
                    //for category
                    var category_id = $('.category_dropdown option:selected').val();
                    if (typeof category_id == 'undefined' && category_id == null && category_id == ''){
                        category_id = 0;
                    }
                    d.category_id = category_id;

                    //for status
                    var status = $('.status option:selected').val();
                    if(typeof(status) !== "undefined" && status !== null && status !== '') {
                        d.status = status;
                    }
                }
            },
            columns: [
                @can('delete_products')
                    {data: 'id', sortable: false, orderable: false, searchable: false},
                @endcan
                {data: 'category_id', name: 'category_id', sortable: false, orderable: false, searchable: false},
                {data: 'name', name: 'name', sortable: true, orderable: true, searchable: true},
                {data: 'price', name: 'price', sortable: true, orderable: true, searchable: true},
                {data: 'is_active', name: 'is_active', sortable: true, orderable: true, searchable: true},
                {data: 'created_at', name: 'created_at', sortable: true, orderable: true, searchable: true},
                @if(auth()->user()->can('edit_products') || auth()->user()->can('delete_products'))
                    {data: 'action', sortable: false,searchable: false},
                @endif
            ],
            @can('delete_products')
            columnDefs: [
                {
                    targets: 0,
                    checkboxes:{
                        selectRow: true
                    },
                },
            ],
            select: {
                style: 'multi', // 'single', 'multi', 'os', 'multi+shift'
            },
            @endcan

            @if(!auth()->user()->can('edit_products') && !auth()->user()->can('delete_products'))
                order: [[0, 'desc']],
            @elseif(auth()->user()->can('edit_products') && auth()->user()->can('delete_products'))
                order: [[1, 'desc']],
            @elseif(auth()->user()->can('edit_products'))
                order: [[0, 'desc']],
            @elseif(auth()->user()->can('delete_products'))
                order: [[1, 'desc']],
            @endif
            "pagingType": "full_numbers",
            "language": {
                // "emptyTable": "No fees",
                "search": '<span>Filter:</span> _INPUT_',
                "lengthMenu": '<span>Show:</span> _MENU_',
                "searchPlaceholder": "Search..."
                // "paginate": { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
            },
            autoWidth: false,
            'fnDrawCallback': function( oSettings ) {
            }
        });


        $(document.body).on('click','.attribute_bulk_delete',function(){
            var me = $(this);
            var id = [];
            var rows_selected = oTable.column(0).checkboxes.selected();
            // console.log(rows_selected);
            //id = rows_selected.join(",").split(",");
            $.each(rows_selected, function(index, rowId){
                id.push(rowId);
            });
            bulkDelete(me, '.product_datatable', id);
        });

        //Status filter
        $(document.body).on('change', '.status', function (e) {
            var value = $(this).find(":selected").val();
            if (value != undefined){
                oTable.draw();
                e.preventDefault();
            }
        });

        // category filter
        $(document.body).on('change','.category_dropdown', function(e){
            var value = $(this).find(":selected").val();
            if (value != undefined){
                oTable.draw();
                e.preventDefault();
            }
        });

    });
</script>
@endpush