{% extends 'layout.html' %}

{% block title %} Дашборд {% endblock %}

{% block style %}
    h1 {
        color: #333;
        text-align: center;
        margin-top: 20px;
    }

    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f0f0f0;
    }

    .table-container {
        overflow-x: hidden;
    }

    table {
        width: 100%;
        margin-left: 0;
        padding: 0;
        border-collapse: collapse;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        max-width: 100%;
    }

    th, td {
        padding: 8px;
        text-align: center;
        border-bottom: 1px solid #ddd;
        font-size: 11px;
        width: 10%;
    }

    th {
        background-color: #007bff;
        color: #fff;
    }

    tr:hover {
        background-color: #f5f5f5;
    }

    button {
        border: none;
        background-color: #007bff;
        color: #fff;
        padding: 2px 5px;
        border-radius: 4px;
        cursor: pointer;
    }

    button:hover {
        background-color: #0056b3;
    }

    a.add {
        display: inline-block;
        background-color: #007bff;
        color: #ff1;
        padding: 5px 10px;
        border-radius: 5px;
        text-align: center;
        text-decoration: none;
        margin-right: 10px;
    }

    a.add:hover {
        background-color: #0056b3;
    }

    .search-container {
        margin-bottom: 20px;
    }

    .button-container {
        margin-bottom: 20px;
    }

    #searchInput {
        width: 50%;
        padding: 8px;
        margin-bottom: 10px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
{% endblock %}


