<!--
 Copyright 2022-2023 ETSI TeraFlowSDN - TFS OSG (https://tfs.etsi.org/)

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->
{% extends 'base.html' %}
{% block content %}
    <h1>Send Path </h1>
    <h5>Create, delete or modify paths</h5>
    <div>
        <form action="{{ url_for('pcep.sendPath') }}" method="post" id="sendPathForm">
            {{ form.hidden_tag() }}
            <fieldset>
               <div class="row mb-3">
                    {{ form.command.label(class="col-sm-2 col-form-label") }}
                    <div class="col-sm-10">
                    {% if form.command.errors %}
                    {{ form.command(class="form-control is-invalid") }}
                    <div class="invalid-feedback">
                         {% for error in form.command.errors %}
                         <span>{{ error }}</span>
                         {% endfor %}
                    </div>
                    {% else %}
                    {{ form.command(class="form-control") }}
                    {% endif %}
                    </div>
               </div>
                <div class="row mb-3">
                    <label for="commandType" class="col-sm-2 col-form-label">Command</label>
                    <div class="col-sm-10">
                        <select id="commandType" class="form-control" onchange="updateForm()">
                            <option value="initiate lsp">Initiate LSP</option>
                            <option value="terminate lsp">Terminate LSP</option>
                            <option value="update lsp">Update LSP</option>
                            <option value="create candidatepath">Create Candidate Path</option>
                        </select>
                    </div>
                </div>
                <div id="dynamicFields"></div>
                <!-- Campo oculto para almacenar el comando generado -->
                <input type="hidden" id="command" name="command">
            </fieldset>
            <button type="submit" class="btn btn-primary" onclick="assembleCommand(event)">
                <i class="bi bi-plus-circle-fill"></i> Send Command
            </button>
        </form>
    </div>

    {% if response %}
        <div class="mt-4">
            <h5>Response</h5>
            <p><strong>Success:</strong> {{ response.success }}</p>
            <p><strong>Error Message:</strong> {{ response.error_message }}</p>
        </div>
    {% endif %}

    <script>
        function updateForm() {
            let commandType = document.getElementById("commandType").value;
            let dynamicFields = document.getElementById("dynamicFields");
            dynamicFields.innerHTML = ""; // Limpiar campos previos

            if (commandType === "initiate lsp") {
                dynamicFields.innerHTML = `
                    <div class='row mb-3'>
                        <label class='col-sm-2 col-form-label'>Nombre LSP</label>
                        <div class='col-sm-10'><input type='text' class='form-control' name='lsp_name' value='prueba'></div>
                    </div>
                    <div class='row mb-3'>
                        <label class='col-sm-2 col-form-label'>PCC IP</label>
                        <div class='col-sm-10'><input type='text' class='form-control' name='pcc_ip' value='10.95.90.56'></div>
                    </div>
                    <div class='row mb-3'>
                        <label class='col-sm-2 col-form-label'>Headpoint</label>
                        <div class='col-sm-10'><input type='text' class='form-control' name='headpoint' value='1.1.1.1'></div>
                    </div>
                    <div class='row mb-3'>
                        <label class='col-sm-2 col-form-label'>Endpoint</label>
                        <div class='col-sm-10'><input type='text' class='form-control' name='endpoint' value='1.1.1.2'></div>
                    </div>
                    <div class='row mb-3'>
                        <label class='col-sm-2 col-form-label'>SID ENLACE</label>
                        <div class='col-sm-10'><input type='text' class='form-control' name='SID' value='m1228800'></div>
                    </div>
                    <div class='row mb-3'>
                        <label class='col-sm-2 col-form-label'>na[dir.ip1]-[dir.ip2]</label>
                        <div class='col-sm-10'><input type='text' class='form-control' name='na' value='na192.168.3.11-192.168.3.13'></div>
                    </div>
                    <div class='row mb-3'>
                        <label class='col-sm-2 col-form-label'>SID ENLACE</label>
                        <div class='col-sm-10'><input type='text' class='form-control' name='SID' value='m819200'></div>
                    </div>
                    <div class='row mb-3'>
                        <label class='col-sm-2 col-form-label'>na[dir.ip1]-[dir.ip2]</label>
                        <div class='col-sm-10'><input type='text' class='form-control' name='na' value='na192.168.2.13-192.168.2.12'></div>
                    </div>
                `;
            } else if (commandType === "terminate lsp") {
                dynamicFields.innerHTML = `
                    <div class='row mb-3'>
                        <label class='col-sm-2 col-form-label'>IP PCC</label>
                        <div class='col-sm-10'><input type='text' class='form-control' name='lsp_name'></div>
                    </div>
                    <div class='row mb-3'>
                        <label class='col-sm-2 col-form-label'>LSP-ID</label>
                        <div class='col-sm-10'><input type='text' class='form-control' name='lsp_id'></div>
                    </div>
                    <div class='row mb-3'>
                        <label class='col-sm-2 col-form-label'>LSP Name</label>
                        <div class='col-sm-10'><input type='text' class='form-control' name='lsp_name'></div>
                    </div>
                `;
            } // Agregar más condiciones según sea necesario
        }

        function assembleCommand(event) {
          event.preventDefault(); // Evita que se envíe el formulario inmediatamente

          // let commandType = document.getElementById("commandType").value;
          let command = "";  // Comienza con el tipo de comando ya agregado

          // Obtén todos los elementos del formulario que no sean el campo oculto 'command'
          let formElements = document.querySelectorAll("#sendPathForm input, #sendPathForm select");

          formElements.forEach(function(element) {
               let elementName = element.name;
               let elementValue = element.value.trim(); // Obtener el valor y quitar espacios adicionales
               
               // Solo agregar al comando si el valor no está vacío, ni es el campo 'command' ni 'csrf_token'
               if (elementValue && elementName !== 'command' && elementName !== 'csrf_token') {
                    command += ` ${elementValue}`; // Agrega el valor del campo al comando
               }
          });

          // El campo oculto 'command' ya tiene el comando generado, así que no lo sobreescribimos
          document.getElementById("command").value = command.trim();  // Agrega el comando generado al campo oculto

          // Envía el formulario
          document.getElementById("sendPathForm").submit();
     }
    </script>
{% endblock %}