@extends('adminlte::page')

@section('title','Novo GrupoProcesso')

@section('content_header')
  <h1>Novo GrupoProcesso</h1>
@endsection

@section('content')

  @if ($errors->any())
    <div class="alert alert-danger">
      <ul class="mb-0">
        <h5><i class="icon fas fa-ban"></i> Ocorreu um erro</h5>
        @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <div class="card">
    <div class="card-body">
      <form action="{{ route('grupo-processo.store') }}" method="POST" id="form-grupo-processo">
        @csrf

        {{-- DADOS DO GRUPO --}}
        <div class="form-group row">
          <label class="col-sm-2 col-form-label">Nome do Grupo</label>
          <div class="col-sm-10">
            <input type="text" name="grupo_nome" class="form-control @error('grupo_nome') is-invalid @enderror"
                   value="{{ old('grupo_nome') }}" required>
            @error('grupo_nome') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
          </div>
        </div>

        <div class="form-group row">
          <label class="col-sm-2 col-form-label">Status do Grupo</label>
          <div class="col-sm-10">
            <select name="grupo_status" class="form-control @error('grupo_status') is-invalid @enderror" required>
              <option value="1" {{ old('grupo_status',1)==1 ? 'selected' : '' }}>Ativo</option>
              <option value="2" {{ old('grupo_status')==2 ? 'selected' : '' }}>Inativo</option>
            </select>
            @error('grupo_status') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
          </div>
        </div>

        <hr>

        {{-- GRID DE PROCESSOS — PARTICULAR --}}
        <div class="d-flex justify-content-between align-items-center mb-2">
          <h4 class="mb-0">Processos — Particular</h4>
          <button type="button" class="btn btn-sm btn-primary" id="add-row-particular">
            <i class="fas fa-plus"></i> Adicionar Linha (Particular)
          </button>
        </div>

        <div class="table-responsive mb-4">
          <table class="table table-bordered" id="grid-processos-particular">
            <thead class="thead-light">
              <tr>
                <th style="width: 26%">Funil (Particular)</th>
                <th style="width: 38%">Nome do Processo</th>
                <th style="width: 12%">Ordem</th>
                <th style="width: 16%">Status</th>
                <th style="width: 8%">Ações</th>
              </tr>
            </thead>
            <tbody>
              {{-- linha inicial index 0 --}}
              <tr>
                <input type="hidden" name="processos[0][id_processo]" value="">
                <td>
                  <select name="processos[0][id_funil]" class="form-control" required>
                    <option value="">Selecione...</option>
                    @foreach($funils_particular as $f)
                      <option value="{{ $f->id_funil }}">Particular - {{ $f->funil_nome }}</option>
                    @endforeach
                  </select>
                </td>
                <td><input type="text" name="processos[0][processo_nome]" class="form-control" required></td>
                <td><input type="number" name="processos[0][processo_ordem]" class="form-control" value="1" min="1" required></td>
                <td>
                  <select name="processos[0][processo_status]" class="form-control" required>
                    <option value="1" selected>Ativo</option>
                    <option value="2">Inativo</option>
                  </select>
                </td>
                <td class="text-center">
                  <button type="button" class="btn btn-danger btn-sm btn-remove" title="Remover linha">
                    <i class="fas fa-trash"></i>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        {{-- GRID DE PROCESSOS — CONVÊNIO --}}
        <div class="d-flex justify-content-between align-items-center mb-2">
          <h4 class="mb-0">Processos — Convênio</h4>
          <button type="button" class="btn btn-sm btn-primary" id="add-row-convenio">
            <i class="fas fa-plus"></i> Adicionar Linha (Convênio)
          </button>
        </div>

        <div class="table-responsive">
          <table class="table table-bordered" id="grid-processos-convenio">
            <thead class="thead-light">
              <tr>
                <th style="width: 26%">Funil (Convênio)</th>
                <th style="width: 38%">Nome do Processo</th>
                <th style="width: 12%">Ordem</th>
                <th style="width: 16%">Status</th>
                <th style="width: 8%">Ações</th>
              </tr>
            </thead>
            <tbody>
              {{-- linha inicial index 1 --}}
              <tr>
                <input type="hidden" name="processos[1][id_processo]" value="">
                <td>
                  <select name="processos[1][id_funil]" class="form-control" >
                    <option value="">Selecione...</option>
                    @foreach($funils_convenio as $f)
                      <option value="{{ $f->id_funil }}">Convênio - {{ $f->funil_nome }}</option>
                    @endforeach
                  </select>
                </td>
                <td><input type="text" name="processos[1][processo_nome]" class="form-control" ></td>
                <td><input type="number" name="processos[1][processo_ordem]" class="form-control" value="1" min="1" ></td>
                <td>
                  <select name="processos[1][processo_status]" class="form-control" >
                    <option value="1" selected>Ativo</option>
                    <option value="2">Inativo</option>
                  </select>
                </td>
                <td class="text-center">
                  <button type="button" class="btn btn-danger btn-sm btn-remove" title="Remover linha">
                    <i class="fas fa-trash"></i>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="form-group row mt-4">
          <label class="col-sm-2 col-form-label"></label>
          <div class="col-sm-10">
            <button type="submit" class="btn btn-success">
              <i class="fas fa-check"></i> Salvar
            </button>
            <a href="{{ route('grupo-processo.index') }}" class="btn btn-secondary ml-2">
              <i class="fas fa-arrow-left"></i> Voltar
            </a>
          </div>
        </div>

      </form>
    </div>
  </div>

