304 lines
16 KiB
HTML
304 lines
16 KiB
HTML
<!-- Container Principal -->
|
|
<div x-data="tramitesForm" class="bg-white rounded-lg shadow">
|
|
<div class="mx-auto py-8 px-4 sm:px-6 lg:px-8 max-w-5xl mb-8">
|
|
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex z-50 justify-center items-center">
|
|
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
|
|
</div>
|
|
<div class="section-title flex items-center mb-6">
|
|
<span class="w-1 h-10 bg-blue-800 mr-4"></span>
|
|
<h2 class="text-3xl font-bold ">
|
|
Gestión de Trámites
|
|
</h2>
|
|
</div>
|
|
<!-- Subtítulo -->
|
|
<h3 class="font-semibold text-xl mt-4">
|
|
PROCESO PARA ADQUIRIR EL SERVICIO DE GAS
|
|
</h3>
|
|
<p class="text-black mt-2">
|
|
Si a un no cuenta con el servicio de instalación del gas natural de Gases del Oriente ahora es más fácil. El
|
|
procedimiento a seguir es el siguiente:
|
|
</p>
|
|
<div class=" shadow-[0_5px_25px_rgba(0,0,0,0.1)] rounded-2xl p-6 mt-4">
|
|
<label class="block mb-2" for="desc_adquirir">Descripción de adquirir</label>
|
|
<textarea id="desc_adquirir" x-model="desc_adquirir" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
|
|
</div>
|
|
<!-- Section with 3 cards below the description -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
|
|
<!-- Card 1 -->
|
|
<div class=" shadow-[0_5px_25px_rgba(0,0,0,0.1)] rounded-2xl p-4 flex items-center">
|
|
<img src="/img/img38.webp" alt="Phone Icon" class="w-16 h-16 mr-4">
|
|
<p class="text-black">
|
|
<label class="block mb-2" for="paso_1">Paso 1</label>
|
|
<textarea id="paso_1" x-model="paso_1" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Card 2 -->
|
|
<div class=" shadow-[0_5px_25px_rgba(0,0,0,0.1)] rounded-2xl p-4 flex items-center">
|
|
<img src="/img/img37.webp" alt="Letter Icon" class="w-16 h-16 mr-4">
|
|
<p class="text-black">
|
|
<label class="block mb-2" for="paso_2">Paso 2</label>
|
|
<textarea id="paso_2" x-model="paso_2" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Card 3 -->
|
|
<div class=" shadow-[0_5px_25px_rgba(0,0,0,0.1)] rounded-2xl p-4 flex items-center">
|
|
<img src="/img/img36.webp" alt="Building Icon" class="w-16 h-16 mr-4">
|
|
<p class="text-black">
|
|
<label class="block mb-2" for="paso_3">Paso 3</label>
|
|
<textarea id="paso_3" x-model="paso_3" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-black mt-8">
|
|
Cuando la solicitud de instalación es para servicio residencial, la empresa programará la visita al bien inmueble
|
|
indicado, dentro de los ocho (8) días siguientes a la recepción de la solicitud, con el fin de verificar la
|
|
disponibilidad de red, que la vivienda cumpla con las condiciones técnicas y físicas para la viabilidad del
|
|
servicio. Si el inmueble cumple con dichas especificaciones, el asesor comercial procede a solicitar la
|
|
documentación requerida para la suscripción del contrato:
|
|
</p>
|
|
|
|
<div class="mt-8 mb-8 p-6 rounded-2xl shadow-[0_5px_25px_rgba(0,0,0,0.1)]">
|
|
<label class="block mb-2" for="doc_res">Documento Residencial</label>
|
|
<textarea id="doc_res" x-model="doc_res" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
|
|
</div>
|
|
|
|
<p class="text-black mt-8">
|
|
Si el servicio a instalar corresponde a un Usuario potencial No Residencial, se emitirá un presupuesto dentro de
|
|
los ocho (8) días siguientes a la visita el cual contendrá el valor de la instalación, y posterior a la
|
|
aceptación, se recibirá la documentación solicitada con el cual se suscribirá el contrato. Si usted cuenta con la
|
|
instalación interna debidamente construida por una firma constructora y reparadora inscrita ante la
|
|
Superintendencia de Industria y Comercio y ante nuestra empresa, será necesario que la solicitud del servicio sea
|
|
realizada únicamente en el canal presencial de nuestras oficinas y dar cumplimiento a los requisitos especificados
|
|
a continuación:
|
|
</p>
|
|
|
|
<div class="mt-8 mb-8 p-6 rounded-2xl shadow-[0_5px_25px_rgba(0,0,0,0.1)]">
|
|
<label class="block mb-2" for="doc_nores">Documento No Residencial</label>
|
|
<textarea id="doc_nores" x-model="doc_nores" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
|
|
</div>
|
|
|
|
<p class="text-black font-semibold">
|
|
Nota: GASES DEL ORIENTE S.A. E.S.P. informa que ningún funcionario de la compañía está autorizado para recibir
|
|
dinero o solicitar dádiva alguna para la instalación del servicio.
|
|
</p>
|
|
|
|
<!-- Formulario de Archivos -->
|
|
<div class="p-6 rounded-lg border w-full shadow mt-6 mb-4">
|
|
<h2 class="text-xl font-bold mb-2">Archivos</h2>
|
|
<label class="block mb-2" for="arc_venta_comp">Archivo de Venta Completa</label>
|
|
<input type="file" id="arc_venta_comp" @change="handleFileChange($event, 'arc_venta_comp')" class="border border-gray-300 rounded w-full p-2 mb-2" accept=".jpg,.png,.pdf,.doc,.docx">
|
|
<p x-show="arc_venta_comp_path" class="mt-2 text-sm text-gray-600">
|
|
Archivo actual: <a :href="`${window.location.origin}/${arc_venta_comp_path}`" target="_blank" class="text-blue-500 underline" x-text="arc_venta_comp_path"></a>
|
|
</p>
|
|
|
|
<label class="block mb-2" for="arc_derecho">Archivo de Derecho</label>
|
|
<input type="file" id="arc_derecho" @change="handleFileChange($event, 'arc_derecho')" class="border border-gray-300 rounded w-full p-2 mb-2" accept=".jpg,.png,.pdf,.doc,.docx">
|
|
<p x-show="arc_derecho_path" class="mt-2 text-sm text-gray-600">
|
|
Archivo actual: <a :href="`${window.location.origin}/${arc_derecho_path}`" target="_blank" class="text-blue-500 underline" x-text="arc_derecho_path"></a>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="section-title flex items-center mb-6">
|
|
<span class="w-1 h-10 bg-blue-800 mr-4"></span>
|
|
<h2 class="text-3xl font-bold ">
|
|
Instructivo y carta para el diligenciamiento de la solicitud de disponibilidad de servicio.
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Subtitle Section -->
|
|
<h2 class="font-semibold text-lg text-[#5082e6] mb-4">
|
|
INSTRUCTIVO SOLICITUD DE DISPONIBILIDAD DE SERVICIO CARTA SOLICITUD DE DISPONIBILIDAD DE SERVICIO
|
|
</h2>
|
|
<label class="block mb-2" for="arc_instruct">Archivo de Instructivo</label>
|
|
<input type="file" id="arc_instruct" @change="handleFileChange($event, 'arc_instruct')" class="border border-gray-300 rounded w-full p-2 mb-2" accept=".jpg,.png,.pdf,.doc,.docx">
|
|
<p x-show="arc_instruct_path" class="mt-2 text-sm text-gray-600">
|
|
Archivo actual: <a :href="`${window.location.origin}/${arc_instruct_path}`" target="_blank" class="text-blue-500 underline" x-text="arc_instruct_path"></a>
|
|
</p>
|
|
|
|
<!-- Requirements Title -->
|
|
<h3 class="font-semibold text-xl mt-4 mb-4">
|
|
REQUISITOS PARA TERMINACIÓN Y ANULACIÓN DEL SERVICIO
|
|
</h3>
|
|
|
|
<!-- Content Section -->
|
|
<div class="flex flex-col lg:flex-row items-center lg:items-start lg:space-x-8 mb-8">
|
|
<!-- Left Text Content -->
|
|
<div class="lg:w-3/5 mb-6 lg:mb-0">
|
|
<div class=" p-6 rounded-2xl shadow-[0_5px_25px_rgba(0,0,0,0.1)]">
|
|
<label class="block mb-2" for="anul_servicio">Anulación de Servicio</label>
|
|
<textarea id="anul_servicio" x-model="anul_servicio" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Image Content -->
|
|
<div class="lg:w-2/5">
|
|
<img src="/img/img39.webp" alt="Person writing on paper" class="mx-auto lg:mx-0" />
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="font-semibold text-xl mt-4 mb-4">
|
|
EN CASO DE ANULACIÓN DE SERVICIO
|
|
</h3>
|
|
<!-- Content Section -->
|
|
<p class="text-black mt-4">
|
|
Para <strong>GASES DEL ORIENTE S.A. E.S.P.</strong>, anular el contrato de prestación del servicio de gas natural
|
|
del inmueble antes señalado, es necesario que el titular presente la solicitud por escrito acompañada de una
|
|
fotocopia de la cédula de ciudadanía. En caso de presentar la anulación una persona diferente al suscriptor del
|
|
servicio, se debe acreditar propiedad sobre el inmueble y presentar la siguiente información:
|
|
</p>
|
|
|
|
<!-- Information Box -->
|
|
<div class="mt-4 bg-white p-6 rounded-2xl shadow-[0_5px_25px_rgba(0,0,0,0.1)]">
|
|
<label class="block mb-2" for="act_suscriptor">Actualizar Suscriptor</label>
|
|
<textarea id="act_suscriptor" x-model="act_suscriptor" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
|
|
</div>
|
|
|
|
<!-- Title Section -->
|
|
<h3 class="font-semibold text-xl mt-4 mb-4">
|
|
ACTUALIZACIÓN DE SUSCRIPTOR, ESTRATO O DIRECCIÓN DEL SERVICIO
|
|
</h3>
|
|
<!-- Content Section -->
|
|
<p class="text-black mt-4">
|
|
Los usuarios interesados en realizar la actualización de suscriptor, estrato o dirección del servicio de gas
|
|
combustible deberán presentarse en las oficinas de Gases del Oriente S.A. E.S.P. o enviar solicitud escrita
|
|
firmada por el o los propietarios del inmueble y presentar los siguientes documentos:
|
|
</p>
|
|
|
|
<!-- Documents List -->
|
|
<h3 class="text-lg mt-4">Algunos de estos documentos:</h3>
|
|
<div class="mt-4 p-6 rounded-2xl shadow-[0_5px_25px_rgba(0,0,0,0.1)]">
|
|
<label class="block mb-2" for="act_est_res">Actualizar Estado Res</label>
|
|
<textarea id="act_est_res" x-model="act_est_res" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
|
|
</div>
|
|
|
|
<!-- Title Section -->
|
|
<h3 class="font-semibold text-xl mt-4 mb-4">
|
|
DOCUMENTACIÓN REQUERIDA PARA ACTUALIZACIÓN DE ESTRATO
|
|
</h3>
|
|
|
|
<div class="mt-4 p-6 rounded-2xl shadow-[0_5px_25px_rgba(0,0,0,0.1)]">
|
|
<div class="flex items-start mb-4">
|
|
<p class="font-semibold">Para usuarios residenciales</p>
|
|
</div>
|
|
<label class="block mb-2" for="act_est_nores">Actualizar Estado No Residencial</label>
|
|
<textarea id="act_est_nores" x-model="act_est_nores" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
|
|
<div class="flex items-start mb-4 mt-6">
|
|
<p class="font-semibold">Para usuarios no residenciales</p>
|
|
</div>
|
|
<label class="block mb-2" for="act_direccion">Actualizar Dirección</label>
|
|
<textarea id="act_direccion" x-model="act_direccion" class="border border-gray-300 rounded w-full p-2 mb-4" required></textarea>
|
|
</div>
|
|
|
|
<!-- Botón de Guardar -->
|
|
<div class="mt-6 text-right">
|
|
<button @click.prevent="submitUpdate" class="bg-[#8eb02f] text-white px-4 py-2 rounded">Guardar Cambios</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alpine.js Script -->
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('tramitesForm', () => ({
|
|
desc_adquirir: '',
|
|
paso_1: '',
|
|
paso_2: '',
|
|
paso_3: '',
|
|
doc_res: '',
|
|
doc_nores: '',
|
|
anul_servicio: '',
|
|
act_suscriptor: '',
|
|
act_est_res: '',
|
|
act_est_nores: '',
|
|
act_direccion: '',
|
|
arc_venta_comp: null,
|
|
arc_venta_comp_path: '',
|
|
arc_derecho: null,
|
|
arc_derecho_path: '',
|
|
arc_instruct: null,
|
|
arc_instruct_path: '',
|
|
loading: false,
|
|
id_dato : 0,
|
|
|
|
init() {
|
|
this.loadData();
|
|
},
|
|
|
|
loadData() {
|
|
this.loading = true;
|
|
fetch('/loadtramites') // Llama al endpoint que devuelve el registro de trámites
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data) {
|
|
this.id_dato = data.ID;
|
|
this.desc_adquirir = data.desc_adquirir;
|
|
this.paso_1 = data.paso_1;
|
|
this.paso_2 = data.paso_2;
|
|
this.paso_3 = data.paso_3;
|
|
this.doc_res = data.doc_res;
|
|
this.doc_nores = data.doc_nores;
|
|
this.anul_servicio = data.anul_servicio;
|
|
this.act_suscriptor = data.act_suscriptor;
|
|
this.act_est_res = data.act_est_res;
|
|
this.act_est_nores = data.act_est_nores;
|
|
this.act_direccion = data.act_direccion;
|
|
this.arc_venta_comp_path = data.arc_venta_comp;
|
|
this.arc_derecho_path = data.arc_derecho;
|
|
this.arc_instruct_path = data.arc_instruct;
|
|
}
|
|
})
|
|
.catch(error => console.error('Error:', error))
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
|
|
handleFileChange(event, field) {
|
|
if (field === 'arc_venta_comp') {
|
|
this.arc_venta_comp = event.target.files[0];
|
|
} else if (field === 'arc_derecho') {
|
|
this.arc_derecho = event.target.files[0];
|
|
} else if (field === 'arc_instruct') {
|
|
this.arc_instruct = event.target.files[0];
|
|
}
|
|
},
|
|
|
|
submitUpdate() {
|
|
this.loading = true;
|
|
const formData = new FormData();
|
|
formData.append('desc_adquirir', this.desc_adquirir);
|
|
formData.append('paso_1', this.paso_1);
|
|
formData.append('paso_2', this.paso_2);
|
|
formData.append('paso_3', this.paso_3);
|
|
formData.append('doc_res', this.doc_res);
|
|
formData.append('doc_nores', this.doc_nores);
|
|
formData.append('anul_servicio', this.anul_servicio);
|
|
formData.append('act_suscriptor', this.act_suscriptor);
|
|
formData.append('act_est_res', this.act_est_res);
|
|
formData.append('act_est_nores', this.act_est_nores);
|
|
formData.append('act_direccion', this.act_direccion);
|
|
|
|
if (this.arc_venta_comp) formData.append('arc_venta_comp', this.arc_venta_comp);
|
|
if (this.arc_derecho) formData.append('arc_derecho', this.arc_derecho);
|
|
if (this.arc_instruct) formData.append('arc_instruct', this.arc_instruct);
|
|
|
|
fetch('/app/tramites/'+this.id_dato, {
|
|
method: 'PUT',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(() => {
|
|
this.loadData();
|
|
})
|
|
.catch(error => console.error('Error:', error))
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
}
|
|
}));
|
|
});
|
|
</script>
|
|
</div>
|