{% extends 'base.html' %}


{% block content %}
    <div class='row'>
        <div class='col-lg-12'>
            <div class="card card-primary card-outline">
                {% if page_title %}
                    <div class="card-header">
                        <h3 class="card-title">{{ page_title }}</h3>
                    </div>
                {% endif %}
                <div class="card-body">
                    {% include 'router_manager/router_nav_tabs.html' %}

                    <!-- Column Visibility Modal -->
                    <div class="modal fade" id="columnVisibilityModal" tabindex="-1" role="dialog" aria-labelledby="columnVisibilityModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="columnVisibilityModalLabel">Show/Hide Columns</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div id="columnCheckboxes">
                                        <!-- Checkboxes will be added here dynamically -->
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                    <button type="button" class="btn btn-danger" id="resetColumnVisibility">Reset</button>
                                    <button type="button" class="btn btn-primary" id="applyColumnVisibility">Apply</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <table class="table table-hover datatables-no-export">
                                <thead>
                                <tr>
                                    <th></th>
                                    {% if "name" in visible_columns %}
                                    <th data-column="name">Name</th>
                                    {% endif %}
                                    {% if "type" in visible_columns %}
                                    <th data-column="type">Type</th>
                                    {% endif %}
                                    {% if "address" in visible_columns %}
                                    <th data-column="address">Address</th>
                                    {% endif %}
                                    {% if "status" in visible_columns %}
                                    <th data-column="status">Status</th>
                                    {% endif %}
                                    {% if "backup" in visible_columns %}
                                    <th data-column="backup">Backup</th>
                                    {% endif %}
                                    {% if "last_backup" in visible_columns %}
                                    <th data-column="last_backup">Last Backup</th>
                                    {% endif %}
                                    {% if "next_daily_backup" in visible_columns %}
                                    <th data-column="next_daily_backup">Next Daily Backup</th>
                                    {% endif %}
                                    {% if "next_weekly_backup" in visible_columns %}
                                    <th data-column="next_weekly_backup">Next Weekly Backup</th>
                                    {% endif %}
                                    {% if "next_monthly_backup" in visible_columns %}
                                    <th data-column="next_monthly_backup">Next Monthly Backup</th>
                                    {% endif %}
                                    {% if "groups" in visible_columns %}
                                    <th data-column="groups">Groups</th>
                                    {% endif %}
                                    {% if "auth" in visible_columns %}
                                    <th data-column="auth">Auth</th>
                                    {% endif %}
                                    {% if "os_version" in visible_columns %}
                                    <th data-column="os_version">OS Version</th>
                                    {% endif %}
                                    {% if "model_name" in visible_columns %}
                                    <th data-column="model_name">Model Name</th>
                                    {% endif %}
                                    {% if "model_version" in visible_columns %}
                                    <th data-column="model_version">Model Version</th>
                                    {% endif %}
                                    {% if "serial_number" in visible_columns %}
                                    <th data-column="serial_number">Serial Number</th>
                                    {% endif %}
                                    {% if "firmware_version" in visible_columns %}
                                    <th data-column="firmware_version">Firmware Version</th>
                                    {% endif %}
                                    {% if "architecture" in visible_columns %}
                                    <th data-column="architecture">Architecture</th>
                                    {% endif %}
                                    {% if "cpu" in visible_columns %}
                                    <th data-column="cpu">CPU</th>
                                    {% endif %}
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for router in router_list %}
                                    <tr {% if not router.enabled %}style="text-decoration: line-through;"{% endif %}>
                                        <td><input type="checkbox" class="router-checkbox" data-uuid="{{ router.uuid }}"></td>
                                        {% if "name" in visible_columns %}
                                        <td data-column="name"><a href="/router/details/?uuid={{ router.uuid }}">{{ router.name }}</a></td>
                                        {% endif %}
                                        {% if "type" in visible_columns %}
                                        <td data-column="type">{{ router.get_router_type_display }}</td>
                                        {% endif %}
                                        {% if "address" in visible_columns %}
                                        <td data-column="address">{{ router.address }}</td>
                                        {% endif %}
                                        {% if "status" in visible_columns %}
                                        <td data-column="status" id="status-{{ router.uuid }}">
                                            {% if router.monitoring %}
                                                {% if router.routerstatus.status_online %}
                                                    <span style="display: none">online</span><i class="far fa-check-circle text-success" title="Host is Online"></i>
                                                {% else %}
                                                    <span style="display: none">offline</span><i class="far fa-times-circle text-danger" title="Host is unavailable"></i>
                                                {% endif %}
                                            {% else %}
                                                ---
                                            {% endif %}
                                        </td>
                                        {% endif %}
                                        {% if "backup" in visible_columns %}
                                        <td data-column="backup">
                                            {% if router.router_type != 'monitoring' %}
                                                {% if router.backup_profile %}
                                                    {{ router.backup_profile }} {% if router.routerstatus.last_backup_failed %}<i class="fas fa-exclamation-triangle text-danger" title="Last backup failed to complete"></i>{% endif %}
                                                {% else %}
                                                    <i class="fas fa-exclamation-triangle text-warning" title="No backup profile selected"></i>
                                                {% endif %}
                                            {% endif %}
                                        </td>
                                        {% endif %}
                                        {% if "last_backup" in visible_columns %}
                                        <td data-column="last_backup">
                                            {% if router.router_type != 'monitoring' and router.routerstatus.last_backup %}
                                                {{ router.routerstatus.last_backup|date:"Y-m-d H:i:s" }}
                                            {% else %}
                                                ---
                                            {% endif %}
                                        </td>
                                        {% endif %}
                                        {% if "next_daily_backup" in visible_columns %}
                                        <td data-column="next_daily_backup">
                                            {% if router.router_type != 'monitoring' and router.backupschedule.next_daily_backup %}
                                                {{ router.backupschedule.next_daily_backup|date:"Y-m-d H:i:s" }}
                                            {% else %}
                                                ---
                                            {% endif %}
                                        </td>
                                        {% endif %}
                                        {% if "next_weekly_backup" in visible_columns %}
                                        <td data-column="next_weekly_backup">
                                            {% if router.router_type != 'monitoring' and router.backupschedule.next_weekly_backup %}
                                                {{ router.backupschedule.next_weekly_backup|date:"Y-m-d H:i:s" }}
                                            {% else %}
                                                ---
                                            {% endif %}
                                        </td>
                                        {% endif %}
                                        {% if "next_monthly_backup" in visible_columns %}
                                        <td data-column="next_monthly_backup">
                                            {% if router.router_type != 'monitoring' and router.backupschedule.next_monthly_backup %}
                                                {{ router.backupschedule.next_monthly_backup|date:"Y-m-d H:i:s" }}
                                            {% else %}
                                                ---
                                            {% endif %}
                                        </td>
                                        {% endif %}
                                        {% if "groups" in visible_columns %}
                                        <td data-column="groups">
                                            {% if router.routergroup_set.exists %}
                                                {% for group in router.routergroup_set.all %}
                                                    {{ group.name }}{% if not forloop.last %}, {% endif %}
                                                {% endfor %}
                                            {% else %}
                                                ---
                                            {% endif %}
                                        </td>
                                        {% endif %}
                                        {% if "auth" in visible_columns %}
                                        <td data-column="auth" class="min-width">
                                            {% if router.router_type != 'monitoring' %}
                                                {% if router.ssh_key %}
                                                    <span style="display: none">sshkey</span><i class="fas fa-key" title="SSH Key: {{ router.ssh_key }}"></i>
                                                {% elif router.password %}
                                                    <span style="display: none">password</span><i class="fas fa-keyboard" title="Password Authentication"></i>
                                                {% else %}
                                                    <i class="fas fa-exclamation-triangle text-warning" title="Missing authentication"></i>
                                                {% endif %}
                                            {% endif %}
                                        </td>
                                        {% endif %}
                                        {% if "os_version" in visible_columns %}
                                        <td data-column="os_version">
                                            {% if router.router_type != 'monitoring' %}
                                                {{ router.routerinformation.os_version|default_if_none:'' }}
                                            {% endif %}
                                        </td>
                                        {% endif %}
                                        {% if "model_name" in visible_columns %}
                                        <td data-column="model_name">
                                            {% if router.router_type != 'monitoring' %}
                                                {{ router.routerinformation.model_name|default_if_none:'' }}
                                            {% endif %}
                                        </td>
                                        {% endif %}
                                        {% if "model_version" in visible_columns %}
                                        <td data-column="model_version">
                                            {% if router.router_type != 'monitoring' %}
                                                {{ router.routerinformation.model_version|default_if_none:'' }}
                                            {% endif %}
                                        </td>
                                        {% endif %}
                                        {% if "serial_number" in visible_columns %}
                                        <td data-column="serial_number">
                                            {% if router.router_type != 'monitoring' %}
                                                {{ router.routerinformation.serial_number|default_if_none:'' }}
                                            {% endif %}
                                        </td>
                                        {% endif %}
                                        {% if "firmware_version" in visible_columns %}
                                        <td data-column="firmware_version">
                                            {% if router.router_type != 'monitoring' %}
                                                {{ router.routerinformation.firmware_version|default_if_none:'' }}
                                            {% endif %}
                                        </td>
                                        {% endif %}
                                        {% if "architecture" in visible_columns %}
                                        <td data-column="architecture">
                                            {% if router.router_type != 'monitoring' %}
                                                {{ router.routerinformation.architecture|default_if_none:'' }}
                                            {% endif %}
                                        </td>
                                        {% endif %}
                                        {% if "cpu" in visible_columns %}
                                        <td data-column="cpu">
                                            {% if router.router_type != 'monitoring' %}
                                                {{ router.routerinformation.cpu|default_if_none:'' }}
                                            {% endif %}
                                        </td>
                                        {% endif %}
                                        <td class="min-width">
                                            <a href="/router/manage/?uuid={{ router.uuid }}"><i class="fas fa-edit"></i></a>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div class="row mb-3">
                            <div class="col-lg-12 text-right">
                                <a href="/router/manage/" class="btn btn-primary">Add Router</a>
                                <a href="/router/import_tool/" class="btn btn-primary">Import Tool</a>
                                <button id="select-all" class="btn btn-outline-primary" title="Select All"><i class="fas fa-check-square"></i></button>
                                <button id="select-none" class="btn btn-outline-primary" title="Select None"><i class="fas fa-square"></i></button>
                                <button id="create-backup" class="btn btn-warning" style="display: none;">Create Backup Task</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block custom_page_scripts %}
    <script>
        var last_status_change = "{{ last_status_change_timestamp }}";
        var group_uuid = "{{ filter_group.uuid|default_if_none:'' }}";
        var status_online_text = '<span style="display: none">online</span><i class="far fa-check-circle text-success" title="Host is Online"></i>';
        var status_offline_text = '<span style="display: none">offline</span><i class="far fa-times-circle text-danger" title="Host is unavailable"></i>';

        // Column definitions for the router table
        var columnDefinitions = [
            { name: "name", label: "Name", default: true },
            { name: "type", label: "Type", default: true },
            { name: "address", label: "Address", default: false },
            { name: "status", label: "Status", default: true },
            { name: "backup", label: "Backup", default: true },
            { name: "last_backup", label: "Last Backup", default: false },
            { name: "next_daily_backup", label: "Next Daily Backup", default: false },
            { name: "next_weekly_backup", label: "Next Weekly Backup", default: false },
            { name: "next_monthly_backup", label: "Next Monthly Backup", default: false },
            { name: "groups", label: "Groups", default: true },
            { name: "auth", label: "Auth", default: false },
            { name: "os_version", label: "OS Version", default: false },
            { name: "model_name", label: "Model Name", default: false },
            { name: "model_version", label: "Model Version", default: false },
            { name: "serial_number", label: "Serial Number", default: false },
            { name: "firmware_version", label: "Firmware Version", default: false },
            { name: "architecture", label: "Architecture", default: false },
            { name: "cpu", label: "CPU", default: false }
        ];

        function checkStatusChange() {
            $.ajax({
                url: "/monitoring/last_status_change/",
                success: function(data) {
                    if (data.last_status_change !== last_status_change) {
                        // Update last_status_change and fetch new router list
                        last_status_change = data.last_status_change;
                        fetchRouterList();
                    }
                }
            });
        }

        function fetchRouterList() {
            var url = group_uuid ? "/monitoring/export_router_list/?filter_group=" + group_uuid : "/monitoring/export_router_list/";
            $.ajax({
                url: url,
                success: function(data) {
                    updateRouterStatuses(data.router_list);
                }
            });
        }
        function updateRouterStatuses(routerList) {
            for (var uuid in routerList) {
                var router = routerList[uuid];
                var cells = dataTable.$('td#status-' + uuid);

                if (cells.length) {
                    cells.each(function () {
                        var $cell = $(this);
                        var currentStatusContent = $cell.html(); 
                        var $currentSpan = $cell.find('span');
                        var currentStatus = $currentSpan.length ? $currentSpan.text().trim() : '';

                        var newStatus = router.online ? 'online' : 'offline';
                        var newStatusHtml = router.online ? status_online_text : status_offline_text;

                        if (currentStatus !== newStatus) {
                            $cell.html(newStatusHtml);

                            $(document).Toasts('create', {
                                class: router.online ? 'bg-success' : 'bg-danger',
                                title: 'Host status updated',
                                body: 'Host ' + router.name + ' is now ' + newStatus,
                                delay: 10000,
                                autohide: true
                            });
                        }
                    });
                }
            }

            // No need to reapply column visibility as it's now handled by Django template tags
        }

        setInterval(checkStatusChange, 30000);
        $(document).ready(function() {
            checkStatusChange();
        });
    </script>

