@extends('layouts.app')
@section('title', 'Editar 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">Editar Proceso Judicial</h4>
                <form method="POST" action="{{ route('procesos.update',$proceso) }}">
                    @method('PUT')
                    @include('procesos._form')
                </form>
            </div>
        </div>
    </div>
</div>
@include('procesos._modal_parametro')
@include('procesos._modal_participante')
@include('procesos._modal_demandante')
@endsection
@section('scripts')
<script src="{{ asset('assets/js/app/ciudad.js') }}"></script>
<script src="{{ asset('assets/js/app/datos_proceso.js') }}"></script>
{{-- <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 involucrado');
            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 => {
            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> --}}
@endsection