Files
AlquilaFacil/Front/src/Componentes/ModalVeryAceptarContrato.svelte
2025-02-17 17:11:18 -03:00

95 lines
2.6 KiB
Svelte

<script lang="ts">
import type { MensajeDto } from "../types";
let {getContrato, onConfirm, onCancel, onClose, men
} : {
getContrato:(idcontrato:number)=>void,
onConfirm:(idcontrato:number)=>void,
onCancel:(idcontrato:number)=>void,
onClose:()=>void,
men: MensajeDto
} = $props();
let contratoDescargado = $state(false);
let leiContrato:boolean = $state(false);
function descargarContrato() {
let idcontrato = Number(men.mensaje.split(" ").reverse()[0]);
getContrato(idcontrato);
contratoDescargado = true;
}
function confirmar() {
if (leiContrato) {
let idcontrato = Number(men.mensaje.split(" ").reverse()[0]);
onConfirm(idcontrato);
onClose();
}
}
function rechazar() {
if (leiContrato) {
let idcontrato = Number(men.mensaje.split(" ").reverse()[0]);
onCancel(idcontrato);
onClose();
}
}
</script>
<div class="modal show d-block" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Contrato</h5>
<button type="button" class="btn-close" onclick={onClose} aria-label="Cerrar"></button>
</div>
<div class="modal-body">
<p>Por favor, descargue y lea el contrato antes de aceptar o rechazar.</p>
<div class="d-flex flex-column align-items-center">
<button class="btn btn-primary mb-3" onclick={descargarContrato}>
Descargar contrato
</button>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="leiContratoCheckbox"
bind:checked={leiContrato}
disabled={!contratoDescargado}
/>
<label class="form-check-label" for="leiContratoCheckbox">
Leí el contrato con el agente de la inmobiliaria
</label>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-between">
<button
class="btn btn-success"
onclick={confirmar}
disabled={!leiContrato}
>
Aceptar
</button>
<button
class="btn btn-danger"
onclick={rechazar}
disabled={!leiContrato}
>
Rechazar
</button>
<button class="btn btn-secondary" onclick={onClose}>
Cerrar
</button>
</div>
</div>
</div>
</div>
<style>
.modal {
background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
}
</style>