@extends('adminlte::page')

@section('title', 'Nova Pesquisa de Satisfação')

@section('content_header')
   <h1>Nova Pesquisa de Satisfação</h1>
@endsection

@section('content')
   @if ($errors->any())
       <div class="alert alert-danger">
           <ul>
               <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('pesquisa-satisfacao.store') }}" method="POST" class="form-horizontal" id="formPesquisa">
               @csrf

               <!-- Nome -->
               <div class="form-group row">
                   <label class="col-sm-2 col-form-label">Nome</label>
                   <div class="col-sm-10">
                       <input required type="text"
                              name="nome"
                              class="form-control @error('nome') is-invalid @enderror"
                              value="{{ old('nome') }}">
                   </div>
               </div>

               <!-- Status -->
               <div class="form-group row">
                   <label class="col-sm-2 col-form-label">Status</label>
                   <div class="col-sm-10">
                       <select name="status" class="form-control @error('status') is-invalid @enderror" required>
                           <option value="1" {{ old('status')=='1' ? 'selected' : '' }}>Ativado</option>
                           <option value="2" {{ old('status')=='2' ? 'selected' : '' }}>Desativado</option>
                       </select>
                   </div>
               </div>

               <hr>

               <!-- GRID de Perguntas -->
               <div class="form-group row">
                   <label class="col-sm-2 col-form-label">Perguntas</label>
                   <div class="col-sm-10">
                    <table class="table table-bordered" id="perguntasTable">
                        <thead>
                            <tr>
                            <th style="width:45%;">Pergunta</th>
                            <th style="width:18%;">Tipo</th>
                            <th style="width:12%;">Ordem</th>
                            <th style="width:12%;">Ação</th>
                            </tr>
                        </thead>
                        <tbody>
    @php $oldPerguntas = collect(old('perguntas', [])); @endphp
    @foreach($oldPerguntas as $i => $op)
      <tr>
        <td>
          <input type="text" class="form-control"
                 name="perguntas[{{ $i+1 }}][pergunta]" required
                 value="{{ $op['pergunta'] ?? '' }}">
        </td>
        <td>
          <select class="form-control sel-tipo" name="perguntas[{{ $i+1 }}][tipo]" required>
            <option value="numero" {{ ($op['tipo']??'')=='numero'?'selected':'' }}>Escala 1–5</option>
            <option value="nps"    {{ ($op['tipo']??'')=='nps'?'selected':'' }}>NPS (1–10)</option>
            <option value="texto"  {{ ($op['tipo']??'')=='texto'?'selected':'' }}>Texto livre</option>
          </select>
        </td>
        <td>
          <input type="number" class="form-control"
                 name="perguntas[{{ $i+1 }}][ordem]" required min="1"
                 value="{{ $op['ordem'] ?? '' }}">
        </td>
        <td class="text-center">
          <button type="button" class="btn btn-danger btn-sm removeRow">
            <i class="fas fa-trash"></i>
          </button>
        </td>
      </tr>
    @endforeach
  </tbody>
</table>
<button type="button" id="addPergunta" class="btn btn-primary">
  <i class="fas fa-plus"></i> Adicionar pergunta
</button>
                   </div>
               </div>

               <!-- Botão -->
               <div class="form-group row mt-3">
                   <div class="col-sm-10 offset-sm-2">
                       <input type="submit" class="btn btn-success" value="Cadastrar">
                   </div>
               </div>
           </form>
       </div>
   </div>
@endsection

@section('js')
<script>
document.addEventListener('DOMContentLoaded', () => {
  let idx = {{ collect(old('perguntas', []))->count() }};
  const tbody = document.querySelector('#perguntasTable tbody');
  const addBtn = document.getElementById('addPergunta');
  const form = document.getElementById('formPesquisa');

  function addRow(values = {pergunta:'', tipo:'numero', ordem:''}) {
    idx++;
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td>
        <input type="text" class="form-control"
               name="perguntas[${idx}][pergunta]" required
               value="${values.pergunta ?? ''}">
      </td>
      <td>
        <select class="form-control sel-tipo" name="perguntas[${idx}][tipo]" required>
          <option value="numero" ${(values.tipo??'numero')==='numero'?'selected':''}>Escala 1–5</option>
          <option value="nps"    ${(values.tipo??'numero')==='nps'?'selected':''}>NPS (1–10)</option>
          <option value="texto"  ${(values.tipo??'numero')==='texto'?'selected':''}>Texto livre</option>
        </select>
      </td>
      <td>
        <input type="number" class="form-control"
               name="perguntas[${idx}][ordem]" required min="1"
               value="${values.ordem ?? ''}">
      </td>
      <td class="text-center">
        <button type="button" class="btn btn-danger btn-sm removeRow">
          <i class="fas fa-trash"></i>
        </button>
      </td>
    `;
    tbody.appendChild(tr);
  }

  addBtn.addEventListener('click', () => addRow());

  tbody.addEventListener('click', (e) => {
    if (e.target.closest('.removeRow')) e.target.closest('tr').remove();
  });

  // regra: só 1 "nps" permitido
  tbody.addEventListener('change', (e) => {
    if (e.target.classList.contains('sel-tipo') && e.target.value === 'nps') {
      // desmarca qualquer outro nps
      document.querySelectorAll('#perguntasTable .sel-tipo').forEach(sel => {
        if (sel !== e.target && sel.value === 'nps') sel.value = 'numero';
      });
    }
  });

  form.addEventListener('submit', (e) => {
    const all = Array.from(document.querySelectorAll('#perguntasTable .sel-tipo'));
    const countNps = all.filter(s => s.value === 'nps').length;
    if (countNps > 1) {
      e.preventDefault();
      alert('Apenas uma pergunta pode ser do tipo NPS (1–10).');
      return false;
    }
  });

  if (idx === 0 && tbody.children.length === 0) addRow();
});
</script>
@endsection