{% extends "base.twig" %}

{% block resources %}
    <link href={{asset('dist/css/CaseView.css')}} rel="stylesheet">
    <link href={{asset('dist/css/mapReport.css')}} rel="stylesheet">

    <!-- DataTables -->
    <link href={{asset('bower_components/datatables/media/css/jquery.dataTables.min.css')}}>
{% endblock %}

{% block nav %}
    {% if is_granted('ROLE_LOGIN') and (is_granted('ROLE_REPORTS') or is_granted('ROLE_REPORTS.READ')) %}
        <li id="sync-report-nav-item" class="nav-item active">
            <a class="nav-link" href="#" data-toggle="collapse" data-target="#collapseSyncReport"
               aria-expanded="true" aria-controls="collapseSyncReport">
                <i class="fas fa-fw fa-table"></i>
                <span>Sync Report</span>
            </a>
             <div id="collapseSyncReport" class="collapse show" aria-labelledby="headingTwo" data-parent="#side-menu">
                <div class="hide-if-empty bg-white collapse-inner rounded" id="sync-report-dictionaries"></div>
            </div>
        </li>
        <li id="map-report-nav-item" class="nav-item">
            <a class="nav-link collapsed" href="{{ path('map-report') }}" data-toggle="collapse" onclick={window.location.href="{{ path('map-report') }}";}>
                <i class="fas fa-fw fa-table"></i>
                <span>Map Report</span>
            </a>
        </li>
    {% endif %}
{% endblock %}
{# nav #}

{% block modal %}
    <!-- Import progress modal -->
    <div id="main-progress-modal" class="modal" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header"><h4>Processing....</h4>
                    <div class="progress">
                        <div style="width:0%" class="progress-bar progress-bar-striped progress-bar-animated"
                             role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="2">
                            <div class="progressText">0% Complete</div>
                        </div>
                    </div>
                    <!-- /.progress -->
                </div>
                <!-- /.modal-header -->
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.main-progress-modal -->

    <div id="pointInfoModal" class="modal fade" role="dialog" aria-labelledby="pointInfoModalLabel">
        <div class="modal-dialog modal-lg" style = "width: 80%">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="pointInfoModalLabel">Case</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- /.modal-header -->
                <div class="modal-body" id="pointInfoModalBody" style="overflow-x: scroll;">
                </div>
                <!-- .modal-body -->
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- #pointInfoModal -->

    <div id="multipleCaseViewSelectModal" class="modal fade" role="dialog" aria-labelledby="pointInfoModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Select case</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body" id="multipleCaseViewSelectModalBody">
                </div>
            </div>
        </div>
    </div>
    <!-- #multipleCaseViewSelectModal -->
{% endblock %}
{# modal #}
{% block helps %}
<li class="nav-item mx-1" >
    <a href="https://www.csprousers.org/help/CSWeb/sync_report.html" target="_blank" class="nav-text-cspro"><i class="far fa-question-circle"></i> Help</a>
</li>
{% endblock %}
{# helps #}
{% block content %}
    <div class="row">
        <div class="col-12">
            <div id="alert" class="alert-placeholder-cspro alert-margin-cspro"></div>
            <!-- /.alert -->
        </div>
        <!-- /.col-12 -->
    </div>
    <!-- /.row -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-2">
                    <i class="fas fa-table fa-fw"></i> Sync Report <div id="dictionary-id-dropdown-container" class="float-right"></div>
                    <div class="btn-toolbar float-right">
                    </div>
                </div>
                <!-- /.panel-heading -->
                <div class="card-body">
                    <div id="store-area-names-column-count" class="table-responsive" data-area-names-column-count="0">
                        <table id="table-responsive" class="table table-striped table-bordered table-hover" style="width:100%">
                        </table>
                    </div>
                    <!-- /.table-responsive -->
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>
        <!-- /.col-12 -->
    </div>
    <!-- /.row -->
{% endblock %}

{% block scripts %}
    <script src={{asset('dist/js/validator.min.js')}}></script>

    <!-- Page-Level Scripts -->
    <script>
        "use strict";

        var filterLevels = [];

        $(document).ready(function () {
            var dictionaryDropdown = document.getElementById('dictionary-id-dropdown-container');
            dictionaryDropdown.addEventListener('change', function () {
                dataTables.initSyncReport();
            });

            chain.updateSyncReportAfterPageReload();

            /*
             // Data tables
             $('[data-toggle="popover"]').popover();
             $.fn.dataTable.ext.errMode = 'none'; //user custom error processing for the datatable to handle redirects

             var syncTable = $('#table-responsive')
             .on('xhr.dt', function ( e, settings, json, xhr ) {
             if (xhr.status === 401 || xhr.status === 405) {
             window.location.href = "{{ path('logout') }}";
             }
             // Note no return - manipulate the data directly in the JSON object.
             } )
             .on( 'error.dt', function ( e, settings, techNote, message ) {
             console.log( 'An error has been reported by DataTables: ', message );
             } )
             .DataTable({
             "dom": 'lrtip',
             "processing": true,
             "searching": true,
             "paging": true,
             "order": [[0, "asc"]],
             "columnDefs": [
             {"name": "region", "orderable": true, "searchable": true, "targets": 0},
             {"name": "district", "orderable": true, "searchable": true, "targets": 1},
             {"name": "state", "orderable": true, "searchable": true, "targets": 2},
             {"name": "synchronized", "orderable": true, "searchable": true, "targets": 3},
             ],
             "ajax": "{{ url('syncReportJson') }}",
             "serverSide": true,
             "columns": [
             {"data": "id_REGION_CODE"},
             {"data": "id_DIVISION_CODE"},
             {"data": "id_STATE_CODE"},
             {"data": "total_count"},
             ],
             // ALW - TODO: Comment out column filters
             initComplete: function () {
             this.api().columns().every( function () {
             var column = this;
             var select = $('<select><option value=""></option></select>')
             .appendTo( $(column.footer()).empty() )
             .on( 'change', function () {
             var val = $.fn.dataTable.util.escapeRegex(
             $(this).val()
             );

             column
             .search( val, false, false )
             .draw();
             } );

             column.data().unique().sort().each( function ( d, j ) {
             select.append( '<option value="'+d+'">'+d+'</option>' )
             } );
             } );
             },
             }); // Data tables
             */
        }); // $(document).ready

        var chain =
                {
                    updateSyncReportAfterPageReload: function () {
                        // Chain Ajax calls (getAreaNamesColumnCount, getDictionaries, getDictionaryIds, initSyncReport)
                        $("body").addClass("loading");
                        var gettingAreaNamesColumnCount = db.getAreaNamesColumnCount();
                        db.getDictionaries().then(function (response) {
                            // Done getDictionaries
                            return $.when(gettingAreaNamesColumnCount, db.getDictionaryIds());
                        }, function () {
                            // Fail getDictionaries
                        }).then(function () {
                            // Done getAreaNamesColumnCount + getDictionaryIds
                            $("body").removeClass("loading");
                            dataTables.initSyncReport();
                        }, function () {
                            // Fail getAreaNamesColumnCount + getDictionaryIds
                            $("body").removeClass("loading");
                        });
                    },

                    updateSyncReportAfterChangeDictionaries: function () {
                        // Chain Ajax calls (getDictionaryIds, initSyncReport)
                        $("body").addClass("loading");
                        db.getDictionaryIds().then(function () {
                            // Done getDictionaryIds
                            $("body").removeClass("loading");
                            dataTables.initSyncReport();
                        }, function () {
                            // Fail getDictionaryIds
                            $("body").removeClass("loading");
                        });
                    }
                }

        var db =
                {
                    getAreaNamesColumnCount: function () {
                        // Get column count for cspro_area_names table
                        return $.ajax({
                            type: "GET",
                            url: "{{ url('report-area-names-column-count-json') }}",
                            dataType: "json"
                        }).then(function (response) {
                            // Done getAreaNamesColumnCount
                            if (response.type === "error") {
                                // Only invalid responses will have a type
                                ui.showAlert(response.message, "alert alert-danger");
                                //if (response.status === 401) {
                                //    window.location.href = "{{ path('logout') }}";
                                //}
                                //else {
                                // Convert success to failure
                                return $.Deferred().reject(response).promise();
                                //}
                            } else {
                                // Update data attribute w/ column count
                                var areaNamesColumnCount = document.getElementById('store-area-names-column-count');
                                areaNamesColumnCount.dataset.areaNamesColumnCount = response;
                            }
                        }, function (response) {
                            // Fail getAreaNamesColumnCount
                            if (response.status === 200) {
                                // TODO: Hack to catch expired token
                                window.location.href = "{{ path('logout') }}";
                            } else {
                                ui.showAlert(response.message, "alert alert-danger");
                            }
                        });
                    },

                    getDictionaries: function () {
                        // Get all dictionary names and labels
                        return $.ajax({
                            type: "GET",
                            url: "{{ url('report-dictionaries-json') }}",
                            dataType: "json"
                        }).then(function (response) {
                            // Done getDictionaries
                            if (response.type === "error") {
                                // Only invalid responses will have a type
                                ui.showAlert(response.message, "alert alert-danger");
                                //if (response.status === 401) {
                                //    window.location.href = "{{ path('logout') }}";
                                //}
                                //else {
                                // Convert success to failure
                                return $.Deferred().reject(response).promise();
                                //}
                            } else {
                                if (response.length > 0) {
                                    ui.buildDictionaryList(response, "sync-report-dictionaries");
                                    return response;
                                } else {
                                    ui.showAlert("To view report add a configuration and process the cases", "alert alert-danger");
                                    // Convert success to failure
                                    return $.Deferred().reject(response).promise();
                                }
                            }
                        }, function (response) {
                            // Fail getDictionaries
                            if (response.status === 200) {
                                // TODO: Hack to catch expired token
                                window.location.href = "{{ path('logout') }}";
                            } else {
                                ui.showAlert(response.message, "alert alert-danger");
                            }
                        });
                    },

                    getDictionaryIds: function () {
                        // Get id items from dictionary (eventual columns for DataTables)
                        var selectedDictionary = ui.getSelectedDictionary();

                        return $.ajax({
                            type: "GET",
                            url: "{{ url('report-dictionary-ids-json') }}",
                            dataType: "json",
                            data: {
                                dictionary: selectedDictionary
                            }
                        }).then(function (response) {
                            // Done getDictionaryIds
                            if (response.type === "error") {
                                // Only invalid responses will have a type
                                ui.showAlert(response.message, "alert alert-danger");
                                //if (response.status === 401) {
                                //    window.location.href = "{{ path('logout') }}";
                                //}
                                //else {
                                // Convert success to failure
                                return $.Deferred().reject(response).promise();
                                //}
                            } else {
                                ui.buildDictionaryIdDropdown(response, "dictionary-id-dropdown-container");
                            }
                        }, function (response) {
                            // Fail getDictionaryIds
                            if (response.status === 200) {
                                // TODO: Hack to catch expired token
                                window.location.href = "{{ path('logout') }}";
                            } else {
                                ui.showAlert(response.message, "alert alert-danger");
                            }
                        });
                    }
                }

        var ui =
                {
                    buildDictionaryList: function (dictionaryObjects, containerId)
                    {
                        var container = document.getElementById(containerId);
                        Array.prototype.forEach.call(dictionaryObjects, function (el, i) {
                            var dictionarySyncReport = document.createElement("a");
                            dictionarySyncReport.setAttribute("id", el.dictionary_name);
                            if (i === 0) {
                                // Default first dictionary in list as selected
                                dictionarySyncReport.setAttribute("class", "collapse-item active cspro-nav-item cspro-pointer");
                            }
                            else {
                                dictionarySyncReport.setAttribute("class", "collapse-item cspro-nav-item cspro-pointer");
                            }

                            dictionarySyncReport.innerHTML = el.dictionary_label + ' (' + el.dictionary_name + ')';
                            var callback = "ui.changeDictionary('" + dictionarySyncReport.id + "')";
                            dictionarySyncReport.setAttribute("onclick", callback);

                            container.appendChild(dictionarySyncReport);
                        });
                    },

                    getSelectedDictionary: function ()
                    {
                        // Return selected dictionary from list
                        var lis = document.getElementById("sync-report-dictionaries").getElementsByTagName("a");

                        for (var i = 0; i < lis.length; i++) {
                            if (lis[i].className.includes("active")) {
                                return lis[i].id;
                            }
                        }
                    },

                    buildDictionaryIdDropdown: function (dictionaryIdObjects, containerId)
                    {
                        var container = document.getElementById(containerId);

                        while (container.firstChild) {
                            // Remove a previous dictionary id list
                            container.removeChild(container.firstChild);
                        }

                        var dictionaryIdList = document.createElement("select");
                        dictionaryIdList.setAttribute("id", "dictionary-id-dropdown");
                        dictionaryIdList.setAttribute("class", "form-control");

                        // Loop through each dictionary id object and append the option to the dictionary-id-dropdown
                        Array.prototype.forEach.call(dictionaryIdObjects, function (el, i) {
                            var option = document.createElement("option");
                            option.text = ui.prettifyDictionaryName(el);
                            option.value = el;

                            dictionaryIdList.appendChild(option);
                        });

                        container.appendChild(dictionaryIdList);
                    },

                    getSelectedDictionaryIds: function (prettify)
                    {
                        // Get dictionary ids from dropdown selection. If ids are id_1, id_2,
                        // id_3 and id_2 is selected then an array of id_1 and id_2 are returned.
                        var element = document.getElementById("dictionary-id-dropdown");
                        var currentSelection = element.options[element.selectedIndex].value;
                        var ids = [];

                        for (var i = 0; i < element.options.length; i++) {
                            if (prettify)
                                ids[i] = element.options[i].text;
                            else
                                ids[i] = element.options[i].value;

                            if (currentSelection === element.options[i].value)
                                break;
                        }

                        return ids;
                    },

                    changeDictionary: function (selectedId) {
                        // Loop through dictionaries in list and update which is selected
                        var lis = document.getElementById("sync-report-dictionaries").getElementsByTagName("a");
                        for (var i = 0; i < lis.length; i++) {
                            if (lis[i].className.includes("active")) {
                                // Remove class selected from previously selected dictionary
                               lis[i].setAttribute("class", "collapse-item cspro-nav-item cspro-pointer");
                            }

                            if (lis[i].id === selectedId) {
                                // Add class selected to currently selected dictionary
                                lis[i].setAttribute("class", "collapse-item active cspro-nav-item cspro-pointer");
                            }
                        }

                        chain.updateSyncReportAfterChangeDictionaries();
                    },

                    attachFooterHeader: function (columnCount, containerId) {
                        // Add footer header, so column filter can be attached
                        var container = document.getElementById(containerId);

                        while (container.firstChild) {
                            // Remove a previous footer
                            container.removeChild(container.firstChild);
                        }

                        var footer = document.createElement("tfoot");
                        var tableRow = document.createElement("tr");
                        footer.appendChild(tableRow);

                        // Loop through each column and append a table header to the table row
                        for (var i = 0; i < columnCount; i++) {
                            var tableHeader = document.createElement("th");
                            //var t = document.createTextNode("th" + i);
                            //tableHeader.appendChild(t);

                            tableRow.appendChild(tableHeader);
                        }

                        container.appendChild(footer);
                    },

                    prettifyDictionaryName: function (dictionaryName) {
                        // Remove ID
                        //dictionaryName = dictionaryName.substr(2);
                        // Replace underscores with spaces
                        //dictionaryName = dictionaryName.replace(/_/g, ' ');
                        return dictionaryName;
                    },

                    showAlert: function (message, alertStyle) {
                        $("#alert").replaceWith("<div id='alert' class='" + alertStyle + " alert-margin-cspro'>" + message + "</div>");
                        $("#alert").show();
                    },

                    clearAlert: function () {
                        $("#alert").replaceWith("<div id='alert' class='alert-placeholder-cspro alert-margin-cspro'></div>");
                        $("#alert").show();
                    },

                    showImportAlert: function (message, alertStyle) {
                        $("#import-modal-alert").replaceWith("<div id='import-modal-alert' class='" + alertStyle + " alert-margin-cspro'>" + message + "</div>");
                        $("#import-modal-alert").show();
                    }
                }

        var dataTables =
                {
                    initSyncReport: function () {
                        $.fn.dataTable.ext.errMode = 'none';

                        if ($.fn.dataTable.isDataTable('#table-responsive')) {
                            // DataTable exists and number of columns may have changed
                            $('#table-responsive').DataTable().destroy();  // Destroy table
                            $('#table-responsive').empty();                // Remove all <thead>
                        }

                        var storeAreaNamesColumnCount = document.getElementById('store-area-names-column-count');
                        var areaNamesColumnCount = storeAreaNamesColumnCount.dataset.areaNamesColumnCount;
                        var selectedDictionary = ui.getSelectedDictionary();
                        var selectedDictionaryIds = ui.getSelectedDictionaryIds(true);
                        var columns = [];

                        Array.prototype.forEach.call(selectedDictionaryIds, function (el, i) {
                            columns.push({title: el, data: i});
                        });
                        columns.push({title: "TOTAL", data: "total_count"});

                        var columnCount = selectedDictionaryIds.length + 1;
                        ui.attachFooterHeader(columnCount, "table-responsive");

                        selectedDictionaryIds = ui.getSelectedDictionaryIds(false);

                        $('#table-responsive')
                                .on('xhr.dt', function (e, settings, json, xhr) {
                                })
                                .on('error.dt', function (e, settings, techNote, message) {
                                    var strLogin = '<title>CSWeb: Login</title>';
                                    if (settings && settings.jqXHR && settings.jqXHR.responseText && settings.jqXHR.responseText.includes(strLogin)) {
                                        // TODO: Hack to catch expired token
                                        window.location.href = "{{ path('logout') }}";
                                        return;
                                    }
                                    console.log('An error has been reported by DataTables: ', message);
                                })
                                .DataTable({
                                    serverSide: true,
                                    processing: true,
                                    searching: true,
                                    paging: true,
                                    pageLength: 10,
                                    order: [[0, "asc"]],
                                    columns: columns,
                                    ajax: {
                                        url: "{{ url('syncReportJson') }}",
                                        data: {
                                            areaNamesColumnCount: areaNamesColumnCount,
                                            dictionary: selectedDictionary,
                                            dictionaryIds: selectedDictionaryIds
                                        }
                                    },

                                    initComplete: function () {
                                        $('#table-responsive_wrapper')
                                                .find('div.row')
                                                .css({"margin-left": "0", "margin-right": "0"});

                                        filterLevels = [];
                                        drawFilters(this, selectedDictionary);

                                        // Create column filter dropdown
                                        /*
                                         this.api().columns().every(function () {
                                         var column = this;
                                         var select = $('<select><option value=""></option></select>')
                                         .appendTo($(column.footer()).empty())
                                         .on('change', function () {
                                         var val = $.fn.dataTable.util.escapeRegex(
                                         $(this).val()
                                         );

                                         column
                                         .search(val, false, false)
                                         .draw();
                                         });
                                         column.data().unique().sort().each(function (value, index) {
                                         select.append('<option value="' + value + '">' + value + '</option>');
                                         });
                                         });
                                         */
                                    },

                                    drawCallback: function () {
                                        renderCaseViewButtons(this, selectedDictionary);
                                    }
                                },
                                        )
                                .on('draw', function () {

                                });
                    }
                }

        function drawFilters(context, selectedDictionary) {
            var params = new URLSearchParams();
            params.append('dictionary', selectedDictionary);

            var i = 0;
            filterLevels.forEach(function (id) {
                params.append(`ids[${i++}]`, id);
            });

            $.ajax({
                type: "GET",
                url: "{{ url('report-filter-dictionary-ids-json') }}",
                data: params.toString()
            }).done(function (msg) {
                context.api().columns().every(function () {
                    var column = this;
                    if (column.index() >= context.api().columns(':visible').nodes().length - 1) {
                        return;
                    }

                    if (column.index() === filterLevels.length) {
                        var select = $('<select class="form-control"><option value=""></option></select>')
                                .appendTo($(column.footer()).empty())
                                .on('change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                            $(this).val()
                                            );

                                    //removing all lower level filters
                                    while (filterLevels.length > column.index()) {
                                        filterLevels.pop();
                                        context.api().column(filterLevels.length)
                                                .search("", false, false);
                                    }

                                    column
                                            .search(val, false, false)
                                            .draw();

                                    if (val.length > 0) {
                                        filterLevels.push(val);
                                    }
                                    drawFilters(context, selectedDictionary);
                                });

                        var msgJson = JSON.parse(msg);
                        var primaryCols = msgJson["firstLevel"]["values"];
                        primaryCols.forEach((col) => {
                            select.append('<option value="' + col.id + '">' + col.label + '</option>');
                        });
                    } else if (column.index() > filterLevels.length) {
                        $(column.footer()).empty();
                    }
                });
            });
        }

        function renderCaseViewButtons(context, selectedDictionary) {
            var colCount = context.api().columns().count() - 1;
            var dictIdCount = $('#dictionary-id-dropdown').children().length;
            var rIndex = 0;
            $('#table-responsive')
                    .find('tbody')
                    .children()
                    .each(function () {
                        var lastChild = $(this).children().last();
                        if (parseInt(lastChild.html()) === 1 || colCount === dictIdCount) {
                            $(`<a href="#" rowIndex="${rIndex}" style="float:right;">View case</a>`)
                                    .appendTo(lastChild)
                                    .click(function () {
                                        var rowIndex = parseInt($(this).attr('rowIndex'));

                                        //handing duplicate cases
                                        if (parseInt(lastChild.html()) > 1)
                                            buildMultipleCasePopup(context, selectedDictionary, colCount, rowIndex)
                                        else
                                            getCase(context, selectedDictionary, colCount, rowIndex);
                                    });
                        }
                        rIndex++;
                    });
        }

        function buildMultipleCasePopup(context, selectedDictionary, colCount, rowIndex) {
            var params = new URLSearchParams();
            params.append('dictionary', selectedDictionary);

            var j = 0;
            for (var i = colCount; i < colCount * 2; i++) {
                params.append(`ids[${j++}]`, context.api().rows().data()[rowIndex][i]);
            }

            $("body").addClass("loading");
            $.ajax({
                type: "GET",
                url: "{{ url('report-get-dupl-case-guids-json') }}",
                data: params.toString()
            }).done(function (msg) {
                var caseList = $('<div class="list-group"></div>')
                        .appendTo($('#multipleCaseViewSelectModalBody').empty());

                var msgJson = JSON.parse(msg);

                var caseIdx = 0;
                msgJson.forEach((caseId) => {
                    var lItem = $(`<a href="#" class="list-group-item" style="border:0;"></a>`)
                            .append(`<h4 style="color:#337AB7;">• Case #${++caseIdx}</h4>`)
                            .append(`<div style="padding-left: 12px;" value="${caseId["case-id"]}">Globaly unique ID: ${caseId["case-id"]}</div>`)
                            .click(function () {
                                $('#multipleCaseViewSelectModal').modal("hide");
                                var caseGuid = $(this).find('div').attr('value');
                                getCaseByGuid(selectedDictionary, caseGuid);
                            });

                    caseList.append(lItem);
                });

                $("body").removeClass("loading");
                $('#multipleCaseViewSelectModal').modal("show");
            });
        }

        function getCase(context, selectedDictionary, colCount, rowIndex) {
            var params = new URLSearchParams();
            params.append('dictionary', selectedDictionary);

            var j = 0;
            for (var i = colCount; i < colCount * 2; i++) {
                params.append(`ids[${j++}]`, context.api().rows().data()[rowIndex][i]);
            }

            $("body").addClass("loading");
            $.ajax({
                type: "GET",
                url: "{{ url('report-view-case-json') }}",
                data: params.toString()
            }).done((showModal));
        }

        function getCaseByGuid(selectedDictionary, caseGuid) {
            var params = new URLSearchParams();
            params.append('dictionary', selectedDictionary);
            params.append('caseguid', caseGuid);
            $("body").addClass("loading");
            $.ajax({
                type: "GET",
                url: "{{ url('report-view-case-json') }}",
                data: params.toString()
            }).done((showModal));
        }

        function showModal(data)
        {
            var modalBody = document.getElementById("pointInfoModalBody");
            modalBody.childNodes.forEach((child) => {
                modalBody.removeChild(child);
            });
            modalBody.innerHTML = data;
            $("body").removeClass("loading");
            $("#pointInfoModal").modal("show");
        }
    </script>
{% endblock %}