<script>
$(document).ready(function() {
    var table = dataTable;

    // Column visibility functions
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    function setCookie(name, value, days) {
        let expires = "";
        if (days) {
            const date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
    }

    function getVisibleColumns() {
        var cookieValue = getCookie('router_visible_columns');
        if (cookieValue) {
            return JSON.parse(cookieValue);
        }
        // Default columns if cookie doesn't exist
        return columnDefinitions.filter(function(col) {
            return col.default;
        }).map(function(col) {
            return col.name;
        });
    }

    // No need for applyColumnVisibility function as column visibility is now handled by Django template tags

    function populateColumnModal() {
        var visibleColumns = getVisibleColumns();
        var $container = $('#columnCheckboxes');
        $container.empty();

        columnDefinitions.forEach(function(col) {
            var isChecked = visibleColumns.includes(col.name);
            var $div = $('<div class="form-check">');
            var $input = $('<input class="form-check-input" type="checkbox" id="col-' + col.name + '" value="' + col.name + '"' + (isChecked ? ' checked' : '') + '>');
            var $label = $('<label class="form-check-label" for="col-' + col.name + '">' + col.label + '</label>');

            $div.append($input).append($label);
            $container.append($div);
        });
    }

    // No need to initialize column visibility as it's now handled by Django template tags

    // Show/Hide Columns button click handler
    $('#showHideColumnsBtn').on('click', function(e) {
        e.preventDefault();
        populateColumnModal();
        $('#columnVisibilityModal').modal('show');
    });

    // Apply button click handler
    $('#applyColumnVisibility').on('click', function() {
        var selectedColumns = [];
        $('#columnCheckboxes input:checked').each(function() {
            selectedColumns.push($(this).val());
        });

        // Save to cookie
        setCookie('router_visible_columns', JSON.stringify(selectedColumns), 365);

        // Reload the page with the same GET parameters
        var currentUrl = window.location.href;
        window.location.href = currentUrl;
    });

    // Function to delete a cookie
    function deleteCookie(name) {
        document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    }

    // Reset button click handler
    $('#resetColumnVisibility').on('click', function() {
        // Delete the router_visible_columns cookie
        deleteCookie('router_visible_columns');

        // Reload the page with the same GET parameters
        var currentUrl = window.location.href;
        window.location.href = currentUrl;
    });

    // Router selection functions
    function updateCheckboxes(checked) {
         table.$('.router-checkbox').prop('checked', checked).trigger('change');
    }

    $('#select-all').on('click', function(e) {
         e.preventDefault();
         updateCheckboxes(true);
    });

    $('#select-none').on('click', function(e) {
         e.preventDefault();
         updateCheckboxes(false);
    });

    $(document).on('change', '.router-checkbox', function() {
         var checkedCount = table.$('.router-checkbox:checked').length;
         if (checkedCount >= 1) {
             $('#create-backup').show();
         } else {
             $('#create-backup').hide();
         }
    });

    $('#create-backup').on('click', function(e) {
         e.preventDefault();
         var selectedRouters = table.$('.router-checkbox:checked').map(function() {
              return $(this).data('uuid');
         }).get();

         $.ajax({
              url: '/router/create_instant_backup/multiple/',
              method: 'POST',
              data: {
                   routers: selectedRouters,
                   csrfmiddlewaretoken: '{{ csrf_token }}'
              },
              success: function(response) {
                   var successRouters = [];
                   var errorMessages = [];

                   response.results.forEach(function(item) {
                         if (!item.status) {
                              successRouters.push(item.router);
                         } else {
                              errorMessages.push(item.router + ': ' + item.status);
                         }
                   });

                   if (successRouters.length > 0) {
                         $(document).Toasts('create', {
                              class: 'bg-success',
                              title: 'Backup Started',
                              body: 'Backup started for:<br>' + successRouters.join('<br>'),
                              delay: 10000,
                              autohide: true
                         });
                   }

                   if (errorMessages.length > 0) {
                         $(document).Toasts('create', {
                              class: 'bg-danger',
                              title: 'Backup Errors',
                              body: 'Problems:<br>' + errorMessages.join('<br>'),
                              delay: 10000,
                              autohide: true
                         });
                   }

                   updateCheckboxes(false);
              },
              error: function(xhr) {
                   $(document).Toasts('create', {
                        class: 'bg-danger',
                        title: 'Error',
                        body: 'Error: ' + xhr.responseJSON.error,
                        delay: 10000,
                        autohide: true
                   });
                   updateCheckboxes(false);
              }
         });
    });
});
</script>


{% endblock %}
