@extends('layouts.app')
@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection

@section('content')
@section('page_title')Whatsapp Account Category List @endsection

<div class="container-fluid">
@include('sms_templates.add_whatsapp_header')
    <div class="card-header flex justify-content-between">
        <h3>Whatsapp Accounts Category List </h3>
        @can('hasAddPermission')
        <div>
            <a href="{{url('addWhatsappCategory')}}" class="btn btn-sm btn-primary">Add Whatsapp Categories</a>
        </div>
        @endcan
    </div>

    <div class="card">
        <div class="card-body">
            <table class="table table-bordered table-hover text-center" id="whatsapp_categorytable">
                <thead>
                    <tr>
                        <th>S.no</th>
                        <th>Category</th>
                        <th>Account Name</th>
                        <th>Status</th>
                        <th>Created At</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="{{asset('js/jquery.dataTables.min.js')}}"></script>
<script>
    getWhatsappList();
    //    fetch all data in data-table
    function getWhatsappList() {
        $("#whatsapp_categorytable").DataTable().clear().destroy();
        $('#whatsapp_categorytable').DataTable({
            "processing": true,
            "serverSide": true,
            "paging": true,
            "searching": true,
            "ordering": true,
            "order": [
                [0, "desc"]
            ],
            "language": {
                search: '',
                searchPlaceholder: "Search...",
                processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw" style="margin-top:50px;"></i><span class="sr-only">Loading...</span> '
            },
            "ajax": {
                "url": "{{ url('getWhatsappCategory') }}",
                "dataType": "json",
                "type": "POST",
                "data": {
                    _token: "{{csrf_token()}}",
                },
            },
            aoColumns: [{
                    data: "id",
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    data: "category",
                    render: function(data, type, row, meta) {
                        return ((row.category) ? row.category : "NA")
                    }
                },
                {
                    data: "account_name",
                    render: function(data, type, row, meta) {
                        return ((row.account_name) ? row.account_name : "NA")
                    }
                },
                {
                    data: "status",
                    render: function(data, type, row, meta) {
                        let ret_data = `<p class="${row.status ==1 ? 'text-success' : 'text-danger'} m-0"> ${row.status ==1 ? 'Active' : 'In-Active'} </p>`;
                        return ret_data
                    }
                },
                {
                    data: "created_at",
                    render: function(data, type, row, meta) {
                        let inp = ``;
                        return ((row.created_at) ? row.created_at : "NA")
                    }
                },
            ]
        });
    }
</script>
@endsection