const datatable = $("#datatableRekapDashboard")

    datatable.bootstrapTable({
        url: "/dashboard/datatable/selesai",
        showColumns: true,
        showColumnsToggleAll: true,
        showRefresh: true,
        sortable: true,
        search: true,
        searchOnEnterKey: false,
        searchHighlight: true,
        pagination: true,
        serverSide:true,
        pageSize: 10,
        pageList: [10, 20, 30, 40, 50, 100, 200],
        cookie: true,
        cookieIdTable: "table_rma_ssc_id",
        icons: {
            refresh: "fas fa-sync-alt",   // atau ganti ke icon lain
            columns: "fas fa-th-large"
        },

        columns: [
            {
                title: "Action",
                field:'order_id',
                formatter: function(value, row) {
                    let buttons = ''
                    if(row?.status_order === "Lunas"){
                        buttons += `
                            <button class="btn btn-sm btn-warning text-dark" onclick="orderSelesai('${row.order_id}')">
                                        <i class="fa fa-utensils me-1"></i>
                                    </button>
                        `
                    }

                    return `
                        <div class="d-flex space-x">
                        ${buttons}
                        </div>
                    `;
                }
            },

            {
                title: "No.Order",
                field: 'no_order',
                sortable: true,
            },
             {
                title: "Status Pembayaran",
                field: 'status_order',
                sortable: true,
                formatter: function(value, row) {
                    const status = value;
                    let badgeClass = 'bg-secondary';
                    if (status === "Belum Bayar") {
                        badgeClass = 'bg-warning text-dark';
                    } else if (status === "Menunggu Konfirmasi Pembayaran") {
                        badgeClass = 'bg-primary';
                    } else if (status === "Lunas" || status === "Sudah Bayar") {
                        badgeClass = 'bg-success text-dark';
                    } else if(status === "Dibatalkan"){
                        badgeClass = 'bg-danger';
                    }
                   return `
                    <span class="badge ${badgeClass} px-3 py-1">${status}</span>
                    ${status === 'Dibatalkan' && row.note_dibatalkan ? `
                        <div class="text-danger small mt-1">
                            <i class="fa fa-info-circle"></i> ${row.note_dibatalkan}
                        </div>
                    ` : ''}
                `;
                }
            },
            {
                title: "Status Pesanan",
                formatter: function(value, row) {
                const progress = parseInt(row.progress) || 0;
                const total = row.total_detail || 0;
                const selesai = row.selesai_detail || 0;

                return `
                    <div class="text-center">
                        <div class="progress" style="height: 18px;">
                            <div class="progress-bar bg-success" role="progressbar"
                                style="width: ${progress}%;"
                                aria-valuenow="${progress}" aria-valuemin="0" aria-valuemax="100">
                                ${progress}%
                            </div>
                        </div>
                        <small class="text-muted">${selesai} / ${total} selesai</small>
                    </div>
                `;
            },
                sortable: true,
            },
            {
                title: "Pemesan",
                field:'nama_pemesan',
                sortable: true,
            },
            {
                title: "Tgl Pemesanan",
                field: 'entry_at',
                formatter: function(value, row) {
                        if (!row?.entry_at) return '-';

                        const date = new Date(row.entry_at);
                        return date.toLocaleString('id-ID', {
                            day: '2-digit',
                            month: 'short',   // Bisa diganti 'long' kalau mau 'Juli' bukan 'Jul'
                            year: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit',
                            hour12: false     // pakai format 24 jam
                        });
                    },
                sortable: true,
            },
            {
                title: "Kategori Customer",
                field: 'jenis_customer',
                sortable: true,
            },
            {
                title: "Total Harga Pesanan",
                field:'total_harga',
                formatter: function(value, row){
                    return 'Rp ' + parseInt(row.total_harga).toLocaleString('id-ID')
                }
            }

        ],
    });