@php
/**
 * @var \App\Http\Controllers\MultaViewShape[] $multas
 * @var \Illuminate\Support\MessageBag $errors
 */

$gerar_documento = \Gate::check('multa.gerarDocumento');
@endphp

@extends('_layout')

@section('title', 'Multas')

@section('content')
<style>
  table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    min-width: 100%;
  }
  th, td {
    padding: 3px;
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  #multas .form-check-input {
    position: static;
  }
</style>

<div class="row">
<div class="col-6">
  Busca: {{ $busca }}
  </br>
  Situações: {{ $situacao_texto }}
  </br>
</div>
  <!--div class="col-6" style="text-align: right">
    <button class = "btn btn-outline-dark" onclick="tamanhoTabela(100)">Aumentar tabela <i class="fas fa-search-plus"></i></button>
    <button class = "btn btn-outline-dark" onclick="tamanhoTabela(-100)">Diminuir tabela <i class="fas fa-search-minus"></i></button>
  </div-->
</div>

<!--script type="application/javascript">
  var wrapper = document.getElementById("wrapper");
  var tamanho = 0;

  window.onload = function() {
    tamanho = wrapper.offsetWidth
  };

  function tamanhoTabela(valor) {
    if((wrapper.offsetWidth + valor) >= tamanho && (wrapper.offsetWidth + valor) <= (tamanho * 1.5) && tamanho != 0) {
      wrapper.style.width = (wrapper.offsetWidth + valor)+"px";
    }
  }
</script-->

