@csrf
@if(isset($protocolo))
    @method('PUT')
@endif
<div class="grid grid-cols-1 gap-4">
    <div>
        <label for="nome" class="block text-sm font-medium text-gray-700">Nome <span class="text-red-600">*</span></label>
        <input id="nome" name="nome" type="text" value="{{ old('nome', $protocolo->nome ?? '') }}" required class="w-full rounded-lg border border-gray-300 px-3 py-2">
    </div>
    <div>
        <label for="introducao" class="block text-sm font-medium text-gray-700">Texto de Introdução</label>
        <textarea id="introducao" name="introducao" class="w-full rounded-lg border border-gray-300 px-3 py-2 html-editor" rows="3">{{ old('introducao', $protocolo->introducao ?? '') }}</textarea>
    </div>
    <div>
        <label for="observacoes" class="block text-sm font-medium text-gray-700">Observações</label>
        <textarea id="observacoes" name="observacoes" class="w-full rounded-lg border border-gray-300 px-3 py-2 html-editor" rows="3">{{ old('observacoes', $protocolo->observacoes ?? '') }}</textarea>
    </div>
    <div>
        <label for="status" class="block text-sm font-medium text-gray-700">Status <span class="text-red-600">*</span></label>
        <select id="status" name="status" class="w-full rounded-lg border border-gray-300 px-3 py-2">
            <option value="1" {{ old('status', $protocolo->status ?? true) ? 'selected' : '' }}>Ativo</option>
            <option value="0" {{ old('status', $protocolo->status ?? true) ? '' : 'selected' }}>Inativo</option>
        </select>
    </div>
    <div>
        <label for="categoria" class="block text-sm font-medium text-gray-700">Tipo <span class="text-red-600">*</span></label>
        <select id="categoria" name="categoria" class="w-full rounded-lg border border-gray-300 px-3 py-2">
            <option value="protocolo" {{ old('categoria', $protocolo->categoria ?? 'protocolo') === 'protocolo' ? 'selected' : '' }}>Protocolo</option>
            <option value="pesquisa" {{ old('categoria', $protocolo->categoria ?? 'protocolo') === 'pesquisa' ? 'selected' : '' }}>Pesquisa</option>
        </select>
    </div>
    <div>
        <label for="visivel_empresas" class="block text-sm font-medium text-gray-700">Visível para empresas <span class="text-red-600">*</span></label>
        <select id="visivel_empresas" name="visivel_empresas" class="w-full rounded-lg border border-gray-300 px-3 py-2">
            <option value="1" {{ old('visivel_empresas', $protocolo->visivel_empresas ?? true) ? 'selected' : '' }}>Sim</option>
            <option value="0" {{ old('visivel_empresas', $protocolo->visivel_empresas ?? true) ? '' : 'selected' }}>Não</option>
        </select>
    </div>
    <div>
        <label for="tipo" class="block text-sm font-medium text-gray-700">Tipo de pontuação <span class="text-red-600">*</span></label>
        <select id="tipo" name="tipo" class="w-full rounded-lg border border-gray-300 px-3 py-2">
            <option value="simples" {{ old('tipo', $protocolo->tipo ?? '') === 'simples' ? 'selected' : '' }}>Simples</option>
            <option value="par_impar" {{ old('tipo', $protocolo->tipo ?? '') === 'par_impar' ? 'selected' : '' }}>Par/Ímpar</option>
        </select>
    </div>
    <div id="titulos-par-impar" class="grid grid-cols-1 md:grid-cols-2 gap-4 {{ old('tipo', $protocolo->tipo ?? '') === 'par_impar' ? '' : 'hidden' }}">
        <div>
            <label for="titulo_par" class="block text-sm font-medium text-gray-700">Título Par</label>
            <input id="titulo_par" name="titulo_par" type="text" value="{{ old('titulo_par', $protocolo->titulo_par ?? '') }}" class="w-full rounded-lg border border-gray-300 px-3 py-2">
        </div>
        <div>
            <label for="titulo_impar" class="block text-sm font-medium text-gray-700">Título Ímpar</label>
            <input id="titulo_impar" name="titulo_impar" type="text" value="{{ old('titulo_impar', $protocolo->titulo_impar ?? '') }}" class="w-full rounded-lg border border-gray-300 px-3 py-2">
        </div>
    </div>
    <div class="flex items-center gap-2">
        <input id="permitir_pf" name="permitir_pf" type="checkbox" value="1" {{ old('permitir_pf', $protocolo->permitir_pf ?? false) ? 'checked' : '' }} class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
        <label for="permitir_pf" class="text-sm font-medium text-gray-700">Permitir PF</label>
    </div>
</div>

