@extends('_layout')

@section('title', "Etiqueta AR")

@section('content')
  <div class="row">
    <div class="col">
      <form method="GET" action="#" id="busca-form">
        @csrf
        <div>
          <x-form-select name="situacao"
                         label="Situação do processo *"
{{--                         v-model="situacao_processo"--}}
                        required>
            <option> </option>
            <option :value="value.mov_id" v-for="value of movimentacoes">@{{ value.mov_nome }}</option>
          </x-form-select>
        </div>


        <div>
          <div class="row">
            <div class="col-6">
              <x-form-input name="periodo_inicio" label="De" type="date"></x-form-input>
            </div>
            <div class="col-6">
              <x-form-input name="periodo_final" label="Até" type="date"></x-form-input>
            </div>
          </div>
        </div>

        <div>
          <x-form-select name="status"
                         label="Status do AR"
          >
            <option :value="key" v-for="[key, value] of Object.entries(tem_ar)" :selected="(key == '')">@{{ value }}</option>
          </x-form-select>
        </div>

        <div>
          <button class="btn btn-primary mb-5">Buscar</button>
        </div>
      </form>
    </div>
  </div>
@endsection

@push('scripts')
  <script>
    new Vue({
      el: '#busca-form',
      data: {
        movimentacoes: @json($movimentacoes),
        tem_ar: @json($tem_ar),
        {{--status_multa: @json($status_multa),--}}
        {{--capitulacao: @json($capitulacao),--}}
        //cpf_cnpj_nao_localizado: false
      }
    });
  </script>
@endpush