@php $technologyStacks = \App\Models\TechnologyStack::getAllForSelect() @endphp

<div class="row mt-4">
  <div class="col-12">
    <div id="technologyStacksContainer">
      {!! Form::label('', 'Technology Stacks:') !!}
      @foreach($account->technologyStacks ?? [] as $stack)
        <div style="margin-bottom: 15px" class="row technology-stack-row">
          <div class="col-md-3">
            <select name="technology_stacks[{{ $stack->pivot->id }}][technology_stack_id]"
                    class="form-control technology-stack-select" required>

              @foreach($technologyStacks as $key => $value)
                <option value="{{ $key }}"
                        @if($stack->id == $key) selected @endif>
                  {{ $value }}
                </option>
              @endforeach

            </select>
          </div>

          <div class="col-md-2">
            <input type="text"
                   name="technology_stacks[{{ $stack->pivot->id }}][vendor]"
                   class="form-control"
                   placeholder="Vendor"
                   required
                   value="{{ $stack->pivot->vendor }}">
          </div>

          <div class="col-md-2">
            <input type="text"
                   name="technology_stacks[{{ $stack->pivot->id }}][product]"
                   class="form-control"
                   placeholder="Product / Service"
                   value="{{ $stack->pivot->product }}">
          </div>

          <div class="col-md-3">
            <input type="text"
                   name="technology_stacks[{{ $stack->pivot->id }}][note]"
                   class="form-control"
                   placeholder="Notes"
                   value="{{ $stack->pivot->note }}">
          </div>

          <div class="col-md-2">
            <button type="button" class="btn btn-danger btn-remove">
              <i class="fa fa-minus"></i>
            </button>
          </div>
        </div>
      @endforeach

    </div>
  </div>

  <div class="col-12">
    <button type="button" class="btn btn-success btn-add-tech" style="margin-bottom: 15px">
      <i class="fa fa-plus"></i>
    </button>
  </div>

</div>
<div class="row mt-4">
  <div class="form-group col-6">
    <label for="additional_technology_stacks">Additional Technology Stacks:</label>
    <input name="additional_technology_stacks" rows="3" id="additional_technology_stacks"
           class="form-control"
           placeholder="Technology Stacks"
           value="{{old('additional_technology_stacks',  $account->ruleEngagement->additional_technology_stacks ?? null)}}">
  </div>
</div>

<script type="text/javascript">
  $(function () {

    const techOptions = @json($technologyStacks);

    const container = $('#technologyStacksContainer');

    function getIndex() {
      return container.find('.technology-stack-row').length;
    }

    function renderOptions(selected = null) {
      let options = '<option value="">Select technology</option>';

      $.each(techOptions, function (id, name) {
        options += `<option value="${id}" ${selected == id ? 'selected' : ''}>${name}</option>`;
      });

      return options;
    }

    function addRow() {
      const i = getIndex() + 10;

      container.append(`
            <div class="row technology-stack-row" style="margin-bottom: 15px">
                <div class="col-md-3">
                    <select name="technology_stacks[${i}][technology_stack_id]" class="form-control technology-stack-select" required>
                        ${renderOptions()}
                    </select>
                </div>

      <div class="col-md-2">
        <input type="text" name="technology_stacks[${i}][vendor]" class="form-control" placeholder="Vendor" required>
      </div>

      <div class="col-md-2">
        <input type="text" name="technology_stacks[${i}][product]" class="form-control" placeholder="Product / Service">
      </div>

      <div class="col-md-3">
        <input type="text" name="technology_stacks[${i}][note]" class="form-control" placeholder="Notes">
      </div>

                <div class="col-md-2">
                    <button type="button" class="btn btn-danger btn-remove">
                        <i class="fa fa-minus"></i>
                    </button>
                </div>
            </div>
        `);

    }

    $(document).on('click', '.btn-add-tech', addRow);

    $(document).on('click', '.btn-remove', function () {
      $(this).closest('.technology-stack-row').remove();

    });

  });


  $(document).on('change', 'input[name*="[end_at]"], input[name*="[to]"]', function () {
    if ($(this).val() === '0:00' || $(this).val() === '00:00') {
      $(this).val('23:59');
    }
  });

  $('.timepicker').timepicker({
    showMeridian: false,
    minuteStep: 15,
    defaultTime: false,
    showInputs: true,
    disableFocus: true,
    icons: {
      up: 'fa fa-angle-up',
      down: 'fa fa-angle-down'
    }
  });

</script>