@extends('layouts.admin')

@section('titulo', 'Declaração/Emitir')

@section('conteudo')
    <div class="card mt-3">
        <div class="card-body">
            <h3> Emitir Declaração </h3>
        </div>
    </div>
    @if ($errors->any())
        <div class="card">
            <div class="card-body">
                <div class="text-center">
                    @foreach ($errors->all() as $error)
                        <i>
                            <p class="text-danger text-center">{{ $error }}</p>
                        </i>
                    @endforeach
                </div>
            </div>
        </div>
    @endif
    <div class="card">
        <div class="card-body">
            <form method="POST" action="{{ route('documentos.declaracoes.imprimir') }}" target="_blank" class="row">
                @csrf
                <div class="form-group col-6">
                    <label for="processo" class="form-label">Número de processo:</label>
                    <input type="text" class="form-control border-secondary col-sm-12" name="processo"
                        placeholder="Número de processo" id="processo" required>
                </div>
                <div class="form-group col-md-6">
                    <label for="it_classe">Classe</label>
                    <select class="form-control border-secondary buscarClasse" name="it_classe" id="it_classe" required>
                        @if (!isset($resposta->it_classe))
                            <option value="" selected disabled>Selecione a classe</option>
                        @endif
                        @foreach ($classes as $classe)
                            <option value="{{ $classe->id }}" @if (isset($resposta->it_classe) && $resposta->it_classe == $classe->id) selected @endif>
                                {{ $classe->vc_classe }}ªclasse</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group col-6">
                    <label for="numero" class="form-label">Número:</label>
                    <input type="text" class="form-control border-secondary col-sm-12" name="numero"
                        placeholder="Número" id="numero" required>
                </div>
                <div class="form-group col-6">
                    <label for="visto" class="form-label">Com visto:</label>
                    <select name="visto" id="visto" class="form-control" required>
                        <option selected disabled>Seleciona a opção</option>
                        <option value="Sim">Sim</option>
                        <option value="Não">Não</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label for="efeito" class="form-label">Efeitos de Declaração:</label>
                    <select id="efeitoSelect" class="form-control" onchange="toggleOutroEfeito(this)">
                        <option selected disabled>Seleciona o efeito</option>
                        <option value="Efeitos Legais">Efeitos Legais</option>
                        <option value="Efeitos Bolsa">Efeitos Bolsa</option>
                        <option value="Outros">Outros Efeitos</option>
                    </select>
                </div>
                <div class="form-group col-6" id="outroEfeitoContainer" style="display: none;">
                    <label for="efeitoInput" class="form-label">Especificar Outro Efeito:</label>
                    <input type="text" class="form-control border-secondary" name="efeito"
                        placeholder="Digite o efeito" id="efeitoInput">
                </div>
                <input type="hidden" name="efeito" id="efeitoHidden">

                <div class="form-group col-12 d-flex justify-content-center">
                    <label class="form-label text-white">.</label><br>
                    <button class="btn btn-dark" type="submit">Emitir</button>
                </div>
            </form>
        </div>
    </div>
    @include('admin.layouts.footer')

    <script>
        function toggleOutroEfeito(select) {
            const outroEfeitoContainer = document.getElementById('outroEfeitoContainer');
            const efeitoHidden = document.getElementById('efeitoHidden');
            const efeitoInput = document.getElementById('efeitoInput');

            if (select.value === 'Outros') {
                outroEfeitoContainer.style.display = 'block';
                efeitoInput.required = true;
                efeitoHidden.value = ''; // Limpa o valor oculto se for "Outros"
            } else {
                outroEfeitoContainer.style.display = 'none';
                efeitoInput.required = false;
                efeitoInput.value = ''; // Limpa o valor do input extra
                efeitoHidden.value = select.value; // Define o valor oculto como o selecionado
            }

            efeitoInput.addEventListener('input', function() {
                efeitoHidden.value = efeitoInput.value;
            });
        }
    </script>
@endsection