<template>
    <div class="layout-px-spacing">
        <div class="row layout-top-spacing">
            <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                <div class="panel p-3">
                    <div class="row">
                        <div class="col-xl-12 col-lg-12 col-sm-12">
                            <div class="text-center titulo-dorado">
                                <h1 class="pull-left">Vales</h1>
                                <button
                                    class="btn btn-black pull-right m-1"
                                    @click="refrescar"
                                >
                                    Refrescar
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="w-100">
                        <div class="row">
                            <div class="col-lg-10 mt-4">
                                <input v-model="search" class="form-control w-100 product-search" placeholder="Buscar por folio, fecha, cliente, email o teléfono..." @keyup.enter="getBuscar" />
                            </div>
                            <div class="col-lg-2">
                                <div class="form-group form-inline pull-right VueTables__limit">
                                    <div class="VueTables__limit-field">
                                        <label>Resultados</label>
                                        <multiselect
                                            v-model="pageSize"
                                            :options="options_select2"
                                            :searchable="true"
                                            :preselect-first="true"
                                            selected-label=""
                                            select-label=""
                                            deselect-label=""
                                            placeholder="Seleccionar..."
                                            :showNoOptions="false"
                                            :showNoResults="false"
                                            @update:model-value="getBuscar"
                                        >
                                        </multiselect>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="custom-table">
                        <v-client-table
                            :data="obtener_vales"
                            :columns="columns1"
                            :options="table_option1"
                        >
                            <template #total="item">
                                {{ currency(item.row.total) }}
                            </template>
                            <template #cliente_nombre="item">
                                <span v-if="item.row.cliente_nombre">
                                    {{ item.row.cliente_nombre }}
                                    <br>
                                    <small class="text-muted">{{ item.row.cliente_email }}</small>
                                </span>
                                <span v-else class="text-muted">Sin cliente</span>
                            </template>
                            <template #cancelar="item">
                                <button class="btn btn-success" @click="getVentaCanId(item.row.id)" v-show="item.row.estatus == 'activo'">
                                    Activo&nbsp
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check" data-v-5522efca=""><polyline points="20 6 9 17 4 12"></polyline></svg>
                                </button>
                                <button class="btn btn-estatus" v-show="item.row.cancelado == 'si'">
                                    inactivo&nbsp
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x" data-v-5522efca=""><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                                </button>
                            </template>
                            <template #asignado="item">
                                <span v-if="item.row.asignado === 'Asignado'" class="badge badge-success">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px;">
                                        <polyline points="20 6 9 17 4 12"></polyline>
                                    </svg>
                                    Asignado
                                </span>
                                <span v-else class="badge badge-warning">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px;">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <line x1="12" y1="8" x2="12" y2="12"></line>
                                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
                                    </svg>
                                    Sin asignar
                                </span>
                            </template>
                            <template #ver="item">
                                <button class="btn btn-success" @click="getValeId(item.row.id)">
                                    Ver&nbsp
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye" data-v-5522efca=""><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                                </button>
                            </template>
                            <template #actions="item">
                                <button class="btn btn-success" @click="abrir_vale(item.row.id)" v-if="item.row.estatus=='activo'">
                                    Vale&nbsp
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text" data-v-5522efca=""><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                                </button>
                            </template>
                        </v-client-table>
                        <div class="VueTables VueTables--client">
                            <div class="text-center">
                                <pagination v-model="page" :records="totalPages" :per-page="pageSize" @paginate="getValeAll" :options="options_page"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Register Modal -->
        <div
            class="modal fade"
            id="registerModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="registerModalLabel"
            aria-hidden="true"
            v-show="true"
        >
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header titulo-dorado" id="registerModalLabel">
                        <h4 class="modal-title">Ver</h4>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        <div class="row justify-content-md-center">
                            <div class="col-12">
                                <h3 v-if="dataPreview.estatus!='activo'" style="color: red;">
                                    <b>Este vale fue cancelado</b>
                                </h3>
                                <h3 v-if="dataPreview.cliente_nombre">
                                    <b>Cliente: {{ dataPreview.cliente_nombre }}</b>
                                    <br>
                                    <small class="text-muted">{{ dataPreview.cliente_email }} | {{ dataPreview.cliente_celular }}</small>
                                </h3>
                                <h3 v-if="dataPreview.ventas_detalles">
                                    <b>Venta folio: {{ dataPreview.ventas_detalles.venta_id }}</b>
                                </h3>
                            </div>
                            <div class="col-md-12 col-sm-12 col-12">
                                <table class="table mt-3">
                                    <thead>
                                        <tr>
                                            <th width="50%"><b>Fecha de registro: </b></th>
                                            <th col>{{ dataPreview.fecha_asignada_custom }}</th>
                                        </tr>
                                        <tr>
                                            <th width="50%"><b>Fecha de vigencia: </b></th>
                                            <th>{{ dataPreview.vigencia_custom }}</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Register pago vale -->
        <div
            class="modal fade"
            id="registervale"
            tabindex="-1"
            role="dialog"
            aria-labelledby="registerModalLabel"
            aria-hidden="true"
            v-show="true"
        >
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header titulo-dorado" id="registerModalLabel">
                        <h4 class="modal-title">Vale</h4>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                            <div v-if="dataPreview.id">
                                <div :id="'printable-content-vale-'+dataPreview.id" style="width: 100% !important; background: white;">
                                    <div class="row justify-content-md-center">
                                        <div class="col-xl-6 col-lg-6 col-sm-6">
                                            <table>
                                                <tr>
                                                    <th colspan="3" style="text-align: center;">
                                                        <img
                                                            src="@/assets/images/default/logo_negro.png"
                                                            class="navbar-logo"
                                                            alt="logo"
                                                        />
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th style="text-align: left; padding-right: 10px;">
                                                        <b>Vigencia: </b><br>
                                                        {{ moment(new Date(dataPreview.vigencia)).format("DD-MM-YYYY") }}
                                                    </th>
                                                    <th></th>
                                                    <th style="text-align: right; padding-right: 10px;">
                                                        <b>Folio:</b><br>
                                                        {{ dataPreview.id }}
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th colspan="3" style="text-align: center;">
                                                        <b><h3>Vale</h3></b>
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th colspan="3" style="text-align: center;">
                                                        <QRCodeVue3
                                                            :key="dataPreview.id"
                                                            :width="200"
                                                            :height="200"
                                                            :value="dataPreview.token"
                                                            :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
                                                            :imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
                                                            :dotsOptions="{
                                                                type: 'square',
                                                                color: '#000000',
                                                                gradient: {
                                                                type: 'linear',
                                                                rotation: 0,
                                                                colorStops: [
                                                                    { offset: 0, color: '#000000' },
                                                                    { offset: 1, color: '#000000' },
                                                                ],
                                                                },
                                                            }"
                                                            :backgroundOptions="{ color: '#ffffff' }"
                                                            :cornersSquareOptions="{ type: 'dot', color: '#000000' }"
                                                            :cornersDotOptions="{ type: undefined, color: '#000000' }"
                                                            fileExt="png"
                                                            :download="false"
                                                            myclass="my-qur"
                                                            imgclass="img-qr"
                                                            downloadButton="my-button"
                                                            :downloadOptions="{ name: 'vqr', extension: 'png' }"
                                                        />
                                                    </th>
                                                </tr>
                                                <tr v-if="dataPreview.venta_detalle[0]">
                                                    <th colspan="3" style="text-align: center;">
                                                        <b><h6>Tratamiento</h6></b>
                                                    </th>
                                                </tr>
                                                <tr v-if="dataPreview.venta_detalle[0]">
                                                    <td colspan="3" style="text-align: center;">
                                                        {{ dataPreview.venta_detalle[0].descripcion }}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="3">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td colspan="3" style="text-align: center; margin-top: 100px;">
                                                        <p>El Vale no es reembolsable ni canjeable por dinero en efectivo en todo o en
                                                        parte, y no se emiten reembolsos por cualquier saldo no utilizado. Es de un
                                                        solo uso y queda invalidado.</p>
                                                        <p>El Vale no puede ser combinado con otras promociones, descuentos u ofertas
                                                        especiales y está prohibida su reventa.</p>
                                                        <p>La reserva de citas para utilizar el Vale está sujeta a disponibilidad y se
                                                        recomienda hacer la reserva con anticipación.</p>
                                                        <p>En caso de pérdida o uso del vale sin consentimiento, no se proporcionará
                                                        sustitución.</p>
                                                        <p>Válido por un mes al día de su compra.</p>
                                                        <p>Clínica Egurrola se reserva el derecho de modificar estos términos y
                                                        condiciones en cualquier momento sin previo aviso.</p>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group mt-2">
                                    <button
                                        type="button"
                                        class="btn btn-black w-100"
                                        @click="printContent('printable-content-vale-'+dataPreview.id)"
                                    >
                                        Imprimir
                                    </button>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
        <loading v-model:active="isLoading"
        :can-cancel="false"
        :is-full-page="true"/>
        <button
            id="evento_recargar_reservar"
            type="button"
            v-show="false"
            class="btn btn-black"
            @click="getValeAll('si')"
        ></button>
    </div>
