@extends('admin.layouts.master-admin')
@section('title', 'Categories')
@section('content')
    @include('admin.components.content-header', ['title' => 'Categories'])
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <form action="" method="get" id="form-filter">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Categories</h3>
                            </div>
                            <div class="card-body table-responsive p-0" style="max-height: 740px">
                                <table class="table table-hover table-head-fixed text-nowrap" id="data-datatables">
                                    <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Name</th>
                                        <th>Display name</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    @include('admin.modals.update-meta-tags')

@endsection
@section('script')
    <script src="{{ asset('/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('/datatables/script.js') }}"></script>

    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var oTable = dataTables('{!! route('categories.datatables') !!}', [
            {data: 'id', name: 'id', width: "7%", "className": "text-center"},
            {data: 'name', name: 'name', "className": "text-center"},
            {data: 'display_name', name: 'display_name', "className": "text-center"},
            {data: 'is_active', name: 'is_active', "className": "text-center",searchable: false},
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false,
                "className": "text-center",
                width: "11%",
            }
        ]);

        $('body').on('click', '.active-item', function (e) {
            var status = ( $(this).is(':checked') ) ? true : false;
            var id = $(this).data('id');
            var link = $(this).data('link');
            $.ajax({
                url: `${link}`,
                method: 'PATCH',
                dataType: 'JSON',
                data: {status: status === true ? 1 : 0},
                success: function (res) {
                    if (res.status === 200) {
                        Swal.fire(
                            'Success!',
                            ``,
                            'success'
                        )
                    } else {
                        Swal.fire(
                            'Error!',
                            ``,
                            'error'
                        )
                        $(this).prop('checked', !event.target.checked);
                    }
                },
                error: function (request) {
                    Swal.fire(
                        `${request.status}`,
                        `${request.statusText}`,
                        'error'
                    );
                }
            })
        })

        // $("#data-datatables_filter").hide();
        $('#search-form').on('submit', function (e) {
            oTable.draw();
            e.preventDefault();
        });
     </script>
@endsection