{% extends "base.html" %}

{% load static %}
{% load tags %}
{% load humanize %}

{% block title %} - New Observation{% endblock %}

{% block css %}
  <link href="{% static 'lib/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'lib/bootstrap-slider/dist/css/bootstrap-slider.min.css' %}">
  <link rel="stylesheet" href="{% static 'lib/bootstrap-select/dist/css/bootstrap-select.min.css' %}">
{% endblock css %}

{% block content %}

  <div class="row">
    <div class="col-md-6 col-sm-6">
      <h2>Schedule Observations</h2>
      <div class="timezone text-muted">
        <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
        Timeframes are in <a href="#" data-toggle="modal" data-target="#UTCModal">UTC</a>
      </div>
    </div>
    <div class="col-md-6 col-sm-6 text-right hidden-xs">
      <h2>
        {% if user.is_authenticated %}
          <a href="#" class="btn" data-toggle="modal" data-target="#HotkeysModal">
            <span class="glyphicon glyphicon-fire" aria-hidden="true" title="Hotkeys"></span>
          </a>
        {% endif %}
      </h2>
    </div>
  </div>

  <form class="form-horizontal" role="form" action="{% url 'base:observation_new' %}"
        method="post" data-obs-filter="{{ obs_filter.exists|lower }}" data-obs-filter-station="{{ obs_filter.ground_station }}"
        data-obs-filter-dates="{{ obs_filter.dates|lower }}" data-obs-filter-transmitter="{{ obs_filter.transmitter }}"
        data-obs-filter-satellite="{{ obs_filter.norad }}" id="form-obs">{% csrf_token %}
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label class="col-sm-3 control-label">Satellite</label>
          <div class="col-sm-9">
            {% if obs_filter.norad %}
              {% for satellite in satellites %}
                {% if satellite.norad_cat_id == obs_filter.norad %}
                  <select id="satellite-selection" class="form-control selectpicker" name="satellite" disabled>
                    <option data-norad="{{ satellite.norad_cat_id }}" value="{{ satellite.norad_cat_id }}" selected>
                      {{ satellite.norad_cat_id }} - {{ satellite.name }}
                    </option>
                  </select>
                  <input type="hidden" name="satellite" value="{{ satellite.norad_cat_id }}">
                {% endif %}
              {% endfor %}
            {% else %}
              <select id="satellite-selection" class="form-control selectpicker" name="satellite"
                      data-live-search="true" autocomplete="off">
                <option value="" selected>Select a satellite</option>
                {% for satellite in satellites %}
                  <option data-norad="{{ satellite.norad_cat_id }}" value="{{ satellite.norad_cat_id }}">
                    {{ satellite.norad_cat_id }} - {{ satellite.name }}
                  </option>
                {% endfor %}
              </select>
            {% endif %}
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">Transmitter</label>
          <div id="transmitter-field-loading" class="col-sm-9 loading-field">
            <div class="spinner">
              <div class="bounce1"></div>
              <div class="bounce2"></div>
              <div class="bounce3"></div>
            </div>
          </div>
          <div class="col-sm-9" id="transmitter-field">
            <select id="transmitter-selection" class="form-control selectpicker"
                    disabled name="transmitter" autocomplete="off">
              <option id="no-transmitter" value="" selected>No transmitter available</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">Stations</label>
          <div id="station-field-loading" class="col-sm-9 loading-field">
            <div class="spinner">
              <div class="bounce1"></div>
              <div class="bounce2"></div>
              <div class="bounce3"></div>
            </div>
          </div>
          <div class="col-sm-9" id="station-field">
            <select id="station-selection" class="form-control selectpicker" data-live-search="true" data-count-selected-text="Selected {0} of {1} stations"
                    data-dropup-auto="false" multiple data-selected-text-format="count" data-actions-box="true" disabled name="station" autocomplete="off">
              <option id="no-station" value="" selected>No station available</option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label class="col-sm-3 control-label">Start Time</label>
          <div class="col-sm-9">
            <div class='input-group date' id="datetimepicker-start"
                 data-date-minstart="{{ date_min_start }}">
              {% if obs_filter.dates %}
                <input type="text" class="form-control" name="start"
                       value="{{ obs_filter.start}}" readonly>
              {% else %}
                <input type="text"
                       class="form-control"
                       name="start"
                       data-date-format="YYYY-MM-DD HH:mm"
                       autocomplete="off">
              {% endif %}
              <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">End Time</label>
          <div class="col-sm-9">
            <div class='input-group date' id="datetimepicker-end"
                 data-date-maxrange="{{ date_max_range }}"
                 data-date-minend="{{ date_min_end }}">
              {% if obs_filter.dates %}
                <input type="text" class="form-control" name="end"
                       value="{{ obs_filter.end}}" readonly>
              {% else %}
                <input type="text"
                       class="form-control"
                       name="end"
                       data-date-format="YYYY-MM-DD HH:mm"
                       autocomplete="off">
              {% endif %}
              <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12">
      <button type="button" id="advanced-options" class="btn btn-link" data-toggle="collapse"
              data-target=".collapse-option" aria-expanded="false" aria-controls="collapse-option">
        <span class="glyphicon glyphicon-chevron-down"></span> Show Advanced Options
      </button>
      </div>
      <div class="col-md-6 collapse collapse-option">
        <div class="form-group">
          <label class="col-sm-3 control-label">Station Horizon</label>
          <div class="col-sm-9" id="horizon-status">
            <div class="btn-group btn-group-justified" data-toggle="buttons">
              <label class="btn btn-default active" id="default-horizon">
                <input type="radio" name="horizon" value="default" autocomplete="off" checked>
                  Minimum of each Station
                </input>
              </label>
              <label class="btn btn-default" id="custom-horizon">
                <input type="radio" name="horizon" value="custom" autocomplete="off">
                  Custom
                </input>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 collapse collapse-option">
        <div class="form-group">
          <label class="col-sm-3 control-label">Overlapped</label>
          <div class="col-sm-9" id="overlapped">
            <div class="btn-group btn-group-justified" data-toggle="buttons">
              <label class="btn btn-default active" id="hide-overlapped">
                <input type="radio" name="overlapped" value="hide-overlapped" autocomplete="off" checked>
                  Hide
                </input>
              </label>
              <label class="btn btn-default" id="truncate-overlapped">
                <input type="radio" name="overlapped" value="truncate-overlapped" autocomplete="off">
                  Show Truncated
                </input>
              </label>
              <label class="btn btn-default" id="custom-overlapped" disabled>
                  <span data-toggle="tooltip" title="Not supported yet!">Show Overlapped</span>
              </label>
            </div>
          </div>
        </div>
      </div>
      <hr class="col-md-12 collapse collapse-option">
      <div class="col-md-6 collapse collapse-option">
        <div class="form-group">
          <label class="col-sm-3 control-label">Split Duration</label>
          <div class="col-sm-9" id="split-duration-status">
            <div class="btn-group btn-group-justified" data-toggle="buttons">
              <label class="btn btn-default active" id="default-split-duration">
                <input type="radio" name="split_duration" value="{{ split.duration }}" data-min="{{ obs_min_duration }}" autocomplete="off" checked>
                  Default({{ split.duration }}sec)
                </input>
              </label>
              <label class="btn btn-default" id="custom-split-duration">
                <input type="radio" name="split_duration" value="custom" autocomplete="off">
                  Custom
                </input>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 collapse collapse-option">
        <div class="form-group">
          <label class="col-sm-3 control-label">Break Duration</label>
          <div class="col-sm-9" id="break-duration-status">
            <div class="btn-group btn-group-justified" data-toggle="buttons">
              <label class="btn btn-default active" id="default-break-duration">
                <input type="radio" name="break_duration" value="{{ split.break }}" autocomplete="off" checked>
                  Default({{ split.break }}sec)
                </input>
              </label>
              <label class="btn btn-default" id="custom-break-duration">
                <input type="radio" name="break_duration" value="custom" autocomplete="off">
                  Custom
                </input>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 collapse collapse-option">
    </div>

    {% if obs_filter.ground_station %}
      <input type="hidden" name="ground_station" value="{{ obs_filter.ground_station }}">
    {% endif %}

    <div class="row">
      <div class="col-md-12">
        <button type="button" id="calculate-observation" class="btn btn-primary pull-right">
          Calculate
        </button>
      </div>
    </div>

    <div class="row calculation-result">
      <div class="col-md-12">
        <h3>Calculated Timeline</h3>
        <div id="obs-selection-tools">
          <div>
            <button type="button" id="select-all-observations" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-check">All</i></button>
            <button type="button" id="select-none-observations" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-unchecked">None</i></button>
          </div>
          <div>
            <label for="scheduling-elevation-filter">Max Elevation</label>
            <input id="scheduling-elevation-filter" type="text"/>
          </div>
        </div>
        <div id="loading" class="notice">
          <div class="spinner">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
          </div>
          Calculating
        </div>
        <div id="timeline"></div>
        <div id="hover-obs">
          <div class="coloredDiv"></div>
          <div class="obs-details">
            <div id="name" class="bold-text"></div>
            <div class="bold-text">Start Time:</div>
            <div id="start"></div>
            <div class="bold-text">End Time:</div>
            <div id="end"></div>
            <div class="bold-text" id="details"></div>
          </div>
          <svg
            xmlns="http://www.w3.org/2000/svg" version="1.1"
            id="polar-plot"
            width="120px" height="120px"
            viewBox="-110 -110 220 220"
            overflow="hidden">
          </svg>
        </div>
        <div id="windows-data"></div>
      </div>
    </div>

    <div id="schedule-selection" class="row calculation-result">
      <div class="col-md-12">
        <button type="button" id="schedule-observation" data-warn-min-obs="{{ warn_min_obs }}" class="btn btn-success" disabled="True">
          Schedule
        </button>
      </div>
      <div class="col-md-12">
        <div id="selected-observations"></div>
      </div>
    </div>

    <!-- Confirmation Modal -->
    <div class="modal" id="confirm-modal" tabindex="-1" role="dialog" aria-labelledby="confirm-modal">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Do you really want to schedule <span class="counted-obs"></span> observations?</h4>
          </div>
          <div class="modal-body">
            <p>WARNING: You are about to schedule <span class="counted-obs"></span> observations at <span class="counted-stations"/></span> different stations.</p>
            <p>Several station owners have added requests in their station descriptions.</p>
            <p>Before scheduling massively, please make sure you respect these requests.</p>
            <p>Are you sure you want to continue and schedule all of them?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="submit" id="modal-schedule-observation" class="btn btn-success">
              Schedule
            </button>
          </div>
        </div>
      </div>
    </div>

  </form>



  <!-- UTC Modal -->
  {% include 'includes/utc.html' %}

  <!-- Hotkeys Modal -->
  {% include 'includes/observation-new-hotkeys.html' %}

{% endblock content %}

{% block javascript %}
  <script src="{% static 'lib/d3/d3.min.js' %}"></script>
  <script src="{% static 'lib/d3-timeline/src/d3-timeline.js' %}"></script>
  <script src="{% static 'lib/moment/min/moment.min.js' %}"></script>
  <script src="{% static 'lib/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js' %}"></script>
  <script src="{% static 'lib/bootstrap-slider/dist/bootstrap-slider.min.js' %}"></script>
  <script src="{% static 'lib/bootstrap-select/dist/js/bootstrap-select.min.js' %}"></script>
  <script src="{% static 'lib/satellite.js/dist/satellite.min.js' %}"></script>
  <script src="{% static 'js/utc.js' %}"></script>
  <script src="{% static 'js/polar_svg.js' %}"></script>
  <script src="{% static 'js/observation_new.js' %}"></script>
{% endblock javascript %}
