{% load static %}
{% load i18n %}
{% trans "300" as maxLetterLength %}

{% if owner_type == 'customer' %}
  {% trans "Заполните форму, чтобы отправить посылку" as p_title %}
  {% trans "Откуда забрать посылку" as l_from %}
  {% trans "Куда доставить посылку" as l_to %}
  {% trans "Каким способом Вы хотите отправить?" as l_transport %}
  {% trans "Выберите кого (что) вы можете перевезти:" as l_cargo %}
  {% trans "Дата отправления" as l_date_from %}
  {% trans "Дата доставки посылки" as l_date_to %}


{% elif owner_type == 'mover' %}
  {% trans "Заполните форму, чтобы перевезти посылку" as p_title %}
  {% trans "Пункт отправления" as l_from %}
  {% trans "Пункт прибытия" as l_to %}
  {% trans "Укажите способ, которым вы можете перевезти" as l_transport %}
  {% trans "Выберите кого (что) вы можете перевезти:" as l_cargo %}
  {% trans "Дата отправления" as l_date_from %}
  {% trans "Дата прибытия" as l_date_to %}


{% endif %}

<div id="poster" class="poster poster--{% if owner_type == 'customer' %}customer{% else %}mover{% endif %}">
  <h1 class="poster__title">{{ p_title }}</h1>

  <form class="poster__form"
        name="new_route"
        method="post"
        id="poster__form"
  >
    {% csrf_token %}
    <input
        type="number"
        name="from_city"
        id="from_city"
        hidden
        {% if form.initial.from_city %}value="{{ form.initial.from_city.id }}"{% endif %}
    />
    <input
        type="number"
        name="to_city"
        id="to_city"
        hidden
        {% if form.initial.to_city %}value="{{ form.initial.to_city.id }}"{% endif %}
    />
    <input
        id="owner_type"
        name="owner_type"
        hidden
        {% if form.initial.owner_type %}
        value="{{ form.initial.owner_type }}"
        {% elif form.data.owner_type %}
        value="{{ form.data.owner_type }}"
        {% endif %}
    >
    {#type-transport mover#}
    {% if owner_type == 'mover' %}
      <div class="poster__row poster__row--transport">
        <div class="poster__col col-12">

          <label for="type_transport" class="poster__label col-12" required>
            {{ l_transport }}
          </label>
          {% for item in form.fields.type_transport.choices %}
            <div class="cargo cargo--inline">
              <input
                  class="cargo__inp"
                  type="radio"
                  name="type_transport"
                  id="type_transport_{{ forloop.counter }}"
                  value="{{ item.0 }}"
                  {% if form.initial.type_transport == item.0 %}
                  checked
                  {% endif %}
              >
              <label class="cargo__label"
                     for="type_transport_{{ forloop.counter }}">
                <span>{{ item.1 }}</span>
              </label>
            </div>
          {% endfor %}
          {% if not errors_off and form.errors and form.errors.type_transport %}
            <span>{{ form.errors.type_transport }}</span>
          {% endif %}
          <div class="poster__info">
            {% translate "Обязательно учитывайте Правила и особенности перевозки выбранным Вами видом транспорта" %}
          </div>
        </div>
      </div>
    {% endif %}
    {#from-to#}
    <div class="poster__row poster__row--from-to">
      <div class="poster__col">
        <label for="from" class="poster__label" required>
          {{ l_from }}
        </label>
        <div class="poster__inp-box
                    {% if form.initial.to_city %} is-set{% endif %}
        ">

          <input
              type="text"
              autocomplete="off"
              name="from_address_point_txt"
              id="from"
              class="poster__locate locate"
              placeholder="{% translate "Укажите город" %}"
              required
              {% if form.initial.from_city %}
              value="{{ form.initial.from_city.name }} / {{ form.initial.from_city.country.name }}"
              {% endif %}
          >
          {% if form.initial.from_city %}
            <div class="poster__inp-country">
              <img src="{{ MEDIA_URL }}{{ form.initial.from_city.country.flag }}"
                   alt="{{ form.initial.from_city.country.name }}">
              <span>{{ form.initial.from_city.country.short_code }}</span>
            </div>
          {% endif %}
        </div>
        <div class="poster__towns-list"></div>
        {% if not errors_off and form.errors and form.errors.from_address_point %}
          <span id="error_from_address_point">{{ form.errors.from_address_point }}</span>
        {% endif %}
      </div>
      <div class="poster__col">
        <label for="to" class="poster__label " required>
          {{ l_to }}
        </label>
        <div class="poster__inp-box
                    {% if form.initial.to_city %} is-set{% endif %}
        ">
          <input
              type="text"
              autocomplete="off"
              name="to_address_point_txt"
              id="to"
              class="poster__locate locate"
              placeholder="{% translate "Укажите город" %}"
              required
              {% if form.initial.to_city %}
              value="{{ form.initial.to_city.name }} / {{ form.initial.to_city.country.name }}"
              {% endif %}
          >
          {% if form.initial.to_city %}
            <div class="poster__inp-country">
              <img src="{{ MEDIA_URL }}{{ form.initial.to_city.country.flag }}"
                   alt="{{ form.initial.to_city.country.name }}">
              <span>{{ form.initial.to_city.country.short_code }}</span>
            </div>
          {% endif %}
        </div>
        <div class="poster__towns-list"></div>
        {% if not errors_off and form.errors and form.errors.from_address_point %}
          <span id="error_to_address_point">{{ form.errors.from_address_point }}</span>
        {% endif %}
      </div>

      {% if owner_type == 'mover' %}
        <div class="poster__col poster__col--inner">
          {#date-from#}
          <div class="poster__col">
            <label for="departure_DT" class="poster__label col-12" required>
              {{ l_date_from }}
            </label>
            <input
                type="text"
                class="poster__date date"
                id="departure_DT"
                name="departure_DT"
                readonly
                required
                {% if form.initial.departure_DT %}
                value="{{ form.initial.departure_DT|date:"d.m.Y" }}"
                {% endif %}
            />
            {% if not errors_off and form.errors and form.errors.departure_DT %}
              <span id="error_departure_DT">{{ form.errors.departure_DT }}</span>
            {% endif %}
          </div>
          {#date-to#}
          <div class="poster__col">
            <label for="arrival_DT" required class="poster__label col-12 ">
              {{ l_date_to }}
            </label>
            <input
                type="text"
                class="poster__date date"
                id="arrival_DT"
                name="arrival_DT"
                readonly
                {% if form.initial.arrival_DT %}
                value="{{ form.initial.arrival_DT|date:"d.m.Y" }}"
                {% endif %}
            />
            {% if not errors_off and form.errors and form.errors.arrival_DT %}
              <span id="error_arrival_DT">{{ form.errors.arrival_DT }}</span>
            {% endif %}
          </div>
        </div>

      {% endif %}
    </div>
    {#cargo-type#}
    <div class="poster__row poster__row--cargo">
      <div class="poster__col col-12">
        <label class="poster__label col-12" required>
          {{ l_cargo }}
        </label>
        <div class="poster__grid">

          {% for item in form.fields.cargo_type.choices %}
            <div class="cargo">
              <input
                  class="cargo__inp"
                  type="radio"
                  name="cargo_type"
                  id="cargo_type_{{ forloop.counter }}"
                  required
                  value="{{ item.0 }}"
                  {% if form.initial.cargo_type == item.0 or forloop.first %}
                  checked
                  {% endif %}
              />
              <label class="cargo__label"
                     for="cargo_type_{{ forloop.counter }}">
                <span>{{ item.1 }}</span>
              </label>
            </div>
          {% endfor %}
        </div>
        {% if not errors_off and form.errors and form.errors.cargo_type %}
          <span id="error_cargo_type">{{ form.errors.cargo_type }}</span>
        {% endif %}
      </div>
    </div>
    {#date-poster#}
    {% if owner_type == 'customer' %}
      <div class="poster__row poster__row--date">
        {#date-to#}
        <div class="poster__col">
          <label for="arrival_DT" class="poster__label col-12" required>
            {{ l_date_to }}
          </label>
          <input
              type="text"
              class="poster__date date"
              id="arrival_DT"
              name="arrival_DT"
              placeholder="{% translate "Выберите дату" %}"
              required
              {% if form.initial.arrival_DT %}
              value="{{ form.initial.arrival_DT|date:"d.m.Y" }}"
              {% endif %}
          />
          {% if not errors_off and form.errors and form.errors.arrival_DT %}
            <span id="error_arrival_DT">{{ form.errors.arrival_DT }}</span>
          {% endif %}
        </div>
        <div class="poster__col">
          <input
              type="text"
              id="departure_DT"
              name="departure_DT"
              hidden
              {% if form.initial.departure_DT %}
              value="{{ form.initial.departure_DT|date:"d.m.Y" }}"
              {% endif %}
          />
        </div>
      </div>
      <div class="poster__row poster__row--transport">
        <div class="poster__col col-12">

          <label for="type_transport" class="poster__label col-12" required>
            {{ l_transport }}
          </label>
          {% for item in form.fields.type_transport.choices %}
            <div class="cargo cargo--inline">
              <input
                  class="cargo__inp"
                  type="radio"
                  name="type_transport"
                  id="type_transport_{{ forloop.counter }}"
                  value="{{ item.0 }}"
                  {% if form.initial.type_transport == item.0 %}
                  checked
                  {% endif %}
              >
              <label class="cargo__label"
                     for="type_transport_{{ forloop.counter }}">
                <span>{{ item.1 }}</span>
              </label>
            </div>
          {% endfor %}
          {% if not errors_off and form.errors and form.errors.type_transport %}
            <span>{{ form.errors.type_transport }}</span>
          {% endif %}
          <div class="poster__info">
            {% translate "Обязательно учитывайте Правила и особенности перевозки выбранным Вами видом транспорта" %}
          </div>
        </div>
      </div>
    {% endif %}
    {#phone#}
    <div class="poster__row poster__row--phone">
      <div class="poster__col col-12">

        <label for="phone" class="col-12">
          {% translate "Контактный номер телефона, по которому с Вами могут связаться перевозчики" %}
        </label>
        <input id="phone"
               name="phone"
               class="col-12 col-xl-6"
               type="text"
               pattern="[0-9\-+]{5,}"
               maxlength="30"
               {% if form.initial.phone %}value="{{ form.initial.phone }}"{% endif %}
               placeholder="{% translate "Укажите телефон" %}"
               title="{% translate "Только цифры или - или +" %}"
        >
        <div class="poster__info">
          {% translate "Если вы оставите это поле пустым - перевозчики смогут только написать вам в личные сообщения на нашем сайте TripWB.com" %}
        </div>
        {% if not errors_off and form.errors and form.errors.phone %}
          <span id="error_id_phone">{{ form.errors.phone|safe }}</span>
        {% endif %}
      </div>
    </div>
    {#comment#}
    <div class="poster__row poster__row--description">
      <div class="poster__col col-12">

        <label for="comment" class="col-12">
          {% translate "Примечание (необязательно)" %}
        </label>
        <textarea
            name="comment"
            id="comment"
            maxlength="{{ maxLetterLength }}"
            placeholder="{% translate "Если желаете, то здесь можно указать важную информацию, например: вес, габариты посылки, количество попутчиков и т.д.)" %}"
        >{{ form.initial.comment }}</textarea>
        <div class="poster__area-descr">
          <span class="js-letter-count">0</span>
          {% translate "из" %}
          {{ maxLetterLength }}
          {% translate "символов" %}
        </div>
      </div>
    </div>
    {#distribution#}
    <div class="poster__row poster__row--distribution">
      <div class="cargo cargo--info">

        <input type="checkbox"
               name="receive_msg_by_email"
               class="cargo__inp"
            {% if form.initial.receive_msg_by_email == True %}
               checked
            {% endif %}
               id="receive_msg_by_email">

        <label class="cargo__label" for="receive_msg_by_email">
          {% translate "Хочу получать уведомления на E-mail о появлении перевозчика по моим критериям" %}
        </label>
      </div>
      {% if not errors_off and form.errors and form.errors.receive_msg_by_email %}
        {{ form.errors.receive_msg_by_email }}
      {% endif %}
    </div>

    <button type="submit"
            class="btn btn--primary col-12"
            data-routeId="{% if route.id %}{{ route.id }}{% endif %}"
    >
      {% translate "Разместить объявление" %}
    </button>


  </form>
</div>

<script src="{% static 'js/form-poster.js' %}">

</script>