{% extends "wx/station_base.html" %}
{% block station_content %}
{% load material_form %}

<style>
  #station-form {
    max-width: 95%; 
    margin: 0 auto;
  }

  .hide_content {
    display: none;
  }
  
  /* Hide options by default */
  .form-item {
    display: none;
  }
  
    .srf-field-checkbox label {
      display: flex;
      align-items: center;
      height: 100%;
      max-height: 76px;
      padding-left: 11.25px;
      padding-right: 11.25px;
      margin-bottom: 25px !important;
    }
    div.required label::before {
      content: "** " !important;
      color: red !important;
    }
    .map-small {
      max-width: 80%; 
      height: 511.25px !important;
      border-radius: 20px;
      border: 2px solid rgba(0, 0, 0, 0.628);
      /* margin: 0 auto; */
  }
    .map-large {
      max-width: 1022.50px; 
      height: 622.50px !important;
    }
    .mouse-coordinates-box {
      bottom: 5px;
      left: 5px;
      background-color: white;
      padding: 2px;
      width: 185px;
      font-size: 12px;
      border-radius: 2px;
      box-shadow: 0px 3px 10px -2px rgba(0, 0, 0, 0.2),
        0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    }
    #mapid {
      margin-bottom: 20px;
    }
    .fullscreen-button-width {
      width: 100px !important;
    }
    .transparent-caret {
      caret-color: transparent !important;
      cursor: default;
    }
    input::-webkit-calendar-picker-indicator {
      display: none !important;
    }
    h5 {
      margin-bottom: 25px !important;
    }
  
  
    /* Style the tab links */
    .tab {
        display: inline-block;
        cursor: pointer;
        padding: 10px 20px;
        border-bottom: 2px solid transparent;
        transition: all 0.2s ease;
        white-space: nowrap;
        font-size: .875rem;
        font-weight: 600;
        color: #9e9e9e;
        letter-spacing: .0892857143em;
        text-transform: uppercase;
    }
  
    .tab:hover {
        background-color: #dddddda9;
    }
  
    .active-tab {
        border-bottom: 2px solid #1976d2 ;
        color: #1976d2;
    }
  
    .active-tab:hover {
      background-color: #1976d24a ;
    }
  
    /* Hide all sections by default */
    .tab-content {
        display: none;
        /* padding: 20px; */
        border-top: none;
    }
  
    /* Style visible content */
    .show-tab {
        display: block;
    }
  
    /* Optional styling */
    .tab-bar {
        display: flex;
        overflow-x: auto; /* Enables horizontal scrolling */
        white-space: nowrap; /* Prevents breaking of text into new lines */
        padding: 10px;
    }
  
    /* Hide scrollbar but allow scrolling */
    .tab-bar::-webkit-scrollbar {
        display: none; /* For Chrome, Safari, and Opera */
    }
  
    .tab-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* padding: 10px; */
        margin-bottom: 0px;
    }
  
    .tab-bar {
        display: flex;
        overflow-x: auto;
        white-space: nowrap; /* Prevents breaking of text into new lines */
        flex-grow: 1;
        margin: 0 10px; /* Space between the arrows and tabs */
    }
  
    .scroll-arrow {
        cursor: pointer;
        user-select: none;
        padding: 10px;
    }
  
  
    /* buttons styling */
    .metadata-btn-danger {
      color: red !important;
      border-color: red !important;
    }
  
    .metadata-btn-success {
      color: #4CAF50 !important;
      border-color: #4CAF50 !important;
    }
  
    .metadata-btn-info {
      color: #1976d2 !important;
      border-color: #1976d2 !important;
    }

    #id_international_exchange_container .help-block {
      display: none; /* Hide international-exchange help-block by default */
    }

    #id_international_exchange_container:hover .help-block {
      display: block; /* Show international-exchange help-block when the parent is hovered */
    }

    #id_international_exchange_container .help-block {
      width: 300px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 100%;
      z-index: 100;
      margin-top: 0.2em;
      background: #F8F9FA;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
      /* font-family: Arial, sans-serif; */
      font-size: 13px;
      color: #5F6368;
      /* color: #3a3d3f; */
      line-height: 1.5;
    }
  </style>