{% block body %}
    <div class="search-container">
        <input type="text" id="searchInput" onkeyup="searchTable()" placeholder="Поиск ...">
    </div>
    <div class="button-container">
        <a href="{{ url_for('vm.add_virtual_machine') }}" class="add">Добавить ВМ</a>
        <a href="/vms" class="add">Редактировать</a>
        <a href="/manage" class="add">Управление</a>
    </div>

    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Адрес</th>
                    <th>Название</th>
                    <th>Назначение</th>
                    <th>ОC</th>
                    <th>Состояние</th>
                    <th>Кто занял</th>
                    <th>Под задачей</th>
                    <th>Когда занято</th>
                    <th>Действия</th>
                </tr>
            </thead>
            <tbody>
                {% for vm in virtual_machines %}
                    {% if vm.status != 'Свободно' %}
                        <tr style="background-color: #ffcccc;">
                            <td><a href="/vm_info/{{ vm.name }}/{{ vm.hyper }}">{{ loop.index }}</a></td>
                            <td>
                                {% if vm.ip_addres == None %}
                                    Данных нет
                                {% else %}
                                    {{ vm.ip_addres }}
                                {% endif %}
                            </td>
                            <td>{{ vm.name }}</td>
                            <td>
                                {% if vm.appointment == None %}
                                    Данных нет
                                {% else %}
                                    {{ vm.appointment }}
                                {% endif %}
                            </td>
                            <td>{{ vm.os }}</td>
                            <td>
                                {% if vm.power_status == 'poweredOn' %}
                                    <img src="{{ url_for('static', filename='on.png') }}" width="20" height="20">
                                {% elif vm.power_status == 'poweredOff' %}
                                    <img src="{{ url_for('static', filename='off.png') }}" width="20" height="20">
                                {% else %}
                                    Не определено
                                {% endif %}
                            </td>
                            <td>
                                {% if vm.technical != True %}
                                    {% if vm.who_borrowed == None %}
                                        Данных нет
                                    {% else %}
                                        {{ vm.who_borrowed }}
                                    {% endif %}
                                {% else %}
                                    <img src="{{ url_for('static', filename='sotp.png') }}" width="20" height="20">
                                {% endif %}
                            </td>
                            <td>
                                {% if vm.technical != True %}
                                    {{ vm.task }}
                                {% else %}
                                    <img src="{{ url_for('static', filename='sotp.png') }}" width="20" height="20">
                                {% endif %}
                            </td>
                            <td>
                                {% if vm.technical != True %}
                                    {{ vm.busy_date }}
                                {% else %}
                                    <img src="{{ url_for('static', filename='sotp.png') }}" width="20" height="20">
                                {% endif %}
                            </td>
                            <td>
                                {% if vm.technical != True %}
                                    {% if vm.status == 'Свободно' %}
                                        <button onclick="openOccupationForm({{ vm.id }})">ЗАНЯТЬ</button>
                                    {% else %}
                                        <button onclick="releaseOccupation({{ vm.id }})">ОСВОБОДИТЬ</button>
                                    {% endif %}
                                {% else %}
                                    <img src="{{ url_for('static', filename='sotp.png') }}" width="20" height="20">
                                {% endif %}
                            </td>
                        </tr>
                    {% endif %}
                {% endfor %}
                {% for vm in virtual_machines %}
                    {% if vm.status == 'Свободно' and vm.technical != True %}
                        <tr>
                            <td><a href="/vm_info/{{ vm.name }}/{{ vm.hyper }}">{{ loop.index }}</a></td>
                            <td>
                                {% if vm.ip_addres == None %}
                                    Данных нет
                                {% else %}
                                    {{ vm.ip_addres }}
                                {% endif %}
                            </td>
                            <td>{{ vm.name }}</td>
                            <td>
                                {% if vm.appointment == None %}
                                    Данных нет
                                {% else %}
                                    {{ vm.appointment }}
                                {% endif %}
                            </td>
                            <td>{{ vm.os }}</td>
                            <td>
                                {% if vm.power_status == 'poweredOn' %}
                                    <img src="{{ url_for('static', filename='on.png') }}" width="20" height="20">
                                {% elif vm.power_status == 'poweredOff' %}
                                    <img src="{{ url_for('static', filename='off.png') }}" width="20" height="20">
                                {% else %}
                                    Не определено
                                {% endif %}
                            </td>
                            <td>
                                {% if vm.technical != True %}
                                    {% if vm.who_borrowed == None %}
                                        Данных нет
                                    {% else %}
                                        {{ vm.who_borrowed }}
                                    {% endif %}
                                {% else %}
                                    <img src="{{ url_for('static', filename='sotp.png') }}" width="20" height="20">
                                {% endif %}
                            </td>
                            <td>
                                {% if vm.technical != True %}
                                    {{ vm.task }}
                                {% else %}
                                    <img src="{{ url_for('static', filename='sotp.png') }}" width="20" height="20">
                                {% endif %}
                            </td>
                            <td>
                                {% if vm.technical != True %}
                                    {{ vm.busy_date }}
                                {% else %}
                                    <img src="{{ url_for('static', filename='sotp.png') }}" width="20" height="20">
                                {% endif %}
                            </td>
                            <td>
                                {% if vm.technical != True %}
                                    {% if vm.status == 'Свободно' %}
                                        <button onclick="openOccupationForm({{ vm.id }})">ЗАНЯТЬ</button>
                                    {% else %}
                                        <button onclick="releaseOccupation({{ vm.id }})">ОСВОБОДИТЬ</button>
                                    {% endif %}
                                {% else %}
                                    <img src="{{ url_for('static', filename='sotp.png') }}" width="20" height="20">
                                {% endif %}
                            </td>
                        </tr>
                    {% endif %}
                {% endfor %}
                {% for vm in virtual_machines %}
                    {% if vm.technical == True %}
                        <tr style="background-color: #ffff99;">
                            <td><a href="/vm_info/{{ vm.name }}/{{ vm.hyper }}">{{ loop.index }}</a></td>
                            <td>
                                {% if vm.ip_addres == None %}
                                    Данных нет
                                {% else %}
                                    {{ vm.ip_addres }}
                                {% endif %}
                            </td>
                            <td>{{ vm.name }}</td>
                            <td>
                                {% if vm.appointment == None %}
                                    Данных нет
                                {% else %}
                                    {{ vm.appointment }}
                                {% endif %}
                            </td>
                            <td>{{ vm.os }}</td>
                            <td>
                                {% if vm.power_status == 'poweredOn' %}
                                    <img src="{{ url_for('static', filename='on.png') }}" width="20" height="20">
                                {% elif vm.power_status == 'poweredOff' %}
                                    <img src="{{ url_for('static', filename='off.png') }}" width="20" height="20">
                                {% else %}
                                    Не определено
                                {% endif %}
                            </td>
                            <td>х</td>
                            <td>х</td>
                            <td>х</td>
                            <td>
                                <img src="{{ url_for('static', filename='sotp.png') }}" width="20" height="20">
                            </td>
                        </tr>
                    {% endif %}
                {% endfor %}
            </tbody>
        </table>
    </div>


    <script>
        function openOccupationForm(vmId) {
            var task = prompt("Введите задачу:");

            if (task !== null) {
                var currentDate = new Date();
                var busyDate = currentDate.toLocaleString();

                var form = document.createElement('form');
                form.method = 'post';
                form.action = '/occupy/' + vmId;


                var taskInput = document.createElement('input');
                taskInput.type = 'hidden';
                taskInput.name = 'task';
                taskInput.value = task;
                form.appendChild(taskInput);

                var busyDateInput = document.createElement('input');
                busyDateInput.type = 'hidden';
                busyDateInput.name = 'busy_date';
                busyDateInput.value = busyDate;
                form.appendChild(busyDateInput);

                document.body.appendChild(form);
                form.submit();
            }
        }

        function releaseOccupation(vmId) {
            var confirmation = confirm("Вы уверены, что хотите освободить эту ВМ?");
            if (confirmation) {
                var form = document.createElement('form');
                form.method = 'post';
                form.action = '/release/' + vmId;

                var statusInput = document.createElement('input');
                statusInput.type = 'hidden';
                statusInput.name = 'status';
                statusInput.value = 'Свободно';
                form.appendChild(statusInput);

                document.body.appendChild(form);
                form.submit();
            }
        }

        function searchTable() {
            var input, filter, table, tr, td, i, txtValue;
            input = document.getElementById("searchInput");
            filter = input.value.toUpperCase();
            table = document.getElementsByTagName("table")[0];
            tr = table.getElementsByTagName("tr");

            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td");
                for (var j = 0; j < td.length; j++) {
                    if (td[j]) {
                        txtValue = td[j].textContent || td[j].innerText;
                        if (txtValue.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = "";
                            break;
                        } else {
                            tr[i].style.display = "none";
                        }
                    }
                }
            }
        }

    </script>
{% endblock %}