@if($multas)
<x-form id="multas" action="{{ route('multa.gerarDocumento') }}">
  @php
  $cols = [];
  if ($gerar_documento) {
      $cols[] = .3;
  }
  $cols = [...$cols, 1.2, 1, 1, 1, .7, .7];
  $fator = array_sum($cols) / 100;
  $widths = array_map(function ($x) use ($fator) { return sprintf('width: %.2F%%', $x * $fator); }, $cols);
  @endphp
  <table class="table table-striped">
    <thead>
    <tr>
      @if($gerar_documento)
      <th style="{{ array_shift($widths) }}"></th>
      @endif
      <th style="{{ array_shift($widths) }}; text-align:left">Processo</th>
      <th style="{{ array_shift($widths) }}; text-align:left">Auto</th>
      <th style="{{ array_shift($widths) }}">Data de Trânsito</th>
      <th style="{{ array_shift($widths) }}; text-align:left">Situação</th>
      <th style="{{ array_shift($widths) }}" class="text-right">Principal</th>
      <th style="{{ array_shift($widths) }}"></th>
    </tr>
    </thead>
    <tbody>
    @foreach($multas as $key => $multa)
    <tr>
      @if($gerar_documento)
      <td>
        <input type="checkbox" name="multa[]" value="{{ $multa->doc_id }}" />
      </td>
      @endif
      <td style="text-align:left">
        {{ $multa->processo }}
        <div style="font-size: 12px;">{{ $multa->nome }}</div>
      </td>
      <td style="text-align:left">
        {{ $multa->doc_numero }}
        <div style="font-size: 12px">
          Infração: {{ $multa->artigo }}<br>
          Lavratura: {{ $multa->data }}
        </div>
      </td>
      <td>
        @if($gerar_documento)
          @can('multa.data-transito')
          <div class="input-group input-group-sm">
            <input type="date" class="form-control" size="10"
                   name="data_transito[{{ $multa->doc_id }}]"
                   v-on:change="change({{ $key }})"
                   v-model="status_dt[{{ $key }}].value"
                   v-bind:readonly="status_dt_extras[{{ $key }}].readonly">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" type="button"
                      v-bind:disabled="status_dt_extras[{{ $key }}].disabled"
                      v-on:click="click({{ $key }})">
                <i v-if="status_dt[{{ $key }}].status === 'loading'" class="fa fa-fw fa-circle-notch fa-spin" title="Enviando..."></i>
                <i v-else-if="status_dt[{{ $key }}].status === 'failure'" class="fa fa-fw fa-exclamation" title="Erro"></i>
                <i v-else-if="status_dt[{{ $key }}].status === 'success'" class="fa fa-fw fa-check" title="Enviado"></i>
                <i v-else class="fa fa-fw fa-cloud-upload-alt" title="Enviar"></i>
              </button>
            </div>
          </div>
          @else
            <input class="form-control form-control-sm"
                   name="data_transito[{{ $multa->doc_id }}]"
                   size="10"
                   type="date"
                   value="{{ old("data_transito.$multa->doc_id", $multa->data_transito_ymd) }}">
          @endcan
        @else
          {{ $multa->data_transito }}
        @endif
      </td>
      <td style="text-align:left">
          {{ $multa->situacao }}
          <div style="font-size: 12px;">
            Últ. Reg.:
            {{ strcasecmp(trim($multa->ultima_sit_reg),"A pagar") == 0 ? 'Multa mantida' : $multa->ultima_sit_reg }}
          </div>
      </td>
      <td class="text-right">
        {{ $multa->multa }}
      </td>
      <td>
        @if(!Auth::user()->getPermissoesAcesso('processo_retirar_acoes_consulta'))
          <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown">
              Links
            </button>
            <div class="dropdown-menu">
              <a href="https://ged.creadf.org.br/processo/conferir/{{ $multa->processo }}"
                class="dropdown-item"
                target="_blank">
                Andamento
              </a>
              <a href="{{ $multa->auto_despacho ? route('multa.download-auto', $multa->auto_despacho) : '#' }}"
                class="dropdown-item {{ $multa->auto_despacho === null ? 'disabled' : '' }}"
                target="_blank">
                Auto
              </a>
              <button type="submit" class="dropdown-item" form="{{ "parcelamento-$key" }}">
                Parcelamentos
              </button>
            </div>
          </div>
        @else
          <div></div>
        @endif
      </td>
    </tr>
    @endforeach
    </tbody>
  </table>

  @if($gerar_documento)
  <div class="my-4">
    <button class="btn btn-outline-primary" type="submit" name="doc" value="cda" v-on:click="active = null" data-toggle="tooltip" data-placement="top" title="Certidão de Dívida Ativa">CDA</button>
    <button class="btn btn-outline-primary" type="submit" name="doc" value="tida" v-on:click="active = null" data-toggle="tooltip" data-placement="top" title="Termo de Inscrição em Dívida Ativa">TIDA</button>
    <button class="btn btn-outline-primary" type="button" v-on:click="active = 'peticao'" v-bind:class="{active: active === 'peticao'}">Petição</button>
    <button class="btn btn-outline-primary" type="button" v-on:click="active = 'calculo'" v-bind:class="{active: active === 'calculo'}">Cálculo</button>
    <button class="btn btn-outline-primary" type="submit" name="doc" value="termo" v-on:click="active = null">Parcelar</button>
    <button class="btn btn-outline-primary" type="submit" name="doc" value="guia" v-on:click="active = null">Pagar à Vista</button>
  </div>

  {{-- <div class="row" v-if="active === 'cda'">
    <div class="col-xl-4">
      <div class="card">
        <div class="card-header">
          Certidão de Dívida Ativa
        </div>
        <div class="card-body">
          <x-form-input name="registro" label="Registro" />
          <x-form-input name="livro_folha" label="Livro Folha" />
          <button class="btn btn-outline-primary" type="submit" name="doc" value="cda">Emitir</button>
        </div>
      </div>
    </div>
  </div>

  <div class="row" v-if="active === 'tida'">
    <div class="col-xl-4">
      <div class="card">
        <div class="card-header">
          Termo de Inscrição em Dívida Ativa
        </div>
        <div class="card-body">
          <x-form-input name="registro_t" label="Registro" />
          <x-form-input name="livro_folha_t" label="Livro Folha" />
          <button class="btn btn-outline-primary" type="submit" name="doc" value="tida">Emitir</button>
        </div>
      </div>
    </div>
  </div> --}}

  <div class="row" v-if="active === 'peticao'">
    <div class="col-xl-4">
      <div class="card">
        <div class="card-header">
          Petição
        </div>
        <div class="card-body">
          <x-form-group label="Incluir H.A.">
            <x-form-radio name="incluir_ho_p" value="0" label="Não" />
            <x-form-radio name="incluir_ho_p" value="1" label="Sim" />
          </x-form-group>
          <button class="btn btn-outline-primary" type="submit" name="doc" value="peticao">Emitir</button>
        </div>
      </div>
    </div>
  </div>

  <div class="row" v-if="active === 'calculo'">
    <div class="col-xl-4">
      <div class="card">
        <div class="card-header">
          Cálculo
        </div>
        <div class="card-body">
          <x-form-group label="Incluir H.A.">
            <x-form-radio name="incluir_ho_c" value="0" label="Não" />
            <x-form-radio name="incluir_ho_c" value="1" label="Sim" />
          </x-form-group>
          <x-form-group>
            <div class="d-flex align-items-center">
              <x-form-input name="montante" label="Montante Máximo"/>
              <i class="fa fa-question-circle ml-1" data-toggle="tooltip" title="Valor monetário separado por ' . '  Exemplo: 100.50"></i>
            </div>
          </x-form-group>
          <button class="btn btn-outline-primary" type="submit" name="doc" value="calculo">Emitir</button>
        </div>
      </div>
    </div>
  </div>
  @endif
