{% extends "base.html" %}

{% block menu %}
{% endblock %}

{% block content %}
  {% if service.modalità == "edit" or service.modalità == "add" %}
  <form method="post">
    <div class="container">
      <div class="form-group">
        <label for="date-picker">{{ 'Service day'|t }}</label>
        <input id="date-picker" aria-label="Date picker" placeholder="DD/MM/YYY" autocomplete="off" name="date" data-provide="datepicker"
          value="{{ values.date }}" type="text" class="form-control">
      </div>
      <div class="form-group">
        <label for="progressivo">{{ 'code'|t|capitalize }}</label>
        <input id="progressivo" class="form-control" type="text" name="code" placeholder="1234/5" required value="{{ values.code }}">
      </div>
      <div class="form-group">
        <label for="timePicker1">{{ 'Start time'|t }}</label>
        <input id="timePicker1" class="form-control" type="time" name="beginning" required value="{{ values.beginning }}">
      </div>
      <div class="form-group">
        <label for="timePicker2">{{ 'End time'|t }}</label>
        <input id="timePicker2" class="form-control" type="time" name="end" required value="{{ values.end }}">
      </div>
      <div class="form-group">
        <label>{{ 'Chief'|t }}</label>
        <br>
        {% for user in service.crew %}
        {% if user.chief == 1 and not user.hidden %}
        <div class="form-check">
          <input aria-label="{{ username(user.id) }}" id="chief-{{ user.id }}" class="form-check-input chief chief-{{ user.id }}"
            style="transform: scale(1.4); -webkit-transform: scale(1.4);" type="checkbox" name='chief[]'
            value='{{ user.id }}'>
          <label class="form-check-label" for="chief-{{ user.id }}">
            {{ username(user.id) }}
          </label>
        </div>
        {% endif %}
        {% endfor %}
      </div>
      <script nonce="{{ nonce }}">
        $('.chief').on('change', function () {
          $('input[name="' + this.name + '"]').not(this).prop('checked', false);
        });
      </script>
      <div class="form-group">
        <label>{{ 'Drivers'|t }}</label>
        <br>
        {% for user in service.crew %}
        {% if user.driver == 1 and not user.hidden %}
        <div class="form-check">
          <input aria-label="{{ username(user.id) }}" id="drivers-{{ user.id }}" class="form-check-input drivers drivers-{{ user.id }}"
            style="transform: scale(1.4); -webkit-transform: scale(1.4);" type="checkbox" name='drivers[]'
            value='{{ user.id }}'>
          <label class="form-check-label" for="drivers-{{ user.id }}">
            {{ username(user.id) }}
          </label>
        </div>
        {% endif %}
        {% endfor %}
      </div>
      <div class="form-group">
        <label>{{ 'Crew'|t }}</label>
        <br>
        {% for user in service.crew %}
        {% if not user.hidden %}
        <div class="form-check">
          <input aria-label="{{ username(user.id) }}" id="crew-{{ user.id }}" class="form-check-input crew crew-{{ user.id }}"
            style="transform: scale(1.4); -webkit-transform: scale(1.4);" type="checkbox" name='crew[]'
            value='{{ user.id }}'>
          <label class="form-check-label" for="crew-{{ user.id }}">
            {{ username(user.id) }}
          </label>
       </div>
       {% endif %}
       {% endfor %}
      </div>
      {% if option('use_location_picker') %}
      <label>{{ 'Service place'|t }}</label>
      <div id="map"></div>
      <div id="search">
        <div class="form-inline">
          <div class="form-group mx-sm-3 mb-2">
            <input type="text" class="form-control" name="addr" value="" id="addr" size="50" />
          </div>
          <div class="form-group mx-sm-3 mb-2">
            <button id="search_button" type="button" class="btn btn-primary mb-2">
                {{ 'Search'|t }}
            </button>
            <script nonce="{{ nonce }}">
            $("#search_button").click(function(){
                allertaJS.maps.addrSearch('{{ 'Search results'|t }}', '{{ 'No results found'|t }}');
            });
            </script>
          </div>
        </div>
        <div id="results"></div>
      </div>
      <input type="hidden" name="place" value="" />
      <script nonce="{{ nonce }}">window.loadMapOnScriptLoad = true;</script>
      {{ script('maps.js') }}
      {% else %}
      <div class="form-group">
        <label>{{ 'Service place'|t }}</label>
        <input type="text" name="place" class="form-control" required value="{{ values.place }}">
      </div>
      <br>
      {% endif %}
      <div class="form-group">
        <label for="notes">{{ 'Others notes (ex. others infos)'|t }}</label><br>
        <textarea class="form-control" id="notes" name='notes'></textarea>
      </div>
      <br>
      <div class="form-group">
        <label>{{ 'Service type'|t }}</label>
        <br>
        <select id="types" class="form-control" name='type' class="types">
          {% for type in service.types %}
          <option value='{{ type.name }}'>{{ type.name }}</option>
          {% endfor %}
          {% if service.types is empty %}
          <option id="empty_option" value=''></option>
          {% endif %}
          <option value='add_new'>{{ 'Add type...'|t }}</option>
        </select>
      </div>
      <br>
      <input id="modalità" type="hidden" value="{{ service.modalità }}" name="mod"></input>
      <input id="token" type="hidden" value="{{ service.token }}" name="token"></input>
      <input id="id" type="hidden" value="{{ service.id }}" name="id"></input>
      <button id="submit_button" type="submit" class="btn btn-primary">{{ 'Submit'|t }}</button>
    </div>
  </form>
  <script nonce="{{ nonce }}">
    $( "#types" ).change(function() {
        $('#empty_option').remove();
        var type = "";
        $( "#types option:selected" ).each(function() {
            type = $( this ).val();
        });
        console.log(type);
        if(type == "add_new"){
            new_type = prompt("{{ 'Insert type name:'|t }}");
            if(!new_type) return;
            $.ajax({
                url: "resources/ajax/ajax_add_type.php",
                method: "POST",
                data: {
                  type: new_type
                },
                success: function (data) {
                  $('option:last-of-type').before($('<option>').val(new_type).text(new_type));
                  $('option[value='+new_type+']').prop('selected', 'selected').change();
                  toastr.success('{{ "Type '%s' added successfully."|t|format('+new_type+')|raw }}');
                }
            });
        }
    });
    {% if service.modalità == "edit" %}
    {% if option('use_location_picker') %}
    {% set place = values.place|split('#')[0] %}
    $(function(){
      allertaJS.maps.setMarker(new L.LatLng({{place|split(';')[0]}}, {{place|split(';')[1]}}), true);
    });
    {% endif %}
    $.each('{{ values.chief }}'.split(','), function (index, value) {
      $('.chief-' + value).prop('checked', true);
    });
    $.each('{{ values.drivers }}'.split(','), function (index, value) {
      $('.drivers-' + value).prop('checked', true);
    });
    $.each('{{ values.crew }}'.split(','), function (index, value) {
      $('.crew-' + value).prop('checked', true);
    });
    $("#types").val('{{ values.type }}');
    $('#notes').val('{{ values.notes }}');
    {% endif %}
    $('form').submit(function () {
      var type = "";
      $( "#types option:selected" ).each(function() {
        type = $( this ).val();
      });
      if(type == "add_new" || type == ""){
        toastr.error("{{ 'You must select a valid service type!'|t }}");
        return false;
      }
      var progressivo_valido = /^[0-9/]{3,6}$/
      var progressivo = $('#progressivo').val();
      if (!progressivo_valido.test(progressivo)) {
        var invia_progressivo = confirm("{{ 'The code has been detected as incorrect, do you want to add the service anyway?'|t }}");
      } else {
        var invia_progressivo = true;
      }
      return invia_progressivo;
    });
  </script>
  {% endif %}
  {% if service.modalità == "delete" %}
  <div style="margin: 0 auto; text-align: center">
    <p>{{ 'Are you sure you want to delete the service?'|t }}</p>
    <form method="post">
      <input id="modalità" type="hidden" value="delete" name="mod"></input>
      <input id="token" type="hidden" value="{{ service.token }}" name="token"></input>
      <input id="id" type="hidden" value="{{ service.id }}" name="id"></input>
      <button id="remove" type="submit">{{ 'Submit'|t }}</button>
    </form>
    <script nonce="{{ nonce }}">
      $('form').submit(function () {
        return confirm("{{ 'The action cannot be canceled. Are you sure you want to continue?'|t }}");
      });
    </script>
  </div>
  {% endif %}

{% block footer %}
{% endblock %}

{% endblock %}