{% extends "base.html" %}
{% load tags %}
{% load static %}

{% block title %}{% if station_form.instance.id %} - Edit Ground Station {{ station_form.instance.name }}{% else %} - Add Ground Station{% endif %}{% endblock %}

{% block css %}
  <link href="{% static 'lib/bootstrap-select/dist/css/bootstrap-select.min.css' %}" rel="stylesheet" >
  <link href="{% static 'lib/bootstrap-slider/dist/css/bootstrap-slider.min.css' %}" rel="stylesheet" >
  <link href="{% static 'lib/bootstrap-fileinput/css/fileinput.min.css' %}" rel="stylesheet" >
  <link rel="stylesheet" href="{% static 'lib/jquery.json-viewer/json-viewer/jquery.json-viewer.css' %}">
{% endblock css %}

{% block content %}
  <div class="row">
    <div class="col-">
      <h2>
        {% if station_form.instance.id %}
          Edit: {{ station_form.instance.id }} - {{ station_form.instance.name }}
        {% else %}
          Add Ground Station
        {% endif %}
      </h2>
    </div>
  </div>

  <form id="station-edit-form" role="form" enctype="multipart/form-data" method="post">{% csrf_token %}
    <div class="row">
      <div class="card w-100 my-2">
        <div class="card-header categories" data-toggle="collapse" data-target="#general-card-body">
          <h6 class="card-title">
            <span id="general-info-required" class="{% if station_form.name.value %} d-none {% endif %}" style="color: #dc3545;">*</span> General Info
            <i class="bi bi-arrows-collapse float-right" aria-hidden="true"></i>
          </h6>
        </div>
        <div class="card-body collapse in" id="general-card-body">
          <div class="form-group">
            <label for="name" class="control-label">Name</label>
            <input value="{{ station_form.name.value|default_if_none:"" }}" id="station-name" type="text" class="form-control" maxlength="{{ station_form.name.field.max_length }}" name="name" required>
          </div>
          <div class="form-group">
            <label for="description" class="control-label">Description</label>
            <textarea class="form-control" name="description"
                      id="description" rows="3" maxlength="{{ station_form.description.field.max_length }}">{{ station_form.description.value|default_if_none:"" }}</textarea>
          </div>
        </div>
      </div>
      
      {% with station_form.instance.active_configuration as configuration_instance %}
      <div class="card w-100 my-2">
        <div class="card-header categories" data-toggle="collapse" data-target="#configuration-card-body">
          <h6 class="card-title">
            <span class="{% if configuration_instance|not_true %}station-type-invalid{% endif %}" id="config-required-asterisk" style="color: #dc3545;">*</span> Configuration
            <i class="bi bi-arrows-collapse float-right" aria-hidden="true"></i>
          </h6>
        </div>
        <div class="card-body collapse in" id="configuration-card-body" data-registered="{{ registered }}" data-has-unregistered-configuration="{% if configuration_instance and configuration_instance.schema.name == 'Unregistered Configuration' %}True{% else %}False{% endif %}" data-station-id="{% if station_form.instance.id %}{{ station_form.instance.id }}{% else %}0{% endif %}">
          {% if not registered %}
          <div id="station-type-selection-container" class="d-none">
            <label for="station-type-selection">Station Type</label>
            <select id="station-type-selection" class="form-control selectpicker" data-style="btn" name="station-type" autocomplete="off" disabled>
              <option value="{{ station_types.0.id }}" selected>{{ station_types.0.name }}</option>
            </select>
          </div>
          {% else %}
          <div id="station-type-selection-container" class="form-group {% if configuration_instance|not_true %}is-invalid{% endif %}">
            <label for="station-type-selection">Station Type</label>
            <select id="station-type-selection" class="form-control selectpicker" data-style="btn" name="station-type" autocomplete="off">
              <option value="-1" {% if configuration_instance|not_true %}selected{% endif %}>Select a Station type</option>
              {% for station_type in station_types %}
              <option value="{{ station_type.id }}" {% if configuration_instance %}{% if configuration_instance.schema.station_type.id == station_type.id %} selected {% endif %}{% endif %}>
                {{ station_type.name }}
              </option>
              {% endfor %}
            </select>
          </div>
          {% endif %}

          {% for schema in conf_schemas %}
            {{ schema.schema|json_script:schema.id }}
          {% endfor %}
          {% if configuration_instance %}
            {{ configuration_instance.configuration|json_script:"current-configuration" }}
          {% endif %}
          
          <div id="configuration-schema-selection-container" class="form-group {% if not registered %}d-none{% endif %}">
            <label for="configuration-schema-selection">Configuration Type</label>
            <select id="configuration-schema-selection" class="form-control selectpicker" data-style="btn"
                      name="configuration-schema" autocomplete="off" {% if registered|not_true %}disabled{% endif %}>
                  {% if registered %}
                    <option value="-1" {% if configuration_instance|not_true or configuration_instance.schema.name == "Unregistered Configuration" %}selected{% endif %}>Select a Configuration schema</option>
                    {% for schema in conf_schemas %}
                      {% comment %} Remove the Unregistered option if the station is registered {% endcomment %}
                      {% if schema.name != "Unregistered Configuration" %}
                      <option data-station-type="{{schema.station_type_id}}" value="{{ schema.id }}" {% if configuration_instance %}{% if configuration_instance.schema.id == schema.id%} selected {% endif %}{% endif %}>
                        {{ schema.name }}
                      </option>
                      {% endif %}
                    {% endfor %}
                  {% else %}
                    {% for schema in conf_schemas %}
                      {% comment %}
                        If editing an unregistered station, only select the apropriate schema.
                        If it's a station under creation, select all schemas and let javascript display one for each station type.
                      {% endcomment %}
                      {% if schema.name == "Unregistered Configuration" %}
                      <option data-station-type="{{schema.station_type_id}}" value="{{ schema.id }}" 
                        {% if configuration_instance|not_true or schema.id == configuration_instance.schema.id %}selected{% endif %}>
                        {{ schema.name }}
                      </option>
                      {% endif %}
                    {% endfor %}
                  {% endif %}
              </select>
            </div>

            <div id="conf-controls-container" class="mt-3" style="display: none">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <div>
                  <label for="json-renderer">Current Configuration</label>
                  <span>(Non-default values)</span>
                </div>
                <button id="export-configuration-btn" type="button" class="btn btn-primary btn-sm"><span class="bi bi-clipboard"></span> Export Configuration</button>
              </div>
              

              <div class="mb-3 bg-light border border-secondary table-responsive" id="json-renderer"></div>

              <button id="reset-conf" type="button" class="btn btn-sm btn-primary" aria-controls="advanced-edit-conf-modal"><i class="bi bi-arrow-counterclockwise"></i> Reset to defaults</button>
              <button id="advanced-edit-conf" type="button" class="float-right btn btn-sm btn-primary" aria-controls="advanced-edit-conf-modal"><span class="bi bi-pencil-square" aria-hidden="true"></span> Advanced Edit</button>
              <button id="edit-conf" type="button" class="float-right mr-2 btn btn-sm btn-primary" aria-controls="edit-conf-modal"><span class="bi bi-pencil-square" aria-hidden="true"></span> Edit</button>
            </div>

            <div class="modal" id="edit-conf-modal" tabindex="-1" role="dialog">
              <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h3 class="modal-title">Edit Configuration</h3>
                  </div>
                  <div class="modal-body">
                    <div id="json-editor-container">
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-outline-dark" data-dismiss="modal">Close</button>
                    <button type="button" id="modal-save-config" class="btn btn-primary">
                      Save changes
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="modal" id="advanced-edit-conf-modal" tabindex="-1" role="dialog" aria-labelledby="advanced-edit-modal-title">
              <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h3 class="modal-title" id="advanced-edit-modal-title">Advanced edit</h3>
                  </div>
                  <div class="modal-body">
                    <div id="advancedEditContainer">
                      <div class="alert alert-danger" style="display: none" role="alert" id="advanced-edit-errors"></div>
                      <textarea spellcheck="false" class="form-control" rows="10" id="advancedEditInput"></textarea>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-outline-dark" data-dismiss="modal">Close</button>
                    <button type="button" id="save-advanced-edit" class="btn btn-primary">
                      Save changes
                    </button>
                  </div>
                </div>
              </div>
            </div>

          </div>
      </div>
      {% endwith %}

      <div class="card w-100 my-2">
        <div class="card-header categories" data-toggle="collapse" data-target="#antennas-card-body">
          <h6 class="card-title">
            Antennas
            <i class="bi bi-arrows-collapse float-right" aria-hidden="true"></i>
          </h6>
        </div>
        <!-- Data to parse -->
        <div id="antennas-loading" class="card-body loading-field">
          <div class="spinner">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
          </div>
          Loading Antennas
        </div>
        <div class="card-body collapse in" id="antennas-card-body">
          <div class="row justify-content-around align-item-center"  id="antennas-card-group">
          <!-- Here antenna cards will be added -->
          </div>
          <div id="station-data-to-parse"
               data-max_antennas_per_station="{{ max_antennas_per_station }}"
               data-max_frequency_ranges_per_antenna="{{ max_frequency_ranges_per_antenna }}"
               data-max_frequency_for_range="{{ max_frequency_for_range }}"
               data-min_frequency_for_range="{{ min_frequency_for_range }}"
               data-vhf_min_frequency="{{ vhf_min_frequency }}"
               data-vhf_max_frequency="{{ vhf_max_frequency }}"
               data-uhf_min_frequency="{{ uhf_min_frequency }}"
               data-uhf_max_frequency="{{ uhf_max_frequency }}"
               data-l_min_frequency="{{ l_min_frequency }}"
               data-l_max_frequency="{{ l_max_frequency }}"
               data-s_min_frequency="{{ s_min_frequency }}"
               data-s_max_frequency="{{ s_max_frequency }}"
          ></div>

          <!-- Initial data -->
          <div id="antennas-data-to-parse">
            {% for antenna_form in antenna_formset %}
              <div {% if antenna_form.id.value %} data-id="{{ antenna_form.id.value }}" {% endif %}
                   {% if antenna_form.DELETE.value %}data-deleted="true" {% endif %}
                   data-type-name="{{ antenna_form.instance.antenna_type.name }}"
                   data-type-id="{{ antenna_form.antenna_type.value }}">
                {% with frequency_range_formset=frequency_range_formsets|lookup_with_key:antenna_form.prefix %}
                  {% for frequency_range_form in frequency_range_formset %}
                    <div {% if frequency_range_form.id.value %} data-id="{{ frequency_range_form.id.value }} {% endif %}"
                         {% if frequency_range_form.DELETE.value %}data-deleted="true" {% endif %}
                         data-min="{{ frequency_range_form.min_frequency.value }}"
                         data-max="{{ frequency_range_form.max_frequency.value }}"
                    ></div>
                  {% endfor %}
                {% endwith %}
              </div>
            {% endfor %}
          </div>

          <div class="row" id="new-antenna">
            <div class="col-md-12 text-right">
              <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal" data-action="new">
                <span class="bi bi-plus" aria-hidden="true"></span>
                New Antenna
              </button>
            </div>
          </div>
        </div>

        <!-- Edit/New Antenna Modal-->
        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="AntennaModalTitle">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h3 class="modal-title" id="AntennaModalTitle"></h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class='row'>
                  <div class='col-md-12'>
                    <div class="form-group">
                      <label for="antenna-type" class="control-label">Type</label>
                      <select id="antenna-type" class="form-control selectpicker show-tick" data-live-search="true" name="antenna-type">
                        {% for antenna_type in antenna_types.all|sort_types %}
                          <option value="{{ antenna_type.id }}" data-content="{{ antenna_type.name }}">
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <span class="frequency-ranges-label">Frequency Ranges(Hz)</span>
                  <div id="frequency-ranges-loading" class="loading-field">
                    <div class="spinner">
                      <div class="bounce1"></div>
                      <div class="bounce2"></div>
                      <div class="bounce3"></div>
                    </div>
                    Loading Frequency Ranges
                  </div>
                  <div id="frequency-ranges">Add a frequency range by choosing one of the default ranges or a custom one bellow<hr></div>
                    <div class='row no-gutters justify-content-between align-items-end' id="new-ranges">
                    <div class="col-">
                      <span class='default-range-label'>Add a default range:</span>
                      <button data-range="VHF" type="button" class="btn btn-info new-range">
                        <span class="bi bi-plus" aria-hidden="true"></span>
                        VHF
                      </button>
                      <button data-range="UHF" type="button" class="btn btn-info new-range">
                        <span class="bi bi-plus" aria-hidden="true"></span>
                        UHF
                      </button>
                      <button data-range="L" type="button" class="btn btn-info new-range">
                        <span class="bi bi-plus" aria-hidden="true"></span>
                        L
                      </button>
                      <button data-range="S" type="button" class="btn btn-info new-range">
                        <span class="bi bi-plus" aria-hidden="true"></span>
                        S
                      </button>
                    </div>
                    <div class="col-">
                      <button data-range="custom" type="button" id="new-range" class="btn btn-success new-range">
                        <span class="bi bi-plus" aria-hidden="true"></span>
                        Custom Range
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer justify-content-between align-items-center">
                <div class='col-'>
                  <button id="delete-antenna" data-action="delete" type="button" class="btn btn-danger modal-action">Delete Antenna</button>
                </div>
                <div class='col-'>
                  <button type="button" class="btn btn-outline-dark" data-dismiss="modal">Close</button>
                  <button data-action="save" type="button" class="btn btn-primary modal-action">Save changes</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End of Edit/New Antenna Modal-->
      </div>

      <div class="card w-100 my-2">
        <div class="card-header categories" data-toggle="collapse" data-target="#settings-card-body">
          <h6 class="card-title">
            Settings
            <i class="bi bi-arrows-collapse float-right" aria-hidden="true"></i>
          </h6>
        </div>
        <div class="card-body collapse in" id="settings-card-body">
          <div class="form-group">
            <label for="horizon" class="control-label">Minimum Horizon</label>
            <input id="horizon" type="number" value="{{ station_form.horizon.value|default_if_none:"" }}" class="form-control" name="horizon" placeholder="{{ station_form.horizon.help_text }}">
            <span class="bi bi-question-circle" aria-hidden="true" data-toggle="tooltip"
                  title="Your station minimum observable elevation"></span>
          </div>

          <hr>

          <div class="form-group">
            <label for="utilization" class="control-label">Target Utilization</label>
            <input id="utilization" type="number" value="{{ station_form.target_utilization.value|default_if_none:"" }}" class="form-control" name="target_utilization" placeholder="{{ station_form.utilization.help_text }}">
            <span class="bi bi-question-circle" aria-hidden="true" data-toggle="tooltip"
                  title="Your station target utilization"></span>
          </div>

          <hr>

          <div class="form-group">
            <label for="violator_scheduling" class="control-label">Scheduling of Frequency Violators by</label>
            <select id="violator_scheduling" class="form-control selectpicker show-tick" name="violator_scheduling" autocomplete="off">
              {% for choice in station_form.violator_scheduling.field.choices %}
                <option value="{{ choice.0 }}" {% if choice.0 == station_form.violator_scheduling.value %} selected {% endif %}>{{ choice.1 }}</option>
              {% endfor %}
            </select>
            <div class="form-text text-justify p-2 border border-dark">
                <div id='violator-scheduling-0' class="violator-scheduling-option-description">
                    <b>No one</b> will be able to schedule satellites that violate frequencies. For SSA purposes and recording violations, please consider to change this option to "Only Operators".
                </div>
                <div id='violator-scheduling-1' class="violator-scheduling-option-description">
                    <b>Only operators</b> will be able to schedule satellites that violate frequencies. Only necessary observations will be scheduled for SSA purposes and recording violations.
                </div>
                <div id='violator-scheduling-2' class="violator-scheduling-option-description">
                    <b>Everyone</b> with permission to schedule will be able to schedule satellites that violate frequencies. However scheduling will be limited to use the minimum of Network and DB resources.
                </div>
            </div>
          </div>

          <hr>

          <div class="form-group">
            <div class="checkbox">
              <label>
                <input type="checkbox" name="testing" {% if station_form.testing.value %}checked="True"{% endif %} {% if not station_form.instance.id %}disabled{% endif %}>
                Testing?
                    <span class="bi bi-question-circle" aria-hidden="true" data-toggle="tooltip"
                          title="Make sure you station is performing well for a period of time before you remove the Testing flag"></span>
              </label>
            </div>
          </div>
        </div>
      </div>

      <div class="card w-100 my-2">
        <div class="card-header categories" data-toggle="collapse" data-target="#image-card-body">
          <h6 class="card-title">
            Image
            <i class="bi bi-arrows-collapse float-right" aria-hidden="true"></i>
          </h6>
        </div>
        <div class="card-body collapse in" id="image-card-body">
          <div class="form-group">
            <input id="station-image" type="file" name="image" accept="image/*"
               {% if station_form.image.value and not image_changed %} data-existing="{{ MEDIA_URL }}{{ station_form.image.value }}" {% endif %}>
          </div>
        </div>
      </div>
    </div>

    <div class='row'>
      <div class='col-4'>
        <button id="cancel" type="button" class="btn btn-outline-dark w-100">{% if station_form.instance.id %}Back to Station{% else %}Back to Dashboard{% endif %}</button>
      </div>
      <div class='col-8'>
        <button id="submit" type="submit" class="btn btn-primary w-100" disabled="True">{% if station_form.instance.id %}Save Changes{% else %}Submit{% endif %}</button>
      </div>
    </div>
  </form>
{% endblock %}

{% block javascript %}
  <script src="{% static 'js/frequency_utils.js' %}"></script>
  <script src="{% static 'lib/@json-editor/json-editor/dist/jsoneditor.js' %}"></script>
  <script src="{% static 'lib/bootstrap-select/dist/js/bootstrap-select.min.js' %}"></script>
  <script src="{% static 'lib/bootstrap-slider/dist/bootstrap-slider.min.js' %}"></script>
  <script src="{% static 'lib/bootstrap-fileinput/js/fileinput.min.js' %}"></script>
  <script src="{% static 'lib/jquery.json-viewer/json-viewer/jquery.json-viewer.js' %}"></script>
  <script src="{% static 'js/station_configuration_utils.js' %}"></script>
  <script src="{% static 'js/station_edit.js' %}"></script>
{% endblock javascript %}