</template>
<style>
.table3 .actions svg {
    padding: 2px;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.badge-success {
    color: #fff;
    background-color: #10b981;
}

.badge-warning {
    color: #fff;
    background-color: #f59e0b;
}

.badge svg {
    margin-right: 4px;
}
#printable-content-ticket,
[id^="printable-content-vale-"] {
    width: 80mm;
    font-family: Arial, sans-serif;
    font-size: 20px;
    line-height: 1.5;
    font-weight: bold;
    color: rgb(0, 0, 0) !important;
    -webkit-text-fill-color: rgb(0, 0, 0) !important;
}

@media print {
    @page {
        size: 80mm auto;
        margin: 0;
    }

    body * {
        visibility: hidden;
    }

    #printable-content-ticket,
    #printable-content-ticket * {
        visibility: visible;
        font-family: Arial, sans-serif !important;
        color: rgb(0, 0, 0) !important;
        -webkit-text-fill-color: rgb(0, 0, 0) !important;
        text-shadow: none !important;
        font-weight: bold !important;
        filter: none !important;
    }

    #printable-content-ticket {
        position: absolute;
        left: 0;
        top: 0;
        width: 80mm !important;
        max-width: none !important;
        padding: 0;
        margin: 0;
        transform: scale(1);
    }

    #printable-content-ticket table {
        width: 88% !important;
        table-layout: fixed !important;
        border-collapse: collapse;
        margin: 0;
        padding: 0;
    }

    #printable-content-ticket td,
    #printable-content-ticket th,
    #printable-content-ticket p,
    #printable-content-ticket span,
    #printable-content-ticket div,
    #printable-content-ticket h1,
    #printable-content-ticket h2,
    #printable-content-ticket h3,
    #printable-content-ticket h4,
    #printable-content-ticket h5,
    #printable-content-ticket h6 {
        padding: 2mm 1mm;
        font-size: 22px !important;
        line-height: 1.5 !important;
        font-weight: bold !important;
        white-space: normal;
        word-wrap: break-word;
        color: rgb(0, 0, 0) !important;
        -webkit-text-fill-color: rgb(0, 0, 0) !important;
    }

    #printable-content-ticket h1 {
        font-size: 28px !important;
    }
    #printable-content-ticket h2 {
        font-size: 26px !important;
    }
    #printable-content-ticket h3 {
        font-size: 24px !important;
    }
}
</style>

