<script>
$(() => {
    let table = $(".datatable-module").attr('id');
    let dataTable = $(`#${table}`);
    const url = dataTable.attr('data-url');

    let dTable = dataTable.DataTable(
        $.extend(
        true,
        {},
        {
            "processing": true,
            "ordering": false,
            "serverSide": true,
            "ajax": {
                "url": url,
                "type": 'POST',
            },
            createdRow: function (row, data, dataIndex) {
                $(row).attr("data-slug", data.slug);
                $(row).attr("class", "select-slug");
            },
            order: [[1, "desc"]],
                columns: [
                    { data: "title", className: "align-middle" },
                    { data: "publish_date", className: "align-center" },
                ],
        }));

    $(`#${table} tbody`).on("click", "tr", function () {
        let url =  $(this).data("slug");
        $("#formMenu").find('input[name="tautan"]').val(url);
        hideModal('second-modal');
    });
});
</script>
<div class="modal fade" id="second-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content card-featured-primary">
            <header class="card-header header-elements">
                <div class="card-actions">
                    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <h5 class="card-title" id="second-modal-title"></h5>
            </header>
            <div class="modal-body" id="second-modal-body">
                <div class="table-responsive">
                    <table id="ArticleTable" data-module="article" data-url="{{ $dataTableUrl }}"
                        class="table datatable-module table-bordered table-striped datatable display" style="border-collapse:collapse; border-spacing: 0; width: 100%;">
                        <thead>
                            <th>@lang('lang.title')</th>
                            <th>@lang('lang.date_publish')</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="3" class="dataTables_empty text-center">
                                    {{ __('lang.loading_data_from_server') }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