</x-form>

@foreach($multas as $key => $multa)
  <form action="http://sar.creadf.org.br/parcelamentos/lista_parcelamentos.php" method="POST" id="{{ "parcelamento-$key" }}" target="_blank">
    @if($multa->sac_tipo === 'LJ')
      <input type="hidden" name="nome" value="{{ $multa->nome }}">
      <input type="hidden" name="usuario" value="{{ \Auth::user()->email }}">
      <input type="hidden" name="sac_tipo" value="LJ">
    @elseif($multa->sac_tipo === 'LF')
      <input type="hidden" name="nome" value="{{ $multa->nome }}">
      <input type="hidden" name="usuario" value="{{ \Auth::user()->email }}">
      <input type="hidden" name="sac_tipo" value="LF">
    @elseif($multa->sac_tipo === 'P')
      <input type="hidden" name="sac_tipo" value="P">
      <input type="hidden" name="sac_registro" value="{{ $multa->registro }}">
      <input type="hidden" name="nome" value="{{ $multa->nome }}">
      <input type="hidden" name="usuario" value="{{ \Auth::user()->email }}">
      <input type="hidden" name="email" value="">
      <input type="hidden" name="cpf_cgc" value="{{ $multa->cpf_cnpj }}">
      <input type="hidden" name="tipo" value="Parcelamentos">
    @elseif($multa->sac_tipo === 'E')
      <input type="hidden" name="sac_tipo" value="E">
      <input type="hidden" name="sac_registro" value="{{ $multa->registro }}">
      <input type="hidden" name="cpf_cgc" value="{{ $multa->cpf_cnpj }}">
      <input type="hidden" name="nome" value="{{ $multa->nome }}">
      <input type="hidden" name="usuario" value="{{ \Auth::user()->email }}">
      <input type="hidden" name="email" value="">
      <input type="hidden" name="filial_desconto_anuidade" value="N">
      <input type="hidden" name="tipo" value="Parcelamentos">
    @endif
  </form>
@endforeach

@else
  <p class="alert alert-info">Sem multas.</p>
@endif

<div class="my-3"><a class="btn btn-outline-secondary" href="{{ route('multa.buscar')}}">Nova Busca</a></div>

@endsection

@php
$status_dt = array_map(
  function ($multa) {
    return [
      'status' => 'initial',
      'value' => old("data_transito.$multa->doc_id", $multa->data_transito_ymd),
      'id' => $multa->doc_id,
    ];
  },
  $multas,
);
@endphp

@push('scripts')
<script>
  new Vue({
    el: '#multas',
    data: {
      active: @json(old('doc')),
      status_dt: @json($status_dt),
    },
    computed: {
      status_dt_extras() {
        return this.status_dt.map(({ status }) => ({
          readonly: ['loading'].includes(status),
          disabled: ['initial', 'loading', 'success'].includes(status),
        }));
      }
    },
    methods: {
      change(index) {
        this.status_dt[index].status = 'changed';
      },
      click(index) {
        this.status_dt[index].status = 'loading';
        $.post(
          @json(route('multa.data-transito')),
          $.param({
            [`data_transito[${this.status_dt[index].id}]`]: this.status_dt[index].value
          })
        ).then(
          () => this.status_dt[index].status = 'success',
          (xhr) => {
            this.status_dt[index].status = 'failure';
            if (xhr.responseJSON && xhr.responseJSON.message) {
              alert(xhr.responseJSON.message);
            }
          },
        );
      },
    },
  })
</script>
@endpush