<!-- <h4>Update {{ station.name }}</h4> -->

<form method="POST" id="station-form">

  <h6>Select station location on the map</h6>

  <div id="mapid" class="map-small"></div>

  <h6 style="color: #9e9e9e;">Options prefixed with <span style="color: red;">**</span> are required!</h6>

  <div class="tab-container">
    <div class="scroll-arrow" onclick="tabLeft()">
      <i aria-hidden="true" class="v-icon notranslate mdi mdi-chevron-left theme--light"></i>
    </div>
    <div class="tab-bar">
        <div class="tab active-tab" onclick="openTab('option1')">STATION INFORMATION</div>
        <div class="tab" onclick="openTab('option2')">LOCAL ENVIRONMENT</div>
        <div class="tab" onclick="openTab('option3')">INSTRUMENTATION AND MAINTENANCE</div>
        <div class="tab" onclick="openTab('option4')">OBSERVING PRACTICES</div>
        <div class="tab" onclick="openTab('option5')">DATA PROCESSING</div>
        <div class="tab" onclick="openTab('option6')">HISTORICAL EVENTS</div>
        <div class="tab" onclick="openTab('option7')">OTHER METADATA</div>
    </div>
    <div class="scroll-arrow" onclick="tabRight()">
      <i aria-hidden="true" class="v-icon notranslate mdi mdi-chevron-right theme--light"></i>
    </div>
  </div>

    {% csrf_token %}
    <div>
      {% form %}
        {% attr form.is_automatic 'group' class %}srf-field-checkbox{% endattr %}
        {% attr form.is_active 'group' class %}srf-field-checkbox{% endattr %}
        {% attr form.is_synoptic 'group' class %}srf-field-checkbox{% endattr %}
        {% attr form.international_exchange 'group' class %}srf-field-checkbox{% endattr %}
      {% endform %}
    </div>

{% block station_detail_content %}
      <button type="submit" class="btn-outline-default btn-small metadata-btn-success">Submit</button>

      <a href="{% url 'station-detail' station.id %}">

        <button type="button" class="btn-outline-default btn-small metadata-btn-danger">Cancel and back</button>

      </a>
{% endblock %}

