{% extends "base.html" %} {% block content %} {% load wx_filters %}
<div class="srf-container">
  <div style="display: flex; justify-content: space-between; margin-bottom: 16px">
    <span class="srf-display-1 text-uppercase">Export Stations to OSCAR</span>
  </div>
  
  <div class="srf-layout" style="width:100%;">
    <form id="oscar-station-form">

      <div>
        <div id="min_oscar_error_container" class="hide-msg">

          <h6 style="font-weight: bolder; color: #d32f2f; cursor: pointer;" onclick="openStatusMsg()">
            <i class="fa fa-exclamation-triangle" aria-hidden="true" style="font-size: larger;"></i>&nbsp&nbsp
            OSCAR Upload Failed!
            <i class="fa fa-chevron-circle-down" aria-hidden="true" style="float: right; font-size: larger;"></i>
          </h6>

        </div>

        <div id="oscar_error_container" class="hide-msg">

          <h4 style="font-weight: bolder; color: #d32f2f;">
              <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> OSCAR Upload Failed!
              <i class="fa fa-chevron-circle-up" aria-hidden="true" style="float: right; cursor: pointer;" onclick="closeStatusMsg()"></i>
          </h4>
  
          <div id="status_msg">
          </div>
  
        </div>
      </div>

      {% csrf_token %} 
      <table id="id_station_list" class="mdl-data-table" style="width:100%;">
        <h6 style="color: #9e9e9e;"><span style="color: red;">**</span>Only stations meeting OSCAR minimum requirements are displayed</h6>

        <thead>
          <tr>
            <th>Export</th>
            <th>Wigos ID</th>
            <th>Name</th>
            <th>Reporting Status</th>
            <th>Longitude</th>
            <th>Latitude</th>
            <th>Station Type</th> 
            <th>Begin Date</th>
            <th>Last update</th>
          </tr>
        </thead>
        <tbody>
          {% for station in object_list %}
            <tr>
              <td>
                <label id="{{ station.name }}">
                  <input type="checkbox" class="filled-in" name="selected_ids[]" value="{{ station.wigos }}"/>
                  <span></span>
                </label>
              </td>
              <td>{{ station.wigos }}</td>
              <td>
                <a href="{{ station.get_absolute_url }}">{{ station.name }}</a>
              </td>
              <td>{{ station.reporting_status }}</td>
              <td>{{ station.longitude }}</td>
              <td>{{ station.latitude }}</td>
              <td>{{ station.wmo_station_type }}</td>
              <td>{{ station.begin_date }}</td>
              <td>{{ station.updated_at }}</td>
            </tr>

          {% endfor %}
        </tbody>
      </table>

      
        <div style="width: 20%; margin-bottom: 25px;">
          <label for="api-token" style="margin-bottom: 0px;"><span style="font-size: 20px; color: red; display: inline-block;">* </span>API Token:</label>
          <input type="text" id="api-token" name="api_token" required>
        </div> 

        <div class="srf-flex">
            <button class="btn-outline-default btn-small" type="button" onclick="selectAll()">
              Export All
            </button>

            <button id="export-selected-btn" class="btn-outline-default btn-small" type="button" onclick="submitForm()">
              Export Selected
            </button>

        </div>
      


    </form>

    <!-- spinner and overlay -->
    <div id="overlay" class="overlay"></div>
    <div id="spinner" class="spinner"></div>
    <div id="spinner-text" class="spinner-text">Exporting Station Metadata to OSCAR....</div>
    

  </div>
</div>
<style>
.station_status_msg {
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
  transition: background-color 0.3s ease; /* Smooth background color transition */
  border-radius: 20px;
}

.station_status_msg:hover {
  background-color: rgb(85, 84, 84); /* Background changes on hover */
}

.station_status_msg:hover h6{
 color: white;
}

.clickable-heading {
  cursor: pointer; /* Make the heading look clickable */
  color: #b01f1f; /* Default color */
  transition: color 0.2s ease; /* Smooth color transition */
}

/* Change the h6 text color on hover */
.clickable-heading:hover {
  color: white;
}

/* Change h6 text color to white when content is visible */
.station_status_msg.active-background .clickable-heading {
  color: white;
}

.hidden-content {
  display: none; /* Initially hidden */
}

.visible-content {
  display: block;
  color: white; /* Text color when visible */
  transition: color 0.3s ease; /* Smooth text color transition */
}

.active-background {
  background-color: rgb(85, 84, 84); /* Background color when content is visible */
}