<script setup>
import { onMounted, ref } from "vue";
import "@/assets/sass/elements/tooltip.scss";
import { useMeta } from "@/composables/use-meta";
import { useAuthStore } from "@/store/AuthStore";
import * as UserRepository from "@/repositories/UserRepository";
import * as ValeRepository from "@/repositories/ValeRepository";
import Pagination from 'v-pagination-3';
import QRCodeVue3 from "qrcode-vue3";

import { useStateStore } from '@/store/StateStore';

import qr_presentacion from "@/assets/images/default/qr_presentacion.png";
// select2
import Multiselect from '@suadelabs/vue3-multiselect';
import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css';

// loading
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/css/index.css';

import axios from "axios";
import moment from "moment";
import { imprimirConConfiguracion, imprimirValeDirecto } from "@/repositories/ImpresionRepository";

useMeta({ title: "EGURROLA" });

const urls = ref(process.env.MIX_URL);
const store = useAuthStore();
const storeState = useStateStore();
const obtener_vales = ref([]);

//formulario crear y eliminar
let registerModal = ref(false);
let registervale = ref(null);
const page = ref(1);
const isLoading = ref(true);
const order = ref({
    name:'id',
    order:'DESC',
});
const search = ref("");
const options_select2 = ref([20, 50, 100]);
const pageSize = ref(20);
const totalPages = ref(0);
const is_entrada = ref(false);
const editedIndex = ref(-1);
const errors = ref({});
const dataPreview = ref({
    fecha_registro:'',
    vigencia_custom:'',
    total:'',
    estatus:'',
    asignado:''
});
const formatter = new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'});

