Menus (bf3a07cf) · Commits · Alfonso Rafael Solis Rangel / AgendaGobernador

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

+59 −46

Original line number	Diff line number	Diff line
		@@ -24,14 +24,15 @@
		<div class="bg-primary h-1 absolute ltr:left-0 rtl:right-0 top-[30px] m-auto -z-[1] transition-[width]" :class="{
		'w-[5%]' : activeTab === 1,
		'w-[20%]' : activeTab === 2,
		'w-[35%]' : activeTab === 3,
		'w-[50%]' : activeTab === 4,
		'w-[65%]' : activeTab === 5,
		'w-[75%]' : activeTab === 6,
		'w-[90%]' : activeTab === 7
		'w-[30%]' : activeTab === 3,
		'w-[40%]' : activeTab === 4,
		'w-[55%]' : activeTab === 5,
		'w-[67%]' : activeTab === 6,
		'w-[80%]' : activeTab === 7,
		'w-[92%]' : activeTab === 8
		}">
		</div>
		<ul class="mb-5 grid grid-cols-7">
		<ul class="mb-5 grid grid-cols-8">
		<li class="mx-auto">
		<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 1}" @click="activeTab = 1">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		@@ -47,6 +48,19 @@
		</li>
		<li class="mx-auto">
		<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 2}" @click="activeTab = 2">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<circle cx="9" cy="9" r="2" stroke="#1C274C" stroke-width="1.5" />
		<path d="M13 15C13 16.1046 13 17 9 17C5 17 5 16.1046 5 15C5 13.8954 6.79086 13 9 13C11.2091 13 13 13.8954 13 15Z" stroke="#1C274C" stroke-width="1.5" />
		<path d="M22 12C22 15.7712 22 17.6569 20.8284 18.8284C19.6569 20 17.7712 20 14 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C21.298 5.64118 21.5794 6.2255 21.748 7" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M19 12H15" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M19 9H14" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M19 15H16" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		</svg>
		</a>
		<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 2}">Grupos</span>
		</li>
		<li class="mx-auto">
		<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 3}" @click="activeTab = 3">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M19.8978 16H7.89778C6.96781 16 6.50282 16 6.12132 16.1022C5.08604 16.3796 4.2774 17.1883 4 18.2235" stroke="#1C274D" stroke-width="1.5" />
		<path d="M8 7H16" stroke="#1C274D" stroke-width="1.5" stroke-linecap="round" />
		@@ -56,10 +70,10 @@
		</svg>

		</a>
		<span class="block mt-2" :class="{'text-primary' : activeTab === 2}">Domicilio oficial</span>
		<span class="block mt-2" :class="{'text-primary' : activeTab === 3}">Domicilio oficial</span>
		</li>
		<li class="mx-auto">
		<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 3}" @click="activeTab = 3">
		<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 4}" @click="activeTab = 4">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M19.8978 16H7.89778C6.96781 16 6.50282 16 6.12132 16.1022C5.08604 16.3796 4.2774 17.1883 4 18.2235" stroke="#1C274D" stroke-width="1.5" />
		<path d="M8 7H16" stroke="#1C274D" stroke-width="1.5" stroke-linecap="round" />
		@@ -69,10 +83,10 @@
		</svg>

		</a>
		<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 3}">Domicilio particular</span>
		<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 4}">Domicilio particular</span>
		</li>
		<li class="mx-auto">
		<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 4}" @click="activeTab = 4">
		<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 5}" @click="activeTab = 5">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M17 12C19.7614 12 22 9.76142 22 7C22 4.23858 19.7614 2 17 2C14.2386 2 12 4.23858 12 7C12 7.79984 12.1878 8.55582 12.5217 9.22624C12.6105 9.4044 12.64 9.60803 12.5886 9.80031L12.2908 10.9133C12.1615 11.3965 12.6035 11.8385 13.0867 11.7092L14.1997 11.4114C14.392 11.36 14.5956 11.3895 14.7738 11.4783C15.4442 11.8122 16.2002 12 17 12Z" stroke="#1C274C" stroke-width="1.5" />
		<path d="M15 7H19M17 9L17 5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		@@ -80,10 +94,10 @@
		</svg>

		</a>
		<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 4}">Teléfonos</span>
		<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 5}">Teléfonos</span>
		</li>
		<li class="mx-auto">
		<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 5}" @click="activeTab = 5">
		<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 6}" @click="activeTab = 6">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M12 6C8.68629 6 6 8.68629 6 12C6 13.6569 6.67157 15.1569 7.75736 16.2426M16.2426 16.2426C17.3284 15.1569 18 13.6569 18 12C18 10.7733 17.6318 9.63251 17 8.6822" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M12 2C17.5228 2 22 6.47715 22 12C22 14.7614 20.8807 17.2614 19.0711 19.0711M4.92893 19.0711C3.11929 17.2614 2 14.7614 2 12C2 8.29859 4.01099 5.06687 7 3.33782" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		@@ -92,10 +106,10 @@
		</svg>

		</a>
		<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 5}">Redes sociales</span>
		<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 6}">Redes sociales</span>
		</li>
		<li class="mx-auto">
		<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 6}" @click="activeTab = 6">
		<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 7}" @click="activeTab = 7">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M10.5 22V20M14.5 22V20" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		<path d="M11 20V20.75H11.75V20H11ZM1.25 12C1.25 12.4142 1.58579 12.75 2 12.75C2.41421 12.75 2.75 12.4142 2.75 12H1.25ZM2.75 16C2.75 15.5858 2.41421 15.25 2 15.25C1.58579 15.25 1.25 15.5858 1.25 16H2.75ZM14 19.25C13.5858 19.25 13.25 19.5858 13.25 20C13.25 20.4142 13.5858 20.75 14 20.75V19.25ZM21.25 11.25C21.25 11.6642 21.5858 12 22 12C22.4142 12 22.75 11.6642 22.75 11.25H21.25ZM17.5 5.25C17.0858 5.25 16.75 5.58579 16.75 6C16.75 6.41421 17.0858 6.75 17.5 6.75V5.25ZM22.75 15C22.75 14.5858 22.4142 14.25 22 14.25C21.5858 14.25 21.25 14.5858 21.25 15H22.75ZM7 5.25C6.58579 5.25 6.25 5.58579 6.25 6C6.25 6.41421 6.58579 6.75 7 6.75V5.25ZM9 19.25C8.58579 19.25 8.25 19.5858 8.25 20C8.25 20.4142 8.58579 20.75 9 20.75V19.25ZM15 20.75C15.4142 20.75 15.75 20.4142 15.75 20C15.75 19.5858 15.4142 19.25 15 19.25V20.75ZM11 19.25H4.23256V20.75H11V19.25ZM4.23256 19.25C3.51806 19.25 2.75 18.5323 2.75 17.3953H1.25C1.25 19.1354 2.48104 20.75 4.23256 20.75V19.25ZM6.5 6.75C8.46677 6.75 10.25 8.65209 10.25 11.25H11.75C11.75 8.04892 9.50379 5.25 6.5 5.25V6.75ZM6.5 5.25C3.49621 5.25 1.25 8.04892 1.25 11.25H2.75C2.75 8.65209 4.53323 6.75 6.5 6.75V5.25ZM10.25 17V20H11.75V17H10.25ZM10.25 11.25V17H11.75V11.25H10.25ZM2.75 12V11.25H1.25V12H2.75ZM2.75 17.3953V16H1.25V17.3953H2.75ZM19.7931 19.25H14V20.75H19.7931V19.25ZM21.25 17.4253C21.25 18.5457 20.4934 19.25 19.7931 19.25V20.75C21.5305 20.75 22.75 19.1488 22.75 17.4253H21.25ZM22.75 11.25C22.75 8.04892 20.5038 5.25 17.5 5.25V6.75C19.4668 6.75 21.25 8.65209 21.25 11.25H22.75ZM21.25 15V17.4253H22.75V15H21.25ZM7 6.75H18V5.25H7V6.75ZM9 20.75H15V19.25H9V20.75Z" fill="#1C274C" />
		@@ -104,17 +118,17 @@
		</svg>

		</a>
		<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 6}">Correos electrónicos</span>
		<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 7}">Correos electrónicos</span>
		</li>
		<li class="mx-auto">
		<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 7}" @click="activeTab = 7">
		<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 8}" @click="activeTab = 8">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M8.5 12.5L10.5 14.5L15.5 9.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
		<path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" />
		</svg>

		</a>
		<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 7}">Guardar contacto</span>
		<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 8}">Guardar contacto</span>
		</li>
		</ul>
		</div>
		@@ -217,23 +231,36 @@
		@endforeach
		</select>
		</div>
		</div>
		<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>
		<div x-show="activeTab === 2">
		<div id="dynamicFormContainerGrupos" class="grid grid-cols-2 md:grid-cols-2 gap-5 form-group relative">
		<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" multiple>
		<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">
		<option value="null" selected>Selecciona una opción</option>
		@foreach($subgrupos as $subgrupo)
		<option value="{{ $subgrupo->id }}">{{ $subgrupo->nombre }}</option>
		@endforeach
		</select>

		<!-- TODO Intituciones pendientes -->
		</div>

		</div>
		<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>
		<button type="button" class="btn btn-primary" id="agregarBtnRed">Agregar</button>
		<br>
		</div>

		<div x-show="activeTab === 2">
		<div x-show="activeTab === 3">
		<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
		<div>
		<label for="domicilio_oficial">Domicilio oficial</label>
		@@ -262,8 +289,7 @@
		</div>
		<br>
		</div>

		<div x-show="activeTab === 3">
		<div x-show="activeTab === 4">
		<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
		<div>
		<label for="domicilio_par">Domicilio particular</label>
		@@ -292,7 +318,7 @@
		</div>
		<br>
		</div>
		<div x-show="activeTab === 4">
		<div x-show="activeTab === 5">
		<div id="dynamicFormContainerTel">
		<div class="grid grid-cols-1 md:grid-cols-9 gap-5 form-group relative mb-2">
		<fieldset>
		@@ -352,7 +378,7 @@
		<button type="button" class="btn btn-primary" id="agregarBtnTel">Agregar</button>
		<br>
		</div>
		<div x-show="activeTab === 5">
		<div x-show="activeTab === 6">
		<div id="dynamicFormContainerRed">
		<div class="grid grid-cols-1 md:grid-cols-3 gap-5 form-group relative">
		<div>
		@@ -383,7 +409,7 @@
		<button type="button" class="btn btn-primary" id="agregarBtnRed">Agregar</button>
		<br>
		</div>
		<div x-show="activeTab === 6">
		<div x-show="activeTab === 7">
		<div id="dynamicFormContainerCorreo">
		<div class="grid grid-cols-1 md:grid-cols-3 gap-5 form-group relative">
		<div>
		@@ -412,7 +438,7 @@
		<button type="button" class="btn btn-primary" id="agregarBtnCorreo">Agregar</button>
		<br>
		</div>
		<div x-show="activeTab === 7">
		<div x-show="activeTab === 8">
		<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>
		@@ -442,20 +468,7 @@
		<link rel="stylesheet" href="/assets/css/jquery.toast.css">
		<script src="/assets/js/jquery.toast.js"></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

		<script>

		document.addEventListener('DOMContentLoaded', function() {
		$('#subgrupo_id').select2({
		placeholder: 'Selecciona una opción',
		allowClear: true,
		width: '100%',
		containerCssClass: 'tailwind-select',
		dropdownCssClass: 'tailwind-dropdown',
		});
		});
		document.addEventListener("DOMContentLoaded", function(e) {
		// default
		var els = document.querySelectorAll(".selectize");
		@@ -471,7 +484,7 @@
		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);
		NiceSelect.bind(document.getElementById("subgrupo_id"), options);

		document.querySelectorAll('.nice-select .current').forEach(el => {
		if (el.textContent.trim() === 'Select an option') {