$(document).ready(function () {
    var table = $('#cafe_management').DataTable({
        "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
            "<'table-responsive'tr>" +
            "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
        "oLanguage": {
            "oPaginate": {
                "sPrevious": '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                "sNext": '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>',
            },
            "sSearch": '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
            "sSearchPlaceholder": "Search...",
            "sLengthMenu": "Results :  _MENU_",
        },
        "stripeClasses": [],
        "lengthMenu": [[10, 20, 30, 40, 50], [10, 20, 30, 40, 50]],
        "pageLength": 10,
        processing: true,
        serverSide: true,
        ajax: {
            'type': 'POST',
            "url": getData,
            "data": function (d) {
                d.admin_approved = $('#admin-approved-filter').val(); // Add custom filter parameter
            }
        },
        columns: [
            { data: 'banner_image', name: 'banner_image', orderable: false, searchable: false },
            { data: 'cafe_name', name: 'cafe_name', orderable: false },
            { data: 'email', name: 'email', orderable: false },
            { data: 'phone', name: 'phone', orderable: false, searchable: false },
            { data: 'address', name: 'address', orderable: false, searchable: false },
            { data: 'status', orderable: false, searchable: false },
            { data: 'is_admin_approved', orderable: false, searchable: false },
            { data: 'action', orderable: false, searchable: false }
        ],
        order: [[1, '']],
        initComplete: function(settings, json) {
            var api = this.api();

            // Create and append the filter dropdown
            var filterHtml = '<div class="d-flex align-items-center mt-2"><label for="admin-approved-filter" class="form-label">Admin Approved:  </label>' +
                             '<select id="admin-approved-filter" class="form-control">' +
                             '<option value="">All</option>' +
                             '<option value="1">Approved</option>' +
                             '<option value="0">Not Approved</option>' +
                             '</select></div>';

            $('#cafe_management_filter').append(filterHtml);

            // Add change event to the filter
            $('#admin-approved-filter').on('change', function() {
                table.ajax.reload(); // Reload the table with the new filter value
            });
        }
    });

    // Custom filtering function
    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            var selectedValue = $('#admin-approved-filter').val();
            var adminApproved = data[6];

            if (selectedValue === "" || adminApproved === selectedValue) {
                return true;
            }
            return false;
        }
    );
});