@extends('adminlte::page')

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

@section('content_header')
   <h1>Editar Pesquisa de Satisfação #{{ $pesquisa->id }}</h1>
@endsection

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

   @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.update', $pesquisa->id) }}" method="POST" class="form-horizontal" id="formPesquisa">
               @method('PUT')
               @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', $pesquisa->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', $pesquisa->status)==1 ? 'selected' : '' }}>Ativo</option>
                           <option value="2" {{ old('status', $pesquisa->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:50%;">Pergunta</th>
                                   <th style="width:12%;">Ordem</th>
                                   <th style="width:18%;">Tipo</th>
                                   <th style="width:20%;">Ação</th>
                               </tr>
                           </thead>
                           <tbody>
                            @foreach ($pesquisa->perguntas as $i => $p)
                                <tr>
                                    <td>
                                        <input type="hidden" name="perguntas[{{ $i+1 }}][id]" value="{{ $p->id }}">
                                        <input type="text" class="form-control"
                                            name="perguntas[{{ $i+1 }}][pergunta]" required
                                            value="{{ old("perguntas." . ($i+1) . ".pergunta", $p->pergunta) }}">
                                    </td>
                                    <td>
                                        <input type="number" class="form-control"
                                            name="perguntas[{{ $i+1 }}][ordem]" required min="1"
                                            value="{{ old("perguntas." . ($i+1) . ".ordem", $p->ordem) }}">
                                    </td>
                                    <td>
                                        @php
                                            $tipoOld = old("perguntas." . ($i+1) . ".tipo", $p->tipo ?? 'numero');
                                        @endphp
                                        <select name="perguntas[{{ $i+1 }}][tipo]" class="form-control sel-tipo" required>
                                            <option value="numero" {{ $tipoOld === 'numero' ? 'selected' : '' }}>Numérico (1–5)</option>
                                            <option value="nps"    {{ $tipoOld === 'nps' ? 'selected' : '' }}>NPS (1–10)</option>
                                            <option value="texto"  {{ $tipoOld === 'texto' ? 'selected' : '' }}>Texto livre</option>
                                        </select>
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-danger btn-sm removeRow" title="Excluir">
                                            <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="Salvar alterações">
                   </div>
               </div>
           </form>
       </div>
   </div>
@endsection

@section('js')
<script>
document.addEventListener('DOMContentLoaded', () => {
    let idx = {{ max(($pesquisa->perguntas->count()), 0) }};
    const tableBody = document.querySelector('#perguntasTable tbody');
    const addBtn = document.getElementById('addPergunta');
    const form = document.getElementById('formPesquisa');

    // adiciona uma linha ao grid (permite valores para repovoar old)
    const addRow = (values = {id:null, pergunta:'', ordem:'', tipo:'numero'}) => {
        idx++;
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>
                ${values.id ? `<input type="hidden" name="perguntas[${idx}][id]" value="${values.id}">` : ''}
                <input type="text" class="form-control"
                       name="perguntas[${idx}][pergunta]" required
                       value="${values.pergunta ?? ''}">
            </td>
            <td>
                <input type="number" class="form-control"
                       name="perguntas[${idx}][ordem]" required min="1"
                       value="${values.ordem ?? ''}">
            </td>
            <td>
                <select name="perguntas[${idx}][tipo]" class="form-control sel-tipo" required>
                    <option value="numero" ${(values.tipo==='numero') ? 'selected' : ''}>Numérico (1–5)</option>
                    <option value="nps" ${(values.tipo==='nps') ? 'selected' : ''}>NPS (1–10)</option>
                    <option value="texto" ${(values.tipo==='texto') ? 'selected' : ''}>Texto livre</option>
                </select>
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-danger btn-sm removeRow" title="Excluir">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        `;
        tableBody.appendChild(tr);
    };

    // botão "adicionar pergunta"
    addBtn.addEventListener('click', () => addRow());

    // remover linha
    tableBody.addEventListener('click', (e) => {
        if (e.target.closest('.removeRow')) {
            e.target.closest('tr').remove();
        }
    });

    // --- Regra de NEGÓCIO no front: permitir apenas UMA pergunta do tipo NPS ---
    tableBody.addEventListener('change', (e) => {
        const target = e.target;
        if (target.classList.contains('sel-tipo') && target.value === 'nps') {
            const all = Array.from(document.querySelectorAll('#perguntasTable .sel-tipo'));
            const npsCount = all.filter(s => s.value === 'nps').length;
            if (npsCount > 1) {
                // Reverte a seleção para 'numero' e avisa
                target.value = 'numero';
                alert('Apenas uma pergunta pode ser do tipo NPS (1–10).');
            }
        }
    });

    // --- Validação extra no submit (garante que só exista 0 ou 1 NPS) ---
    form.addEventListener('submit', (e) => {
        const npsCount = Array.from(document.querySelectorAll('#perguntasTable .sel-tipo'))
            .filter(sel => sel.value === 'nps').length;
        if (npsCount > 1) {
            e.preventDefault();
            alert('Apenas uma pergunta pode ser do tipo NPS (1–10).');
            return false;
        }
    });

    // (Opcional) Repor linhas "novas" vindas de old() após erro de validação
    @php
        $oldPerguntas = collect(old('perguntas', []));
        $countExistentes = $pesquisa->perguntas->count();
        $extras = $oldPerguntas->slice($countExistentes);
    @endphp
    @if($extras->isNotEmpty())
        const extras = @json($extras->values());
        extras.forEach(item => addRow({
            id: item.id || null,
            pergunta: item.pergunta || '',
            ordem: item.ordem || '',
            tipo: item.tipo || 'numero',
        }));
    @endif
});
</script>
@endsection