@extends('_layout')

@section('title', 'Usuário')

@section('content')
  <x-form :action="route('user.update', $model->id)" method="put"
          id="user-form">
    @bind($model)
      <div class="row">
      <div class="col-xl-6">
        <div class="card shadow mb-4">
          <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Cadastro</h6>
          </div>
          <div class="card-body">

            <div class="form-group">
              <label>{{ __('validation.attributes.name') }}</label>
              <div class="form-control-plaintext">{{ $model->name }}</div>
            </div>
            <x-form-select name="med_departamento"
                           :options="$departamentos"
                           label="{{ __('validation.attributes.med_departamento') }}"
                           v-model="departamento" />
            <x-form-select name="med_usuario"
                           label="{{ __('validation.attributes.med_usuario') }}"
                           v-model="usuario">
              <option></option>
              <template v-for="item of usuarios" v-key="item.usuario">
                <option v-bind:value="item.usuario" v-if="item.departamento === departamento">
                  @{{ item.usuario }}
                </option>
              </template>
            </x-form-select>

            <div class="dropdown-divider my-3"></div>
            <button type="submit" class="btn btn-primary">Salvar</button>
          </div>
        </div>
      </div>
    </div>
    @endbind
  </x-form>

@endsection

@push('scripts')
  <script>
    new Vue({
      el: '#user-form',
      data: {
        departamento: @json(old('med_departamento', $model->med_departamento ?? 0)),
        usuario: @json(old('med_usuario', $model->med_usuario ?? 0)),
        usuarios: @json($usuarios),
      }
    });
  </script>
@endpush