@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_demandante')
@include('procesos._modal_participante')
@include('procesos._modal_parametro')
@endsection
@section('scripts')
{{-- <script>
    $('#btnAddParticipante').click(function() {
        new bootstrap.Modal('#modalParticipante').show();
    });

    $('.select2').select2({
        placeholder: "Seleccione uno o más delitos",
        allowClear: true,
        width: '100%'
    });
    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 row = document.createElement('tr');
            row.classList.add('participante-row');

            row.innerHTML = `
                <td class="text-center"> 
                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove">
                        <i class="fa fa-trash"></i> Quitar
                    </button>
                </td>
                <td> 
                    ${nombre.value}
                    <input type="hidden" name="participantes[${participantesIndex}][nombre]" value="${nombre.value}">
                </td>
                <td> 
                    ${contacto.value}
                    <input type="hidden" name="participantes[${participantesIndex}][contacto]" value="${contacto.value}">
                </td>
                <td class="text-center"> 
                    ${tipoTexto}
                    <input type="hidden" name="participantes[${participantesIndex}][tipo]" value="${tipoSelect.value}">
                </td>
            `;

            body.appendChild(row);

            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-row').remove();

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

    });
</script>
<script>
    $('#btnAddDemandante').click(function() {
        new bootstrap.Modal('#modalDemandante').show();
    });

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

        let demandantesIndex = document.querySelectorAll('.demandante-card').length;

        const bodyDemandantes = document.getElementById('demandantesBody');
        const emptyMsg = document.getElementById('demandantesEmpty');
        const btnGuardarDemandante = document.getElementById('guardarDemandante');

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

            const tipoSelectDemandante = document.getElementById('tipo_demandante');
            const nombreDemandante = document.getElementById('nombre_demandante');

            if (!tipoSelectDemandante.value || !nombreDemandante.value) {
                alert('Debe completar todos los campos del demandante');
                return;
            }

            emptyMsg.style.display = 'none';

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

            const row = document.createElement('tr');
            row.classList.add('demandante-row');

            row.innerHTML = `
                <td class="text-center">
                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove">
                        <i class="fa fa-trash"></i>
                    </button>
                </td>
                <td>
                    ${nombreDemandante.value}
                    <input type="hidden" name="demandantes[${demandantesIndex}][nombre]" value="${nombreDemandante.value}">
                </td>
                <td class="text-center">
                    ${tipoTexto}
                    <input type="hidden" name="demandantes[${demandantesIndex}][tipo]" value="${tipoSelectDemandante.value}">
                </td>
            `;

            bodyDemandantes.appendChild(row);
            demandantesIndex++;

            tipoSelectDemandante.value = '';
            nombreDemandante.value = '';

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

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

                if (document.querySelectorAll('.demandante-row').length === 0) {
                    emptyMsg.style.display = '';
                }
            }
        });

    });
</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');
        });
    });

});
</script> --}}


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