@include('new_layouts.header')

<style>
    .ms-2 {
        background: #fff !important;
    }

    .ti.ti-caret-right.text-white {
        color: #000 !important;
        font-size: 18px;
    }

    .ms-2 {
        background: blue;
    }

    i.ti.ti-pencil {
        color: white !important;
    }

    i.ti.ti-trash.text-white {
        color: white !important;
    }
    table.dataTable {
     box-shadow: #bbbbbb 0px 0px 5px 0px;
}
 thead {
     background-color: var(--theadColor);
}
 thead > tr, thead > tr > th {
     background-color: transparent !important;
     color: #fff  !important;
     font-weight: normal;
     text-align: start;
}
 table.dataTable thead th, table.dataTable thead td {
     border-bottom: 0px solid #111 !important;
}
 .dataTables_wrapper > div {
     margin: 5px;
}
 table.dataTable.display tbody tr.even > .sorting_1,
 table.dataTable.order-column.stripe tbody tr.even> .sorting_1,
 table.dataTable.display tbody tr.even,
 table.dataTable.display tbody tr.odd > .sorting_1,
 table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
 table.dataTable.display tbody tr.odd {
     background-color: #ffffff;
}
 table.dataTable thead th {
     position: relative;
     background-image: none !important;
}
 table.dataTable thead th.sorting:after,
 table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
     position: absolute;
     top: 12px;
     right: 8px;
     display: block;
     font-family: "Font Awesome\ 5 Free";
}
 table.dataTable thead th.sorting:after {
     content: "\f0dc";
     color: #ddd;
     font-size: 0.8em;
     padding-top: 0.12em;
}
 table.dataTable thead th.sorting_asc:after {
     content: "\f0de";
}
 table.dataTable thead th.sorting_desc:after {
     content: "\f0dd";
}
 table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
     background-color: #f2f2f2 !important;
     color: #000;
}
 tbody tr:hover {
     background-color: #f2f2f2 !important;
     color: #000;
}
 .dataTables_wrapper .dataTables_paginate .paginate_button.current,
 .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
     background: none !important;
     border-radius: 50px;
     background-color: var(--theadColor) !important;
     color:#fff !important
}
 .paginate_button.current:hover {
     background: none !important;
     border-radius: 50px;
     background-color: var(--theadColor) !important;
     color:#fff !important
}
 .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
 .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
     border: 1px solid #979797;
     background: none !important;
     border-radius: 50px !important;
     background-color: #000 !important;
     color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default;
    color: #fff !important;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}
</style>
<link rel="stylesheet" href="{{ asset('assets/css/datatables.min.css') }}">
<link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet"/>
@include('context_management.topbar')
<div class="row">
    <div class="col-md-6">
        <h2>{{ __('Manage Category') }}</h2>
    </div>
    {{-- <div class="col-md-6 float-end">
        @can('create categories')
            <a href="#" class="btn btn-sm btn-primary mb-3 floatrght" data-size="lg"
                data-url="{{ route('categories.create') }}" data-ajax-popup="true" data-bs-toggle="tooltip"
                title="{{ __('Create Category') }}" data-title="{{ __('Create Category') }}">
                <i class="ti ti-plus"></i>
            </a>
        @endcan
    </div> --}}
</div>

<div class="table-responsive">
    <table class="table table-vcenter card-table" width="100%" id="user_table">
        <thead>
            <tr>
                <th>{{ __('Name') }}</th>
                <th>{{ __('Date') }}</th>
                {{-- <th>{{ __('Action') }}</th> --}}

            </tr>
        </thead>
        
            <tbody>
                
        </tbody>
    </table>
</div>
</div>
</div>

@include('new_layouts.footer')
<script src="{{ asset('datatable/jquery.dataTables.min.js') }}"></script>
<script>
    $(document).on('keypress', function(e) {
        if (e.which == 13) {
            swal.closeModal();
        }
    });

    var tempcsrf = '{!! csrf_token() !!}';

        $(document).ready(function() {
            user_datatable();
        });

        function user_datatable() {
            $('#user_table').dataTable().fnDestroy();
            $('#user_table').DataTable({
                searching: true,
                ordering: true,
                dom: 'lfrtip',
                info: true,
                iDisplayLength: 10,
                lengthMenu: [
                    [10, 50, 100, -1],
                    [10, 50, 100, "All"]
                ],
                ajax: {
                    url: "{{ route('get_all_categories') }}",
                    data: {
                        _token: tempcsrf,
                    },
                    error: function(xhr, error, thrown) {
                       

                        setTimeout(function() {
                            // location.reload();
                        }, 2000);
                    }
                },
                columns: [
                    
                    { data: 'name',name: 'name',orderable: true,searchable: true },
                  
                    { data: 'created_at',name: 'created_at',orderable: true,searchable: true },
                    // { data: 'action',name: 'action',orderable: true,searchable: true }
                ]
            });
        }
     
        function category_delete(id) {
        swal.fire({
            title: "Delete?",
            icon: 'question',
            text: "Please ensure and then confirm!",
            type: "warning",
            showCancelButton: !0,
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel!",
            reverseButtons: !0
        }).then(function (e) {
            if (e.value === true) {
                var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                $.ajax({
                    type: 'DELETE',
                    url: "{{url('categories')}}/" + id,
                    data: {_token: CSRF_TOKEN},
                    dataType: 'JSON',
                    success: function (results) {
                        if (results.success === true) {
                            swal.fire("Done!", results.message, "success");
                            // refresh page after 2 seconds
                            user_datatable();
                        } else {
                            swal.fire("Error!", results.message, "error");
                        }
                    }
                });
            } else {
                e.dismiss;
            }

        }, function (dismiss) {
            return false;
        })
    }
</script>