@yield('menuVariables')

<script>
    var element = document.getElementById(menuItemName);
    element.classList.add("active");

    function CreateTableWithSearch(tableName, searchName) {
        var table = $("#"+tableName);
        var datatable = table.DataTable();

        const searchBar = document.getElementById(searchName);
        searchBar.addEventListener('keyup', logKey);

        function logKey(e) {
            datatable.search(e.target.value).draw();
        }  
    }

    function AddDeleteFunctionToRows(tableName, column_index) {
        var table = document.querySelector('#' + tableName);
        const deleteButtons = table.querySelectorAll('[data-action="delete_row"]');

        deleteButtons.forEach(d => {
            // Delete button on click
            d.addEventListener('click', function (e) {
                e.preventDefault();

                // Select parent row
                const parent = e.target.closest('tr');

                // Get customer name
                const customerName = parent.querySelectorAll('td')[column_index].innerText;               

                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
                Swal.fire({
                    html: "Ești sigur că vrei să ștergi înregistrarea <b>" + customerName + "</b>?",
                    icon: "warning",
                    showCancelButton: true,
                    buttonsStyling: false,
                    confirmButtonText: "Da, șterge!",
                    cancelButtonText: "Nu, anulează",
                    customClass: {
                        confirmButton: "btn fw-bold btn-danger",
                        cancelButton: "btn fw-bold btn-active-light-primary"
                    }
                }).then(function (result) {
                    if (result.value) {
                        document.location.href = d.getAttribute('href');
                    } 
                });
            })
        });
    }

    function CreateChart(elementname, items) {
        
        var e = document.getElementById(elementname);
        if (e) {
            var t = {
                    size: e.getAttribute("data-kt-size") ? parseInt(e.getAttribute("data-kt-size")) : 90,
                    lineWidth: e.getAttribute("data-kt-line") ? parseInt(e.getAttribute("data-kt-line")) : 11,
                    rotate: e.getAttribute("data-kt-rotate") ? parseInt(e.getAttribute("data-kt-rotate")) : 145,
                },
                a = document.createElement("canvas"),
                r = document.createElement("span");
            "undefined" != typeof G_vmlCanvasManager && G_vmlCanvasManager.initElement(a);
            var i = a.getContext("2d");
            (a.width = a.height = t.size), e.appendChild(r), e.appendChild(a), i.translate(t.size / 2, t.size / 2), i.rotate((t.rotate / 180 - 0.5) * Math.PI);
            var o = (t.size - t.lineWidth) / 2,
                s = function (e, t, a) {
                    (a = Math.min(Math.max(0, a || 1), 1)), i.beginPath(), i.arc(0, 0, o, 0, 2 * Math.PI * a, !1), (i.strokeStyle = e), (i.lineCap = "round"), (i.lineWidth = t), i.stroke();
                };
            //s("#E4E6EF", t.lineWidth, 1), s(KTUtil.getCssVariableValue("--bs-danger"), t.lineWidth, 100 / 150), s(KTUtil.getCssVariableValue("--bs-primary"), t.lineWidth, 0.4);
            s("#E4E6EF", t.lineWidth, 1)
            //s(KTUtil.getCssVariableValue("--bs-danger"), t.lineWidth, 0.7)
            //s(KTUtil.getCssVariableValue("--bs-primary"), t.lineWidth, 0.5)

            var last_proc_position = 1;
            items.forEach(item => {
                s(item.color, t.lineWidth, last_proc_position);
                last_proc_position = last_proc_position - item.proc;
              });
        }
    }
</script>