@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">Categories</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)">Categories</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>Categories</h5>

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

                                            @can('delete_categories')
                                                <button class="btn btn-glow-danger btn-danger btn-sm category_bulk_delete   " data-url="{{ route('admin.categories.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])
                                                </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 category_datatable">
                                                <thead>
                                                    <tr>
                                                        @can('delete_categories')
                                                          <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>Parent category</th>
                                                        <th>Name</th>
                                                        <th>Status</th>
                                                        <th>Created On</th>
                                                        @if(auth()->user()->can('edit_categories') || auth()->user()->can('delete_categories'))
                                                          <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_categories').addClass('active');
        $('.main_categories').addClass('pcoded-trigger');
        $('.categories').addClass('active');

        var oTable = $('.category_datatable').DataTable({
            processing: false,
            serverSide: true,
            ajax: {
                url: '{!! route('admin.categories.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_categories')
                    {data: 'id', sortable: false, orderable: false, searchable: false},
                @endcan
                {data: 'parent.name', name: 'parent.name', sortable: false, orderable: false, searchable: false},
                {data: 'name', name: 'name', sortable: true, orderable: true, searchable: true},
                {data: 'status', name: 'status', sortable: true, orderable: true, searchable: true},
                {data: 'created_at', name: 'created_at', sortable: true, orderable: true, searchable: true},
                @if(auth()->user()->can('edit_categories') || auth()->user()->can('delete_categories'))
                    {data: 'action', sortable: false,searchable: false},
                @endif
            ],
            @can('delete_categories')
            columnDefs: [
                {
                    targets: 0,
                    checkboxes:{
                        selectRow: true
                    },
                    // 'render': function (data, type, full, meta){
                    //     // console.log(full);
                    //     if(full.role == 'Admin' || full.role == 'admin'){
                    //         return '';
                    //     }else{
                    //         // return '<input type="checkbox" class="dt-checkboxes">';
                    //         return '<div class="checkbox checkbox-fill d-inline"><input type="checkbox" name="checkbox-fill-1" class="dt-checkboxes" id="checkbox-fill-'+full.id+'"><label for="checkbox-fill-'+full.id+'" class="cr"></label></div>';
                    //     }
                    // }
                },
                // {
                //     targets: 1,
                //     'render': function (data, type, full, meta){
                //         console.log(full);
                //         var randomColor = Math.floor(Math.random()*16777215).toString(16);
                //         return '<span class="label text-white f-12" style="background:linear-gradient(-135deg, #1de9b6 0%, #'+randomColor+' 100%);">'+full.name+'</span>';
                //     }
                // }
            ],
            select: {
                style: 'multi', // 'single', 'multi', 'os', 'multi+shift'
                // selector: 'td:first-child',
            },
            @endcan

            @if(!auth()->user()->can('edit_categories') && !auth()->user()->can('delete_categories'))
                order: [[0, 'desc']],
            @elseif(auth()->user()->can('edit_categories') && auth()->user()->can('delete_categories'))
                order: [[1, 'desc']],
            @elseif(auth()->user()->can('edit_categories'))
                order: [[0, 'desc']],
            @elseif(auth()->user()->can('delete_categories'))
                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','.category_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, '.category_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