Boton y formulario de agregar subgrupos (879a5487) · Commits · Alfonso Rafael Solis Rangel / AgendaGobernador

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

+51 −37

Original line number	Diff line number	Diff line
		@@ -120,21 +120,15 @@
		<br>
		</div>
		<div x-show="activeTab === 3">
		<div id="dynamicFormContainerRed">
		<div class="grid grid-cols-1 md:grid-cols-3 gap-5 form-group relative">
		<div>
		<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 id="dynamicFormContainerSubgrupos">
		<div class="grid grid-cols-1 md:grid-cols-2 gap-5 form-group relative">
		<div class="mb-5">
		<label for="tipo_red_social">Tipo</label>
		<select id="tipo_red_social" name="tipo_red_social[]" 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">Selecciona una opción</option>
		<option value="Facebook">Facebook</option>
		<option value="Instagram">Instagram</option>
		<option value="Twitter">Twitter</option>
		<option value="Página Web">Página Web</option>
		<option value="LinkedIn">LinkedIn</option>
		<label for="subgrupo_id">Subgrupo</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">
		<option value="null" selected>Selecciona una opción</option>
		@foreach($subgrupos as $subgrupo)
		<option value="{{ $subgrupo->id }}">{{ $subgrupo->nombre }}</option>
		@endforeach
		</select>
		</div>
		<div class="absolute top-0 right-0 mt-6 mr-2">
		@@ -147,7 +141,7 @@
		</div>
		</div>
		</div>
		<button type="button" class="btn btn-primary" id="agregarBtnRed">Agregar</button>
		<button type="button" class="btn btn-primary" id="agregarBtnSubgrupo">Agregar</button>
		<br>
		</div>
		<div x-show="activeTab === 4">
		@@ -214,7 +208,7 @@
		NiceSelect.bind(select);
		});
		NiceSelect.bind(document.getElementById("grupo_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') {
		@@ -240,21 +234,44 @@
		const agregarBtnSubgrupo = document.getElementById('agregarBtnSubgrupo');
		const dynamicFormContainerSubgrupos = document.getElementById('dynamicFormContainerSubgrupos');

		// agregarBtnSubgrupo.addEventListener('click', function(){
		// const newFormGroup = document.createElement('div');
		// newFormGroup.innerHTML = `
		// <div class="mb-5">
		// <label for="subgrupo_id">Subgrupo</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">
		// <option value="null" selected>Selecciona una opción</option>
		// @foreach($subgrupos as $subgrupo)
		// <option value="{{ $subgrupo->id }}">{{ $subgrupo->nombre }}</option>
		// @endforeach
		// </select>
		// </div>
		// `;
		// dynamicFormContainerSubgrupos.appendChild(newFormGroup);
		// });
		// Añadir evento de clic para eliminar a los grupos iniciales
		document.querySelectorAll('.removeBtn').forEach(function(btn) {
		btn.addEventListener('click', function() {
		btn.closest('.form-group').remove();
		});
		});

		agregarBtnSubgrupo.addEventListener('click', function(){
		const newFormGroup = document.createElement('div');
		newFormGroup.classList.add('grid', 'grid-cols-1', 'md:grid-cols-2', 'gap-5', 'form-group', 'relative');

		const newSelectSubgrupo = `subgrupo_id_${Date.now()}`;
		newFormGroup.innerHTML = `
		<div class="mb-5">
		<label for="${newSelectSubgrupo}">Subgrupo</label>
		<select id="${newSelectSubgrupo}" 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>
		</div>
		<div class="absolute top-0 right-0 mt-6 mr-2">
		<button type="button" class="btn btn-outline-danger removeBtn">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M14.5 9.50002L9.5 14.5M9.49998 9.5L14.5 14.5" stroke="#e7515a" stroke-width="1.5" stroke-linecap="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="#e7515a" stroke-width="1.5" stroke-linecap="round"/>
		</svg>
		</button>
		</div>
		`;
		dynamicFormContainerSubgrupos.appendChild(newFormGroup);
		NiceSelect.bind(document.getElementById(newSelectSubgrupo), options);
		// Añadir evento de clic para eliminar
		newFormGroup.querySelector('.removeBtn').addEventListener('click', function() {
		newFormGroup.remove();
		});
		});

		agregarBtnGrupo.addEventListener('click', function(){
		const newFormGroup = document.createElement('div');
		@@ -283,12 +300,9 @@
		`;
		dynamicFormContainerGrupos.appendChild(newFormGroup);
		NiceSelect.bind(document.getElementById(newSelectId), options);
		});

		// Añadir evento de clic para eliminar a los grupos iniciales
		document.querySelectorAll('.removeBtn').forEach(function(btn) {
		btn.addEventListener('click', function() {
		btn.closest('.form-group').remove();
		// Añadir evento de clic para eliminar
		newFormGroup.querySelector('.removeBtn').addEventListener('click', function() {
		newFormGroup.remove();
		});
		});