@endsection

@push('js')
<script>
(function(){
  // Próximo índice global para o array processos[IDX]
  let idx = 2;

  const $tbodyPart = document.querySelector('#grid-processos-particular tbody');
  const $tbodyConv = document.querySelector('#grid-processos-convenio tbody');

  // Options específicas
  const optsPart = `{!! collect($funils_particular)->map(fn($f) =>
      '<option value="'.e($f->id_funil).'">Particular - '.e($f->funil_nome).'</option>'
  )->implode('') !!}`;

  const optsConv = `{!! collect($funils_convenio)->map(fn($f) =>
      '<option value="'.e($f->id_funil).'">Convênio - '.e($f->funil_nome).'</option>'
  )->implode('') !!}`;

  function rowHtml(globalIndex, tipo){ // tipo: 'part' | 'conv'
    const options = tipo === 'part' ? optsPart : optsConv;
    return `
      <tr>
        <input type="hidden" name="processos[${globalIndex}][id_processo]" value="">
        <td>
          <select name="processos[${globalIndex}][id_funil]" class="form-control" >
            <option value="">Selecione...</option>
            ${options}
          </select>
        </td>
        <td><input type="text" name="processos[${globalIndex}][processo_nome]" class="form-control" ></td>
        <td><input type="number" name="processos[${globalIndex}][processo_ordem]" class="form-control" value="1" min="1" ></td>
        <td>
          <select name="processos[${globalIndex}][processo_status]" class="form-control" >
            <option value="1" selected>Ativo</option>
            <option value="2">Inativo</option>
          </select>
        </td>
        <td class="text-center">
          <button type="button" class="btn btn-danger btn-sm btn-remove" title="Remover linha">
            <i class="fas fa-trash"></i>
          </button>
        </td>
      </tr>`;
  }

  document.getElementById('add-row-particular').addEventListener('click', function(){
    $tbodyPart.insertAdjacentHTML('beforeend', rowHtml(idx, 'part'));
    idx++;
  });

  document.getElementById('add-row-convenio').addEventListener('click', function(){
    $tbodyConv.insertAdjacentHTML('beforeend', rowHtml(idx, 'conv'));
    idx++;
  });

  // Remoção de linha (compartilhado)
  document.addEventListener('click', function(e){
    const btn = e.target.closest('.btn-remove');
    if (!btn) return;
    const tr = btn.closest('tr');
    const tbody = tr.parentElement;
    const rows  = tbody.querySelectorAll('tr');

    if (rows.length === 1) {
      // mantém ao menos 1 linha por grid: apenas limpa campos
      tr.querySelectorAll('input, select').forEach(el=>{
        if (el.tagName === 'INPUT') el.value = (el.type === 'number') ? 1 : '';
        if (el.tagName === 'SELECT') el.value = '';
      });
    } else {
      tr.remove();
    }
  });
})();
</script>
@endpush