@extends('_layout')

@section('title', "Processo $processo (Fake)")

@section('content')
  <div id="movimentar">
    <ul class="nav nav-pills mb-3">
      <li class="nav-item">
        <a class="nav-link" v-bind:class="{ active: tab === 'historico' }"
           v-on:click="tab = 'historico'">Histórico</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" v-bind:class="{ active: tab === 'movimentar' }"
           v-on:click="tab = 'movimentar'">Movimentar</a>
      </li>
    </ul>

    <table class="table" v-if="tab === 'historico'">
      <thead>
      <tr>
        <th style="width: 200px">Data</th>
        <th style="width: 200px">Origem</th>
        <th style="width: 200px">Destino</th>
        <th>Despacho</th>
      </tr>
      </thead>
      <tbody>
      @foreach($despachos as $despacho)
        <tr>
          <td>{{ $despacho->data }}</td>
          <td>
            {{ $departamentos[$despacho->origem] ?? $despacho->origem }}<br>
            {{ $despacho->usr_despacho }}
          </td>
          <td>
            {{ $departamentos[$despacho->destino] ?? $despacho->destino }}<br>
            {{ $despacho->usr_destino }}
          </td>
          <td>
            <span class="badge badge-secondary">{{ $despacho->situacao }}</span>
            {!! $despacho->despacho !!}
          </td>
        </tr>
        @foreach($despacho->anexos as $anexo)
          <tr>
            <td colspan="4">
              <i class="fa fa-file-pdf mr-1"></i>
              @if($anexo->link AND App::environment() != 'production')
                <a href="{{ route('med-fake.baixar', $anexo->link) }}">
                  {{ $anexo->arquivo }}
                </a>
              @else
                {{ $anexo->arquivo }} (não encontrado)
              @endif
            </td>
          </tr>
        @endforeach
      @endforeach
      </tbody>
    </table>

    <div class="row" v-if="tab === 'movimentar'">
      <div class="col-xl-6">
        <div class="card">
          <h5 class="card-header">Movimentar</h5>
          <div class="card-body">
            <x-form action="{{ route('med-fake.movimentar', $processo) }}" id="form-movimentar">
              <div class="row">
                <div class="col-xl-6">
                  <x-form-input name="situacao" label="Cód. Movimentação"></x-form-input>
                </div>
              </div>
              <div class="row">
                <div class="col-xl">
                  <x-form-select name="origem" :options="$departamentos" v-model="origem"
                                 label="Origem: Cód. Departamento"></x-form-select>
                </div>
                <div class="col-xl">
                  <x-form-select name="usr_despacho" label="Origem: Usuário" v-model="usr_despacho">
                    <option value=""></option>
                    <option v-bind:value="option.usuario" v-for="option of options_usr_despacho">
                      @{{ option.nome }}
                    </option>
                  </x-form-select>
                </div>
              </div>
              <div class="row">
                <div class="col-xl">
                  <x-form-select name="destino" :options="$departamentos" v-model="destino"
                                 label="Destino: Cód. Departamento"></x-form-select>
                </div>
                <div class="col-xl">
                  <x-form-select name="usr_destino" label="Destino: Usuário" v-model="usr_destino">
                    <option value=""></option>
                    <option v-bind:value="option.usuario" v-for="option of options_usr_destino">
                      @{{ option.nome }}
                    </option>
                  </x-form-select>
                </div>
              </div>
              <x-form-textarea name="despacho" label="Despacho"></x-form-textarea>
              <button type="submit" class="btn btn-primary">
                Movimentar
              </button>
            </x-form>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script>
    new Vue({
      el: '#movimentar',
      data: {
        tab: @json($errors->any() ? 'movimentar' : 'historico'),
        origem: @json(old('origem' ?? '')),
        destino: @json(old('destino' ?? '')),
        usr_despacho: @json(old('usr_despacho' ?? '')),
        usr_destino: @json(old('usr_destino' ?? '')),
        usuarios: @json($usuarios),
      },
      computed: {
        options_usr_despacho: function () {
          return this.usuarios.filter((_) => _.departamento === this.origem);
        },
        options_usr_destino: function () {
          return this.usuarios.filter((_) => _.departamento === this.destino);
        }
      }
    });
  </script>
@endpush