{% extends "task_orders/builder_base.html" %}

{% from 'components/date_picker.html' import DatePicker %}
{% from 'components/icon.html' import Icon %}
{% from 'components/options_input.html' import OptionsInput %}
{% from 'components/text_input.html' import TextInput %}
{% from 'task_orders/form_header.html' import TOFormStepHeader %}

{% set action = url_for("task_orders.submit_form_step_three_add_clins", task_order_id=task_order_id) %}
{% set next_button_text = "Next: Review Funding" %}
{% set previous_button_link = url_for("task_orders.form_step_two_add_number", task_order_id=task_order_id) %}
{% set step = "3" %}

{% macro LOAInput() %}
  <div v-for="loa in loas">
    <textinput :name="'clins-' + clinIndex + '-loas-' + loaIndex(loa)" :watch='true' inline-template>
      <div class="usa-input usa-input--validation--anything">
        <masked-input
          v-on:input='onInput'
          v-on:blur='onBlur'
          v-on:change='onChange'
          v-bind:value='value'
          v-bind:mask='mask'
          v-bind:pipe='pipe'
          v-bind:keep-char-positions='keepCharPositions'
          v-bind:aria-invalid='showError'
          type='text'
          :id='name'
          ref='input'>
        </masked-input>

        <input type='hidden' v-bind:value='rawValue' :name='name' />
      </div>
    </textinput>
  </div>

  <button
    class="icon-link"
    v-on:click="addLoa"
    type="button">
    {{ Icon('plus') }}
    <span>{{ 'task_orders.form.add_loa' | translate }}</span>
  </button>
{% endmacro %}

