{% extends "base.html" %}

{% block search_bar %}
{% include "search_configuraitions.html" %}
{% endblock %}

{% block main_content %}

<div class="modal fade" id="configuration_loading" tabindex="-1" aria-labelledby="configuration_loading"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="configuration_loading">Duplicate configuration</h3>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="d-flex align-items-center">
          <strong>Configuration duplicate in progress...</strong>
          <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary nobg" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade modal-xl" id="configuration_view_modal" tabindex="-1" aria-labelledby="configuration_view_modal"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="config-modal-title">Configuration: </h3>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

        <div class="config_view_spinner"></div>
        <p id="configViewMessage"></p>
        <div id="ConfigTableContainer" class="wbfix"></div> <!-- Container for the table -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary nobg" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


<!-- Edit modal -->
<div class="modal fade modal-lg" id="configuration_edit_modal" tabindex="-1" aria-labelledby="configuration_edit_modal"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Edit Configuration TS48</h3>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form class="row g-3 conf-profile-select">
          <div class="col-12">
            <label for="inputComment" class="form-label">Comment</label>
            <input type="text" class="form-control" maxlength="60" id="modalComment"
              placeholder="Additional configuration comment">
          </div>

          <div class="col-md-3">
            <select class="form-select" aria-label="Select profile" disabled>
              <option>Select preset</option>
              <option selected value="1">TS48 preset</option>
            </select>
          </div>
          <div class="col-md-9">
            <label for="inputAdm" class="form-label desclabelfix">Selected preset values such as: PIN, PIN2, ADM, ADM2,
              PUK, PUK2
              codes will be used for this configuration</label>
          </div>
          <div class="col-12">
            <input class="form-check-input" type="checkbox" value="" id="modalCheckbox">
            <label class="form-check-label fix">
              Use for restoring to default
            </label>
          </div>
        </form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary nobg" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary nobg" id="modalSaveButton">Save</button>
      </div>
    </div>
  </div>
</div>
<!-- Edit modal -->


<!-- HELP -->
{% if admin_mode %}
<div class="dev-help"></div>
<div class="conf-acc">
<!-- HELP list -->	
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Configuration Data and Structure validation
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        1. Please verify all Configuration data is valid and consistent (e.g., field lengths, contents, number of records)<br>
		2. Verify Linear files records. <br>
		<b>It is very important for fields with multiple records to have all records in one row</b><br><br>
		<b>Example #1:</b> wrong records for Linear file (marked with red color)<br>
		<img src="/static/conf_1.png"><br><br>
		
		<b>Example #2:</b> correct records for Linear file<br>
		<img src="/static/conf_2.png">
		
      </div>
    </div>
  </div>
</div>
</div>
{% endif %}
<table class="styled-table profile-list-table conf-list-table">
  <thead>
    <tr>
      <th scope="col">Configuration name</th>
      <th scope="col">Profile</th>
      <th scope="col">File Size</th>
      <th scope="col">Comment</th>
      <th scope="col">Validation</th>
      <th scope="col" class="colright">Actions</th>
    </tr>
  </thead>
  <tbody>
    {% for config in configs %}
    <tr>

      {% if config.default %}
      <td>
        {{ config.name }}
        <i class="fa-solid fa-star" data-toggle="tooltip" data-placement="right" title="Default configuration"></i>
      </td>
      {% else %}
      <td>{{ config.name }}</td>
      {% endif %}

      <td>Generic TS.48</td>
      <td>{{ config.size }} entries</td>
      <td>{{ config.comments }}</td>
      {% if config.validation %}
      <td class="valfix"><i class="fas fa-check text-success" data-toggle="tooltip" title="Configuration validated"></i>
      </td>
      {% else %}
      <td class="valfix"><i class="fas fa-exclamation-triangle alert-danger fa-beat" data-toggle="tooltip"
          title="{{ config.validation_reason }} "></i></td>
      {% endif %}


      <td>

        <i class="fa fa-eye fa-solid ifix" onclick="viewConfig('{{ config.name }}')" data-toggle="tooltip"
          data-placement="right" title="View configuration" data-bs-toggle="modal"
          data-bs-target="#configuration_view_modal" data-toggle="tooltip" data-placement="right"></i>
        {% if admin_mode %}
        <i class="fa-regular fa-pen-to-square ifix" data-bs-toggle="modal" data-bs-target="#configuration_edit_modal"
          data-toggle="tooltip" data-placement="right" title="Edit configuration"
          onclick="editConfig('{{ config.name }}', event)"></i>

        <i class="fa-solid fa-clone fa-solid ifix temp-gray" data-toggle="tooltip" data-placement="right" data-bs-html="true" data-bs-title="<b>Duplicate configuration</b><br>This feature is not currently supported"></i>
		
