@extends('create.base')

@section('content')
  <form class="ui form" method="post" action="{{$urls->base}}/create/2">
    <div class="field">
      <label>Nombre</label>
      <input type="text" name="nombre" />
    </div>
    <div class="field">
      <label>Descripción</label>
      <input type="text" name="descripcion" />
    </div>
    <div class="field">
      <label>Dependencias</label>
      <div class="ui multiple search selection dropdown" id="dependencias">
        <i class="dropdown icon"></i>
        <input type="hidden" name="dependencias[]" multiple="multiple" value="{{implode(',', $defaults->require)}}" />
        <div class="default text">Dependencias</div>
        <div class="menu">
          @foreach ($defaults->require as $dep)
            <div class="item" data-value="{{$dep}}">{{$dep}}</div>
          @endforeach
        </div>
      </div>
    </div>
    <div class="field">
      <label>Dependencias Dev</label>
      <div class="ui multiple search selection dropdown" id="dependencias-dev">
        <input type="hidden" name="dependencias-dev[]" multiple="multiple" value="{{implode(',', $defaults->{'require-dev'})}}"/>
        <i class="dropdown icon"></i>
        <div class="default text">Dependencias</div>
        <div class="menu">
          @foreach ($defaults->{'require-dev'} as $dep)
            <div class="item" data-value="{{$dep}}">{{$dep}}</div>
          @endforeach
        </div>
      </div>
    </div>
    <div class="field">
      <button class="ui button">
        Siguiente
        <i class="right chevron icon"></i>
      </button>
    </div>
  </form>
@endsection

@push('global_script')
  let step1 = {
    id: '#dependencias',
    id2: '#dependencias-dev',
    setup: function() {
      $(this.id).dropdown({
        apiSettings: {
          preserveHTML: false,
          url: '{{$urls->api}}/dependencies/search?query={query}'
        }
      })
      $(this.id2).dropdown({
        apiSettings: {
          preserveHTML: false,
          url: '{{$urls->api}}/dependencies/search?query={query}'
        }
      })
    }
  }
  step1.setup()
@endpush