@extends('layouts.partner_layout')

@section('content')

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

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <!-- Course 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 class="col-md-4 col-12">
                        <label for="inboxFilter" class="form-label">Filter by Training Center</label>
                        <select name="inboxFilter" id="inboxFilter" class="form-input form-control">
                            <option value="1">All Training Centeres</option>
                            <!-- Add course options here -->
                        </select>
                    </div> --}}
                </div>
                <!-- Tab contents -->

                <!--  Reviews Tabs -->
                <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 = '') {
        if ($.fn.DataTable.isDataTable('#inbox-datatable')) {
            $('#inbox-datatable').DataTable().destroy();
        }

        inboxTable = $('#inbox-datatable').DataTable({
        processing: true,
        serverSide: true,
        ordering: false,
        scrollX: false,
        drawCallback: function() {
            $('.dropdown-toggle').dropdown({
                boundary: 'window'
            });
        },
        ajax: {
            url: "{{ route('partner.inbox.fetch-for-datatable') }}",
            type: "POST",
            data: function (d) {
                d._token = $('meta[name="csrf-token"]').attr('content');
                d.type_filter  = type_filter; // pass course filter
            }

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

    }

    $(document).ready(function() {
        // initial load
        loadBatchesDatatable();

        $('#inboxFilter').on('change', function() {
            let type_filter  = $(this).val();
            loadBatchesDatatable(type_filter);
        });

    });
</script>

@endsection