Cambios ne la vista de crear contacto (287281bc) · Commits · Alfonso Rafael Solis Rangel / AgendaGobernador

resources/views/adminGen/contactos/create.blade.php

+32 −157

Original line number	Diff line number	Diff line
		<x-layout.default>
		<link rel='stylesheet' type='text/css' href='{{ Vite::asset("resources/css/nice-select2.css") }}'>
		<script src="/assets/js/file-upload-with-preview.iife.js"></script>
		<script src="/assets/js/alpine-mask.min.js"></script>
		<div x-data="crearUsuarios">
		<ul class="flex space-x-2 rtl:space-x-reverse">
		@@ -18,8 +17,8 @@
		<div class="flex items-center justify-between mb-5">
		<h5 class="font-semibold text-lg dark:text-white-light">Crear nuevo usuario</h5>
		</div>
		<div class="mb-5" x-data="{activeTab: 1}">
		<div class="mb-5">
		<div class="mb-5" x-data="formHandler()">
		<div class="inline-block w-full">
		<div class="relative z-[1]">
		<div class="bg-primary h-1 absolute ltr:left-0 rtl:right-0 top-[30px] m-auto -z-[1] transition-[width]" :class="{
		@@ -115,12 +114,13 @@
		</svg>

		</a>
		<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 7}">Revisar y enviar</span>
		<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 7}">Guardar contacto</span>
		</li>
		</ul>
		</div>
		<div>
		<form id="FormularioContacto" @submit.prevent="submitForm">
		<form action="{{ route('contacto.store') }}" method="POST" enctype="multipart/form-data">
		@csrf
		<div x-show="activeTab === 1">
		<div class="grid grid-cols-1 md:grid-cols-1 gap-5">
		<div>
		@@ -172,11 +172,13 @@
		<span for="active" class="bg-[#ebedf2] dark:bg-dark block h-full rounded-full before:absolute before:left-1 before:bg-white dark:before:bg-white-dark dark:peer-checked:before:bg-white before:bottom-1 before:w-4 before:h-4 before:rounded-full peer-checked:before:left-7 peer-checked:bg-primary before:transition-all before:duration-300"></span>
		</label>
		</div>
		</div>
		<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
		<div class="mb-5">
		<label for="conyuge_id">Conyuge</label>
		<select id="conyuge_id" name="conyuge_id" class="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
		@foreach($conyuges as $conyuge)
		<option value="{{ $conyuge->id }}">{{ $conyuge->nombre }}</option>
		<option value="{{ $conyuge->id }}">{{ $conyuge->nombre . ' ' . $conyuge->ap_paterno . ' ' . $conyuge->ap_materno }}</option>
		@endforeach
		</select>
		</div>
		@@ -196,6 +198,12 @@
		@endforeach
		</select>
		</div>
		<div>
		<label for="cargo_desc">Descripción del cargo</label>
		<input id="cargo_desc" name="cargo_desc" type="text" placeholder="Ingresa la descripción del cargo" class="form-input" />
		</div>
		</div>
		<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
		<div class="mb-5">
		<label for="caracteristica_id">Caracteristicas</label>
		<select id="caracteristica_id" name="caracteristica_id" class="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
		@@ -215,8 +223,9 @@
		<!-- TODO Intituciones pendientes -->
		</div>
		</div>
		<div class="custom-file-container" data-upload-id="myFirstImage">
		<label class="custom-file-label">Subir foto de perfil</label>
		<div>
		<label for="foto_perfil">Foto de perfil</label>
		<input id="foto_perfil" name="foto_perfil" type="file" class="form-input file:py-2 file:px-4 file:border-0 file:font-semibold p-0 file:bg-primary/90 ltr:file:mr-5 rtl:file:ml-5 file:text-white file:hover:bg-primary" accept="image/*"/>
		</div>
		<br>
		</div>
		@@ -400,89 +409,16 @@
		<button type="button" class="btn btn-primary" id="agregarBtnCorreo">Agregar</button>
		<br>
		</div>

		<div x-show="activeTab === 7">
		<h3 class="text-lg font-semibold mb-4">Resumen del Formulario</h3>
		<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
		<!-- Datos Personales -->
		<div>
		<h4 class="font-semibold">Datos Personales</h4>
		<p><strong>Nombre:</strong> <span x-text="formData.get('nombre') \|\| 'No proporcionado'"></span></p>
		<p><strong>Apellido paterno:</strong> <span x-text="formData.get('ap_paterno') \|\| 'No proporcionado'"></span></p>
		<p><strong>Apellido materno:</strong> <span x-text="formData.get('ap_materno') \|\| 'No proporcionado'"></span></p>
		<p><strong>Mes cumpleaños:</strong> <span x-text="formData.get('mes_cump') \|\| 'No proporcionado'"></span></p>
		<p><strong>Día cumpleaños:</strong> <span x-text="formData.get('dia_cump') \|\| 'No proporcionado'"></span></p>
		<p><strong>Finado:</strong> <span x-text="formData.get('finado') ? 'Sí' : 'No'"></span></p>
		<p><strong>Conyuge:</strong> <span x-text="formData.get('conyuge_id') \|\| 'No proporcionado'"></span></p>
		<p><strong>Profesión:</strong> <span x-text="formData.get('profesion_id') \|\| 'No proporcionado'"></span></p>
		<p><strong>Cargo:</strong> <span x-text="formData.get('cargo_id') \|\| 'No proporcionado'"></span></p>
		<p><strong>Característica:</strong> <span x-text="formData.get('caracteristica_id') \|\| 'No proporcionado'"></span></p>
		<p><strong>Subgrupo:</strong> <span x-text="formData.get('subgrupo_id') \|\| 'No proporcionado'"></span></p>
		</div>

		<!-- Domicilio Oficial -->
		<div>
		<h4 class="font-semibold">Domicilio Oficial</h4>
		<p><strong>Domicilio oficial:</strong> <span x-text="formData.get('domicilio_oficial') \|\| 'No proporcionado'"></span></p>
		<p><strong>Código postal oficial:</strong> <span x-text="formData.get('codigo_postal') \|\| 'No proporcionado'"></span></p>
		<p><strong>Localidad oficial:</strong> <span x-text="formData.get('localidad_oficial') \|\| 'No proporcionado'"></span></p>
		<p><strong>Municipio oficial:</strong> <span x-text="formData.get('municipio_oficial') \|\| 'No proporcionado'"></span></p>
		<p><strong>Estado oficial:</strong> <span x-text="formData.get('estado') \|\| 'No proporcionado'"></span></p>
		<p><strong>País oficial:</strong> <span x-text="formData.get('pais') \|\| 'No proporcionado'"></span></p>
		</div>

		<!-- Domicilio Particular -->
		<div>
		<h4 class="font-semibold">Domicilio Particular</h4>
		<p><strong>Domicilio particular:</strong> <span x-text="formData.get('domicilio_par') \|\| 'No proporcionado'"></span></p>
		<p><strong>Código postal particular:</strong> <span x-text="formData.get('codigo_postal_par') \|\| 'No proporcionado'"></span></p>
		<p><strong>Localidad particular:</strong> <span x-text="formData.get('localidad_par') \|\| 'No proporcionado'"></span></p>
		<p><strong>Municipio particular:</strong> <span x-text="formData.get('municipio_par') \|\| 'No proporcionado'"></span></p>
		<p><strong>Estado particular:</strong> <span x-text="formData.get('estado_par') \|\| 'No proporcionado'"></span></p>
		<p><strong>País particular:</strong> <span x-text="formData.get('pais_par') \|\| 'No proporcionado'"></span></p>
		</div>

		<!-- Teléfonos -->
		<div>
		<h4 class="font-semibold">Teléfonos</h4>
		<template x-for="(telefono, index) in formData.get('telefonos', [])" :key="index">
		<div class="mb-2">
		<p><strong>Prefijo:</strong> <span x-text="telefono.prefijo \|\| 'No proporcionado'"></span></p>
		<p><strong>Lada:</strong> <span x-text="telefono.lada \|\| 'No proporcionado'"></span></p>
		<p><strong>Número:</strong> <span x-text="telefono.numero \|\| 'No proporcionado'"></span></p>
		<p><strong>Tipo:</strong> <span x-text="telefono.tipo \|\| 'No proporcionado'"></span></p>
		<p><strong>Estatus:</strong> <span x-text="telefono.estatus \|\| 'No proporcionado'"></span></p>
		<p><strong>Ext:</strong> <span x-text="telefono.ext \|\| 'No proporcionado'"></span></p>
		<p><strong>ID Radio:</strong> <span x-text="telefono.id_radio \|\| 'No proporcionado'"></span></p>
		<p><strong>Observaciones:</strong> <span x-text="telefono.observaciones \|\| 'No proporcionado'"></span></p>
		</div>
		</template>
		</div>

		<!-- Redes Sociales -->
		<div>
		<h4 class="font-semibold">Redes Sociales</h4>
		<template x-for="(red, index) in formData.get('redes_sociales', [])" :key="index">
		<div class="mb-2">
		<p><strong>URL:</strong> <span x-text="red.url \|\| 'No proporcionado'"></span></p>
		<p><strong>Tipo:</strong> <span x-text="red.tipo \|\| 'No proporcionado'"></span></p>
		</div>
		</template>
		</div>

		<!-- Correos Electrónicos -->
		<div>
		<h4 class="font-semibold">Correos Electrónicos</h4>
		<template x-for="(correo, index) in formData.get('correos', [])" :key="index">
		<div class="mb-2">
		<p><strong>Correo:</strong> <span x-text="correo.correo \|\| 'No proporcionado'"></span></p>
		<p><strong>Tipo:</strong> <span x-text="correo.tipo \|\| 'No proporcionado'"></span></p>
		<h3 class="text-lg font-semibold mb-4">Enviar formulario</h3>
		<div class="mt-4 p-4 border border-yellow-300 bg-yellow-100 text-yellow-700 rounded">
		<p class="mb-2">Por favor, revise toda la información antes de enviar el formulario.</p>
		<p>Si encuentra algún error, puede regresar y editar la información antes de enviar.</p>
		</div>
		</template>
		</div>
		</div>
		<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Enviar</button>
		<br>
		<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Guardar contacto</button>
		</div>
		<br>
		</form>
		</div>
		<div class="flex justify-between">
		@@ -538,44 +474,15 @@
		input.placeholder = 'Buscar...';
		});

		const fileUploadInstance = new FileUploadWithPreview.FileUploadWithPreview('myFirstImage', {
		images: {
		baseImage: 'assets/images/file-preview.png',
		backgroundImage: '',
		},
		text: {
		chooseFile: 'Subir foto de perfil',
		browse: 'Seleccionar',
		clear: 'Eliminar',
		},
		});

		document.addEventListener('change', function(event) {
		const fileInput = document.querySelector('#file-upload-with-preview-myFirstImage');

		if (event.target === fileInput) {
		const files = fileUploadInstance.cachedFileArray;
		document.getElementById('foto_perfil').addEventListener('change', function() {
		const file = this.files[0];
		const fileType = file.type.split('/')[0]; // Obtiene el tipo de archivo ('image', 'video', etc.)

		if (files.length > 0) {
		const file = files[0];

		if (file && !file.type.startsWith('image/')) {
		showToast("Solo se permiten archivos de imagen.", "Error", "error")
		fileUploadInstance.options.images.baseImage = '';
		fileUploadInstance.resetPreviewPanel();
		fileInput.value = '';
		fileUploadInstance.cachedFileArray = [];
		}
		}
		if (fileType !== 'image') {
		showToast('Por favor selecciona un archivo de imagen válido.', 'Error', 'error');
		this.value = ''; // Limpiar el valor del input para deseleccionar el archivo no válido
		}
		});
		setTimeout(function() {
		const fileInput = document.querySelector('#file-upload-with-preview-myFirstImage');
		if (fileInput) {
		fileInput.setAttribute('accept', 'image/*');
		}
		}, 500);

		});

		const agregarBtnTel = document.getElementById('agregarBtnTel');
		@@ -655,8 +562,8 @@
		newFormGroup.classList.add('grid', 'grid-cols-1', 'md:grid-cols-3', 'gap-5', 'form-group', 'relative');
		newFormGroup.innerHTML = `
		<div>
		<label for="id_radio">URL del la red social o página web</label>
		<input id="id_radio" name="id_radio[]" type="text" class="form-input" />
		<label for="red_social">URL del la red social o página web</label>
		<input id="red_social" name="red_social[]" type="text" class="form-input" />
		</div>
		<div class="mb-5">
		<label for="tipo_red_social">Tipo</label>
		@@ -797,37 +704,5 @@ function showToast(message, heading, icon) {
		@endforeach
		@endif
		});

		const contactForm = document.getElementById("FormularioContacto");
		let formData = new FormData(contactForm);
		function formHandler() {
		return {
		activeTab: 1,
		formData: formData,

		submitForm() {
		// Guardar datos del formulario en formData
		this.formData = {
		name: document.querySelector('#name').value,
		ap_paterno: document.querySelector('#ap_paterno').value,
		// Otros campos aquí
		};
		// Cambiar a la pestaña de vista previa
		this.activeTab = 7;
		},
		logFormData() {
		formData = new FormData(contactForm);
		const object = Object.fromEntries(formData);
		const json = JSON.stringify(object);
		const telefonosContainer = document.getElementById('dynamicFormContainerTel');
		const telefonos = telefonosContainer.querySelectorAll('.grid.grid-cols-1.md\\:grid-cols-9.gap-5.form-group.relative.mb-2');
		telefonos.forEach((telefono) => {
		console.log( telefono.querySelector('input[name="prefijo[]"]').value);

		});
		this.formData = formData;
		}
		};
		}
		</script>
		</x-layout.default>
		No newline at end of file