.close-btn-bottom {
  margin-top: 10px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 2px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.close-btn-bottom:hover {
  background-color: #d32f2f; /* Darker shade on hover */
}


  /* oscar status msg styling start*/
  #min_oscar_error_container {
    padding: 5px; 
    background-color: #f8d7da; 
    border-left: 5px solid #f44336; 
    border-radius: 0px 20px 20px 0px; 
    width: 30%; 
    padding-right: 10px;
  }

  #oscar_error_container {
    padding: 10px; 
    background-color: #f8d7da; 
    border-left: 5px solid #f44336; 
    border-radius: 0px 20px 20px 0px;
    max-height: 50vh;
    overflow: auto;
  }

  #status_msg {
    color: #d32f2f; 
    font-size: 1rem; 
    line-height: 1.5; 
    white-space: pre-wrap;
  }

  /* oscar status msg styling end*/

  .show-msg {
    display: block;
  }

  .hide-msg {
    display: none;
  }

  table.dataTable thead .sorting, 
  table.dataTable thead .sorting_asc, 
  table.dataTable thead .sorting_desc {
    background : none;
  }

  .spinner {
      display: none;
      border: 8px solid #f3f3f3;
      border-top: 8px solid #3498db;
      border-radius: 50%;
      width: 70px;
      height: 70px;
      animation: spin 2s linear infinite;
      position: fixed;
      top: 50%;
      left: 50%;
      margin-left: -35px;
      margin-top: -50px;
      z-index: 1001;
  }


  .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.306);
      z-index: 1000;
      backdrop-filter: blur(5px);
  }


  .spinner-text {
      display: none;
      position: fixed;
      top: 60%;
      left: 50%;
      transform: translateX(-50%);
      color: #5a5a5a;
      font-size: 25px;
      text-align: center;
      z-index: 1001;
  }

  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }

  .input-error {
    border-bottom: 1px solid red !important;
  }

  .input-error:focus {
    border-bottom: 1px solid red !important;
  }

