{% extends "data-tools-container.html" %}
{% load forms_extra %}

{% block head %}
    {{ block.super }}
    <script>
        let setting_json = {{setting_json_jquery|safe}}

        function select_all_checkboxes() {
            $('input[type="checkbox"]').prop('checked', true);
        }

        function unselect_all_checkboxes() {
            $('input[type="checkbox"]').prop('checked', false);
        }

        function toggle_site_specified(button) {
            const columnIndex = $(button).closest('th').index();
            if ($(button).text() === 'All'){
                $(button).closest('table').find('tbody tr').each(function () {
                    // Check if the cell in the specified column has a value of "SPECIFIED"
                    let cellValue = $(this).find('td').eq(columnIndex).text().trim();
                    if (cellValue !== 'SITE_SPECIFIED') {
                        // Hide the row
                        $(this).hide();
                    }
                });
                $(button).text('Site Specified Only')
            } else {
                $(button).closest('table').find('tbody tr').each(function () {
                    $(this).show();
                });
                $(button).text('All')
            }

        }

        function export_table() {
            let formData = new FormData();

            let selectedIds = $('input[type="checkbox"]:checked').map(function() {
                return this.id;
            }).get();

            let selectedActions = $('#selected-actions').val();
            let selectedTranslations = $('#selected-translations').val();
            formData.append('selectedActions', selectedActions)
            formData.append('selectedTranslations', selectedTranslations)
            formData.append('selectedIds', JSON.stringify(selectedIds))

            const xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        const contentDisposition = xhr.getResponseHeader('Content-Disposition');
                        let filename = 'tower_overview.xlsx';

                        if (contentDisposition) {
                            const match = contentDisposition.match(/filename="(.+?)"/);
                            if (match) {
                                filename = match[1];
                            }
                        }

                        const blobData = xhr.response;
                        let link = document.createElement('a');
                        link.href = window.URL.createObjectURL(blobData);
                        link.download = filename;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    } else {
                        console.error('XHR request failed with status:', xhr.status);
                    }
                }
            };

            const url = "{% url 'support:data-tools-export-web-tools' %}"
            xhr.open('POST', url, true);
            xhr.responseType = 'blob';
            xhr.setRequestHeader('X-CSRFToken', '{{csrf_token}}');
            if (selectedIds.length > 0){
                xhr.send(formData);
            }
        }

        $(function () {
            for (const dafe of Object.keys(setting_json)) {
                if (dafe !== 'Default') {
                    for (const setting of Object.keys(setting_json[dafe])) {
                        let dafe_setting_tag = dafe + '-' + setting;
                        let cells = $('td[data-setting_tag="' + dafe_setting_tag + '"]');

                        if (setting === 'DUMP_BLISTER_TOGGLE'){
                            setting_json[dafe][setting] = setting_json[dafe][setting].toUpperCase();
                        }

                        if (setting_json[dafe][setting] === setting_json['Default'][setting]) {
                            cells.text('---Default---');
                        } else {
                            // these two settings support non uppercase letters
                            if (setting === 'LABEL_FORMAT_PATH' || setting === 'NETWORK_DEVICE_NAME') {
                                cells.text(setting_json[dafe][setting])
                            } else {
                                cells.text(setting_json[dafe][setting].toUpperCase());
                            }

                            // $('table:not(#tower-settings-table) td[data-setting_tag="' + dafe_setting_tag + '"]').css('background-color', 'lightcoral')
                            cells.css('background-color', 'lightcoral')
                        }
                    }
                }
            }

            // determine if every tower specific cell in table is different and the same, if so highlight whole row in yellow
            $('#tower-settings-table tbody tr').each(function(index, row) {
                let cellsWithSpecificValue = $(row).find('td[data-setting_tag]');
                let everyCellIsLightCoral = cellsWithSpecificValue.filter(function(cellIndex, cell) {
                    return $(cell).css('background-color') === 'rgb(240, 128, 128)';
                }).length === cellsWithSpecificValue.length;

                if (everyCellIsLightCoral) {
                    let base_value = $(cellsWithSpecificValue[0]).text();
                    let everyCellIsSameValue = cellsWithSpecificValue.filter(function(cellIndex, cell) {
                        return $(cell).text() === base_value;
                    }).length === cellsWithSpecificValue.length;

                    if (everyCellIsSameValue) {
                        cellsWithSpecificValue.each(function(index, cell){
                            $(cell).parent().children().css('background-color', 'rgb(255,255,102)')
                        })
                    }
                }
            });

            $('table:not(#tower-settings-table) td[data-setting_tag]').each(function(index, cell) {
                if ($(cell).text() !== '---Default---') {
                    $(cell).parent().children().css('background-color', 'rgb(255,255,102)')
                }
            })

            $('#system-settings-table td:nth-child(4)').each(function(index, cell) {
                if ($(cell).text() !== '---Default---') {
                    $(cell).parent().children().css('background-color', 'rgb(255,255,102)')
                }
            })

            $('#site-settings-table td:nth-child(4)').each(function(index, cell) {
                if ($(cell).text() !== '---Default---') {
                    $(cell).parent().children().css('background-color', 'rgb(255,255,102)')
                }
            })

            $('.table-change').on('click', function(){
                $('.table-change').removeClass('active_link');

                $(this).addClass('active_link')
                let selected_table = $(this).attr('id').replace('-link', '');
                $('.excel_table').css('display', 'none');
                $('#' + CSS.escape(selected_table + '-table')).css('display', 'inline-table');
            })

            $("#select-exports").dialog({
                autoOpen: false,
                closeOnEscape: true,
                modal: true,
                draggable: false,
                position: {my: "center top", at: "center top", of: window},
                width: 800,
                open: function (event, ui) {

                },
                buttons: [
                    {
                        text: "Export",
                        "class": 'modal-dialog-button-float-right',
                        click: function () {
                            export_table();
                            $(this).dialog("close");
                            $('input[type="checkbox"]').prop('checked', true);
                        }
                    },
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-float-left',
                        click: function () {
                            $(this).dialog("close");
                            $('input[type="checkbox"]').prop('checked', true);
                        }
                    },
                ]
            });

            $('#save_btn').click(function (event) {
                $("#select-exports").dialog("open");
            })

            $('#fill-actions-table tbody tr').each(function () {
                let fourthColumnText = $(this).find('td:eq(3)').text();
                let parts = fourthColumnText.split("'");

                // Replace commas with <b> or </b> based on position
                let replacedText = parts.map(function (part, index) {
                  return (index % 2 === 0) ? part : '<b>' + part + '</b>';
                }).join('');

                // Update the 4th column with the modified text
                $(this).find('td:eq(3)').html(replacedText);
            });

            $('#data-translations-table tbody tr').each(function () {
                let sixthColumnText = $(this).find('td:eq(5)').text();
                let parts = sixthColumnText.split("'");

                // Replace commas with <b> or </b> based on position
                let replacedText = parts.map(function (part, index) {
                  return (index % 2 === 0) ? part : '<b>' + part + '</b>';
                }).join('');

                // Update the 4th column with the modified text
                $(this).find('td:eq(5)').html(replacedText);
            });
        })
    </script>

    <style>
        #tables-container {
            display: flex;
            justify-content: center;
            margin-bottom: 2vh;
            flex-direction: column;
        }

        #save_btn {
            position: fixed;
            z-index: 1050;
            border-radius: 128px;
            height: 64px;
            width: 64px;
            bottom: 0.5%;
            right: 0.5%;
            border: 2px solid #32648E;
            background: linear-gradient(#72A689, #217346);
            font-weight: bold;
        }

        .excel_table > thead {
            background-color: white;
            position: sticky;
            top: 0;
            font-size: 22px
        }

        .excel_table > tbody > tr:nth-child(odd) {
            background-color: #E4E4E4;
        }

        .excel_table > tbody > tr > td:not([colspan="4"]) {
            border: 1px solid grey;
            padding-right: 1vh;
            padding-left: .5vh;
        }

        input[type="checkbox"] {
            display: none;
        }

        input[type="checkbox"]:checked + label {
            background-color: #44ba85;
        }

        input[type="checkbox"] + label {
            background-color: lightgrey;
            margin-left: 1vh;
            padding: .5vh 1vh;
            border: 1px solid grey;
            border-radius: 1vh;
            user-select: none;
        }

        input[type="checkbox"] + label:hover {
            border: 1px solid black;
        }

        #fill-actions-label {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
        }

        #fill-actions-label > select {
            margin-bottom: 0;
        }

        #data-translations-label {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
        }

        #data-translations-label > select {
            margin-bottom: 0;
        }

        .settings-sub-header {
            font-size: 16px;
            text-align: center;
            font-weight: bold;
            border: 2px solid black;
            background-color: white;
        }

        .table-change:hover {
            cursor: pointer;
        }

        .active_link {
            background-color: lightblue;
            color: black;
        }

        .active_link:hover {
            background-color: lightblue !important;
            color: black;
        }

        #select-exports > span {
            display: flex;
            justify-content: center;
            font-weight: bold;
            padding-bottom: 1vh;
            font-size: 2vh;
        }

        #select-exports > div:nth-child(2) {
            display: flex;
            justify-content: space-evenly;
            padding-bottom: 1vh;
        }

        #data-translations-table > tbody > tr > td:nth-child(n+3):nth-child(-n+5) {
            text-align: center;
            padding-left: 1vh;
        }

        #data-translations-table > tbody > tr > td:nth-child(n+5) {
            text-align: left;
            padding-left: 1vh;
        }

        #fill-actions-table > tbody > tr > td:nth-child(n+3):nth-child(-n+3) {
            text-align: center;
            padding-left: 1vh;
        }

        #fill-actions-table > tbody > tr > td:nth-child(n+4) {
            text-align: left;
            padding-left: 1vh;
        }

        #order-sort-table > tbody > tr > td {
            text-align: center;
            padding-left: 1vh;
        }

        #print-sort-table > tbody > tr > td {
            text-align: center;
            padding-left: 1vh;
        }

        /*Default table styling if not specified above */
        .excel_table > tbody > tr > td:nth-child(n+3) {
            text-align: center;
            padding-left: 1vh;
        }

        .setting-link {
            font-weight: bold;
        }
    </style>
{% endblock %}

