Continuacion del formulario de contacto (56e4f2f3) · Commits · Alfonso Rafael Solis Rangel / AgendaGobernador

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

+174 −24

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">
		<li>
		@@ -120,7 +121,6 @@
		</div>
		<div>
		<form @submit.prevent="submitForm">
		<!-- Campos para cada pestaña -->
		<div x-show="activeTab === 1">
		<div class="grid grid-cols-1 md:grid-cols-1 gap-5">
		<div>
		@@ -222,16 +222,118 @@
		</div>

		<div x-show="activeTab === 2">
		<div class="mb-4">
		<label for="direccion_oficial" class="block text-gray-700 text-sm font-bold mb-2">Dirección Oficial:</label>
		<input type="text" id="direccion_oficial" name="direccion_oficial" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
		<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
		<div>
		<label for="domicilio_oficial">Domicilio oficial</label>
		<input id="domicilio_oficial" name="domicilio_oficial" type="text" placeholder="Ingresa el domicilio oficial" class="form-input" />
		</div>
		<fieldset>
		<label for="codigo_postal" >Código postal oficial</label>
		<input id="codigo_postal" name="codigo_postal" type="text" placeholder="Ingresa el código postal oficial" class="form-input" x-mask="99999" />
		</fieldset>
		<div>
		<label for="localidad_oficial">Localidad oficial</label>
		<input id="localidad_oficial" name="localidad_oficial" type="text" placeholder="Ingresa la localidad oficial" class="form-input" />
		</div>
		<div>
		<label for="municipio_oficial">Municipio oficial</label>
		<input id="municipio_oficial" name="municipio_oficial" type="text" placeholder="Ingresa el municipio oficial" class="form-input" />
		</div>
		<!-- Otros campos de Domicilio oficial -->
		<div>
		<label for="estado">Estado oficial</label>
		<input id="estado" name="estado" type="text" placeholder="Ingresa el estado oficial" class="form-input" />
		</div>
		<div>
		<label for="pais">País oficial</label>
		<input id="pais" name="pais" type="text" placeholder="Ingresa el país oficial" class="form-input" />
		</div>
		</div>
		<br>
		</div>

		<!-- Otras secciones -->
		<div x-show="activeTab === 3">
		<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
		<div>
		<label for="domicilio_par">Domicilio particular</label>
		<input id="domicilio_par" name="domicilio_par" type="text" placeholder="Ingresa el domicilio particular" class="form-input" />
		</div>
		<fieldset>
		<label for="codigo_postal" >Código postal particular</label>
		<input id="codigo_postal" name="codigo_postal" type="text" placeholder="Ingresa el código postal particular" class="form-input" x-mask="99999" />
		</fieldset>
		<div>
		<label for="localidad_par">Localidad particular</label>
		<input id="localidad_par" name="localidad_par" type="text" placeholder="Ingresa la localidad particular" class="form-input" />
		</div>
		<div>
		<label for="municipio_par">Municipio particular</label>
		<input id="municipio_par" name="municipio_par" type="text" placeholder="Ingresa el municipio particular" class="form-input" />
		</div>
		<div>
		<label for="estado">Estado particular</label>
		<input id="estado" name="estado" type="text" placeholder="Ingresa el estado particular" class="form-input" />
		</div>
		<div>
		<label for="pais">País particular</label>
		<input id="pais" name="pais" type="text" placeholder="Ingresa el país particular" class="form-input" />
		</div>
		</div>
		<br>
		</div>
		<div x-show="activeTab === 4">
		<div id="dynamicFormContainer">
		<div class="grid grid-cols-1 md:grid-cols-8 gap-5">
		<fieldset>
		<label for="prefijo">Prefijo</label>
		<input id="prefijo" name="prefijo[]" type="text" class="form-input" x-mask="999" />
		</fieldset>
		<fieldset>
		<label for="lada">Lada</label>
		<input id="lada" name="lada[]" type="text" class="form-input" x-mask="999" />
		</fieldset>
		<fieldset>
		<label for="numero">Número</label>
		<input id="numero" name="numero[]" type="text" class="form-input" x-mask="9999999999" />
		</fieldset>
		<div class="mb-5">
		<label for="tipo">Tipo</label>
		<select id="tipo" name="tipo[]" 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">
		<option value="0">Selecciona una opción</option>
		<option value="Celular">Celular</option>
		<option value="Fax">Fax</option>
		<option value="Directo">Directo</option>
		<option value="Radio">Radio</option>
		<option value="Particular">Particular</option>
		<option value="Conmutador">Conmutador</option>
		</select>
		</div>
		<div class="mb-5">
		<label for="estatus">Estatus</label>
		<select id="estatus" name="estatus[]" 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">
		<option value="0">Selecciona una opción</option>
		<option value="Público">Público</option>
		<option value="Privado">Privado</option>
		</select>
		</div>
		<fieldset>
		<label for="ext">Ext.</label>
		<input id="ext" name="ext[]" type="text" class="form-input" x-mask="99999999999999999999" />
		</fieldset>
		<div>
		<label for="id_radio">Id radio</label>
		<input id="id_radio" name="id_radio[]" type="text" class="form-input" />
		</div>
		<div>
		<label for="observaciones">Observaciones</label>
		<input id="observaciones" name="observaciones[]" type="text" class="form-input" />
		</div>
		</div>
		</div>
		<button type="button" class="btn btn-primary" id="agregarBtn">Agregar</button>
		<br>

		</div>

		<!-- Botón de enviar -->
		<div x-show="activeTab === 7">
		<div class="mb-4">
		<label for="review" class="block text-gray-700 text-sm font-bold mb-2">Revisar y Enviar:</label>
		@@ -296,17 +398,16 @@

		const fileUploadInstance = new FileUploadWithPreview.FileUploadWithPreview('myFirstImage', {
		images: {
		baseImage: 'assets/images/file-preview.png', // Imagen base de la vista previa
		backgroundImage: '', // Fondo de la vista previa (opcional)
		baseImage: 'assets/images/file-preview.png',
		backgroundImage: '',
		},
		text: {
		chooseFile: 'Subir foto de perfil', // Texto para elegir archivo
		browse: 'Seleccionar', // Texto para navegar por archivos
		clear: 'Eliminar', // Texto para limpiar archivos seleccionados
		chooseFile: 'Subir foto de perfil',
		browse: 'Seleccionar',
		clear: 'Eliminar',
		},
		});

		// Asegurarse de que solo se acepten imágenes
		document.addEventListener('change', function(event) {
		const fileInput = document.querySelector('#file-upload-with-preview-myFirstImage');

		@@ -318,20 +419,14 @@

		if (file && !file.type.startsWith('image/')) {
		showToast("Solo se permiten archivos de imagen.", "Error", "error")

		// Limpiar la vista previa manualmente
		fileUploadInstance.options.images.baseImage = ''; // Limpiar la imagen base
		fileUploadInstance.resetPreviewPanel(); // Actualizar la vista previa

		// Limpiar el input de archivo
		fileInput.value = ''; // Limpiar el input de archivo
		fileUploadInstance.cachedFileArray = []; // Limpiar archivos seleccionados
		fileUploadInstance.options.images.baseImage = '';
		fileUploadInstance.resetPreviewPanel();
		fileInput.value = '';
		fileUploadInstance.cachedFileArray = [];
		}
		}
		}
		});

		// Asegurar que el input tenga el atributo accept correcto
		setTimeout(function() {
		const fileInput = document.querySelector('#file-upload-with-preview-myFirstImage');
		if (fileInput) {
		@@ -340,6 +435,61 @@
		}, 500);

		});
		const agregarBtn = document.getElementById('agregarBtn');
		const formContainer = document.getElementById('dynamicFormContainer');
		const template = `
		<fieldset>
		<label for="prefijo">Prefijo</label>
		<input name="prefijo[]" type="text" class="form-input" x-mask="999" />
		</fieldset>
		<fieldset>
		<label for="lada">Lada</label>
		<input name="lada[]" type="text" class="form-input" x-mask="999" />
		</fieldset>
		<fieldset>
		<label for="numero">Número</label>
		<input name="numero[]" type="text" class="form-input" x-mask="9999999999" />
		</fieldset>
		<div class="mb-5">
		<label for="tipo">Tipo</label>
		<select name="tipo[]" 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">
		<option value="0">Selecciona una opción</option>
		<option value="Celular">Celular</option>
		<option value="Fax">Fax</option>
		<option value="Directo">Directo</option>
		<option value="Radio">Radio</option>
		<option value="Particular">Particular</option>
		<option value="Conmutador">Conmutador</option>
		</select>
		</div>
		<div class="mb-5">
		<label for="estatus">Estatus</label>
		<select name="estatus[]" 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">
		<option value="0">Selecciona una opción</option>
		<option value="Público">Público</option>
		<option value="Privado">Privado</option>
		</select>
		</div>
		<fieldset>
		<label for="ext">Ext.</label>
		<input name="ext[]" type="text" class="form-input" x-mask="99999999999999999999" />
		</fieldset>
		<div>
		<label for="id_radio">Id radio</label>
		<input name="id_radio[]" type="text" class="form-input" />
		</div>
		<div>
		<label for="observaciones">Observaciones</label>
		<input name="observaciones[]" type="text" class="form-input" />
		</div>
		`;

		agregarBtn.addEventListener('click', function() {
		const newColumn = document.createElement('div');
		newColumn.classList.add('grid', 'grid-cols-1', 'md:grid-cols-8', 'gap-5');
		newColumn.innerHTML = template;
		formContainer.appendChild(newColumn);
		});

		document.addEventListener("alpine:init", () => {
		Alpine.data("crearUsuarios", () => ({