<!--		<i class="fa-solid fa-trash fa-solid ifix temp-gray" data-toggle="tooltip" data-placement="right" data-bs-html="true" data-bs-title="<b>Delete Configuration</b><br>This feature is not currently supported"></i>-->

        <i class="fa fa-trash ifix" onclick="deleteConfig('{{ config.name }}', event)" data-toggle="tooltip" title="Delete Configuration" style="cursor: pointer;"></i>

        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endblock %}




{% block script_block %}
<script>
  $(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
  });

  function editConfig(configName) {
    console.log("edit config", configName);

    // Fetch configuration details from server
    fetch(`/config/view/info/${configName}`)
      .then(response => response.json())
      .then(data => {
        // Update the modal title with the configuration name
        $('#configuration_edit_modal .modal-title').text('Edit Configuration ' + configName);

        // Populate the form elements with data from server

        console.log("Comment", data.comments)

        $('#modalComment').val(data.comments || '');
        $('#modalCheckbox').prop('checked', data.default || false);

        if(! data.validation){
          document.getElementById("modalCheckbox").disabled = true;
        }
        else{
          document.getElementById("modalCheckbox").disabled = false;
        }

        // Show the edit modal
        $('#configuration_edit_modal').modal('show');
      })
      .catch(error => {
        console.error('There was an error fetching the configuration!', error);
      });
  }

  $(document).ready(function () {
    $('#modalSaveButton').on('click', function () {
      const configName = $('#configuration_edit_modal .modal-title').text().replace('Edit Configuration ', '');
      const comment = $('#modalComment').val();
      const isDefault = $('#modalCheckbox').prop('checked');

      // Call your save function
      saveConfiguration(configName, comment, isDefault);
    });
  });


  function saveConfiguration(configName, comment, isDefault) {

    comment = comment ? comment : ' ';

    console.log(`Saving Configuration ${configName}, Comment: ${comment}, Is Default: ${isDefault}`);

    fetch(`/config/edit/${configName}/${comment}/${isDefault}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(response => {
        if (response.status >= 400) {
          throw new Error("Bad response from server");
        }
      })
      .then(data => {
        console.log("Configuration updated:", data);
        $('#configuration_edit_modal').modal('hide');
        location.reload();
      })
      .catch((error) => console.error('Error:', error));
  }




  function deleteConfig(configName, event) {

    // Send a request to the delete endpoint
    fetch(`${MAIN_HOST}/config/delete/` + configName)
      .then(response => response.json())
      .then(data => {
        // Get the table row that contains the clicked trash icon
        const row = event.target.closest('tr');

        // Remove the row from the table
        row.parentNode.removeChild(row);
		$('.tooltip').tooltip('hide');
      })
      .catch(error => {
        // Handle the error (e.g., show an error message)
        console.error('Error deleting configuration:', error);
      });
  }

  function duplicateConfig(configName, event) {

    console.log("Duplicating");

    // Show the duplication progress modal
    $('#configuration_loading').modal('show');

    // Send a request to the duplicate endpoint
    fetch(`${MAIN_HOST}/config/duplicate/` + configName, {
      method: 'GET'
    })
      .then(response => response.json())
      .then(data => {
        // Hide the duplication progress modal
        $('#configuration_loading').modal('hide');

        // You can refresh the page or add the new configuration to the table dynamically
        location.reload();
      })
      .catch(error => {
        // Hide the duplication progress modal
        $('#configuration_loading').modal('hide');

        // Handle the error (e.g., show an error message)
        console.error('Error duplicating configuration:', error);
      });
  }

  function truncateText(text, maxLength) {
    if (text.length <= maxLength) {
      return text;
    }

    const ellipsis = '...';
    const ellipsisLength = ellipsis.length;
    const leftChars = Math.ceil((maxLength - ellipsisLength) / 2);
    const rightChars = maxLength - ellipsisLength - leftChars;

    return text.slice(0, leftChars) + ellipsis + text.slice(-rightChars);
  }

  function viewConfig(configName) {
    console.log("view config");
    document.getElementById('config-modal-title').innerText = 'Configuration: '+ configName;
    var tableHtml = '<table class="table table-striped table-bordered">';
    tableHtml += '<thead><tr><th class="tbordth1">File Id</th><th class="tbordth2">File Name</th><th class="tbordth3">File Type</th><th class="tbordth4">Size</th><th class="tbordthcontent">Content</th></tr></thead><tbody>';

    // Fetch the configuration details
    fetch(`${MAIN_HOST}/config/view/` + configName)
      .then(response => response.json())
      .then(data => {
        console.log(data);

        // Get the existing table element
        $('#ConfigTableContainer').empty(); // Clear previous table

        var linearFileId = null;
        var linearFileCounter = 0;

        data.content.forEach(function (row) {
          tableHtml += '<tr>';

          if (row['File Name'] === '-' || row['File Type'] === '-' || row['Content'] === '') {
            tableHtml += '<td colspan="5" class="tdtile">' + row['File Id'] + '</td>';
          } else {
            if (row['File Type'] === 'Linear') {
              if (linearFileId !== row['File Id']) {
                tableHtml += '<td class="tdlineratitle">' + row['File Id'] + '</td>';
                tableHtml += '<td>' + (row['File Name'] === '-' ? '' : row['File Name']) + '</td>';
                tableHtml += '<td>' + row['File Type'] + '</td>';
                tableHtml += '<td></td>';
                tableHtml += '<td></td>';
                isLinear = true;
                linearFileId = row['File Id'];
                linearFileCounter = 1;
                tableHtml += '</tr>';
                tableHtml += '<tr><td class="tdlinearsubtitle" colspan="3">Rec: ' + linearFileCounter + '</td>';
                tableHtml += '<td>' + row['Content'].length / 2 + '</td>';
                tableHtml += '<td>' + row['Content'] + '</td></tr>';
              } else if (linearFileId === row['File Id']) {
                tableHtml += '<tr><td class="tdlinearsubtitle" colspan="3">Rec: ' + linearFileCounter + '</td>';
                tableHtml += '<td>' + row['Content'].length / 2 + '</td>';
                tableHtml += '<td>' + row['Content'] + '</td></tr>';
              }
              linearFileCounter += 1;
            } else {
              isLinear = false;
              linearFileId = null;
              linearFileCounter = 1;
              tableHtml += '<td>' + row['File Id'] + '</td>';
              tableHtml += '<td>' + (row['File Name'] === '-' ? '' : row['File Name']) + '</td>';
              tableHtml += '<td>' + (row['File Type'] === '-' ? '' : row['File Type']) + '</td>';
              tableHtml += '<td>' + row['Content'].length / 2 + '</td>';
              tableHtml += '<td>' + row['Content'] + '</td>';
            }
          }
          tableHtml += '</tr>';
        });

        tableHtml += '</tbody></table>';

        // Insert the table into the ConfigTableContainer
        $('#ConfigTableContainer').html(tableHtml);
      });
  }

</script>
{% endblock %}