</style>
<!-- </div> -->
{% endblock %} {% block localjavascript %}
<script>
  
  $(document).ready(function() {
    $('#id_station_list').DataTable({
      scrollX: true,
      columnDefs: [
        {
          targets: [0, 1, 2],
          className: 'mdl-data-table__cell--non-numeric'
        }
      ]
    });
  });

  // submit wigos ids for station export to OSCAR
  function submitForm() {
    var formData = $('#oscar-station-form').serializeArray();

    if (!formData[formData.length - 1]['value']) {
      document.getElementById('api-token').classList.add('input-error');

      document.getElementById('api-token').addEventListener('click', function() {
          document.getElementById('api-token').classList.remove('input-error');
      });
      return;
    }

    // Show the spinner, text, and overlay
    document.getElementById('overlay').style.display = 'block';
    document.getElementById('spinner').style.display = 'block';
    document.getElementById('spinner-text').style.display = 'block';

    $.ajax({
      type: 'POST',
      url: '',
      data: formData,
      success: function(response) {
            if (response.success) {
                // hide the spinner, text, and overlay
                document.getElementById('overlay').style.display = 'none';
                document.getElementById('spinner').style.display = 'none';
                document.getElementById('spinner-text').style.display = 'none';

                // console.log(response.status_station_names);

                // unselect options
                unSelectAll();

                var oscar_status_msg = response.oscar_status_msg;

                var station_names = response.status_station_names;

                // clear the status message container of any existing messages
                document.getElementById("status_msg").innerHTML = "";


                // looping through status messages
                for (let index = 0; index < oscar_status_msg.length; index++) {
                  let msg_dict = oscar_status_msg[index];

                  let msg = '';

                  // Check if 'code' exists in msg_dict
                  if (msg_dict.hasOwnProperty('code')) {
                      if (msg_dict['code'] === 401) {
                          msg = "Incorrect API token!\nTo be able to access OSCAR a valid API token is required.\nEnter the correct API token or please contact OSCAR service desk!";
                      } else if (msg_dict['code'] === 412) {
                          msg = msg_dict['description'];
                      } else {
                          msg = "An error occurred when attempting to add a station to OSCAR during station creation!";
                      }
                  }

                  // Check if 'xmlStatus' exists in msg_dict
                  else if (msg_dict.hasOwnProperty('xmlStatus')) {
                      if (msg_dict['xmlStatus'] === 'SUCCESS') {
                          // replace tick box with success icon
                          clearAndInsertIcon(station_names[index]);
                          continue;
                      } else {
                          msg = msg_dict['logs'];
                      }
                  }

                  // display the error messages
                  document.getElementById('oscar_error_container').classList.remove('hide-msg');

                  // Create a div element
                  let div = document.createElement('div');
                  div.className = 'station_status_msg'; // Add class to the div

                  // Create an h6 element and add text from the looped data
                  let heading = document.createElement('h6');
                  heading.innerHTML = `<b>${station_names[index]}</b>&nbsp;<i class="fa fa-info-circle" aria-hidden="true"></i>`;
                  heading.classList.add('clickable-heading'); // Add class for cursor and hover effect

                  // Create a paragraph element and add text from the looped data, initially hidden
                  let paragraph = document.createElement('p');
                  paragraph.innerHTML = msg;
                  paragraph.classList.add('hidden-content'); // Initially hidden content

                  // Create a close button for the bottom, initially hidden
                  let closeBtnBottom = document.createElement('button');
                  closeBtnBottom.innerHTML = 'Close';
                  closeBtnBottom.classList.add('close-btn-bottom', 'hidden-content'); // Initially hidden
                  closeBtnBottom.type = 'button';

                  // Append the heading, paragraph, and bottom close button to the div
                  div.appendChild(heading);
                  div.appendChild(paragraph);
                  div.appendChild(closeBtnBottom);

                  // Add a click event listener to the heading to toggle visibility of the paragraph and close button
                  heading.addEventListener('click', function () {
                    const isVisible = paragraph.classList.contains('visible-content');
                    paragraph.classList.toggle('visible-content', !isVisible); // Toggle content visibility
                    closeBtnBottom.classList.toggle('visible-content', !isVisible); // Toggle close button visibility
                    div.classList.toggle('active-background', !isVisible); // Toggle background color
                  });

                  // Add a click event listener to the bottom close button
                  closeBtnBottom.addEventListener('click', function () {
                    paragraph.classList.remove('visible-content'); // Hide content
                    closeBtnBottom.classList.remove('visible-content'); // Hide close button
                    div.classList.remove('active-background'); // Reset background color
                  });

                  // Finally, append the div to the target element
                  document.getElementById('status_msg').appendChild(div);
                }


                // Check if the status_msg container has no child elements or no text content then hide oscar_error_container
                if (!document.getElementById("status_msg").hasChildNodes() || document.getElementById("status_msg").textContent.trim() === "") {
                    // Add a class to hide the div
                    document.getElementById("oscar_error_container").classList.add("hide-msg");
                }


                // move to the top of the page
                window.scrollTo({top:0, behavior: 'smooth',});
                
            } 
            else {
                // hide the spinner, text, and overlay
                document.getElementById('overlay').style.display = 'none';
                document.getElementById('spinner').style.display = 'none';
                document.getElementById('spinner-text').style.display = 'none';

                // show the error container
                document.getElementById('oscar_error_container').classList.remove('hide-msg');

                // display the status msg in the error container
                document.getElementById('status_msg').innerText = "An error occured attempting to export station to OSCAR.";

                // unselect options
                unSelectAll();

                // move to the top of the page
                window.scrollTo({top:0, behavior: 'smooth',});
            }
        },
      error: function() {
      }
    });
  }
  
  // Check if the overlay and spinner are displayed when the page is loaded
  window.onload = function() {
      var overlay = document.getElementById('overlay');
      
      // Check if the overlay display is currently 'block'
      if (overlay.style.display === 'block') {
          // Hide the overlay and spinner if display is 'block'
          overlay.style.display = 'none';
          document.getElementById('spinner').style.display = 'none';
          document.getElementById('spinner-text').style.display = 'none';
      }
  };
  // Hide the spinner and overlay when the page is restored from cache (e.g., when pressing back button)
  window.addEventListener('pageshow', function(event) {
      var overlay = document.getElementById('overlay');
      
      // Check if the event is triggered from cache
      if (event.persisted) {
          overlay.style.display = 'none';
          document.getElementById('spinner').style.display = 'none';
          document.getElementById('spinner-text').style.display = 'none';
      }
  });


  // select all options and submit the form
  function selectAll() {
    $('input[name="selected_ids[]"]').prop('checked', true);
    submitForm();
  }

  // unselect all options
  function unSelectAll() {
    $('input[name="selected_ids[]"]').prop('checked', false);
  }


  // disable submit selected button until an option is selected
  document.addEventListener('DOMContentLoaded', function () {
      const form = document.getElementById('oscar-station-form');
      const submitButton = document.getElementById('export-selected-btn');
      const checkboxes = form.querySelectorAll('input[type="checkbox"]');

      function updateSubmitButtonState() {
          const isAnyCheckboxChecked = Array.from(checkboxes).some(checkbox => checkbox.checked);
          submitButton.disabled = !isAnyCheckboxChecked;
      }

      checkboxes.forEach(checkbox => {
          checkbox.addEventListener('change', updateSubmitButtonState);
      });

      updateSubmitButtonState();  // Initial check
  });

  // js to show oscar error message
  function openStatusMsg() {
    document.getElementById('oscar_error_container').classList.add('show-msg');
    document.getElementById('oscar_error_container').classList.remove('hide-msg');

    document.getElementById('min_oscar_error_container').classList.add('hide-msg');
    document.getElementById('min_oscar_error_container').classList.remove('show-msg');
  }
  // js to hide oscar error message
  function closeStatusMsg() {
    document.getElementById('min_oscar_error_container').classList.add('show-msg');
    document.getElementById('min_oscar_error_container').classList.remove('hide-msg');

    document.getElementById('oscar_error_container').classList.add('hide-msg');
    document.getElementById('oscar_error_container').classList.remove('show-msg');
  }

  // clear div and insert a sucess icon
  function clearAndInsertIcon(divId) {
    let selectedDiv = document.getElementById(divId);

    // Clear the div content
    selectedDiv.innerHTML = '';

    // Create the icon element
    let icon = document.createElement('i');
    icon.className = 'fa fa-check-square';
    icon.setAttribute('aria-hidden', 'true');

    // Add style to make the icon green and of decent size
    icon.style.color = 'green';
    icon.style.fontSize = '2.5em'; // Adjust size as needed

    // Insert the icon into the div
    selectedDiv.appendChild(icon);
  }
</script>
{% endblock %}