{% macro CLINFields(fields=None, index=None) %}
  <clin-fields
    {% if fields %}
      v-bind:initial-clin-index='{{ index }}'
      v-bind:initial-loa-count="{{ fields.loas.data | length or 0 }}"
      v-bind:initial-clin-type="'{{ fields.jedi_clin_type.data }}'"
      v-bind:initial-amount='{{ fields.obligated_amount.data or 0 }}'
      v-bind:initial-start-date="'{{ fields.start_date.data | string }}'"
      v-bind:initial-end-date="'{{ fields.end_date.data | string }}'"
    {% else %}
      v-bind:initial-clin-index='clinIndex'
      v-bind:initial-clin-type="'JEDI_CLIN_1'"
    {% endif %}
    inline-template>
    <div class="card">
      <div class="h3">
        {{ 'task_orders.form.base_clin_title' | translate }}
      </div>
      <div class="form-row">
        <div class="form-col form-col--two-thirds">
          {% if fields %}
            {{ OptionsInput(fields.jedi_clin_type, watch=True, show_validation=False) }}
          {% else %}
            <optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' :optional='false' inline-template>
              <div class="usa-input">
                <fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
                    <legend>
                      <div class="usa-input__title">
                        {{ 'task_orders.form.clin_type_label' | translate }}
                      </div>
                    </legend>
                    <select :id='name' :name='name'>
                      <option value="JEDI_CLIN_1">{{ "forms.task_order.clin_01_label" | translate }}</option>
                      <option value="JEDI_CLIN_2">{{ "forms.task_order.clin_02_label" | translate }}</option>
                      <option value="JEDI_CLIN_3">{{ "forms.task_order.clin_03_label" | translate }}</option>
                      <option value="JEDI_CLIN_4">{{ "forms.task_order.clin_04_label" | translate }}</option>
                    </select>
                </fieldset>
              </div>
            </optionsinput>
          {% endif %}
        </div>
        <div class="form-col form-col--third">
          {% if fields %}
            {{ TextInput(fields.number, watch=True) }}
          {% else %}
            <textinput :name="'clins-' + clinIndex + '-number'" :watch='true' inline-template>
              <div class="usa-input">
                <label :for="name">
                  <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
                  <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
                  <div class="usa-input__title">{{ 'task_orders.form.clin_number_label' | translate }}</div>
                </label>

                <masked-input
                  v-on:input='onInput'
                  v-on:blur='onBlur'
                  v-on:change='onChange'
                  v-bind:value='value'
                  v-bind:mask='mask'
                  v-bind:pipe='pipe'
                  v-bind:keep-char-positions='keepCharPositions'
                  v-bind:aria-invalid='showError'
                  type='text'
                  :id='name'
                  ref='input'>
                </masked-input>

                <input type='hidden' v-bind:value='rawValue' :name='name' />

                <template v-if='showError'>
                  <span class='usa-input__message' v-html='validationError'></span>
                </template>
                <template v-else>
                  <span class='usa-input__message'></span>
                </template>
              </div>
            </textinput>
          {% endif %}
        </div>
      </div>

      <fieldset class="task-order__loa-fieldset">
        <legend>
          <div class="usa-input__title">
            {{ 'task_orders.form.loa_label' | translate }}
          </div>
        </legend>
        {% for loa in fields.loas %}
          {{ TextInput(loa, showLabel=False, watch=True, show_validation=False) }}
        {% endfor %}

        {{ LOAInput() }}
      </fieldset>

      <div class="form-row">
        {% if fields %}
          <div class="form-col form-col--half">
            {{ DatePicker(fields.start_date, watch=True, optional=False) }}
          </div>
          <div class="form-col form-col--half">
            {{ DatePicker(fields.end_date, watch=True, optional=False) }}
          </div>

        {% else %}
          <div class="form-col form-col--half">
            <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :watch='true' :optional='false' inline-template>
              <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
                <legend>
                  <div class="usa-input__title">
                    {{ 'task_orders.form.pop_start' | translate }}
                  </div>
                </legend>

                <div class="date-picker-component">
                  <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />

                  <div class="usa-form-group usa-form-group-month">
                    <label>{{ 'components.date_selector.month' | translate }}</label>
                    <input
                      name="date-month"
                      max="12"
                      maxlength="2"
                      min="1"
                      type="number"
                      v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
                      v-model="month"
                      v-on:change="onInput"
                      />
                  </div>

                  <div class="usa-form-group usa-form-group-day">
                    <label>{{ 'components.date_selector.day' | translate }}</label>
                    <input
                      name="date-day"
                      maxlength="2"
                      min="1"
                      type="number"
                      v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
                      v-bind:max="daysMaxCalculation"
                      v-model="day"
                      v-on:change="onInput"
                      />
                  </div>

                  <div class="usa-form-group usa-form-group-year">
                    <label>{{ 'components.date_selector.year' | translate }}</label>
                    <input
                      name="date-year"
                      maxlength="4"
                      type="number"
                      v-model="year"
                      v-on:change="onInput"
                      />
                  </div>

                  <div class="usa-form-group-date-ok" v-if="isDateValid">
                    {{ Icon("ok", classes="icon--green") }}
                  </div>
                </div>
              </fieldset>
            </date-selector>
          </div>

          <div class="form-col form-col--half">
            <date-selector :name-tag="'clins-' + clinIndex + '-end_date'" :watch='true' :optional='false' inline-template>
              <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
                <legend>
                  <div class="usa-input__title">
                    {{ 'task_orders.form.pop_end' | translate }}
                  </div>
                </legend>

                <div class="date-picker-component">
                  <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />

                    <div class="usa-form-group usa-form-group-month">
                      <label>{{ 'components.date_selector.month' | translate }}</label>
                      <input
                        name="date-month"
                        max="12"
                        maxlength="2"
                        min="1"
                        type="number"
                        v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
                        v-model="month"
                        v-on:change="onInput"
                        />
                    </div>

                    <div class="usa-form-group usa-form-group-day">
                      <label>{{ 'components.date_selector.day' | translate }}</label>
                      <input
                        name="date-day"
                        maxlength="2"
                        min="1"
                        type="number"
                        v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
                        v-bind:max="daysMaxCalculation"
                        v-model="day"
                        v-on:change="onInput"
                        />
                    </div>

                    <div class="usa-form-group usa-form-group-year">
                      <label>{{ 'components.date_selector.year' | translate }}</label>
                      <input
                        name="date-year"
                        maxlength="4"
                        type="number"
                        v-model="year"
                        v-on:change="onInput"
                        />
                    </div>

                  <div class="usa-form-group-date-ok" v-if="isDateValid">
                    {{ Icon("ok", classes="icon--green") }}
                  </div>
                </div>
              </fieldset>
            </date-selector>
          </div>
        {% endif %}
      </div>
      <div class="form-row">
        <p class="usa-input-error-message form-has-errors">
          <template v-if='showPopError'>
            {% if fields and fields.start_date.errors %}
              {{ fields.start_date.errors[0] }}
            {% else %}
              {{ "forms.task_order.start_date_error" | translate }}
            {% endif %}
          </template>
        </p>
      </div>

      {% if fields %}
        {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
      {% else %}
        <textinput
          v-cloak
          inline-template
          :name="'clins-' + clinIndex + '-obligated_amount'"
          validation="dollars"
          :watch='true'>
          <div class="usa-input usa-input--validation--dollars">
            <label :for="name">
              <div class="usa-input__title">{{ 'task_orders.form.obligated_funds_label' | translate }}</div>
              <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
              <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
            </label>

            <masked-input
              v-on:input='onInput'
              v-on:blur='onBlur'
              v-on:change='onChange'
              v-bind:value='value'
              v-bind:mask='mask'
              v-bind:pipe='pipe'
              v-bind:keep-char-positions='keepCharPositions'
              v-bind:aria-invalid='showError'
              v-bind:show-mask='false'
              type='text'
              :id='name'
              ref='input'>
            </masked-input>

            <input type='hidden' v-bind:value='rawValue' :name='name' />

            <template v-if='showError'>
              <span class='usa-input__message' v-html='validationError'></span>
            </template>
            <template v-else>
              <span class='usa-input__message'></span>
            </template>
          </div>
        </textinput>
      {% endif %}
    </div>
  </clin-fields>
{% endmacro %}


{% block to_builder_form_field %}
  <to-form
    inline-template
    v-bind:initial-clin-count="{{ form.clins.data | length }}">
    <div>
      {{ TOFormStepHeader('task_orders.form.clin_title' | translate, 'task_orders.form.clin_description' | translate, task_order.number) }}

      {% for clin in form.clins %}
        {{ CLINFields(clin, index=loop.index - 1) }}
      {% endfor %}

      <div v-for="clin in clins">
        {{ CLINFields() }}
      </div>

      <button
        class="icon-link icon-link__add-another-clin"
        v-on:click="addClin"
        type="button">
        {{ Icon('plus') }}
        <span>{{ 'task_orders.form.add_clin' | translate }}</span>
      </button>
    </div>
  </to-form>
{% endblock %}