@extends('layouts.app')
@section('title', 'Nuevo Proceso')
@section('content')
<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body performane-indicator-card">
                <h4 class="card-title">Nuevo Proceso</h4>
                <form method="POST" action="{{ route('procesos.store') }}">
                    @include('procesos._form')
                </form>
            </div>
        </div>
    </div>
</div>
{{-- @include('procesos._modal_delito') --}}
@include('procesos._modal_participante')
@include('procesos._modal_parametro')
@endsection
@section('scripts')
<script>
   
    $('#btnAddParticipante').click(function() {
        new bootstrap.Modal('#modalParticipante').show();
    });

    document.addEventListener('DOMContentLoaded', () => {

        let participantesIndex = document.querySelectorAll('.participante-card').length;

        const body = document.getElementById('participantesBody');
        const emptyMsg = document.getElementById('participantesEmpty');
        const btnGuardar = document.getElementById('guardarParticipante');

        btnGuardar.addEventListener('click', () => {

            const tipoSelect = document.getElementById('tipo_participante');
            const nombre = document.getElementById('nombre_participante');
            const contacto = document.getElementById('contacto_participante');

            if (!tipoSelect.value || !nombre.value || !contacto.value) {
                alert('Debe completar todos los campos del sujeto procesal');
                return;
            }

            emptyMsg.style.display = 'none';

            const tipoTexto = tipoSelect.options[tipoSelect.selectedIndex].text;

            const card = document.createElement('div');
            card.classList.add('col-md-3', 'participante-card');

            card.innerHTML = `
                <div class="card involucrado-card h-100">
                    <div class="card-body text-center p-3">
                        <strong>${nombre.value}</strong>
                        <span class="badge bg-info">${tipoTexto}</span>
                        <div class="text-muted small">
                            <i class="fa fa-phone"></i> ${contacto.value}
                        </div>

                        <input type="hidden" name="participantes[${participantesIndex}][tipo]" value="${tipoSelect.value}">
                        <input type="hidden" name="participantes[${participantesIndex}][nombre]" value="${nombre.value}">
                        <input type="hidden" name="participantes[${participantesIndex}][contacto]" value="${contacto.value}">

                        <button type="button" class="btn btn-sm btn-outline-danger mt-2 btn-remove">
                            <i class="fa fa-trash"></i> Quitar
                        </button>
                    </div>
                </div>
            `;

            body.appendChild(card);
            participantesIndex++;

            tipoSelect.value = '';
            nombre.value = '';
            contacto.value = '';

            bootstrap.Modal.getInstance(
                document.getElementById('modalParticipante')
            ).hide();
        });

        document.addEventListener('click', e => {
            if (e.target.closest('.btn-remove')) {
                e.target.closest('.participante-card').remove();

                if (document.querySelectorAll('.participante-card').length === 0) {
                    emptyMsg.style.display = 'block';
                }
            }
        });

    });
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {

    let selectDestino = null;
    const modal = document.getElementById('modalParametro');
    const nombreInput = document.getElementById('parametroNombre');
    const tipoInput = document.getElementById('parametroTipo');
    const errorBox = document.getElementById('parametroError');
    const btnGuardar = document.getElementById('guardarParametro');
    const spinner = document.getElementById('spinnerParametro');
    const btnText = btnGuardar.querySelector('.btn-text');

    document.querySelectorAll('[data-bs-target="#modalParametro"]').forEach(btn => {
        btn.addEventListener('click', () => {
            document.getElementById('modalParametroTitulo').innerText = btn.dataset.titulo;
            tipoInput.value = btn.dataset.tipo;
            selectDestino = document.getElementById(btn.dataset.select);

            nombreInput.value = '';
            errorBox.classList.add('d-none');
        });
    });

    btnGuardar.addEventListener('click', () => {

        const nombre = nombreInput.value.trim();
        const tipo = tipoInput.value;

        if (!nombre) {
            errorBox.innerText = 'Debe ingresar un nombre.';
            errorBox.classList.remove('d-none');
            return;
        }

        // estado loading
        btnGuardar.disabled = true;
        spinner.classList.remove('d-none');
        btnText.classList.add('d-none');
        errorBox.classList.add('d-none');

        fetch("{{ route('parametros.store') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ nombre, tipo })
        })
        .then(async res => {
            if (!res.ok) throw await res.json();
            return res.json();
        })
        .then(data => {

            const option = new Option(data.nombre, data.id, true, true);
            selectDestino.appendChild(option);

            // mostrarToast('Registro creado correctamente');

            bootstrap.Modal.getInstance(modal).hide();
        })
        .catch(err => {
            console.log(err);
            errorBox.innerText = err.message ?? 'El valor ya existe.';
            errorBox.classList.remove('d-none');
        })
        .finally(() => {
            btnGuardar.disabled = false;
            spinner.classList.add('d-none');
            btnText.classList.remove('d-none');
        });
    });

    // function mostrarToast(texto) {
    //     const toastEl = document.getElementById('toastSistema');
    //     document.getElementById('toastMensaje').innerText = texto;
    //     new bootstrap.Toast(toastEl).show();
    // }

});
</script>


<script src="{{ asset('assets/js/app/ciudad.js') }}"></script>
@endsection