@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')
@endsection
@section('scripts')
<script>
    $('#tipo_delito_id').select2({
        width: '100%',
        placeholder: "Seleccione un delito"
    });
    $('#tipo_proceso_id').select2({
        width: '100%',
        placeholder: "Seleccione un tipo de proceso"
    });
    document.getElementById('formDelito').addEventListener('submit', function(event) {
        event.preventDefault();
        const formData = new FormData(this);
        fetch("{{ route('parametros.store') }}", {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            const select = document.querySelector('select[name="tipo_delito_id"]');
            const option = new Option(data.nombre, data.id, true, true);
            select.appendChild(option);
            $(select).trigger('change');

            const modal = bootstrap.Modal.getInstance(document.getElementById('modalDelito'));
            modal.hide();
            this.reset();
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al guardar el delito.');
        });
    });

    const participantesBody = document.getElementById('participantesBody');
    
    let index = 0;
    
    $('#btnAddParticipante').click(function() {
        new bootstrap.Modal('#modalParticipante').show();
    });

    document.getElementById('guardarParticipante').onclick = () => {
        let tipo = tipo_participante.value;
        let tipoTexto=tipo_participante.options[tipo_participante.selectedIndex].text
        let nombre = nombre_participante.value;
        let contacto = contacto_participante.value;

        if (!tipo || !nombre) return;
        
        // participantesBody.insertAdjacentHTML('beforeend', `
        //     <tr>
        //         <td>
        //             <button type="button" class="btn btn-sm btn-danger" onclick="this.closest('tr').remove()"><i class="fa fa-trash"></i></button>
        //         </td>
        //         <td>
        //             ${tipoTexto}
        //             <input type="hidden" name="participantes[${index}][tipo]" value="${tipo}">
        //         </td>
        //         <td>
        //             ${nombre}
        //             <input type="hidden" name="participantes[${index}][nombre]" value="${nombre}">
        //         </td>
        //         <td>
        //             ${contacto}
        //             <input type="hidden" name="participantes[${index}][contacto]" value="${contacto}">
        //         </td>
        //     </tr>
        // `);
        participantesBody.insertAdjacentHTML('beforeend', `
            <div class="col-md-2 participante-card">
                <div class="card h-100 border">
                    <div class="card-body position-relative p-1">

                        <h6 class="text-center fw-bold mb-1">${nombre}</h6>

                        <div class="text-center mb-2">
                            <span class="badge bg-info">${tipoTexto}</span>
                        </div>

                        <p class="text-center text-muted mb-0">
                            <i class="fa fa-phone"></i> ${contacto || '—'}
                        </p>

                        <!-- Inputs hidden -->
                        <input type="hidden" name="participantes[${index}][tipo]" value="${tipo}">
                        <input type="hidden" name="participantes[${index}][nombre]" value="${nombre}">
                        <input type="hidden" name="participantes[${index}][contacto]" value="${contacto}">
                        <div class="text-center">
                            <button type="button"
                                class="btn btn-sm btn-outline-danger"
                                onclick="this.closest('.participante-card').remove()">
                                Eliminar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `);

        index++;
        document.getElementById('formParticipante').reset();
        bootstrap.Modal.getInstance(document.getElementById('modalParticipante')).hide();
    };

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