@extends('session-notes.layout.app')

@push('css')
    <style>
        ul.nav-pills li.nav-item button.nav-link.active {
            background: #3c4448;
        }

        .nav-pills .nav-link {
            color: #3c4448;
            border: solid #3c4448 2px;
        }

        .form-check-input:checked {
            background-color: #3c4448;
            border-color: #3c4448;
        }

        .form-check-input:focus {
            border-color: #3f434a41;
            box-shadow: 0 1px 1px rgba(36, 35, 35, 0.075) inset, 0 0 8px rgba(36, 37, 36, 0.6);
            outline: 0 none;
        }
    </style>
@endpush

@section('content')
    <div class="col py-2">
        @include('session-notes.modal.goal-activity')
        @include('session-notes.modal.progress-notes')
        @include('session-notes.modal.goals')
        @include('session-notes.off-canvas.goal')
        @include('session-notes.modal.sign-modal')
        @include('session-notes.modal.send-for-signing')


        <ul id="myTab" class="nav nav-pills nav-fill mb-3" role="tablist">
            <li class="nav-item me-2" role="presentation">
                <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-selected="true">Pending<span class="badge text-bg-dark"></span></button>
            </li>
            <li class="nav-item me-2" role="presentation">
                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-pending" type="button" role="tab" aria-selected="false">Pending SignIn</button>
            </li>
            {{-- <li class="nav-item me-2" role="presentation">
                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-selected="false">SignOff</button>
            </li> --}}
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-completed" type="button" role="tab" aria-selected="false">Completed</button>
            </li>
        </ul>
        <hr>


        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane  fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
                <div class="">
                    <x-session-note.table :headers="['#', 'Patient Name', 'Appointment Date', 'Status', 'Action']" :data="'pendingTable'" />
                </div>
                <div id="categoryChart" hidden>
                    <canvas></canvas>
                </div>
            </div>
            <div class="tab-pane fade" id="pills-pending" role="tabpanel" aria-labelledby="pills-signIn-tab" tabindex="0">
                <div class="">
                    <x-session-note.table :headers="['#', 'Patient Name', 'Appointment Date', 'Status', 'Action']" :data="'signInTable'" />
                </div>
            </div>
            <div class="tab-pane fade" id="pills-completed" role="tabpanel" aria-labelledby="pills-completed-tab" tabindex="0">
                <div class="">
                    <x-session-note.table :headers="['#', 'Patient Name', 'Appointment Date', 'Status', 'Action']" :data="'completedTable'" />
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            $('#myTab').on('shown.bs.tab', function(e) {

                let tabId = $(e.target).attr('data-bs-target');

                //var tabPaneId = tabId.replace('#', '');

                $(tabId + ' .dataTable').DataTable().columns.adjust();
            });

            $('#load_goals_data_button').on('click', function() {
                let note_id = $('#note_id_daily').val();
                let appointment_date = $('#goal_date_range').val();
                let _user_id = $('#modal_user_id').val();
                let _url = "{{ route('progressGoalData-get') }}";
                $('#goals-table tbody').html('');
                $.ajax({
                    url: _url,
                    method: 'get',
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    data: {
                        note_id: note_id,
                        user_id: _user_id,
                        appointment_date: appointment_date
                    },
                    cache: false,
                    dataType: 'json',
                    success: function(goalResponse) {
                        try {
                            const tbody = document.getElementById('mainDiv'); //$('#goals-table tbody');
                        if (goalResponse && Object.keys(goalResponse).length > 0) {
                            for (let category in goalResponse) {
                                if (goalResponse.hasOwnProperty(category)) {
                                    let categoryGoals = goalResponse[category];
                                    let combinedData = {};
                                    for (let type in categoryGoals) {
                                        let types = categoryGoals[type];
                                        types.sort((a, b) => new Date(a.goal_date) - new Date(b.goal_date));

                                        types.forEach(col => {
                                            if (!combinedData[col.goal + col.type]) {
                                                combinedData[col.goal + col.type] = {
                                                    labels: [],
                                                    data: [],
                                                    type: '',
                                                    goal: '',
                                                    id: 0,
                                                    step: [],
                                                };
                                            }

                                            combinedData[col.goal + col.type].labels.push(col.goal_date);
                                            combinedData[col.goal + col.type].data.push(col.value);
                                            combinedData[col.goal + col.type].type = col.type;
                                            combinedData[col.goal + col.type].goal = col.goal;
                                            combinedData[col.goal + col.type].id = col.id;
                                            if (type == 'percentage') {
                                                combinedData[col.goal + col.type].step.push(col.value);
                                            } else if (type == 'bool') {
                                                if (combinedData[col.goal + col.type]?.data?.length > 0) {
                                                    let sum = combinedData[col.goal + col.type].data.reduce(function(accumulator, currentValue) {
                                                        return accumulator + parseInt(currentValue, 10);
                                                    }, 0);
                                                    combinedData[col.goal + col.type].step.push((col.value / sum * 100).toFixed(2));
                                                }
                                            } else {
                                                combinedData[col.goal + col.type].step.push(hh_mm_ss_to_epoch(col.value));
                                            }
                                        });
                                    }

                                    for (let uniqueGoal in combinedData) {
                                        try {
                                            //tbody.insertAdjacentHTML('beforeend', `<div class="col-9 max-height"><canvas id="canvas-${combinedData[uniqueGoal].id}"></canvas></div>`);
                                            $('#goals-table tbody').append(goalsTableRenderChart(combinedData[uniqueGoal]));
                                            if (combinedData[uniqueGoal].type == 'percentage') {
                                                $(`#percent-show-${combinedData[uniqueGoal].id}`).html(combinedData[uniqueGoal].step.slice(-1)[0]);
                                            } else if (combinedData[uniqueGoal].type == 'bool') {
                                                $(`#percent-show-${combinedData[uniqueGoal].id}`).html(combinedData[uniqueGoal].step.slice(-1)[0] + '%');
                                            } else {
                                                $(`#percent-show-${combinedData[uniqueGoal].id}`).html((combinedData[uniqueGoal].step.slice(-1)[0] / 1000) + ' seconds');
                                            }
                                            let ctxElements = document.getElementById(`canvas-${combinedData[uniqueGoal].id}`);
                                            let octx = ctxElements.getContext('2d');
                                            let scalesOptions = {};
                                            let tooltipOptions = {};
                                            if (combinedData[uniqueGoal].type === 'timer') {
                                                scalesOptions.y = {
                                                    ticks: {
                                                        callback: function(value, index, values) {
                                                            return epoch_to_hh_mm_ss(value);
                                                        },
                                                        stepSize: 30 * 60
                                                    }
                                                };
                                                tooltipOptions.tooltip = {
                                                    callbacks: {
                                                        label: function(context) {
                                                            return context.dataset.label + ': ' + epoch_to_hh_mm_ss(context.parsed.y);
                                                        }
                                                    }
                                                }
                                            }
                                            categoryChart = new Chart(octx, {
                                                type: 'line',
                                                data: {
                                                    labels: combinedData[uniqueGoal].labels ? combinedData[uniqueGoal].labels : ['0'],
                                                    datasets: [{
                                                        label: combinedData[uniqueGoal].goal,
                                                        data: combinedData[uniqueGoal].step ? combinedData[uniqueGoal].step : [0],
                                                        pointRadius: 5,
                                                        pointHoverRadius: 15
                                                    }],
                                                },
                                                options: {
                                                    responsive: true,
                                                    maintainAspectRatio: false,
                                                    aspectRatio: 2,
                                                    scales: scalesOptions,
                                                    plugins: tooltipOptions,
                                                }
                                            });
                                        } catch (error) {
                                            console.error("Error creating chart:", error);
                                        }
                                    }
                                }
                            }
                        }
                            //$('#goals-table tbody').html(goalsTableRender(goalResponse));

                            /* if (goalResponse && Object.keys(goalResponse).length > 0) {
                                for (let category in goalResponse) {
                                    if (goalResponse.hasOwnProperty(category)) {
                                        let categoryGoals = goalResponse[category];
                                        categoryGoals.forEach(col => {
                                            let cLabel = [];
                                            let cData = [];
                                            if (col.trials.length > 0) {
                                                if (col.type == 'bool') {
                                                    col.trials.map(function(trial) {                                                   
                                                        cLabel.push(moment(trial.created_at).format('MMM DD, YYYY'));
                                                        cData.push(trial?.step_value);
                                                        $(`#ul-percent-each-${col.id}`).append(`<li class="list-group-item text-light bg-secondary m-1" value="${trial?.value}">${trial?.value}</li>`);
                                                    });
                                                    let _li_length = 0;
                                                    let _total_of_li = 0;
                                                    _li_length = $(`#ul-percent-each-${col.id} li`).length;
                                                    $(`#ul-percent-each-${col.id} li`).each(function() {
                                                        _total_of_li += parseInt($(this).val());
                                                    });
                                                    $(`#percent-show-${col.id}`).html((_total_of_li / _li_length * 100).toFixed(2) + '%');
                                                } else if (col.type == 'percentage') {
                                                    col.trials.map(function(trial) {
                                                        cLabel.push(moment(trial.created_at).format('MMM DD, YYYY'));
                                                        cData.push(trial?.cumulative_value);
                                                        $(`#ul-percent-each-${col.id}`).append(`<li class="list-group-item text-light bg-secondary m-1" value="${trial?.value}">${trial?.value}</li>`);
                                                    });
                                                    let _total_of_plus = 0;
                                                    let _total_of_minus = 0;
                                                    $(`#ul-percent-each-${col.id} li`).each(function() {
                                                        if ($(this).val() > 0) {
                                                            _total_of_plus += $(this).val();
                                                        } else {
                                                            _total_of_minus += $(this).val();
                                                        }
                                                    });
                                                    $(`#percent-show-${col.id}`).html(`${_total_of_plus} , ${_total_of_minus}`);
                                                } else {
                                                    col.trials.map(function(trial) {
                                                        cLabel.push(moment(trial.created_at).format('MMM DD, YYYY'));
                                                        cData.push(hh_mm_ss_to_epoch(trial?.value));
                                                        $(`#ul-percent-each-${col.id}`).append(`<li class="list-group-item text-light bg-secondary m-1" value="${trial?.value}">${trial?.value}</li>`);
                                                    });
                                                    let _li_length = 0;
                                                    let _total_of_li = 0;
                                                    $(`#ul-percent-each-${col.id} li`).each(function(key, val) {
                                                        _total_of_li += hh_mm_ss_to_epoch($(this).text());
                                                    });
                                                    _li_length = $(`#ul-percent-each-${col.id} li`).length;
                                                    let _avg_time = ((_total_of_li / _li_length) / 1000).toFixed(2);
                                                    $(`#percent-show-${col.id}`).html(_avg_time + ' seconds');
                                                }
                                            } else {
                                                cLabel = ['0'];
                                                cData = [0];
                                                $(`#percent-show-${col.id}`).html('0');
                                            }
                                            let ctxElements = document.getElementById('canvas-' + col.id);
                                            let octx = ctxElements.getContext('2d');
                                            let scalesOptions = {};
                                            let tooltipOptions = {};
                                            if (col.type === 'timer') {
                                                scalesOptions.y = {
                                                    ticks: {
                                                        callback: function(value, index, values) {
                                                            return epoch_to_hh_mm_ss(value);
                                                        },
                                                        stepSize: 30 * 60
                                                    }
                                                };
                                                tooltipOptions.tooltip = {
                                                    callbacks: {
                                                        label: function(context) {
                                                            return context.dataset.label + ': ' + epoch_to_hh_mm_ss(context.parsed.y);
                                                        }
                                                    }
                                                }
                                            }
                                            categoryChart = new Chart(octx, {
                                                type: 'line',
                                                data: {
                                                    labels: cLabel ? cLabel : ['0'],
                                                    datasets: [{
                                                        label: col?.goal,
                                                        data: cData ? cData : [0],
                                                        pointRadius: 5,
                                                        pointHoverRadius: 15
                                                    }],
                                                },
                                                options: {
                                                    responsive: true,
                                                    maintainAspectRatio: false,
                                                    aspectRatio: 2,
                                                    scales: scalesOptions,
                                                    plugins: tooltipOptions,
                                                }
                                            });
                                        });
                                    }
                                }
                            } */
                        } catch (error) {
                            console.error(error);
                        }
                    },
                    error: function(xhr, status, error) {
                        iziToastError(error + ' or ' + xhr?.responseText);
                    }
                });
            });
        });

        dataTableInitialize();

        function dataTableInitialize() {


            $('.dataTable').each(function() {
                let _dataUrl = "";
                let _tableId = $(this).attr("id");

                if (_tableId === "pendingTable") {
                    _dataUrl = "{{ route('session-notes.daily-notes.data') }}";
                } else if (_tableId === "signInTable") {
                    _dataUrl = "{{ route('session-notes.daily-notes.pending') }}";
                } else if (_tableId === "completedTable") {
                    _dataUrl = "{{ route('session-notes.daily-notes.completed') }}";
                }

                $('#' + _tableId).DataTable({
                    dom: 'Bfrtip',
                    /* buttons: [
                        
                        'pageLength', 'pdf', 'excelHtml5', 'print',
                       
                    ], */
                    buttons: {
                        dom: {
                            button: {
                                tag: 'button',
                                className: ''
                            }
                        },
                        buttons: [{
                            extend: 'pageLength',
                            className: 'btn  btn-secondary',
                        }, {
                            extend: 'pdf',
                            className: 'btn  btn-secondary',
                            titleAttr: 'PDF',
                            text: '<i class="fa-solid fa-file-pdf"></i>',
                        }, {
                            extend: 'excelHtml5',
                            className: 'btn  btn-secondary',
                            titleAttr: 'Excel',
                            text: '<i class="fa-regular fa-file-excel"></i>',
                        }, {
                            extend: 'print',
                            className: 'btn  btn-secondary',
                            titleAttr: 'Print',
                            text: '<i class="fa-solid fa-print"></i>',
                        }]
                    },

                    "processing": true,
                    "serverSide": true,
                    "bDestroy": true,
                    "ordering": true,
                    "responsive": true,
                    "sScrollX": '100%',
                    "sScrollXInner": "100%",
                    "autoWidth": true,
                    "pagingType": "simple_numbers",
                    "paging": true,
                    "lengthMenu": [
                        [15, 25, 50],
                        [15, 25, 50]
                    ],
                    "order": [
                        [0, 'desc']
                    ],
                    "ajax": {
                        "type": "GET",
                        "contentType": "application/json",
                        "dataType": "json",
                        "url": _dataUrl,
                        "headers": {
                            'X-CSRF-TOKEN': "$('meta[name='csrf-token']').attr('content')",
                        },
                    },
                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'id'
                        },
                        {
                            data: 'user.name',
                            //name: 'name',
                            searchable: true
                        },
                        {
                            data: 'appointment_date',
                            //name: 'appointment_date',
                            searchable: true,
                            render: function(data, type, row) {
                                data = '<div class="badge text-bg-secondary">' + (data ? moment(data, 'YYYY-MM-DD').format('DD-MMM-YYYY') : null) + '</div>';
                                return data;
                            }
                        },
                        {
                            data: 'appointment_status',
                            name: 'status',
                            render: function(data, type, row) {
                                data = '<div class="badge adjust-text" style="background:' + data.color_code + '">' + data.name + '</div>';
                                return data;
                            }
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        },
                    ],
                    "columnDefs": [{
                        "targets": 1,
                        className: 'text-capitalize'
                    }],
                    "initComplete": function() {
                        textAdjust();
                    }
                });
            });

        }

        var categoryChart = null;


        function show(appointment_id, user_id = null) {
            let _url = "{{ route('daily-notes.show') }}" + "/" + appointment_id + "/" + user_id;
            $('#appointment_id_daily').val(appointment_id);
            $('#modal_user_id').val(user_id);
            $('#patient_id_daily').val(user_id);
            $('#goals-table tbody').html('');

            $.ajax({
                url: _url,
                method: 'get',
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(showResponse) {
                    $('#note_id_daily').val(showResponse.notes.id);
                    $('#patient_name_modal').html('Patient Name: ' + (showResponse.notes.appointment?.user?.name ?? 'Not Available'));
                    $('#diagnoses').val(showResponse.notes.diagnoses);
                    $('#patient_history').val(showResponse.notes.patient_history);
                    $('#outcome_measures').val(showResponse.notes.outcome_measures);
                    $('#test_measures').val(showResponse.notes.test_measures);
                    $('#area_of_occupation').val(showResponse.notes.area_of_occupation);
                    $('#clinical_impressions').val(showResponse.notes.clinical_impressions);
                    $('#goal_object_notes').val(showResponse.notes.goal_object_notes);
                    try {
                        switch (showResponse?.notes?.note_status_id) {
                            case 1:
                                $("#send-for-signin").attr("disabled", false);
                                $("#add-goal-btn").attr("disabled", false);
                                $("#mark-completed").attr("disabled", true);
                                $('.edit-btn').removeClass("disabled");
                                break;
                            case 3:
                                $("#send-for-signin").attr("disabled", true);
                                $("#add-goal-btn").attr("disabled", false);
                                $("#mark-completed").attr("disabled", false);
                                $('.edit-btn').removeClass("disabled");
                                break;
                            case 2:
                                $("#send-for-signin").attr("disabled", true);
                                $("#mark-completed").attr("disabled", true);
                                $("#add-goal-btn").attr("disabled", true);
                                $('.edit-btn').addClass("disabled");
                                break;
                            default:
                                $("#send-for-signin").attr("disabled", false);
                                $("#add-goal-btn").attr("disabled", false);
                                $("#mark-completed").attr("disabled", true);
                                $('.edit-btn').removeClass("disabled");
                                break;
                        }
                        $.each(showResponse?.notes?.supervisors, (index, val) => {
                            $('#appointment_contributors').val(function(_, currentValue) {
                                return [...currentValue, val?.supervisor_id];
                            });
                        });
                        $('#appointment_date').flatpickr({
                            enableTime: false,
                            dateFormat: "Y-m-d"
                        }).setDate(((showResponse?.notes?.appointment.appointment_date ?? '01-01-1990')), true, 'Y-m-d');
                        $('#appointment_start_time').flatpickr({
                            enableTime: true,
                            altInput: true,
                            altFormat: 'h:i K',
                            noCalendar: true,
                            dateFormat: "H:i",
                            time_24hr: false
                        }).setDate(((showResponse?.notes?.appointment.start_time ?? '00:00')), true, 'H:i');
                        $('#appointment_end_time').flatpickr({
                            enableTime: true,
                            altInput: true,
                            altFormat: 'h:i K',
                            noCalendar: true,
                            dateFormat: "H:i",
                            time_24hr: false
                        }).setDate(((showResponse?.notes?.appointment.end_time ?? '00:00')), true, 'H:i');
                        $('#appointment_contributors').selectpicker('refresh');
                        $('#plan_of_treatment').val(JSON.parse(showResponse.notes.performance_skills)?.performance_skills_plan_of_treatment);
                        $('#take_home_activity').val(JSON.parse(showResponse.notes.performance_skills)?.performance_skills_take_home_activity);
                        $('#plan_of_treatment_pi').val(JSON.parse(showResponse.notes.planned_interventions)?.planned_interventions_plan_of_treatment);
                        $('#take_home_activity_pi').val(JSON.parse(showResponse.notes.planned_interventions)?.planned_interventions_take_home_activity);
                    } catch (error) {
                        console.error('Error parsing JSON:', error);
                    }

                    $('#activities-table tbody').html(activityTableRender(showResponse.notes.goal_therapy_activities));
                    //updateProgressGoalsModalAndTable();
                    updateGoalsModalAndTable();
                },
                error: function(xhr, status, error) {
                    iziToastError(error + ' unable to load response');
                }
            });
        }

        function activityTableRender(jsonString) {
            let tr = '';
            try {
                const parsedObject = JSON.parse(jsonString);
                parsedObject.forEach(col => {
                    tr += '<tr>';
                    tr += '<td contenteditable="true" oninput="showSuggestionsTd(this)" onblur="hideSuggestionsTd(this)">' + col[0] + '</td>';
                    tr += '<td contenteditable="true">' + col[1] + '</td>';
                    tr += '<td contenteditable="true">' + col[2] + '</td>';
                    tr += '<td contenteditable="true">' + col[3] + '</td>';
                    tr += '<td contenteditable="true"><a href="javascript:void(0)" class="btn text-danger" onclick="removeTableRow(this);"><i class="fa-solid fa-xmark"></i></a></td>';
                    tr += '</tr>';
                });
                return tr;
            } catch (error) {
                tr += '<tr>';
                tr += '<td contenteditable="true" oninput="showSuggestionsTd(this)" onblur="hideSuggestionsTd(this)">No Data</td>';
                tr += '<td contenteditable="true"></td>';
                tr += '<td contenteditable="true"></td>';
                tr += '<td contenteditable="true"></td>';
                tr += '<td contenteditable="false"><a href="javascript:void(0)" class="btn text-danger" onclick="removeTableRow(this);"><i class="fa-solid fa-xmark"></i></a></td>';
                tr += '</tr>';
                return tr;
            }
        }

        function goalsTableRender(goalsData) {
            let tr = '';

            if (goalsData && Object.keys(goalsData).length > 0) {
                for (let category in goalsData) {
                    if (goalsData.hasOwnProperty(category)) {
                        let categoryGoals = goalsData[category];
                        tr += '<tr>';
                        tr += '<th colspan="5">' + (category ? category : 'Short Term') + '</th>';
                        tr += '</tr>';
                        if (typeof(categoryGoals) == 'object') {
                            categoryGoals.forEach(col => {
                                console.log(col)
                                tr += '<tr>';
                                tr += '<td>' + col?.goal + `<div clss="d-flex">(<cite  id="percent-show-${col?.id}" title="" class="text-danger">0%</cite>)</div>` + '</td>';
                                switch (col?.type) {
                                    case 'bool':
                                        tr += yesNoTemplateFun(col);
                                        break;
                                    case 'percentage':
                                        tr += percentTemplateFun(col);
                                        break;
                                    case 'timer':
                                        tr += timerTemplateFun(col);
                                        break;
                                    default:
                                        tr += '<td>Null Type</td>';
                                        break;
                                }
                                tr += '<td><a class="btn" data-bs-toggle="collapse" href="' + `#collapse-${col?.id}` + '" role="button"><i class="fa-solid fa-chart-simple"></i></a></td>';
                                tr += '<td><a href="javascript:void(0)" type="button" title="remove" onclick="removeGoal(' + col?.id + ', this);" class="text-danger"><i class="fa-solid fa-xmark"></i></a>';
                                tr += '<a href="javascript:void(0)" type="button" title="move to archive" onclick="archiveGoal(' + col?.id + ', this);" class="ms-2 text-success"><i class="fa-solid fa-box-archive"></i></a></td>';
                                tr += '</tr>';
                                tr += '<tr><td colspan="5"><div class="collapse" id="' + `collapse-${col?.id}` + '">';
                                tr += '<div>';
                                tr += '<canvas id="' + `canvas-${col?.id}` + '" class="w-100 h-35"></canvas>';
                                tr += '</div>';
                                tr += '<ul id="' + `ul-percent-each-${col?.id}` + '" class="list-group list-group-horizontal overflow-auto" style="max-width: 50vw;"></ul>';
                                tr += '</div></td></tr>';
                            });
                        }
                    }
                }
            } else {
                tr += '<tr>';
                tr += '<td colspan="5">No Data</td>';
                tr += '</tr>';

            }
            return tr;
        }

        function goalsTableRenderChart(goalsData, id) {
            let tr = '';
            tr += '<tr>';
            tr += '<td>' + goalsData?.goal + `<div clss="d-flex">(<cite  id="percent-show-${goalsData?.id}" title="" class="text-danger">0</cite>)</div>` + '</td>';

            tr += '<td><a class="btn" data-bs-toggle="collapse" href="' + `#collapse-${goalsData?.id}` + '" role="button"><i class="fa-solid fa-chart-simple"></i></a></td>';
            tr += '</tr>';
            tr += '<tr><td colspan="5"><div class="collapse" id="' + `collapse-${goalsData?.id}` + '">';
            tr += '<div>';
            tr += '<canvas id="' + `canvas-${goalsData?.id}` + '" class="w-100 h-35"></canvas>';
            tr += '</div>';
            tr += '</div></td></tr>';
            return tr;
        }
    </script>
@endpush