//table 2
const columns1 = ref([
    "id",
    "fecha_asignada_custom",
    "vigencia_custom",
    "cliente_nombre",
    "total",
    "estatus",
    "asignado",
    "ver",
    "actions"
]);
const table_option1 = ref({
    headings: {
        fecha_asignada_custom: (h, row, index) => {
            return "Fecha registro";
        },
        vigencia_custom: (h, row, index) => {
            return "Vigencia";
        },
        cliente_nombre: (h, row, index) => {
            return "Cliente";
        },
        id: (h, row, index) => {
            return "Folio";
        },
        actions: (h, row, index) => {
            return "Impresiones";
        },
    },
    perPage: 100,
    perPageValues: [],
    skin: "table table-hover",
    columnsClasses: { actions: "actions text-center" },
    sortable: [],
    sortIcon: {
        base: "sort-icon-none",
        up: "sort-icon-asc",
        down: "sort-icon-desc",
    },
    pagination: { nav: "scroll", chunk: 5, show: false, dropdown: false },
    resizableColumns: true,
    filterable: false,
    texts: {
        noResults:"No hay registros"
    },
});

const options_page= ref({
    texts: {
        count: "Mostrando {from} a {to} de {count}",
        filter: "",
        filterPlaceholder: "Buscar...",
        limit: "Resultados:",
    }
});

const getValeId = async (id) => {
    try {
        isLoading.value = true;
        const response = await ValeRepository.getValeId(id);
        dataPreview.value = response.data;
        editedIndex.value = id;
        registerModal.show();
        isLoading.value = false;
    } catch (error) {
        console.log(error);S
        isLoading.value = false;
    }
};

const abrir_vale = async (id) => {
    isLoading.value = true;
    const response = await ValeRepository.getValeId(id);
    dataPreview.value = response.data;
    editedIndex.value = id;
    isLoading.value = false;
    registervale.show();
}

const printContent = async (content) => {
    isLoading.value = true;
    
    try {
        // Intentar primero con impresora directa si hay un vale cargado
        if (dataPreview.value && dataPreview.value.id) {
            try {
                // Obtener el token del QR desde dataPreview
                const qrData = dataPreview.value.token || null;
                const response = await imprimirValeDirecto(dataPreview.value.id, qrData);
                isLoading.value = false;
                if (response.success) {
                    showMessage('Se pudo enviar la impresión correctamente', 'success');
                    return;
                }
                // Si falla pero tiene fallback, continuar con impresión normal
                if (response.fallback) {
                    console.log('No se encontró impresora directa, usando impresión normal');
                } else {
                    showMessage(response.message || 'Error al imprimir', 'error');
                    return;
                }
            } catch (error) {
                console.error('Error al imprimir con impresora directa:', error);
                isLoading.value = false;
                // Continuar con impresión normal si falla
            }
        }

        // Si no hay impresora directa o falló, usar impresión normal
        printContentOriginal(content);
        isLoading.value = false;
    } catch (error) {
        console.error('Error al imprimir:', error);
        isLoading.value = false;
        printContentOriginal(content);
    }
};

