Formulario de contacto (8b780c5e) · Commits · Alfonso Rafael Solis Rangel / AgendaGobernador

app/Http/Controllers/ContactoController.php

+11 −1

Original line number	Diff line number	Diff line
		@@ -2,7 +2,11 @@

		namespace App\Http\Controllers;

		use App\Models\Caracteristicas;
		use App\Models\cargos;
		use App\Models\Contacto;
		use App\Models\Profesion;
		use App\Models\Subgrupo;
		use Illuminate\Http\Request;

		class ContactoController extends Controller
		@@ -21,7 +25,13 @@ public function index()
		*/
		public function create()
		{
		return view('adminGen.contactos.create');
		//TODO Instituciones pendientes
		$conyuges = Contacto::get();
		$profesiones = Profesion::get();
		$cargos = cargos::get();
		$caracteristicas = Caracteristicas::get();
		$subgrupos = Subgrupo::get();
		return view('adminGen.contactos.create', compact('conyuges', 'profesiones', 'cargos', 'caracteristicas', 'subgrupos'));
		}

		/**

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

+143 −36

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>
		<div x-data="crearUsuarios">
		<ul class="flex space-x-2 rtl:space-x-reverse">
		<li>
		@@ -137,6 +137,8 @@
		<label for="ap_materno">Apellido materno</label>
		<input id="ap_materno" name="ap_materno" type="text" placeholder="Ingresa el apellido materno" class="form-input" />
		</div>
		</div>
		<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
		<div class="mb-5">
		<label for="mes_cump">Mes cumpleaños</label>
		<select id="mes_cump" name="mes_cump" x-model="mesSeleccionado" @change="actualizarDias()" 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">
		@@ -163,9 +165,60 @@
		</template>
		</select>
		</div>
		<div class="flex items-center">
		<label class="mr-2">Finado</label>
		<label class="w-12 h-6 relative">
		<input type="checkbox" class="custom_switch absolute w-full h-full opacity-0 z-10 cursor-pointer peer" id="finado" name="finado" />
		<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 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>
		@endforeach
		</select>
		</div>
		<div class="mb-5">
		<label for="profesion_id">Profesión</label>
		<select id="profesion_id" name="profesion_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($profesiones as $profesion)
		<option value="{{ $profesion->id }}">{{ $profesion->nombre }}</option>
		@endforeach
		</select>
		</div>
		<div class="mb-5">
		<label for="cargo_id">Cargos</label>
		<select id="cargo_id" name="cargo_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($cargos as $cargo)
		<option value="{{ $cargo->id }}">{{ $cargo->nombre }}</option>
		@endforeach
		</select>
		</div>
		<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">
		@foreach($caracteristicas as $caracteristica)
		<option value="{{ $caracteristica->id }}">{{ $caracteristica->nombre }}</option>
		@endforeach
		</select>
		</div>
		<div class="mb-5">
		<label for="subgrupo_id">Subgrupos</label>
		<select id="subgrupo_id" name="subgrupo_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($subgrupos as $subgrupo)
		<option value="{{ $subgrupo->id }}">{{ $subgrupo->nombre }}</option>
		@endforeach
		</select>

		<!-- 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>
		<br>
		<!-- Otros campos de Datos personales -->
		</div>

		<div x-show="activeTab === 2">
		@@ -207,37 +260,91 @@
		<script src="/assets/js/jquery.toast.js"></script>

		<script>
		// document.addEventListener("DOMContentLoaded", function(e) {
		// // default
		// var els = document.querySelectorAll(".selectize");
		// els.forEach(function(select) {
		// NiceSelect.bind(select);
		// });

		// // seachable
		// var options = {
		// searchable: true
		// };
		// NiceSelect.bind(document.getElementById("dependencia_id"), options);
		// NiceSelect.bind(document.getElementById("role"), options);

		// document.querySelectorAll('.nice-select .current').forEach(el => {
		// if (el.textContent.trim() === 'Select an option') {
		// el.textContent = 'Selecciona una opción';
		// }
		// });

		// document.querySelectorAll('.nice-select .list .option').forEach(el => {
		// if (el.textContent.trim() === 'Select an option') {
		// el.textContent = 'Selecciona una opción';
		// }
		// });

		// var searchInputs = document.querySelectorAll('.nice-select-search');
		// searchInputs.forEach(function(input) {
		// input.placeholder = 'Buscar...';
		// });
		// });
		document.addEventListener("DOMContentLoaded", function(e) {
		// default
		var els = document.querySelectorAll(".selectize");
		els.forEach(function(select) {
		NiceSelect.bind(select);
		});

		// seachable
		var options = {
		searchable: true
		};
		NiceSelect.bind(document.getElementById("conyuge_id"), options);
		NiceSelect.bind(document.getElementById("profesion_id"), options);
		NiceSelect.bind(document.getElementById("cargo_id"), options);
		NiceSelect.bind(document.getElementById("caracteristica_id"), options);
		NiceSelect.bind(document.getElementById("subgrupo_id"), options);

		document.querySelectorAll('.nice-select .current').forEach(el => {
		if (el.textContent.trim() === 'Select an option') {
		el.textContent = 'Selecciona una opción';
		}
		});

		document.querySelectorAll('.nice-select .list .option').forEach(el => {
		if (el.textContent.trim() === 'Select an option') {
		el.textContent = 'Selecciona una opción';
		}
		});

		var searchInputs = document.querySelectorAll('.nice-select-search');
		searchInputs.forEach(function(input) {
		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',
		},
		});

		// Asegurarse de que solo se acepten imágenes
		document.addEventListener('change', function(event) {
		const fileInput = document.querySelector('#file-upload-with-preview-myFirstImage');
		console.log('Evento change detectado', event.target); // Verificar si el evento se captura
		if (event.target === fileInput) {
		console.log('Input de archivo detectado', fileInput); // Verificar si el input es el correcto

		const files = fileUploadInstance.cachedFileArray;
		console.log('Archivos seleccionados', files); // Verificar los archivos seleccionados

		if (files.length > 0) {
		const file = files[0];
		console.log('Archivo seleccionado', file); // Verificar el archivo seleccionado
		if (file && !file.type.startsWith('image/')) {
		alert('Solo se permiten archivos de imagen.');
		fileInput.value = ''; // Limpiar el input

		// Limpiar la vista previa manualmente si es necesario
		const previewContainer = document.querySelector('.custom-file-container__image-preview');
		if (previewContainer) {
		previewContainer.innerHTML = ''; // Limpiar la vista previa
		}
		}
		} else {
		console.log('No hay archivos seleccionados');
		}
		}
		});

		// Asegurar que el input tiene el atributo accept correcto
		setTimeout(function() {
		const fileInput = document.querySelector('#file-upload-with-preview-myFirstImage');
		if (fileInput) {
		console.log('Atributo accept añadido', fileInput); // Verificar si el atributo accept se añade correctamente
		fileInput.setAttribute('accept', 'image/*');
		}
		}, 500);

		});

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