<div class="modal fade" id="modalParticipante">
    <div class="modal-dialog">
        <div class="modal-content bg-white">
            <div class="modal-header">
                <h5>AGREGAR PERSONAL DE REFERENCIA</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="fa fa-info-circle"></i>
                    Los campos marcados con <span class="text-danger">(*)</span> son obligatorios.
                </div>
                <form id="formParticipante">
                    <label>Tipo de personal de referencia <span class="text-danger">(*)</span></label>
                    <select id="tipo_participante" class="form-select" required>
                        <option value="">--SELECCIONE--</option>
                        @foreach($tipos_participante as $tipo)
                            <option value="{{ $tipo->id }}">{{ $tipo->nombre }}</option>
                        @endforeach
                    </select>
                    <label class="mt-2">Nombre <span class="text-danger">(*)</span></label>
                    <input type="text"
                            class="form-control @error('nuevoParticipante.nombre') is-invalid @enderror"
                            id="nombre_participante"
                            pattern="^[A-Za-zÁÉÍÓÚÜÑáéíóúüñ\s]+$"
                            title="Solo se permiten letras"
                            oninput="this.value = this.value.replace(/[^A-Za-zÁÉÍÓÚÜÑáéíóúüñ\s]/g, '')">
                            
                    @error('nuevoParticipante.nombre')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                    <label class="mt-2">Número de Contacto <span class="text-danger">(*)</span></label>
                    <input type="text"
                            class="form-control @error('nuevoParticipante.contacto') is-invalid @enderror"
                            id="contacto_participante"
                            pattern="^[0-9]+(,[0-9]+)*$"
                            title="Solo números separados por coma"
                            oninput="this.value = this.value.replace(/[^0-9,]/g, '')">
                            
                    @error('nuevoParticipante.contacto')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </form>
            </div>

            <div class="modal-footer">
                <button class="btn btn-primary btn-sm" id="guardarParticipante">Agregar</button>
                <button class="btn btn-warning btn-sm" data-bs-dismiss="modal">Cancelar</button>
            </div>
        </div>
    </div>
</div>