{% block sub-content %}
    <div id="tables-container">
        <div>
            <ul class="nav nav-tabs">
                <li><a id="site-settings-link" class="table-change active_link">Site Settings</a></li>
                <li><a id="tower-settings-link" class="table-change">Towers Roll Up</a></li>
                <li><a id="system-settings-link" class="table-change">System Settings</a></li>
                <li><a id="data-translations-link" class="table-change">Data Translations</a></li>
                <li><a id="fill-actions-link" class="table-change">Fill Actions</a></li>
                <li><a id="facilities-link" class="table-change">Facilities</a></li>
                <li><a id="bypass-link" class="table-change">Bypass Methods</a></li>
                <li><a id="calendar-fill-link" class="table-change">Calendar Fill</a></li>
                <li><a id="medpasses-link" class="table-change">Medpasses</a></li>
                <li><a id="order-sort-link" class="table-change">Order Sort</a></li>
                <li><a id="print-sort-link" class="table-change">Print Sort</a></li>
                {% for dafe in dafe_list %}
                    <li><a id="{{dafe}}-link" class="table-change">{{dafe}}</a></li>
                {% endfor %}
            </ul>
        </div>


        <table class="excel_table" id="site-settings-table">
            <thead>
                <tr>
                    <th>Setting</th>
                    <th>Description</th>
                    <th>Default</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                {% for group in group_names %}
                    <tr><td colspan="4" class="settings-sub-header">{{group.group_name}}</td></tr>
                    {% for setting in site_settings|get_item:group %}
                        <tr>
                            <td><a href="/support/site_settings/#{{setting.setting_type__tag}}" class="setting-link" target="_blank">{{setting.setting_type__tag}}</a></td>
                            <td>{{setting.setting_type__description}}</td>
                            <td>{{setting.setting_type__default_value}}</td>
                            {% if setting.setting_type__default_value == setting.value %}
                                <td>---Default---</td>
                            {% else %}
                                <td>{{setting.value}}</td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                {% endfor %}
            </tbody>
        </table>

        <table class="excel_table" id="tower-settings-table" style="display: none">
            <thead>
                <tr>
                    <th>Setting</th>
                    <th>Description</th>
                    <th>Default</th>
                    {% for dafe in dafe_list %}
                        <th>{{dafe}}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for setting in general_setting_list %}
                    {% with setting_tag=setting.tag %}
                        <tr>
                            <td>{{setting.tag}}</td>
                            <td>{{setting.description}}</td>
                            <td>{{setting.default_value}}</td>
                            {% for dafe in dafe_list %}
                                <td data-setting_tag="{{dafe}}-{{setting_tag}}"></td>
                            {% endfor %}
                        </tr>
                    {% endwith %}
                {% endfor %}
            </tbody>
        </table>

        {% for table in tables %}
            <table class="excel_table" id="{{table.1}}" style="display: none;">
                <thead>
                <tr>
                    {% for header in table.0.0 %}
                        {% if header == 'Action Type' %}
                            <th>
                                {{header}}
                                <button onclick="toggle_site_specified(this)">All</button>
                            </th>
                        {% else %}
                            <th>{{header}}</th>
                        {% endif %}
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in table.0.1 %}
                    <tr>
                        {% for cell in row %}
                            <td>{{cell|safe}}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
            </table>
        {% endfor %}

        {% for dafe in dafe_list %}
            <table class="excel_table" id="{{dafe}}-table" style="display: none">
                <thead>
                    <tr>
                        <th>Setting</th>
                        <th>Description</th>
                        <th>Default</th>
                        <th>{{dafe}}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for setting in general_setting_list %}
                        {% with setting_tag=setting.tag %}
                            <tr>
                                <td><a href="/support/dafe_settings/?dafe_select={{dafe}}&group_select=main&setting={{setting.tag}}" target="_blank" class="setting-link">{{setting.tag}}</a></td>
                                <td>{{setting.description}}</td>
                                <td>{{setting.default_value}}</td>
                                <td data-setting_tag="{{dafe}}-{{setting_tag}}"></td>
                            </tr>
                        {% endwith %}
                    {% endfor %}
                </tbody>
            </table>
        {% endfor %}
    </div>

    <div id="select-exports" title="Workorder Actions" style="margin-left: 2px;">
        <span style="text-align: center">Select which sheets to export</span>

        <div>
            <button id="select_all_export" onclick="select_all_checkboxes()">Select All</button>
            <button id="unselect_all_export" onclick="unselect_all_checkboxes()">Un-Select All</button>
        </div>

        <input type="checkbox" id="site-settings" checked>
        <label for="site-settings">Site Settings</label>

        <input type="checkbox" id="tower-roll-up" checked>
        <label for="tower-roll-up">Tower Roll Up</label>

        <input type="checkbox" id="system-settings" checked>
        <label for="system-settings">System Settings</label>

        <div id="data-translations-container">
            <input type="checkbox" id="data-translations" checked>
            <label id="data-translations-label" for="data-translations">Data Translations
                <label for="selected-translations"></label>
                <select id="selected-translations">
                    <option selected value="site-specified">Site Specified Only</option>
                    <option value="all">All</option>
                </select>
            </label>
        </div>

        <div id="fill-action-container">
            <input type="checkbox" id="fill-actions" checked>
            <label id="fill-actions-label" for="fill-actions">Fill Actions
                <label for="selected-actions"></label>
                <select id="selected-actions">
                    <option selected value="site-specified">Site Specified Only</option>
                    <option value="all">All</option>
                </select>
            </label>
        </div>

        <input type="checkbox" id="facilities" checked>
        <label for="facilities">Facilities</label>

        <input type="checkbox" id="bypass-methods" checked>
        <label for="bypass-methods">Bypass Methods</label>

        <input type="checkbox" id="calendar-fill" checked>
        <label for="calendar-fill">Calendar Fill</label>

        <input type="checkbox" id="medpass" checked>
        <label for="medpass">Medpasses</label>

        <input type="checkbox" id="order-sort" checked>
        <label for="order-sort">Order Sort</label>

        <input type="checkbox" id="print-sort" checked>
        <label for="print-sort">Print Sort</label>

        {% for dafe in dafe_list %}
            <input type="checkbox" id="include-{{dafe}}" checked>
            <label for="include-{{dafe}}">{{dafe}}</label>
        {% endfor %}
    </div>

    <button id="save_btn">Export</button>
{% endblock %}