<div class="mt-6">
    <h2 class="text-base font-semibold text-gray-900">Resultados</h2>
    @php
        $tipoSelecionado = old('tipo', $protocolo->tipo ?? 'simples');
        $resultados = old('resultados', isset($protocolo) ? $protocolo->resultados->toArray() : [[]]);
    @endphp
    <div id="resultados-container" class="space-y-4 mt-4">
        @foreach($resultados as $i => $resultado)
            <div class="resultado flex flex-col gap-2 bg-gray-50 p-4 rounded-lg">
                <div class="flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-gray-700">Resposta {{ $i + 1 }}</h3>
                    <button type="button" class="remove-resultado inline-flex items-center text-sm text-red-600 hover:text-red-700">
                        Remover
                    </button>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Pontuação De</label>
                        <input type="number" name="resultados[{{ $i }}][pontuacao_de]" value="{{ $resultado['pontuacao_de'] ?? '' }}" class="w-full rounded-lg border border-gray-300 px-3 py-2">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Pontuação Até</label>
                        <input type="number" name="resultados[{{ $i }}][pontuacao_ate]" value="{{ $resultado['pontuacao_ate'] ?? '' }}" class="w-full rounded-lg border border-gray-300 px-3 py-2">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Rótulo</label>
                        <input type="text" name="resultados[{{ $i }}][rotulo]" value="{{ $resultado['rotulo'] ?? '' }}" class="w-full rounded-lg border border-gray-300 px-3 py-2">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Explicação Rótulo</label>
                        <input type="text" name="resultados[{{ $i }}][explicacao_rotulo]" value="{{ $resultado['explicacao_rotulo'] ?? '' }}" class="w-full rounded-lg border border-gray-300 px-3 py-2">
                    </div>
                    <div class="paridade-wrapper {{ $tipoSelecionado === 'par_impar' ? '' : 'hidden' }}">
                        <label class="block text-sm font-medium text-gray-700">Paridade</label>
                        <select
                            class="paridade-select w-full rounded-lg border border-gray-300 px-3 py-2"
                            data-name="resultados[{{ $i }}][paridade]"
                            @if($tipoSelecionado === 'par_impar')
                                name="resultados[{{ $i }}][paridade]"
                            @else
                                disabled
                            @endif
                        >
                            <option value="geral" {{ ($resultado['paridade'] ?? '') === 'geral' ? 'selected' : '' }}>Geral</option>
                            <option value="par" {{ ($resultado['paridade'] ?? '') === 'par' ? 'selected' : '' }}>Par</option>
                            <option value="impar" {{ ($resultado['paridade'] ?? '') === 'impar' ? 'selected' : '' }}>Ímpar</option>
                        </select>
                    </div>
                    <input
                        type="hidden"
                        class="paridade-hidden"
                        data-name="resultados[{{ $i }}][paridade]"
                        value="{{ $tipoSelecionado === 'par_impar' ? ($resultado['paridade'] ?? 'geral') : 'geral' }}"
                        @if($tipoSelecionado === 'par_impar')
                            disabled
                        @else
                            name="resultados[{{ $i }}][paridade]"
                        @endif
                    >
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Texto</label>
                    <textarea id="resultado-texto-{{ $i }}" name="resultados[{{ $i }}][texto]" class="w-full rounded-lg border border-gray-300 px-3 py-2 html-editor" rows="2">{{ $resultado['texto'] ?? '' }}</textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Texto para Empresas</label>
                    <textarea id="resultado-texto-empresa-{{ $i }}" name="resultados[{{ $i }}][texto_resultado_empresa]" class="w-full rounded-lg border border-gray-300 px-3 py-2 html-editor" rows="2">{{ $resultado['texto_resultado_empresa'] ?? '' }}</textarea>
                </div>
            </div>
        @endforeach
    </div>
    <button type="button" id="add-resultado" class="mt-2 inline-flex items-center gap-2 text-sm px-3 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50">Adicionar Resultado</button>
</div>

<div class="pt-4 border-t border-gray-200 flex items-center justify-end gap-2">
    <a href="{{ route('protocolos.index') }}" class="inline-flex items-center gap-2 text-sm px-4 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50">Cancelar</a>
    <button type="submit" class="inline-flex items-center gap-2 text-sm px-4 py-2 rounded-lg bg-green-600 text-white hover:bg-green-700">Salvar</button>
</div>

