@extends('layouts.training_centre_layout')

@section('content')

<x-page-header title="{{ $pageTitle }}" :backButton="true" />

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">

                <!-- Filter -->
                <div class="row mb-3">
                    <div class="col-md-4 col-12">
                        <label for="inboxFilter" class="form-label">Filter by Type</label>
                        <select name="inboxFilter" id="inboxFilter" class="form-input form-control">
                            <option value="ALL">All</option>
                            <option value="BATCH">Batch</option>
                            <option value="ASSESSMENTS">Assessment</option>
                        </select>
                    </div>
                </div>

                <!-- Datatable -->
                <div class="dt-responsive">
                    <table id="inbox-datatable" class="table table-striped table-bordered w-100">
                        <thead>
                            <tr>
                                <th>Sl. No.</th>
                                <th>Type Name</th>
                                <th>Send By</th>
                                <th>Message</th>
                                <th>Send On</th>
                                <th width="10%">Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>

@endsection

@section('pages-scripts')
<script>
    let inboxTable;

    function loadBatchesDatatable(type_filter = 'ALL') {

        if ($.fn.DataTable.isDataTable('#inbox-datatable')) {
            $('#inbox-datatable').DataTable().destroy();
        }

        inboxTable = $('#inbox-datatable').DataTable({
            processing: true,
            serverSide: true,
            ordering: false,
            scrollX: false,

            ajax: {
                url: "{{ route('centre.inbox.fetch-for-datatable') }}",
                type: "POST",
                data: function (d) {
                    d._token = $('meta[name="csrf-token"]').attr('content');
                    d.type_filter = type_filter;
                }
            },

            drawCallback: function () {
                $('.dropdown-toggle').dropdown({
                    boundary: 'window'
                });
            },

            columns: [
                {
                    data: null,
                    name: 'id',
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    data: 'type_name',
                    name: 'type_name'
                },
                {
                    data: 'send_by',
                    name: 'send_by'
                },
                {
                    data: 'message',
                    name: 'message'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    width: '12%'
                }
            ]
        });
    }

    $(document).ready(function () {

        // Initial load
        loadBatchesDatatable($('#inboxFilter').val());

        // Filter change
        $('#inboxFilter').on('change', function () {
            loadBatchesDatatable($(this).val());
        });

    });
</script>
@endsection