const printContentOriginal = (content) => {
    const printableContent = document.getElementById(content);
    const printWindow = window.open('', '_blank', 'height=600,width=800');

    const htmlContent = `
        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Ticket</title>
                <style>
                    @page {
                        size: 80mm auto;
                        margin: 0;
                    }

                    * {
                        color: rgb(0, 0, 0) !important;
                        -webkit-text-fill-color: rgb(0, 0, 0) !important;
                        -webkit-print-color-adjust: exact !important;
                        print-color-adjust: exact !important;
                    }

                    body {
                        margin: 0;
                        padding: 0;
                        width: 88%;
                        font-family: Arial, sans-serif;
                        font-weight: bold;
                    }

                    #${content} {
                        width: 100%;
                        margin: 0;
                        padding: 0;
                    }

                    #${content} table {
                        width: 100%;
                        table-layout: fixed;
                        border-collapse: collapse;
                        margin: 0;
                        padding: 0;
                    }

                    #${content} td,
                    #${content} th,
                    #${content} p,
                    #${content} span,
                    #${content} div,
                    #${content} h1,
                    #${content} h2,
                    #${content} h3,
                    #${content} h4,
                    #${content} h5,
                    #${content} h6 {
                        padding: 2mm 1mm;
                        font-size: 22px;
                        line-height: 1.5;
                        font-weight: bold;
                        white-space: normal;
                        word-wrap: break-word;
                        color: rgb(0, 0, 0) !important;
                        -webkit-text-fill-color: rgb(0, 0, 0) !important;
                    }

                    #${content} h1 {
                        font-size: 28px !important;
                    }
                    #${content} h2 {
                        font-size: 26px !important;
                    }
                    #${content} h3 {
                        font-size: 24px !important;
                    }

                    #${content} img {
                        width: 100%;
                        max-width: none;
                        height: auto;
                        margin: 0 auto;
                        display: block;
                    }

                    @media print {
                        * {
                            color: rgb(0, 0, 0) !important;
                            -webkit-text-fill-color: rgb(0, 0, 0) !important;
                            -webkit-print-color-adjust: exact !important;
                            print-color-adjust: exact !important;
                        }
                        body {
                            width: 72%;
                        }
                    }
                </style>
            </head>
            <body>
                ${printableContent.innerHTML}
                <script>
                    window.onload = function() {
                        window.print();
                        setTimeout(function() {
                            window.close();
                        }, 500);
                    }<\/script>
            </body>
        </html>
    `.trim();

    printWindow.document.write(htmlContent);
    printWindow.document.close();
};

const getBuscar = () => {
    getValeAll("si");
}

const currency = (valor) => {
    return formatter.format(valor);
}

const getValeAll = async (inicio="no") => {
    try {
        isLoading.value=true;
        const params={
            search:search.value,
            order:order.value,
            sucursal_id:null,
        }
        if(inicio=="si"){
            page.value=1;
        }
        if(storeState.current_state.sucursal_mode != 0){
            params.sucursal_id=storeState.current_state.sucursal_mode;
        }
        const response = await ValeRepository.getPage(page.value,pageSize.value,params);
        obtener_vales.value = response.data.data;
        totalPages.value= response.data.total;
        pageSize.value= response.data.per_page;
        isLoading.value=false;
    } catch (error) {
        console.log(error);
    }
};

const obtener_user = async () => {
    try {
        const response = await UserRepository.getuser();
        return response;
    } catch (error) {
        console.log(error);
    }
};

const initialize = async () => {
    search.value = "";
    isLoading.value = true;
    page.value = 1;
    pageSize.value = 20;
    totalPages.value = 0;
    is_entrada.value = false;
    order.value={
        name:'id',
        order:'DESC',
    };
    isLoading.value = false;
};

const refrescar = () => {
    initialize();
    getValeAll('si');
}

const showMessage = (msg = '', type = 'success') => {
    const toast = window.Swal.mixin({
        toast: true,
        position: 'top',
        showConfirmButton: false,
        timer: 3000,
    });
    toast.fire({
        icon: type,
        title: msg,
        padding: '10px 20px',
    });
};

onMounted(async () => {
    const response = await obtener_user();
    store.current_user.id = response.id;
    store.current_user.name = response.name;
    store.current_user.email = response.email;
    registerModal = new window.bootstrap.Modal(document.getElementById('registerModal'));
    registervale = new window.bootstrap.Modal(
        document.getElementById("registervale")
    );
    initialize();
    await getValeAll('si');
});
</script>