</form>
  
  {% endblock %} {% block localjavascript %}
  <script>
    
    // map
    $(document).ready(function() {
      // var tempLat = "{{ MAP_LATITUDE|safe }}";
      // var tempLng = "{{ MAP_LONGITUDE|safe }}";
      var tempZoom = 12;
      var tempLat = "{{ station.latitude }}";
      var tempLng = "{{ station.longitude }}";
      // var tempZoom = 0;

      $('select').formSelect();

      $('#id_station_list').DataTable({
        scrollX: true,
        columnDefs: [
          {
            targets: [0, 1, 2],
            className: 'mdl-data-table__cell--non-numeric'
          }
        ]
      });

      // changing cursor to crosshair while over the map
      document.getElementById('mapid').style.cursor = "crosshair";

      // map js
      var mymap = L.map('mapid', {
        zoomControl: true
      }).setView([tempLat, tempLng], tempZoom);

      var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';

      var osmAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';

      var osm = new L.TileLayer(osmUrl, {
        minZoom: 1,
        maxZoom: 100,
        attribution: osmAttrib
      });

      // add zoom control with top left options
      mymap.zoomControl.setPosition('topleft');
      
      mymap.addLayer(osm);

      // getting map coordinates when the mouse moves and inserting it into any html element with a specific class
      mymap.on('mousemove',function(e){
        $('.mouse-lat').html(`${e.latlng.lat}`)
        
        $('.mouse-lng').html(`${e.latlng.lng}`)
      })
      // creating control to show latitude and longitude values
      var latLngInfo = L.control({position: 'bottomleft'});

      latLngInfo.onAdd = function (mymap) {
          this._div = L.DomUtil.create('div', 'mouse-coordinates-box'); // create a div with a class "latLngInfo"
          this.update();
          return this._div;
      };

      // method used to update the control based on feature properties passed
      latLngInfo.update = function () {
          this._div.innerHTML = 'Latitude:&nbsp&nbsp<span class="mouse-lat"></span></br>Longitude:&nbsp&nbsp<span class="mouse-lng"></span> ';
      };

      // adding the custom control to the map
      latLngInfo.addTo(mymap);

      // var to hold marker based on clicking action
      var newStationMarker;

      // fxn to add a marker
      function addNewMarker(lat, lng) {
        // clearing existing marker
        if (newStationMarker != undefined) {
          mymap.removeLayer(newStationMarker);
        }

        // adding a marker to show where user clicked
        newStationMarker = L.marker([lat,lng]).addTo(mymap).bindPopup('Station Location').openPopup();
      }

      addNewMarker(tempLat, tempLng);

      // getting map coordinates based on clicking action and passing it to the latitude and longitude feild
      mymap.on('click',function(e){

        // Adding the active class to the label of the longitude and latitude field
        document.getElementById('id_latitude_container').querySelector("label").classList.add("active");
        document.getElementById('id_longitude_container').querySelector("label").classList.add("active");

        // Passing the latitude and longitude values into the latitude and the longitude form field.
        document.getElementById('id_latitude').value = e.latlng.lat;
        document.getElementById('id_longitude').value = e.latlng.lng;

        // add a new marker
        addNewMarker(e.latlng.lat, e.latlng.lng);
      });

      // adding a resize button to the map
      var isFullScreen = false;

      L.Control.resizeMap = L.Control.extend({        
        onAdd: function(mymap) {
          var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');

          var button = L.DomUtil.create('a', 'leaflet-control-button fullscreen-button-width', container);

          button.innerHTML = '<span class="transparent-caret"><b>RESIZE MAP</b></span>';

          L.DomEvent.disableClickPropagation(button);
          
          L.DomEvent.on(button, 'click', function(){
            // var mapId = document.getElementById('mapid');
            // mapId.classList.toggle("map-large");
            // mapId.classList.toggle("map-small");

            if(isFullScreen == false){
              document.getElementById('mapid').requestFullscreen();

              isFullScreen = true;
            }
            else {
              document.exitFullscreen();

              isFullScreen = false;
            }

          });

          return container;
        },
      });

      L.control.mapResize = function(opts) {
        return new L.Control.resizeMap(opts);
      }

      L.control.mapResize({ position: 'topright' }).addTo(mymap);


      // fxn to update map latitude
      function updateLatitude(lat) {
        var currentLng = mymap.getCenter().lng; // get the current longitude
        
        // set the map view
        mymap.setView([lat, currentLng], 5);

        // setting the marker
        addNewMarker(lat, currentLng);
      }

      // fxn to update map longitude
      function updateLongitude(lng) {
        var currentLat = mymap.getCenter().lat; // get the current latitude
        mymap.setView([currentLat, lng],5);

        // setting the marker
        addNewMarker(currentLat, lng);
      }

      // event listener to any changes to the latitude column
      document.getElementById('id_latitude').addEventListener('input', function() {
        var lat = parseFloat(this.value);
        
        // make sure the number is valid
        if (!isNaN(lat)) {
          updateLatitude(lat);
        }
      });

      // event listener to any changes to the longitude column
      document.getElementById('id_longitude').addEventListener('input', function() {
        var lng = parseFloat(this.value);
        
        // make sure the number is valid
        if (!isNaN(lng)) {
          updateLongitude(lng);
        }
      });

    });

    // control for tab options below map
    function openTab(tabId) {
        // Hide all tab content
        var tabs = document.getElementsByClassName("tab-content");
        for (var i = 0; i < tabs.length; i++) {
            tabs[i].classList.remove("show-tab");
        }

        // Remove active class from all tabs
        var tabLinks = document.getElementsByClassName("tab");
        for (var i = 0; i < tabLinks.length; i++) {
            tabLinks[i].classList.remove("active-tab");
        }

        // Show the selected tab content and set active tab
        document.getElementById(tabId).classList.add("show-tab");
        event.currentTarget.classList.add("active-tab");
    }

    function tabLeft() {
        document.querySelector('.tab-bar').scrollBy({
            left: -300, // Adjust the scroll amount
            behavior: 'smooth'
        });
    }

    function tabRight() {
        document.querySelector('.tab-bar').scrollBy({
            left: 300, // Adjust the scroll amount
            behavior: 'smooth'
        });
    }

    // add the necessary attributes to the calss options
    window.addEventListener('DOMContentLoaded', function() {
      // Find all h5 elements
      const h5Tags = document.querySelectorAll('h5');
      
      // Loop through each h5 tag to find the tab options
      h5Tags.forEach(function(h5) {
          if (h5.textContent.trim() === "Station Information") {
              // Get the grandparent element of the h5 tag
              const grandparent = h5.parentElement.parentElement;
              
              // Set the id and class attributes to the grandparent
              grandparent.setAttribute('id', 'option1');
              grandparent.setAttribute('class', 'tab-content show-tab');
          }

          else if (h5.textContent.trim() === "Local Environment") {
              // Get the grandparent element of the h5 tag
              const grandparent = h5.parentElement.parentElement;
              
              // Set the id and class attributes to the grandparent
              grandparent.setAttribute('id', 'option2');
              grandparent.setAttribute('class', 'tab-content');
          }

          else if (h5.textContent.trim() === "Instrumentation and Maintenance") {
              // Get the grandparent element of the h5 tag
              const grandparent = h5.parentElement.parentElement;
              
              // Set the id and class attributes to the grandparent
              grandparent.setAttribute('id', 'option3');
              grandparent.setAttribute('class', 'tab-content');
          }

          else if (h5.textContent.trim() === "Observing Practices") {
              // Get the grandparent element of the h5 tag
              const grandparent = h5.parentElement.parentElement;
              
              // Set the id and class attributes to the grandparent
              grandparent.setAttribute('id', 'option4');
              grandparent.setAttribute('class', 'tab-content');
          }

          else if (h5.textContent.trim() === "Data Processing") {
              // Get the grandparent element of the h5 tag
              const grandparent = h5.parentElement.parentElement;
              
              // Set the id and class attributes to the grandparent
              grandparent.setAttribute('id', 'option5');
              grandparent.setAttribute('class', 'tab-content');
          }

          else if (h5.textContent.trim() === "Historical Events") {
              // Get the grandparent element of the h5 tag
              const grandparent = h5.parentElement.parentElement;
              
              // Set the id and class attributes to the grandparent
              grandparent.setAttribute('id', 'option6');
              grandparent.setAttribute('class', 'tab-content');
          }

          else if (h5.textContent.trim() === "Other Metadata") {
              // Get the grandparent element of the h5 tag
              const grandparent = h5.parentElement.parentElement;
              
              // Set the id and class attributes to the grandparent
              grandparent.setAttribute('id', 'option7');
              grandparent.setAttribute('class', 'tab-content');
          }
      });

  });


    // Function to toggle visibility of containers based on checkbox status
    function toggleSynopticContainers() {
      const isChecked = document.getElementById('id_is_synoptic').checked;
      const containers = ['id_synoptic_code_container', 'id_synoptic_type_container'];

      containers.forEach(id => {
        const container = document.getElementById(id);
        if (isChecked) {
          container.classList.remove('hide_content');
        } else {
          container.classList.add('hide_content');
        }
      });
    }

    // Event listener for the checkbox
    document.getElementById('id_is_synoptic').addEventListener('change', toggleSynopticContainers);

    // Initial check to set the right state on page load
    toggleSynopticContainers();
  </script>
</div>
{% endblock %}