Key invalid, please update app.
        </body>
<script>

    /*
     * Editor client script for DB table reps_budget
     * Created by http://editor.datatables.net/generator
     */

    addEventListener("DOMContentLoaded", function () {
        const chart = new Chart("chart", {
            plugins: [ChartDataLabels],
            options: {

                color: '#000',

                plugins: {
                    datalabels: {
                        color: '#000',
                        anchor:'center',
                        backgroundColor: "#f0f0f0",
                        formatter: function(value, context) {
                            return context.chart.data.labels[context.dataIndex] + ': ' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");;
                        },
                        labels: {
                            title: {
                                font: {
                                    size: 15,
                                    family: 'Segoe UI',
                                }
                            },
                        }
                    }
                },
            },
            type: 'doughnut',

        });

        function addData(chart, newData) {
            chart.data = newData;

            chart.update();
        }




        const urlParams = new URLSearchParams(window.location.search);
        const key = urlParams.get('key'); // Get the 'key' parameter value
        const id = urlParams.get('id');   // Get the 'id' parameter value
        const ajaxUrl = `php/table.reps_budget.php?key=${key}&id=${id}`;

        var status = [
            {label: '', value: '' },
            {label: 'Appointment made', value: 'appointment_made' },
            {label: 'Second visit', value: 'second' },
            {label: 'Won', value: 'won' },
            {label: 'Lost', value: 'lost'}
        ];

        var brand = [
            {label: '', value: '' },
            {label: 'EUROSTAR', value: 'EUROSTAR' },
            {label: 'HVPOLO', value: 'HVPOLO' },
            {label: 'IR', value: 'IR' },
        ];

        var isAdmin = 0
        var reps = null
        var editor = new DataTable.Editor( {
            ajax: ajaxUrl,
            table: '#reps_budget',
            fields: [
                {
                    "label": "Debtor Name:",
                    "name": "debtor_extended"
                },
                            {
                    "label": "Brand:",
                    "name": "brand",
                    "type": "select",
                    options: brand
                },
                {
                    "label": "City:",
                    "name": "city"
                },
                {
                    "label": "AW25 Fashion + Acc:",
                    "name": "aw25_fashion__acc",
                    attr: {
                        type: "number",
                        inputmode:"numeric"
                    }
                },
                {
                    "label": "AW25 Horsegear:",
                    "name": "aw25_horsegear",
                    attr: {
                        type: "number",
                        inputmode:"numeric"
                    }
                },
                {
                    "label": "Status:",
                    "name": "status",
                    type: "select",
                    options:status
                }
            ]});

        var openVals;
        editor
            .on( 'preSubmit', function ( e, data, action) {
                openVals = JSON.stringify( editor.get() );
                $.each(data.data, function (key, values) {
                    data.data[key]['total_aw25_pre_orders'] = 0;
                    const keys = Object.keys(values);
                    $.each(keys, function (field, value) {

                        if(value.includes('aw25') && value !== 'total_aw25_pre_orders'){
                            data.data[key]['total_aw25_pre_orders'] += parseInt(values[value], 10);
                        }
                    });
                });
            })
            .on( 'preBlur', function ( e ) {
                var edit=  JSON.stringify( editor.get() );
                if ( openVals !== JSON.stringify( editor.get() ) ) {
                    this.submit();
                }
            });




        var table = new DataTable('#reps_budget', {
            ajax: ajaxUrl,
            pageLength: 100,
            columns: [
                {
                    "data": "debtor_extended"
                },
                {
                    "data": "city"
                },
                                {
                    "data": "brand",
                },
                {
                    "data": "ss24_main_eq_",
                    render: DataTable.render.number('.', null, 0, '')
                },
                {
                    "data": "aw24_main_eq",
                    render: DataTable.render.number('.', null, 0, '')
                },
                {
                    "data": "ss25_fashion__acc",
                    render: DataTable.render.number('.', null, 0, '')
                },
                {
                    "data": "ss25_horsegear",
                    render: DataTable.render.number('.', null, 0, '')
                },
                {
                    "data": "total_ss25_pre_orders",
                    render: DataTable.render.number('.', null, 0, '')
                },
                {
                    "data": "aw25_fashion__acc",
                    render: DataTable.render.number('.', null, 0, '')
                },
                {
                    "data": "aw25_horsegear",
                    render: DataTable.render.number('.', null, 0, '')
                },
                {
                    "data": "total_aw25_pre_orders",
                    render: DataTable.render.number('.', null, 0, '')
                },
                {
                    "data": "status",
                    'render': function (data, type, row) {
                        $key = status.find(o => o.value === data)
                        return $key ? status.find(o => o.value === data).label: '';
                    }
                },
                {
                    "data": "result",
                    render: DataTable.render.number('.', null, 0, '')
                },
            ],
            layout: {
                topStart: {
                    pageLength: {
                        menu: [100, 500, 1000]
                    },
                    buttons: [
                        { extend: 'create', editor: editor },
                        { extend: 'edit', editor: editor },
                                                {
                            text: 'Show all',
                            className:'showall',
                            enabled: false,
                            action: function ( e, dt, node, config ) {
                                dt.search('').draw();

                                table.button('.showall').disable(true);
                            }
                        }
                    ],
                    searchPanes: {
                        initCollapsed: true,
                    }
                }
            },
            select: true,
            "columnDefs": [
                { searchable: true, targets: [0,1,2] },
                { searchable: false, targets: ['_all'] },

                { className: 'customer', targets: [0,1] },
                { className: 'edit editable', targets: [8,9,11] },
                                {
                    searchPanes: {
                        show: false
                    },
                    targets: ['_all']
                },
            ],
            search: {
                search: id?id:''
            },
            drawCallback: function() {
                if($("#reps_budget_wrapper input").val() != ''){
                    let api = this.api();
                    api.button(3).enable(true);
                };



            },
            footerCallback: function (row, data, start, end, display) {
                let api = this.api();

                // Remove the formatting to get integer data for summation
                let intVal = function (i) {
                    return typeof i === 'string'
                        ? i.replace(/[\$,]/g, '') * 1
                        : typeof i === 'number'
                            ? i
                            : 0;
                };

                // Total over all pages
                totalBudget = api
                    .column(isAdmin ? 11 : 9)
                    .data()
                    .reduce((a, b) => intVal(a) + intVal(b), 0);

                // Total over this page
                pageTotalBudget = api
                    .column(isAdmin ? 11 : 10, {page: 'current'})
                    .data()
                    .reduce((a, b) => intVal(a) + intVal(b), 0);

                // Update footer
                api.column(isAdmin ? 11 : 10).footer().innerHTML =
                    '€ ' + pageTotalBudget + ' (€ ' + totalBudget + ' total)';


                // Total over all pages
                total = api
                    .column(isAdmin ? 13 : 12)
                    .data()
                    .reduce((a, b) => intVal(a) + intVal(b), 0);

                // Total over this page
                pageTotal = api
                    .column(isAdmin ? 13 : 12, {page: 'current'})
                    .data()
                    .reduce((a, b) => intVal(a) + intVal(b), 0);

                // Update footer
                api.column(isAdmin ? 13 : 12).footer().innerHTML =
                    '€ ' + pageTotal + ' (€ ' + total + ' total)';

                const data_pie = {
                    labels: [
                        'This page',
                        'Other',
                    ],
                    datasets: [{
                        label: 'Budget',
                        data: [pageTotalBudget, totalBudget-pageTotalBudget],
                        backgroundColor: [
                            '#5b8116',
                            'rgb(54, 162, 235)',
                        ],
                        hoverOffset: 4
                    }


                    ]
                };


                addData(chart,data_pie);



            },

        });




        // Activate an inline edit on click of a table cell
        table.on('click', 'tbody td.editable', function (e) {
            editor.inline(this, {
                submit: 'allIfChanged'
            });
        });





    });

</script>

<style>

    td.customer {
        font-style: italic;
    }

    td.edit.editable {
        background-color: #5b8116 !important;
        color:#fff;
    }
</style>
</html>