@extends('painel-admin.menu')
@section('title', 'Relatório de Tarefas por Erros')
@section('content')

@if(session('error'))
  <div class="alert alert-danger">{{ session('error') }}</div>
@endif

@if(session('success'))
  <div class="alert alert-success">{{ session('success') }}</div>
@endif

<form method="GET" class="mb-4">
  <fieldset class="form-group">
    <div class="row">
      <div class="col-12 d-flex justify-content-between align-items-center flex-wrap">
        <h2 class="mb-3">Relatório de quantidade de Tarefas por Erros</h2>
        <button type="submit" class="btn btn-primary">Gerar Relatório</button>
      </div>
    </div>

    <div class="row mt-2">
      <div class="col-md-3">
        <label>Data Inicial</label>
        <input type="date" class="form-control" name="data_inicio" value="{{ request('data_inicio') }}">
      </div>
      <div class="col-md-3">
        <label>Data Final</label>
        <input type="date" class="form-control" name="data_fim" value="{{ request('data_fim') }}">
      </div>
      <div class="col-md-3">
        <label>Status</label>
        <select name="status" class="form-control">
            <option value="">Todos</option>
            <option value="0" {{ request('status') == '0' ? 'selected' : '' }}>Aberto</option>
            <option value="2" {{ request('status') == '2' ? 'selected' : '' }}>Fazendo</option>
            <option value="1" {{ request('status') == '1' ? 'selected' : '' }}>Finalizado</option>  
        </select>
      </div>
      <div class="col-md-3">
        <label>Prioridade</label>
        <select name="prioridade" class="form-control">
            <option value="0">Todas</option>
            <option value="1" {{ request('prioridade') == '1' ? 'selected' : '' }}>Sugestão</option>
            <option value="2" {{ request('prioridade') == '2' ? 'selected' : '' }}>Baixo</option>
            <option value="3" {{ request('prioridade') == '3' ? 'selected' : '' }}>Médio</option>
            <option value="4" {{ request('prioridade') == '4' ? 'selected' : '' }}>Alto</option>
            <option value="5" {{ request('prioridade') == '5' ? 'selected' : '' }}>Urgente</option>
        </select>
      </div>
    </div>

    <div class="row mt-3">
      <div class="col-md-4">
        <label>Técnico</label>
        <select name="tecnico_id" class="form-control">
          <option value="">Todos</option>
          @foreach($tecnicos as $tecnico)
            <option value="{{ $tecnico->id }}" {{ request('tecnico_id') == $tecnico->id ? 'selected' : '' }}>
              {{ $tecnico->nome }}
            </option>
          @endforeach
        </select>
      </div>
      <div class="col-md-4">
        <label>Setor</label>
        <select name="setor" class="form-control">
          <option value="0">Todos os setores</option>
          @foreach ($setores as $setor)
              <option value="{{ $setor }}" {{ request('setor') == $setor ? 'selected' : '' }}>{{ $setor }}</option>
          @endforeach
        </select>
      </div>
      <div class="col-md-4">
        <label>Sistema</label>
        <select name="sistema" class="form-control">
            <option value="">Todos os sistemas</option>
            <option value="Finest" {{ request('sistema') == 'Finest' ? 'selected' : '' }}>Finest</option>
            <option value="FrenteECF" {{ request('sistema') == 'FrenteECF' ? 'selected' : '' }}>Frente ECF</option>
            <option value="FrenteNFCE" {{ request('sistema') == 'FrenteNFCE' ? 'selected' : '' }}>Frente NFC-e</option>
            <option value="Cacamba" {{ request('sistema') == 'Cacamba' ? 'selected' : '' }}>Caçamba</option>
            <option value="Web" {{ request('sistema') == 'Web' ? 'selected' : '' }}>Web</option>
            <option value="nenhum" {{ request('sistema') == 'nenhum' ? 'selected' : '' }}>nenhum</option>
        </select>
      </div>
    </div>

    <div class="row mt-3">
      <div class="col-md-12">
        <label>Erros</label>
        <select
            id="erros" 
            class="form-control @error('erros') is-invalid @enderror select2"
            name="erros[]"
            multiple>
          @foreach($erros as $erro)
            <option value="{{ $erro->id }}" {{ in_array($erro->id, request('erros', [])) ? 'selected' : '' }}>
              {{ $erro->descricao }}
            </option>
          @endforeach
        </select>
      </div>
    </div>
  </fieldset>
</form>

@if($relatorio)
  @if($dados && $dados->count())

    <div class="table-responsive">
      <table class="table table-bordered table-striped">
        <thead class="thead-dark">
            <tr>
                <th>Empresa</th>
                <th>Total de Tarefas</th>
            </tr>
        </thead>
        <tbody>
            @php $total = 0; @endphp
            @foreach($dados as $item)
                <tr>
                    <td>{{ $item->descricao }}</td>
                    <td>{{ $item->quantidade }}</td>
                </tr>
                @php $total += $item->quantidade; @endphp
            @endforeach
        </tbody>
        <tfoot>
            <tr>
                <th>Total Geral</th>
                <th>{{ $total }}</th>
            </tr>
        </tfoot>
    </table>
    </div>
  @else
    <div class="alert alert-warning text-center mt-4">Nenhum dado encontrado para os filtros selecionados.</div>
  @endif
@endif

<style>
    .select2-container {
      width: 100% !important;
    }

    .select2-selection--single {
      border: 1px solid #ced4da;
      border-radius: 4px;
      padding: 10px;
      height: 40px !important;
      box-sizing: border-box; 
    }

    .select2-selection__arrow {
      height: 38px; 
    }

    .select2-selection__rendered {
      color: #495057; 
      line-height: 40px; 
    }

    .select2-container--default .select2-selection--single .select2-selection__placeholder {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 14px;
      color: #6c757d;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .select2-container--default.select2-container--focus .select2-selection--single {
      border-color: #80bdff; 
    }
</style>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/i18n/pt-BR.js"></script>

<script>

    var currentItemId = 'relatorios-quantidade-erros-link';

    var $j = jQuery.noConflict();

    $j(document).ready(function () {
        $j('#erros').select2({
            placeholder: 'Selecione os erros',
            allowClear: true,
            width: '100%',
            closeOnSelect: false
        });

        $j('#erros').on('select2:select', function (e) {
            $j(this).data('select2').$search.val('');
        });


        $j('#erros').on('select2:open', function () {
            $j('.select2-search__field').on('keydown', function(e) {
                if (e.key === "Enter") {
                    e.preventDefault();
                }
            });
        });
    });

</script>

@endsection