@extends('painel-admin.menu')
@section('title', 'Relatório de Tarefas quanti por Cliente')
@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 Clientes</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" {{ request('prioridade') == '0' ? 'selected' : '' }}>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" {{ request('setor') == '0' ? 'selected' : '' }}>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-6">
            <label>Cliente</label>
            <select id="cliente" name="empresa_id" class="custom-select select2" style="width:100%" autocomplete="off">
                <option value="">Selecione uma empresa</option>
                @foreach($empresas as $empresa)
                    <option value="{{ $empresa->Codigo }}"
                        {{ (string) request('empresa_id') === (string) $empresa->Codigo ? 'selected' : '' }}>
                        {{ $empresa->RazaoSocialCliente }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-6">
        <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" id="relatorioClientes">
        <thead class="thead-dark">
          <tr>
            <th>Cliente</th>
            <th>Total de Tarefas</th>
          </tr>
        </thead>
        <tbody>
          @php $total = 0; @endphp
          @foreach($dados as $item)
            <tr>
              <td>
                  <a href="{{ route('empresas.edit', $item->Codigo) }}" target="_blank" title="Ver cadastro do cliente">
                    <i class="fas fa-eye ml-1"></i>
                </a>
                {{ $item->RazaoSocialCliente }}
                
            </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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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-clientes-link';

    var $j = jQuery.noConflict();
    $j(document).ready(function () {
        $j('#cliente').select2({
            theme: 'default',
            language: 'pt-BR',
            width: '100%',
            ajax: {
                url: '/buscar-cliente',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.results.map(function(cliente) {
                            return {
                                id: cliente.id,
                                text: cliente.text
                            };
                        })
                    };
                },
                cache: true
            },
            placeholder: 'Digite a razão social ou fantasia para buscar',
            minimumInputLength: 1,
            allowClear: true,
        });

        $j('#cliente').on('select2:unselect', function () {
            $j(this).val(null).trigger('change');
        });


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

        $j('#erros').on('select2:select', function () {
            $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();
                }
            });
        });

 
        $j('form').on('submit', function () {
            const clienteVal = $j('#cliente').val();
            if (!clienteVal) {
                $j('#cliente').prop('disabled', true);
            }
        });
    });
</script>


@endsection