<script src="https://cdn.tiny.cloud/1/{{ config('services.tiny.key') }}/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        function initHtmlEditor(selector) {
            tinymce.init({
                selector: selector,
                menubar: false,
                statusbar: false,
                toolbar: 'bold italic underline bullist numlist',
                height: 200
            });
        }

        let index = {{ count($resultados) }};
        const container = document.getElementById('resultados-container');
        const tipoSelect = document.getElementById('tipo');
        const titulos = document.getElementById('titulos-par-impar');

        function reindexResultados() {
            const resultados = container.querySelectorAll('.resultado');
            resultados.forEach((resultado, idx) => {
                resultado.querySelectorAll('[name]').forEach((input) => {
                    const name = input.getAttribute('name');
                    if (!name) {
                        return;
                    }
                    input.setAttribute('name', name.replace(/resultados\[\d+\]/, `resultados[${idx}]`));
                });

                resultado.querySelectorAll('[data-name]').forEach((input) => {
                    const dataName = input.getAttribute('data-name');
                    if (!dataName) {
                        return;
                    }
                    input.setAttribute('data-name', dataName.replace(/resultados\[\d+\]/, `resultados[${idx}]`));
                });

                const header = resultado.querySelector('h3');
                if (header) {
                    header.textContent = `Resposta ${idx + 1}`;
                }
            });
        }

        function syncParidadeFields(tipo) {
            const isParImpar = tipo === 'par_impar';
            container.querySelectorAll('.resultado').forEach((resultado) => {
                const paridadeWrapper = resultado.querySelector('.paridade-wrapper');
                const select = resultado.querySelector('.paridade-select');
                const hidden = resultado.querySelector('.paridade-hidden');
                if (!select || !hidden) {
                    return;
                }

                const fieldName = select.dataset.name;

                if (isParImpar) {
                    if (paridadeWrapper) {
                        paridadeWrapper.classList.remove('hidden');
                    }
                    select.disabled = false;
                    select.setAttribute('name', fieldName);
                    hidden.disabled = true;
                    hidden.removeAttribute('name');
                } else {
                    if (paridadeWrapper) {
                        paridadeWrapper.classList.add('hidden');
                    }
                    select.value = 'geral';
                    select.disabled = true;
                    select.removeAttribute('name');
                    hidden.disabled = false;
                    hidden.setAttribute('name', fieldName);
                    hidden.value = 'geral';
                }
            });
        }

        document.getElementById('add-resultado').addEventListener('click', function () {
            const div = document.createElement('div');
            div.classList.add('resultado','flex','flex-col','gap-2','bg-gray-50','p-4','rounded-lg');
            const textareaId = `resultado-texto-${index}`;
            const textareaEmpresaId = `resultado-texto-empresa-${index}`;
            div.innerHTML = `
                <div class="flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-gray-700">Resposta</h3>
                    <button type="button" class="remove-resultado inline-flex items-center text-sm text-red-600 hover:text-red-700">Remover</button>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Pontuação De</label>
                        <input type="number" name="resultados[${index}][pontuacao_de]" class="w-full rounded-lg border border-gray-300 px-3 py-2">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Pontuação Até</label>
                        <input type="number" name="resultados[${index}][pontuacao_ate]" class="w-full rounded-lg border border-gray-300 px-3 py-2">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Rótulo</label>
                        <input type="text" name="resultados[${index}][rotulo]" class="w-full rounded-lg border border-gray-300 px-3 py-2">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Explicação Rótulo</label>
                        <input type="text" name="resultados[${index}][explicacao_rotulo]" class="w-full rounded-lg border border-gray-300 px-3 py-2">
                    </div>
                    <div class="paridade-wrapper">
                        <label class="block text-sm font-medium text-gray-700">Paridade</label>
                        <select class="paridade-select w-full rounded-lg border border-gray-300 px-3 py-2" data-name="resultados[${index}][paridade]">
                            <option value="geral" selected>Geral</option>
                            <option value="par">Par</option>
                            <option value="impar">Ímpar</option>
                        </select>
                    </div>
                    <input type="hidden" class="paridade-hidden" data-name="resultados[${index}][paridade]" value="geral">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Texto</label>
                    <textarea id="${textareaId}" name="resultados[${index}][texto]" class="w-full rounded-lg border border-gray-300 px-3 py-2 html-editor" rows="2"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Texto para Empresas</label>
                    <textarea id="${textareaEmpresaId}" name="resultados[${index}][texto_resultado_empresa]" class="w-full rounded-lg border border-gray-300 px-3 py-2 html-editor" rows="2"></textarea>
                </div>`;
            container.appendChild(div);
            initHtmlEditor(`#${textareaId}`);
            initHtmlEditor(`#${textareaEmpresaId}`);
            index++;
            reindexResultados();
            syncParidadeFields(tipoSelect.value);
        });

        tipoSelect.addEventListener('change', function() {
            if (this.value === 'par_impar') {
                titulos.classList.remove('hidden');
            } else {
                titulos.classList.add('hidden');
            }
            syncParidadeFields(this.value);
        });

        container.addEventListener('click', function (event) {
            const removeButton = event.target.closest('.remove-resultado');
            if (!removeButton) {
                return;
            }

            const resultado = removeButton.closest('.resultado');
            if (!resultado) {
                return;
            }

            resultado.querySelectorAll('textarea.html-editor').forEach((textarea) => {
                const editor = tinymce.get(textarea.id);
                if (editor) {
                    editor.remove();
                }
            });

            resultado.remove();
            reindexResultados();
            syncParidadeFields(tipoSelect.value);
        });

        initHtmlEditor('.html-editor');
        reindexResultados();
        syncParidadeFields(tipoSelect.value);
    });
</script>