<template>
    <div class="layout-px-spacing">
        <div class="row layout-top-spacing">
            <div class="col-xl-12 col-lg-12 col-sm-12 mb-3">
                <div class="panel">
                    <div class="row">
                        <div class="col-xl-12 col-lg-12 col-sm-12">
                            <table class="table m-0">
                                <thead>
                                    <tr>
                                        <th width="40%">
                                            <div class="text-center titulo-dorado p-1">
                                                <h1 class="pull-left">Caja</h1>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="form-group">
                                                <multiselect
                                                    v-model="sucursal_id"
                                                    mode="tags"
                                                    :close-on-select="true"
                                                    :searchable="true"
                                                    :options="optionsSucursales"
                                                    :class="[
                                                        is_entrada
                                                            ? !errors.sucursal_id
                                                                ? 'is-valid'
                                                                : 'is-invalid'
                                                            : '',
                                                    ]"
                                                    selected-label=""
                                                    select-label=""
                                                    deselect-label=""
                                                    placeholder="Sucursal"
                                                    :showNoOptions="false"
                                                    :showNoResults="false"
                                                    @update:model-value="changeSucursal"
                                                    label="nombre"
                                                    track-by="nombre"
                                                >
                                                </multiselect>
                                                <div class="valid-feedback"></div>
                                                <div class="invalid-feedback">
                                                    <li v-for="item in errors.sucursal_id">
                                                        {{ item }}
                                                    </li>
                                                </div>
                                            </div>
                                        </th>
                                        <th width="40%">
                                            <button
                                                class="btn btn-black pull-right m-1"
                                                @click="refrescar"
                                                >
                                                Limpiar
                                            </button>
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="col-xl-12 col-lg-12 col-sm-12">
                            <table class="table m-0">
                                <thead>
                                    <tr>
                                        <th>
                                            <button
                                                class="btn btn-lg btn-black m-1"
                                                @click="buscar_cliente"
                                            >
                                                Buscar cliente
                                            </button>
                                        </th>
                                        <th class="text-center titulo-dorado" width="70%" style="text-align: center; vertical-align: middle !important;">
                                            <h2>{{ nombre_cliente }}</h2>
                                            <div class="form-group" v-if="form.tipo_pago_id == 4">
                                                <input
                                                type="hidden"
                                                :class="[is_entrada ? (!errors.cliente_id ? 'is-valid' : 'is-invalid') : '']"
                                                v-model="form.cliente_id">
                                                <div class="valid-feedback"></div>
                                                <div class="invalid-feedback">
                                                    Debes seleccionar un cliente
                                                </div>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="col-xl-12 col-lg-12 col-sm-12 mt-2">
                                                <div class="form-group">
                                                    <div class="input-group">
                                                        <input
                                                            v-model="search_productos_rapido"
                                                            class="form-control product-search"
                                                            placeholder="🔍 Escanear código de barras o buscar producto..."
                                                            @keyup.enter="buscarYAgregarProductoRapido"
                                                            @input="onSearchProductosRapidoInput"
                                                            autofocus
                                                        />
                                                        <button
                                                            class="btn btn-black"
                                                            type="button"
                                                            @click="buscarYAgregarProductoRapido"
                                                        >
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                                <circle cx="11" cy="11" r="8"></circle>
                                                                <path d="m21 21-4.35-4.35"></path>
                                                            </svg>
                                                        </button>
                                                    </div>
                                                    <small class="form-text text-muted">
                                                        Escanea un código de barras o escribe para buscar y agregar producto rápidamente
                                                    </small>
                                                </div>
                                            </div>
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-2 col-lg-2 col-sm-2 mb-3">
                <div class="panel">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>
                                    <button
                                        class="btn btn-lg btn-black w-100 m-1"
                                        @click="buscar_sesion"
                                    >
                                        Buscar citas
                                    </button>
                                    <button
                                        class="btn btn-lg btn-black w-100 m-1"
                                        @click="abrirTratamientos(false)"
                                    >
                                        Buscar tratamiento
                                    </button>
                                    <button
                                        class="btn btn-lg btn-black w-100 m-1"
                                        @click="abrirTratamientos(true)"
                                    >
                                        Agregar vale
                                    </button>
                                    <button
                                        class="btn btn-lg btn-black w-100 m-1"
                                        @click="abrirProductos"
                                    >
                                        Buscar productos
                                    </button>
                                    <button
                                        class="btn btn-lg btn-black w-100 m-1"
                                        @click="abrir_ticket"
                                        v-show="mostrar_ticket"
                                    >
                                        Imprimir Ticket
                                    </button>
                                    <button
                                        class="btn btn-lg btn-black w-100 m-1"
                                        @click="abrir_vale"
                                        v-show="mostrar_vale"
                                    >
                                        Imprimir Vale
                                    </button>
                                </th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="col-xl-10 col-lg-10 col-sm-10 mb-3">
                <div class="panel" style="height: 100%;">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th width="10%">
                                    Folio
                                </th>
                                <th width="30%">
                                    Producto
                                </th>
                                <th width="10%">
                                    Cantidad
                                </th>
                                <th>
                                    Precio
                                </th>
                                <th>
                                    total
                                </th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(items, i) in form.productos_temp" :key="i">
                                <td>{{ form.productos_temp[i].folio }}</td>
                                <td>{{ form.productos_temp[i].descripcion }}</td>
                                <td>
                                    <div class="form-group" v-if="form.productos_temp[i].vale_id !== 0">
                                        <input
                                            type="number"
                                            class="form-control mb-2"
                                            placeholder="Cantidad"
                                            @change="onChangeValores(i)"
                                            v-model="form.productos_temp[i].cantidad"
                                            :class="[is_entrada ? (!errors['productos_temp.'+i+'.cantidad'] ? 'is-valid' : 'is-invalid'): '']"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="(item, j) in errors['productos_temp.'+i+'.cantidad']" :key="j">
                                                {{ item.replace('productos_temp.'+i+'.','') }}
                                            </li>
                                        </div>
                                    </div>
                                    <div v-if="form.productos_temp[i].vale_id === 0">
                                        {{ form.productos_temp[i].cantidad }}
                                    </div>
                                </td>
                                <td>
                                    <input
                                        type="text"
                                        class="form-control mb-2"
                                        placeholder="Precio"
                                        @change="onChangeValores(i)"
                                        v-model="form.productos_temp[i].precio_unitario"
                                        :class="[is_entrada ? (!errors['productos_temp.'+i+'.precio_unitario'] ? 'is-valid' : 'is-invalid') : '']"
                                    />
                                    <div class="valid-feedback"></div>
                                    <div class="invalid-feedback">
                                        <li v-for="(item, j) in errors['productos_temp.'+i+'.precio_unitario']" :key="j">
                                            {{ item.replace('productos_temp.'+i+'.','') }}
                                        </li>
                                    </div>
                                </td>
                                <td>
                                    {{ currency((form.productos_temp[i].cantidad*form.productos_temp[i].precio_unitario)) }}
                                </td>
                                <td>
                                    <a
                                        href="javascript:void(0);"
                                        title="Eliminar"
                                        data-bs-toggle="tooltip"
                                        data-bs-placement="top"
                                        @click="removerItem(i)"
                                    >
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            class="feather feather-trash"
                                        >
                                            <polyline
                                                points="3 6 5 6 21 6"
                                            ></polyline>
                                            <path
                                                d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
                                            ></path>
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot v-if="form.productos_temp.length === 0">
                            <tr>
                                <td colspan="7" style="text-align: center;">
                                    <div class="form-group">
                                        <input
                                        type="hidden"
                                        :class="[is_entrada ? (!errors.productos_temp ? 'is-valid' : 'is-invalid') : '']"
                                        v-model="form.productos_temp">
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            No puede estar vacio
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-sm-12 mb-3">
                <div class="panel">
                    <table class="table m-0">
                        <thead>
                            <tr>
                                <th>
                                    <button
                                        class="btn btn-lg btn-black w-100 p-3"
                                        @click="abrirPago"
                                    >
                                    Cobrar
                                    </button>
                                </th>
                                <th width="32%">
                                    <div class="row mb-2">
                                        <div class="col-xl-12 col-lg-12 col-sm-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <input
                                                        v-model="search_productos_rapido_final"
                                                        class="form-control product-search"
                                                        placeholder="🔍 Escanear código de barras o buscar producto..."
                                                        @keyup.enter="buscarYAgregarProductoRapidoFinal"
                                                        @input="onSearchProductosRapidoFinalInput"
                                                    />
                                                    <button
                                                        class="btn btn-black"
                                                        type="button"
                                                        @click="buscarYAgregarProductoRapidoFinal"
                                                    >
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                            <circle cx="11" cy="11" r="8"></circle>
                                                            <path d="m21 21-4.35-4.35"></path>
                                                        </svg>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </th>
                                <th class="titulo-dorado" width="50%" style="text-align: end;">
                                    <h2>{{ currency(form.total) }}</h2>
                                </th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <div class="row justify-content-md-center" v-if="form.sesion_temp.length > 0">
            <div class="col-xl-6 col-lg-6 col-sm-6 mb-3">
                <div class="panel">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th colspan="4" style="text-align: center;">
                                    Citas
                                </th>
                            </tr>
                            <tr>
                                <th>
                                    Folio cita
                                </th>
                                <th>
                                    Fecha registro
                                </th>
                                <th>
                                    Sucursal
                                </th>
                                <th>
                                </th>
                            </tr>
                        </thead>
                        <tbody v-for="(item, i) in form.sesion_temp">
                            <tr>
                                <td>{{ item.sesion_id }}</td>
                                <td>{{ item.fecha_asignada }}</td>
                                <td>{{ item.sucursal }}</td>
                                <td>
                                    <a
                                        href="javascript:void(0);"
                                        title="Eliminar"
                                        data-bs-toggle="tooltip"
                                        data-bs-placement="top"
                                        @click="removerItemSesiones(i)"
                                    >
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            class="feather feather-trash"
                                        >
                                            <polyline
                                                points="3 6 5 6 21 6"
                                            ></polyline>
                                            <path
                                                d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
                                            ></path>
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="row" v-if="form.sesion_temp.length > 0">
            <div class="col-xl-12 col-lg-12 col-sm-12 mb-3">
                <div class="panel">
                    <table class="table m-0">
                        <thead>
                            <tr>
                                <th>
                                    <button
                                        class="btn btn-lg btn-black w-100 p-3"
                                        @click="abrirPago"
                                    >
                                    Cobrar
                                    </button>
                                </th>
                                <th class="titulo-dorado" width="85%" style="text-align: end;">
                                    <h2>{{ currency(form.total) }}</h2>
                                </th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <!-- Modal cliente -->
        <div
            id="modal_index_cliente"
            class="modal fade"
        >
            <div class="modal-dialog modal-lg">
                <div class="modal-content mailbox-popup">
                    <div class="modal-header">
                        <h5 class="modal-title">Buscar cliente</h5>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        <div class="w-100">
                            <input
                                v-model="search.search"
                                class="form-control w-100 product-search"
                                placeholder="Buscar..."
                                @keyup.enter="getClienteAll"
                            />
                        </div>
                        <div class="custom-table">
                            <v-client-table
                                :data="obtener_clientes"
                                :columns="columns_cliente"
                                :options="table_option_cliente"
                                ref="table_cliente"
                            >
                                <template #id="props">
                                    <button class="btn btn-black" @click="openCreate(props.row.id,props.row.razonSocial,props.row.user)">
                                        <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-log-out"
                                        >
                                            <path
                                                d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
                                            ></path>
                                            <polyline
                                                points="16 17 21 12 16 7"
                                            ></polyline>
                                            <line
                                                x1="21"
                                                y1="12"
                                                x2="9"
                                                y2="12"
                                            ></line>
                                        </svg>
                                        &nbsp{{ props.row.id }}
                                    </button>
                                </template>
                            </v-client-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal productos -->
        <div
            id="modal_index_productos"
            class="modal fade"
            style="z-index: 1100 !important"
        >
            <div class="modal-dialog modal-lg">
                <div class="modal-content mailbox-popup">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            Lista de Productos
                        </h5>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        <div class="w-100 mb-3">
                            <div class="input-group">
                                <input
                                    v-model="search_productos"
                                    class="form-control product-search"
                                    placeholder="Buscar por código de barras (13 dígitos), nombre, marca..."
                                    @keyup.enter="buscarProductos"
                                    @input="onSearchProductosInput"
                                    autofocus
                                />
                                <button
                                    class="btn btn-black"
                                    type="button"
                                    @click="buscarProductos"
                                >
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <circle cx="11" cy="11" r="8"></circle>
                                        <path d="m21 21-4.35-4.35"></path>
                                    </svg>
                                </button>
                            </div>
                            <small class="form-text text-muted">
                                Presiona Enter o haz clic en buscar. Si escaneas un código de barras de 13 dígitos, se agregará automáticamente.
                            </small>
                        </div>
                        <button
                            class="btn btn-black pull-left m-1"
                            @click="agregarIdsProductos"
                        >
                            Agregar
                        </button>
                        <div class="custom-table">
                            <v-client-table
                                :data="obtener_productos"
                                :columns="columns_productos"
                                :options="table_option_productos"
                                ref="table_tratamientos"
                            >
                                <template #id="props">
                                    <div class="checkbox-outline-primary custom-control custom-checkbox">
                                        <input
                                        v-model="check_id_productos"
                                        variant="primary"
                                        type="checkbox"
                                        class="custom-control-input"
                                        :id="'producto_'+props.row.id"
                                        :value="props.row" />
                                        <label class="custom-control-label" :for="'producto_'+props.row.id">{{ props.row.id }}</label>
                                    </div>
                                </template>
                                <template #actions="props">
                                    <button class="btn btn-sm btn-black"
                                    @click="agregarProducto(props.row)"
                                    >
                                        <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-log-out"
                                        >
                                            <path
                                                d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
                                            ></path>
                                            <polyline
                                                points="16 17 21 12 16 7"
                                            ></polyline>
                                            <line
                                                x1="21"
                                                y1="12"
                                                x2="9"
                                                y2="12"
                                            ></line>
                                        </svg>
                                        &nbsp
                                    </button>
                                </template>
                            </v-client-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal tratamientos -->
        <div
            id="modal_index_tratamientos"
            class="modal fade"
            style="z-index: 1100 !important"
        >
            <div class="modal-dialog modal-lg">
                <div class="modal-content mailbox-popup">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            Tratamientos
                        </h5>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        <button
                            v-if="!is_vale"
                            class="btn btn-black pull-left m-1"
                            @click="agregarIdsTratamiento"
                        >
                            Agregar
                        </button>
                        <div class="custom-table">
                            <v-client-table
                                :data="obtener_tratamientos"
                                :columns="columns_tratamientos"
                                :options="table_option_tratamientos"
                                ref="table_tratamientos"
                            >
                                <template #id="props">
                                    <div
                                        class="checkbox-outline-primary custom-control custom-checkbox"
                                        v-show="!is_vale"
                                    >
                                        <input
                                        v-model="check_id_tratamiento"
                                        variant="primary"
                                        type="checkbox"
                                        class="custom-control-input"
                                        :id="'tratamiento_'+props.row.id"
                                        :value="props.row" />
                                        <label class="custom-control-label" :for="'tratamiento_'+props.row.id">{{ props.row.id }}</label>
                                    </div>
                                    <label v-show="is_vale" class="">
                                        {{ props.row.id }}
                                    </label>

                                </template>
                                <template #actions="props">
                                    <button class="btn btn-sm btn-black"
                                    @click="agregarTratamiento(props.row)"
                                    >
                                        <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-log-out"
                                        >
                                            <path
                                                d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
                                            ></path>
                                            <polyline
                                                points="16 17 21 12 16 7"
                                            ></polyline>
                                            <line
                                                x1="21"
                                                y1="12"
                                                x2="9"
                                                y2="12"
                                            ></line>
                                        </svg>
                                        &nbsp
                                    </button>
                                </template>
                            </v-client-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal sesiones -->
        <div
            id="modal_index_sesiones"
            class="modal fade"
        >
            <div class="modal-dialog modal-lg">
                <div class="modal-content mailbox-popup">
                    <div class="modal-header">
                        <h5 class="modal-title">Buscar citas</h5>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        <div class="w-100">
                            <input
                                v-model="search.search"
                                class="form-control w-100 product-search"
                                placeholder="Buscar..."
                                @keyup.enter="getSesionAll"
                            />
                        </div>
                        <div class="custom-table">
                            <v-client-table
                                :data="obtener_sesiones"
                                :columns="columns_sesiones"
                                :options="table_option_sesiones"
                                ref="table_cliente"
                            >
                                <template #id="props">
                                    <button class="btn btn-black" @click="agregar_tram_sesion(props.row)">
                                        <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-log-out"
                                        >
                                            <path
                                                d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
                                            ></path>
                                            <polyline
                                                points="16 17 21 12 16 7"
                                            ></polyline>
                                            <line
                                                x1="21"
                                                y1="12"
                                                x2="9"
                                                y2="12"
                                            ></line>
                                        </svg>
                                        &nbsp{{ props.row.id }}
                                    </button>
                                </template>
                            </v-client-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Cargar productos Modal -->
        <div
            class="modal fade"
            id="productostiendasModal"
            tabindex="-1"
            role="dialog"
        >
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">
                            ¿Quieres cargar los productos seleccionado en la tienda?
                        </h5>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            class="btn"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                        >
                            <i class="flaticon-cancel-12"></i> Cancelar
                        </button>
                        <button
                            type="button"
                            class="btn btn-black"
                            @click="agregar_productos_tienda()"
                        >
                            Agregar
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Register pago Modal -->
        <div
            class="modal fade"
            id="registerPagoModal"
            tabindex="-1"
            role="dialog"
            v-show="true"
        >
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header titulo-dorado">
                        <h4 class="modal-title">Cobrar</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">
                            <div class="col-12">
                                <button
                                    class="btn btn-success btn-xs pull-right"
                                    @click="agregar_pagos()"
                                >
                                    Agregar Pago
                                </button>
                            </div>
                        </div>
                        <div class="row" v-for="(item1, i) in form.pagos" :key="i" style="border: 1px solid #D3D3D3; margin-top: 10px;">
                            <div class="col-md-6 col-sm-12 col-6">
                                <div class="form-group">
                                    <label>Tipo Pago</label>
                                    <multiselect
                                        v-model="tipo_pago_id[i]"
                                        mode="tags"
                                        :close-on-select="true"
                                        :searchable="true"
                                        :options="optionsTipoPago"
                                        :class="[
                                            is_entrada
                                                ? !errors['pagos.'+i+'.tipo_pago_id']
                                                    ? 'is-valid'
                                                    : 'is-invalid'
                                                : '',
                                        ]"
                                        selected-label=""
                                        select-label=""
                                        deselect-label=""
                                        placeholder="Seleccione..."
                                        :showNoOptions="false"
                                        :showNoResults="false"
                                        @update:model-value="changeTipoPago(tipo_pago_id[i], i)"
                                        label="descripcion"
                                        track-by="descripcion"
                                    >
                                    </multiselect>
                                    <div class="valid-feedback"></div>
                                    <div class="invalid-feedback">
                                        <li v-for="(item, j) in errors['pagos.'+i+'.tipo_pago_id']" :key="j">
                                            {{ item.replace('pagos.'+i+'.','') }}
                                        </li>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12 col-6">
                                <a
                                    class="pull-right mt-1"
                                    href="javascript:void(0);"
                                    title="Eliminar"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    @click="removerItemPagos(i)"
                                >
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-trash"
                                    >
                                        <polyline
                                            points="3 6 5 6 21 6"
                                        ></polyline>
                                        <path
                                            d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
                                        ></path>
                                    </svg>
                                </a>
                                <div class="form-group">
                                    <label>Pago</label>
                                    <input
                                        type="number"
                                        class="form-control mb-2"
                                        placeholder="Pago"
                                        v-model="form.pagos[i].pago"
                                        @change="onChangeValoresTotal"
                                        :class="[is_entrada ? (!errors['pagos.'+i+'.pago'] ? 'is-valid' : 'is-invalid') : '']"
                                    />
                                    <div class="valid-feedback"></div>
                                    <div class="invalid-feedback">
                                        <li v-for="(item, j) in errors['pagos.'+i+'.pago']" :key="j">
                                            {{ item.replace('pagos.'+i+'.','') }}
                                        </li>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12 col-6" v-if="form.pagos[i].tipo_pago_id == 2 || form.pagos[i].tipo_pago_id == 3 || form.pagos[i].tipo_pago_id == 5">
                                <div class="form-group">
                                    <label>Banco</label>
                                    <multiselect
                                        v-model="form.pagos[i].banco"
                                        mode="tags"
                                        :close-on-select="true"
                                        :searchable="true"
                                        :options="optionsBancos"
                                        :class="[
                                            is_entrada
                                                ? !errors['pagos.'+i+'.banco']
                                                    ? 'is-valid'
                                                    : 'is-invalid'
                                                : '',
                                        ]"
                                        selected-label=""
                                        select-label=""
                                        deselect-label=""
                                        placeholder="Seleccione..."
                                        :showNoOptions="false"
                                        :showNoResults="false"
                                    >
                                    </multiselect>
                                    <div class="valid-feedback"></div>
                                    <div class="invalid-feedback">
                                        <li v-for="(item, j) in errors['pagos.'+i+'.banco']" :key="j">
                                            {{ item.replace('pagos.'+i+'.','') }}
                                        </li>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12 col-6" v-if="form.pagos[i].tipo_pago_id == 2 || form.pagos[i].tipo_pago_id == 3 || form.pagos[i].tipo_pago_id == 5">
                                <div class="form-group">
                                    <label>Folio del Pago</label>
                                    <input
                                        type="text"
                                        class="form-control mb-2"
                                        placeholder="Folio del pago"
                                        v-model="form.pagos[i].folio_pago"
                                        :class="[is_entrada ? (!errors['pagos.'+i+'.folio_pago'] ? 'is-valid' : 'is-invalid') : '']"
                                    />
                                    <div class="valid-feedback"></div>
                                    <div class="invalid-feedback">
                                        <li v-for="(item, j) in errors['pagos.'+i+'.folio_pago']" :key="j">
                                            {{ item.replace('pagos.'+i+'.','') }}
                                        </li>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-12 col-6 mt-2">
                                <h3>Cambio: {{ currency(form.cambio) }}</h3>
                            </div>
                            <div class="col-md-6 col-sm-12 col-6 mt-2">
                                <h3>Total: {{ currency(form.total) }}</h3>
                            </div>
                        </div>
                        <div class="form-group">
                            <input
                            type="hidden"
                            :class="[is_entrada ? (!errors.pago ? 'is-valid' : 'is-invalid') : '']"
                            v-model="form.pago">
                            <div class="valid-feedback"></div>
                            <div class="invalid-feedback">
                                <li v-for="(item, j) in errors.pago" :key="j">
                                    {{ item }}
                                </li>
                            </div>
                        </div>
                        <div class="form-group mt-2">
                            <button
                                type="button"
                                class="btn btn-black w-100"
                                @click="createVenta"
                            >
                                Aplicar cobro
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Register pago ticket -->
        <div
            class="modal fade"
            id="registerticket"
            tabindex="-1"
            role="dialog"
            v-show="true"
        >
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header titulo-dorado">
                        <h4 class="modal-title">Ticket</h4>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        <div ref="ticketRef" style="background: white;">
                            <div class="row justify-content-md-center">
                                <div class="col-xl-5 col-lg-5 col-sm-5">
                                    <div id="printable-content-ticket">
                                        <table style="padding-right: 20px !important;">
                                            <tbody style="font-size: 12px;">
                                                <tr>
                                                    <th colspan="3" class="empresa-nombre">
                                                        <img
                                                            src="@/assets/images/default/logo_negro.png"
                                                            class="navbar-logo"
                                                            alt="logo"
                                                        />
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th colspan="3" class="empresa-direccion" v-if="data_ticket.sucursal" style="text-align: center; margin: 0 0 0 0 !important; padding: 0 0 0 0 !important;">
                                                        <p style="margin: 0 0 0 0 !important; padding: 0 0 0 0 !important; font-size: 12px; color: #000;">{{ data_ticket.sucursal.direccion }}</p>
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th colspan="3" class="folio-fecha" style="text-align: center; margin: 0 0 0 0 !important; padding: 0 0 0 0 !important;">
                                                        <p style="margin: 0 0 0 0 !important; padding: 0 0 0 0 !important; font-size: 12px; color: #000;">F-{{ data_ticket.id }} - {{ data_ticket.fecha_asignada_custom }}</p>
                                                    </th>
                                                </tr>
                                                <tr style="border-bottom: 1px dashed; border-top: 1px dashed;">
                                                    <td width="50%">
                                                        Producto
                                                    </td>
                                                    <td>
                                                        Cant.
                                                    </td>
                                                    <td style="text-align: right;">
                                                        precio
                                                    </td>
                                                </tr>
                                            </tbody>
                                            <tbody v-for="(item, i) in data_ticket.venta_detalle" style="font-size: 12px;">
                                                <tr>
                                                    <td colspan="3" width="100%" class="descripcion-producto">
                                                        {{ item.descripcion }}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>

                                                    </td>
                                                    <td width="10%" style="text-align: center;">
                                                        {{ item.cantidad }}
                                                    </td>
                                                    <td width="30%" style="text-align: right;">
                                                        {{ currency(item.total) }}
                                                    </td>
                                                </tr>
                                            </tbody>
                                            <tfoot style="font-size: 12px;">
                                                <tr>
                                                    <td colspan="3" style="border-bottom: 1px dashed;"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" class="total" style="text-align: left;">
                                                        <p style="margin: 0 0 0 0 !important; padding: 0 0 0 0 !important; font-size: 12px; color: #000;">Total</p>
                                                    </td>
                                                    <td colspan="1" class="total" style="text-align: right;">
                                                        <p style="margin: 0 0 0 0 !important; padding: 0 0 0 0 !important; font-size: 12px; color: #000;">{{ currency(data_ticket.total) }}</p>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="3" style="border-bottom: 1px dashed;"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="3" style="border-bottom: 1px dashed;"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="3" class="footer" style="text-align: center;">
                                                        <p style="margin: 0 0 0 0 !important; padding: 0 0 0 0 !important; font-size: 12px; color: #000;">¡GRACIAS POR SU VISITA!</p>
                                                        <p style="margin: 0 0 0 0 !important; padding: 0 0 0 0 !important; font-size: 12px; color: #000;">ESTE COMPROBANTE NO TIENE</p>
                                                        <p style="margin: 0 0 0 0 !important; padding: 0 0 0 0 !important; font-size: 12px; color: #000;">VALIDEZ FISCAL</p>
                                                        <p style="margin: 0 0 0 0 !important; padding: 0 0 0 0 !important; font-size: 12px; color: #000;">POR FAVOR REVISE SUS PRODUCTOS</p>
                                                        <p style="margin: 0 0 0 0 !important; padding: 0 0 0 0 !important; font-size: 12px; color: #000;">YA QUE NO SE ACEPTAN</p>
                                                        <p style="margin: 0 0 0 0 !important; padding: 0 0 0 0 !important; font-size: 12px; color: #000;">RECLAMACIONES NI DEVOLUCIONES</p>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="3" style="border-bottom: 1px dashed;"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="3" style="border-bottom: 1px dashed;"></td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div ref="valesTempRef" v-show="false">
                            <div v-for="(item, i) in data_ticket.venta_detalle">
                                <div v-if="item.vale_id">
                                    <div :id="'printable-content-vale-temp-'+item.vale_id">
                                        <div class="row justify-content-md-center">
                                            <div class="col-xl-6 col-lg-6 col-sm-6">
                                                <table style="padding-right: 20px !important;">
                                                    <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(item.vale.vigencia)).format("D-MM-YYYY") }}
                                                        </th>
                                                        <th></th>
                                                        <th style="text-align: right; padding-right: 10px;">
                                                            <b>Folio:</b><br>
                                                            {{ item.vale_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="item.vale.token"
                                                                :width="200"
                                                                :height="200"
                                                                :value="item.vale.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>
                                                        <th colspan="3" style="text-align: center;">
                                                            <b><h6>Tratamiento</h6></b>
                                                        </th>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="3" style="text-align: center;">
                                                            {{ item.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>
                            </div>
                        </div>
                        <div class="form-group mt-2">
                            <button
                                type="button"
                                class="btn btn-black w-100"
                                @click="printContent('printable-content-ticket')"
                            >
                                Imprimir
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Register pago vale -->
        <div
            class="modal fade"
            id="registervale"
            tabindex="-1"
            role="dialog"
            v-show="true"
        >
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header titulo-dorado">
                        <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 ref="valesRef">
                            <div v-for="(item, i) in data_ticket.venta_detalle">
                                <div v-if="item.vale_id">
                                    <div :id="'printable-content-vale-'+item.vale_id" style="width: 750px !important; background: white;">
                                        <div class="row justify-content-md-center">
                                            <div class="col-xl-6 col-lg-6 col-sm-6">
                                                <table style="padding-right: 20px !important;">
                                                    <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(item.vale.vigencia)).format("D-MM-YYYY") }}
                                                        </th>
                                                        <th></th>
                                                        <th style="text-align: right; padding-right: 10px;">
                                                            <b>Folio:</b><br>
                                                            {{ item.vale_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="item.vale.token"
                                                                :width="200"
                                                                :height="200"
                                                                :value="item.vale.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>
                                                        <th colspan="3" style="text-align: center;">
                                                            <b><h6>Tratamiento</h6></b>
                                                        </th>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="3" style="text-align: center;">
                                                            {{ item.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-'+item.vale_id, 'vale')"
                                        >
                                            Imprimir
                                        </button>
                                    </div>
                                </div>
                            </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="changeSucursalCustom"
        ></button>
    </div>
</template>
<style>
.table3 .actions svg {
    padding: 2px;
}
#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: 72mm !important;
        max-width: none !important;
        padding: 0;
        margin: 0;
        transform: scale(1);
    }

    #printable-content-ticket table {
        width: 100% !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, nextTick } from "vue";
import "@/assets/sass/elements/tooltip.scss";
import { useMeta } from "@/composables/use-meta";
import { useStateStore } from '@/store/StateStore';
import { useAuthStore } from "@/store/AuthStore";
import * as UserRepository from "@/repositories/UserRepository";
import * as TipoPagoRepository from "@/repositories/TipoPagoRepository";
import * as ProductoRepository from "@/repositories/ProductoRepository";
import * as SucursalRepository from "@/repositories/SucursalRepository";
import * as ClienteRepository from "@/repositories/ClienteRepository";
import * as TratamientoRepository from "@/repositories/TratamientoRepository";
import * as VentaRepository from "@/repositories/VentaRepository";
import * as SesionRepository from "@/repositories/SesionRepository";
import * as BancoRepository from "@/repositories/BancoRepository";
import QRCodeVue3 from "qrcode-vue3";
import html2canvas from "html2canvas";


import qr_presentacion from "@/assets/images/default/qr_presentacion.png";
import "@/assets/sass/scrollspyNav.scss";

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

// 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';

useMeta({ title: "EGURROLA" });

const store = useAuthStore();
const storeState = useStateStore();
const isLoading = ref(true);
const mostrar_ticket = ref(false);
const mostrar_vale = ref(false);
const data_ticket = ref({});
const dataTienda = ref([]);
const preguntarTienda = ref(false);

//model
let modal_index_cliente = ref(null);
let modal_index_productos = ref(null);
let modal_index_tratamientos = ref(null);
let modal_index_sesiones = ref(null);
let productostiendasModal = ref(null);
let registerPagoModal = ref(null);
let registerticket = ref(null);
let registervale = ref(null);


const ticketRef = ref(null);
const valesTempRef = ref(null);
const valesRef = ref(null);

// formulario de ventas
const form = ref({
    sucursal_id:storeState.current_state.sucursal_mode,
    cliente_id:null,
    productos_temp:[],
    sesion_temp:[],
    total:0,
    subtotal:0,
    iva:0,
    eps:0,
    limpiar_tienda:"no",
    limpiar_tienda_personal:"no",
    pagos:[
        {
            banco:"",
            folio_pago:"",
            tipo_pago_id:1,
            pago: 0
        }
    ],
    cambio:0,
    pago:0
});
const is_entrada = ref(false);
const errors = ref({});
const is_vale = ref(false);

// parte de funcion f-cliente
const nombre_cliente = ref('Cliente de mostrador');
const total_presentacion = ref('$0.00');

//formateador
const formatter = new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'});

//select sucursal
const sucursal_id = ref({
    id: storeState.current_state.sucursal_mode,
    nombre: storeState.current_state.sucursal_name_mode,
});
const optionsSucursales = ref([]);
const changeSucursal = (data) => {
    if (data == null) {
        const result = optionsSucursales.value.find(item => item.id === form.value.sucursal_id);
        if (result) {
            sucursal_id.value = {
                id: form.value.sucursal_id,
                nombre: result.nombre
            };
        }
        return;
    }
    form.value.sucursal_id = data.id;
};

const optionsBancos = ref([]);

//select sucursal
const tipo_pago_id = ref([{
    id: 1,
    descripcion: 'Efectivo',
}]);
const optionsTipoPago = ref([]);
const changeTipoPago = (data,row) => {
    form.value.pagos[row].tipo_pago_id = data.id;
    if((data.id == 2 || data.id == 3) && form.value.pagos.length == 1){
        form.value.pagos[row].pago = form.value.total;
        form.value.pago = form.value.total;
    }
};

//clientes index
const obtener_clientes = ref([]);
//table clientes
const search = ref({
    search: "",
    cliente_id:null,
    sucursal_id:null
});
const columns_cliente = ref(["id", "razonSocial"]);
const table_option_cliente = ref({
    headings: {
        id: (h, row, index) => {
            return "Folio";
        },
        razonSocial: (h, row, index) => {
            return "Cliente";
        },
        count_exp: (h, row, index) => {
            return "Entrar";
        },
    },
    perPage: 20,
    perPageValues: [20, 50, 100],
    skin: "table table-hover",
    columnsClasses: { count_exp: "count_exp text-center" },
    sortable: ["id", "razonSocial", "rfc", "celular", "email"],
    sortIcon: {
        base: "sort-icon-none",
        up: "sort-icon-asc",
        down: "sort-icon-desc",
    },
    pagination: { nav: "scroll", chunk: 5 },
    texts: {
        count: "Mostrando {from} a {to} de {count}",
        filter: "",
        filterPlaceholder: "Buscar...",
        limit: "Resultados:",
        noResults:"No hay registros"
    },
    resizableColumns: true,
    filterable: false,
});

//sesiones index
const obtener_sesiones = ref([]);
const columns_sesiones = ref(["id", "fecha_asignada_custom", "sucursal", "cliente"]);
const table_option_sesiones = ref({
    headings: {
        id: (h, row, index) => {
            return "Folio";
        },
        fecha_asignada_custom: (h, row, index) => {
            return "Fecha asignada";
        },
        actions: (h, row, index) => {
            return "";
        },
    },
    perPage: 20,
    perPageValues: [20, 50, 100],
    skin: "table table-hover",
    columnsClasses: { count_exp: "count_exp text-center" },
    sortable: ["id", "fecha_asignada_custom", "sucursal", "cliente"],
    sortIcon: {
        base: "sort-icon-none",
        up: "sort-icon-asc",
        down: "sort-icon-desc",
    },
    pagination: { nav: "scroll", chunk: 5 },
    texts: {
        count: "Mostrando {from} a {to} de {count}",
        filter: "",
        filterPlaceholder: "Buscar...",
        limit: "Resultados:",
        noResults:"No hay registros"
    },
    resizableColumns: true,
    filterable: false,
});

// productos
const columns_productos = ref(['id','codigo_barras','nombre','marca','actions']);
const table_option_productos = ref({
    headings: {
        id: (h, row, index) => {
            return "Folio";
        },
        codigo_barras: (h, row, index) => {
            return "Código de Barras";
        },
        nombre: (h, row, index) => {
            return "Producto";
        },
        marca: (h, row, index) => {
            return "Marca";
        },
        actions: (h, row, index) => {
            return "";
        },
    },
    perPage: 20,
    perPageValues: [20, 50, 100],
    skin: "table table-hover",
    columnsClasses: {  },
    sortable: ['id','codigo_barras','nombre', 'marca'],
    sortIcon: {
        base: "sort-icon-none",
        up: "sort-icon-asc",
        down: "sort-icon-desc",
    },
    pagination: { nav: "scroll", chunk: 5 },
    texts: {
        count: "Mostrando {from} a {to} de {count}",
        filter: "",
        filterPlaceholder: "Buscar por código de barras, nombre, marca...",
        limit: "Resultados:",
        noResults:"No hay registros"
    },
    resizableColumns: true,
});
const obtener_productos = ref([]);
const check_id_productos= ref([]);
const search_productos = ref('');
const search_productos_rapido = ref('');
const search_productos_rapido_final = ref('');

// tratamientos
const columns_tratamientos = ref(['id','tratamiento','actions']);
const table_option_tratamientos = ref({
    headings: {
        id: (h, row, index) => {
            return "Folio tratamiento";
        },
        actions: (h, row, index) => {
            return "";
        }
    },
    perPage: 20,
    perPageValues: [20, 50, 100],
    skin: "table table-hover",
    columnsClasses: { count_exp: "count_exp text-center" },
    sortable: ['id','tratamiento'],
    sortIcon: {
        base: "sort-icon-none",
        up: "sort-icon-asc",
        down: "sort-icon-desc",
    },
    pagination: { nav: "scroll", chunk: 5 },
    texts: {
        count: "Mostrando {from} a {to} de {count}",
        filter: "",
        filterPlaceholder: "Buscar...",
        limit: "Resultados:",
        noResults:"No hay registros"
    },
    resizableColumns: true,
});
const obtener_tratamientos = ref([]);
const check_id_tratamiento= ref([]);

const openCreate = (id,nombre,data_productos) => {
    form.value.cliente_id=id;
    search.value.cliente_id=id;
    nombre_cliente.value=nombre;
    modal_index_cliente.hide();
    if(data_productos){
        if (data_productos.tiendas.length > 0) {
            check_id_productos.value=data_productos.tiendas;
            productostiendasModal.show();
        }
    }
}

const agregar_productos_tienda = () => {
    isLoading.value = true;
    check_id_productos.value.forEach((element,i) => {
        const comprobar_existe = form.value.productos_temp.filter(producto => producto.producto_id === element.id);
        if(comprobar_existe.length === 0){
            const filtro= {
                folio: 'P-'+element.producto_id,
                descripcion: element.nombre,
                venta_id:null,
                producto_id: element.producto_id,
                tratamiento_id: null,
                vale_id:null,
                total:element.total,
                subtotal:element.subtotal,
                precio_unitario:element.precio,
                cantidad:element.cantidad,
                iva:element.iva_def,
                iva_temp:element.iva,
                ieps:element.ieps_def,
                ieps_temp:element.ieps
            };
            form.value.productos_temp.push(filtro);
        }
        if (check_id_productos.value.length === (i+1)) {
            conteo();
        }
        form.value.limpiar_tienda="si";
        if(preguntarTienda.value){
            form.value.limpiar_tienda_personal="si";
        }
    });
    check_id_productos.value=[];
    productostiendasModal.hide();
    isLoading.value = false;
}

const onChangeValoresTotal = () => {
    form.value.pago = 0;
    form.value.pagos.forEach(element => {
        form.value.pago=form.value.pago+element.pago;
    });
    if(form.value.pago > 0){
        form.value.cambio=form.value.pago - form.value.total;
    } else {
        form.value.cambio= 0;
    }
}

const refrescar = () => {
    initializeCreate();
}

const initializeCreate = () => {
    search.value = {
        search:"",
        cliente_id:null,
        sucursal_id:storeState.current_state.sucursal_mode
    };
    check_id_productos.value= [];
    obtener_clientes.value=[];
    obtener_tratamientos.value=[];
    obtener_productos.value=[];
    is_entrada.value=false;
    nombre_cliente.value='Cliente de mostrador';
    total_presentacion.value='$0.00';
    sucursal_id.value = {
        id: storeState.current_state.sucursal_mode,
        nombre: storeState.current_state.sucursal_name_mode,
    };
    tipo_pago_id.value = [{
        id: 1,
        descripcion: 'Efectivo',
    }];
    form.value = {
        sucursal_id:storeState.current_state.sucursal_mode,
        cliente_id:null,
        productos_temp:[],
        sesion_temp:[],
        total:0,
        subtotal:0,
        iva:0,
        eps:0,
        limpiar_tienda:"no",
        limpiar_tienda_personal:"no",
        pagos:[
            {
                banco:"",
                folio_pago:"",
                tipo_pago_id:1,
                pago: 0
            }
        ],
        cambio:0,
        pago:0
    };
    preguntarTienda.value = false;
    is_vale.value = false;
    search_productos.value = '';
    search_productos_rapido.value = '';
    search_productos_rapido_final.value = '';
}

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

const conteo = () => {
    form.value.iva=0;
    form.value.ieps=0;
    form.value.total=0;
    form.value.subtotal=0;
    form.value.productos_temp.forEach((element) => {
        form.value.iva+=element.iva_temp;
        form.value.ieps+=element.ieps_temp;
        form.value.subtotal+=element.subtotal;
        form.value.total+=element.total;
    });
    onChangeValoresTotal();
}

const conteoPagos = () => {
    form.value.pago=0;
    form.value.pagos.forEach((element) => {
        form.value.pago+=element.pago;
    });
    onChangeValoresTotal();
}

//eventos eliminar
const removerItem=(id)=>{
    isLoading.value = true;
    form.value.productos_temp=form.value.productos_temp.filter(function(val, k) {
        return k != id;
    });
    conteo();
    isLoading.value = false;
};

const agregarPagos=(element)=>{
    isLoading.value = true;
    const filtro= {
        banco:"",
        folio_pago:"",
        tipo_pago_id:1,
        pago: 0
    };
    form.value.pagos.push(filtro);
    conteoPagos();
    isLoading.value = false;
};

const removerItemSesiones=(id)=>{
    isLoading.value = true;
    form.value.sesion_temp=form.value.sesion_temp.filter(function(val, k) {
        return k != id;
    });
    isLoading.value = false;
};

const agregar_vale = (element) => {
    isLoading.value = true;
    const filtro= {
        folio: 'VT-'+element.id,
        descripcion: 'Vale: '+element.tratamiento,
        venta_id:null,
        producto_id: null,
        tratamiento_id: element.id,
        vale_id:0,
        total:element.total,
        subtotal:element.precio,
        precio_unitario:element.precio,
        cantidad:1,
        iva:element.iva_def,
        iva_temp:element.iva,
        ieps:element.ieps_def,
        ieps_temp:element.ieps
    };

    form.value.productos_temp.push(filtro);
    conteo();
    isLoading.value = false;
}

const agregar_tram_sesion = (data) => {
    isLoading.value=true;
    data.sesion_tratamiento_precio.forEach((element) => {
        const comprobar_existe = form.value.productos_temp.filter(producto => producto.tratamiento_id === element.tratamiento_id);
        if(comprobar_existe.length === 0){
            const filtro= {
                folio: 'TS-'+element.tratamiento_id,
                descripcion: element.tratamiento,
                venta_id:null,
                producto_id: null,
                tratamiento_id: element.tratamiento_id,
                vale_id:null,
                total:element.total,
                subtotal:element.precio,
                precio_unitario:element.precio,
                cantidad:1,
                iva:element.iva_def,
                iva_temp:element.iva,
                ieps:element.ieps_def,
                ieps_temp:element.ieps
            };
            form.value.productos_temp.push(filtro);
        }
    });
    const comprobar_existe_sesion = form.value.sesion_temp.filter(sesion => sesion.sesion_id === data.id);
    if(comprobar_existe_sesion.length === 0){
        form.value.sesion_temp.push({sesion_id:data.id, fecha_asignada:data.fecha_asignada_custom, sucursal_id:data.sucursal_id, sucursal:data.sucursal});
    }
    modal_index_sesiones.hide();
    conteo();
    isLoading.value=false;
}

const agregarTratamiento=(element,vale)=>{
    if(is_vale.value){
        agregar_vale(element);
        is_vale.value = false;
        modal_index_tratamientos.hide();
        conteo();
        return;
    }
    isLoading.value = true;
    const filtro= {
        folio: 'T-'+element.id,
        descripcion: element.tratamiento,
        venta_id:null,
        producto_id: null,
        tratamiento_id: element.id,
        vale_id:null,
        total:element.total,
        subtotal:element.precio,
        precio_unitario:element.precio,
        cantidad:1,
        iva:element.iva_def,
        iva_temp:element.iva,
        ieps:element.ieps_def,
        ieps_temp:element.ieps
    };
    form.value.productos_temp.push(filtro);
    modal_index_tratamientos.hide();
    conteo();
    isLoading.value = false;
};

const agregarIdsTratamiento=()=>{

    isLoading.value = true;
    check_id_tratamiento.value.forEach((element) => {
        const filtro= {
            folio: 'T-'+element.id,
            descripcion: element.tratamiento,
            venta_id:null,
            producto_id: null,
            tratamiento_id: element.id,
            vale_id:null,
            total:element.total,
            subtotal:element.precio,
            precio_unitario:element.precio,
            cantidad:1,
            iva:element.iva_def,
            iva_temp:element.iva,
            ieps:element.ieps_def,
            ieps_temp:element.ieps
        };
        form.value.productos_temp.push(filtro);
    });
    modal_index_tratamientos.hide();
    conteo();
    isLoading.value = false;
};

const abrirTratamientos = async(vale=false)=>{
    is_vale.value = vale;
    console.log(is_vale.value);
    isLoading.value = true;
    check_id_tratamiento.value=[];
    const response = await TratamientoRepository.getAll({filtro:form.value.productos_temp});
    obtener_tratamientos.value=response.data;
    modal_index_tratamientos.show();
    isLoading.value = false;
};

const agregarProducto=(element)=>{
    isLoading.value = true;
    const filtro= {
        folio: 'P-'+element.id,
        descripcion: element.nombre,
        venta_id:null,
        producto_id: element.id,
        tratamiento_id: null,
        vale_id:null,
        total:element.total,
        subtotal:element.precio,
        precio_unitario:element.precio,
        cantidad:1,
        iva:element.iva_def,
        iva_temp:element.iva,
        ieps:element.ieps_def,
        ieps_temp:element.ieps
    };
    form.value.productos_temp.push(filtro);
    search_productos.value = ''; // Limpiar búsqueda al agregar producto
    modal_index_productos.hide();
    conteo();
    isLoading.value = false;
};

const agregarIdsProductos=()=>{
    isLoading.value = true;
    check_id_productos.value.forEach((element) => {
        const filtro= {
            folio: 'P-'+element.id,
            descripcion: element.nombre,
            venta_id:null,
            producto_id: element.id,
            tratamiento_id: null,
            vale_id:null,
            total:element.total,
            subtotal:element.precio,
            precio_unitario:element.precio,
            cantidad:1,
            iva:element.iva_def,
            iva_temp:element.iva,
            ieps:element.ieps_def,
            ieps_temp:element.ieps
        };
        form.value.productos_temp.push(filtro);
    });
    search_productos.value = ''; // Limpiar búsqueda al agregar productos
    modal_index_productos.hide();
    conteo();
    isLoading.value = false;
};

const abrirPago = () => {
    registerPagoModal.show();
}

const abrirProductos = async()=>{
    if(!preguntarTienda.value){
        preguntarTienda.value = true;
        await userLoad();
        if (dataTienda.value.length > 0) {
            check_id_productos.value=dataTienda.value;
            productostiendasModal.show();
            return;
        }
    }
    isLoading.value = true;
    check_id_productos.value = [];
    search_productos.value = ''; // Limpiar búsqueda al abrir
    const response = await ProductoRepository.getAll({filtro:form.value.productos_temp});
    obtener_productos.value=response.data;
    modal_index_productos.show();
    isLoading.value = false;
};

const buscarProductos = async()=>{
    if(!search_productos.value || search_productos.value.trim() === '') {
        // Si está vacío, cargar todos los productos
        const response = await ProductoRepository.getAll({filtro:form.value.productos_temp});
        obtener_productos.value=response.data;
        return;
    }
    
    isLoading.value = true;
    try {
        // Buscar productos con el término de búsqueda (incluye código de barras, nombre, marca, etc.)
        const response = await ProductoRepository.getAll({
            filtro: form.value.productos_temp,
            search: search_productos.value.trim()
        });
        obtener_productos.value = response.data;
        
        // Si se busca por código de barras y hay exactamente un resultado, agregarlo automáticamente
        if (obtener_productos.value.length === 1 && /^\d{13}$/.test(search_productos.value.trim())) {
            agregarProducto(obtener_productos.value[0]);
            search_productos.value = '';
        } else if (obtener_productos.value.length === 0) {
            showMessage('No se encontraron productos con ese criterio de búsqueda', 'info');
        }
    } catch (error) {
        console.error('Error al buscar productos:', error);
        showMessage('Error al buscar productos', 'error');
    } finally {
        isLoading.value = false;
    }
};

// Función para detectar cuando se escribe un código de barras completo (13 dígitos)
const onSearchProductosInput = () => {
    // Si el input tiene exactamente 13 dígitos, buscar automáticamente
    const codigo = search_productos.value.trim();
    if (/^\d{13}$/.test(codigo)) {
        // Pequeño delay para permitir que el usuario termine de escribir
        setTimeout(() => {
            if (search_productos.value.trim() === codigo) {
                buscarProductos();
            }
        }, 300);
    }
};

// Función para buscar y agregar producto rápidamente desde el campo superior
const buscarYAgregarProductoRapido = async () => {
    if (!search_productos_rapido.value || search_productos_rapido.value.trim() === '') {
        return;
    }
    
    isLoading.value = true;
    try {
        const response = await ProductoRepository.getAll({
            filtro: form.value.productos_temp,
            search: search_productos_rapido.value.trim()
        });
        
        if (response.data.length === 0) {
            showMessage('No se encontró ningún producto', 'info');
            search_productos_rapido.value = '';
        } else if (response.data.length === 1) {
            // Si hay exactamente un resultado, agregarlo automáticamente
            agregarProductoRapido(response.data[0]);
        } else {
            // Si hay múltiples resultados, abrir el modal con los resultados
            obtener_productos.value = response.data;
            search_productos.value = search_productos_rapido.value;
            search_productos_rapido.value = '';
            modal_index_productos.show();
        }
    } catch (error) {
        console.error('Error al buscar producto:', error);
        showMessage('Error al buscar producto', 'error');
    } finally {
        isLoading.value = false;
    }
};

// Función para buscar y agregar producto rápidamente desde el campo inferior
const buscarYAgregarProductoRapidoFinal = async () => {
    if (!search_productos_rapido_final.value || search_productos_rapido_final.value.trim() === '') {
        return;
    }
    
    isLoading.value = true;
    try {
        const response = await ProductoRepository.getAll({
            filtro: form.value.productos_temp,
            search: search_productos_rapido_final.value.trim()
        });
        
        if (response.data.length === 0) {
            showMessage('No se encontró ningún producto', 'info');
            search_productos_rapido_final.value = '';
        } else if (response.data.length === 1) {
            // Si hay exactamente un resultado, agregarlo automáticamente
            agregarProductoRapido(response.data[0]);
        } else {
            // Si hay múltiples resultados, abrir el modal con los resultados
            obtener_productos.value = response.data;
            search_productos.value = search_productos_rapido_final.value;
            search_productos_rapido_final.value = '';
            modal_index_productos.show();
        }
    } catch (error) {
        console.error('Error al buscar producto:', error);
        showMessage('Error al buscar producto', 'error');
    } finally {
        isLoading.value = false;
    }
};

// Función auxiliar para agregar producto rápidamente (sin abrir modal)
const agregarProductoRapido = (element) => {
    const comprobar_existe = form.value.productos_temp.filter(producto => producto.producto_id === element.id);
    if (comprobar_existe.length > 0) {
        showMessage('El producto ya está en la lista', 'info');
        search_productos_rapido.value = '';
        search_productos_rapido_final.value = '';
        return;
    }
    
    const filtro = {
        folio: 'P-'+element.id,
        descripcion: element.nombre,
        venta_id:null,
        producto_id: element.id,
        tratamiento_id: null,
        vale_id:null,
        total:element.total,
        subtotal:element.precio,
        precio_unitario:element.precio,
        cantidad:1,
        iva:element.iva_def,
        iva_temp:element.iva,
        ieps:element.ieps_def,
        ieps_temp:element.ieps
    };
    form.value.productos_temp.push(filtro);
    search_productos_rapido.value = '';
    search_productos_rapido_final.value = '';
    conteo();
    showMessage('Producto agregado: ' + element.nombre, 'success');
};

// Función para detectar cuando se escribe un código de barras completo en el campo superior
const onSearchProductosRapidoInput = () => {
    const codigo = search_productos_rapido.value.trim();
    if (/^\d{13}$/.test(codigo)) {
        setTimeout(() => {
            if (search_productos_rapido.value.trim() === codigo) {
                buscarYAgregarProductoRapido();
            }
        }, 300);
    }
};

// Función para detectar cuando se escribe un código de barras completo en el campo inferior
const onSearchProductosRapidoFinalInput = () => {
    const codigo = search_productos_rapido_final.value.trim();
    if (/^\d{13}$/.test(codigo)) {
        setTimeout(() => {
            if (search_productos_rapido_final.value.trim() === codigo) {
                buscarYAgregarProductoRapidoFinal();
            }
        }, 300);
    }
};

const onChangeValores = (i) => {
    let precio = form.value.productos_temp[i].precio_unitario * form.value.productos_temp[i].cantidad;
    form.value.productos_temp[i].subtotal = precio;
    form.value.productos_temp[i].total = precio;
    form.value.productos_temp[i].iva_temp = precio *(form.value.productos_temp[i].iva);
    form.value.productos_temp[i].ieps = precio *(form.value.productos_temp[i].ieps);
    conteo();
}

const changeSucursalCustom = () => {
    isLoading.value = true;
    sucursal_id.value = {
        id: storeState.current_state.sucursal_mode,
        nombre: storeState.current_state.sucursal_name_mode,
    };
    form.value.sucursal_id = storeState.current_state.sucursal_mode;
    search.value.sucursal_id = storeState.current_state.sucursal_mode;
    isLoading.value = false;
}

const buscar_cliente = () => {
    search.value.search = "";
    obtener_clientes.value=[];
    modal_index_cliente.show();
}

const buscar_sesion = () => {
    search.value.search = "";
    obtener_sesiones.value=[];
    modal_index_sesiones.show();
}

const getClienteAll = async () => {
    try {
        isLoading.value = true;
        const response = await ClienteRepository.getAllSearch(search.value);
        obtener_clientes.value = response.data;
        isLoading.value = false;
    } catch (error) {
        console.log(error);
    }
};

const getSesionAll = async () => {
    try {
        isLoading.value = true;
        const response = await SesionRepository.getAllSearch(search.value);
        obtener_sesiones.value = response.data;
        isLoading.value = false;
    } catch (error) {
        console.log(error);
    }
};

const getSucursalAll = async () => {
    try {
        const response = await SucursalRepository.getAll();
        return response.data;
    } catch (error) {
        console.log(error);
    }
};

const getTipoPagoAll = async () => {
    try {
        const response = await TipoPagoRepository.getAll();
        return response.data;
    } catch (error) {
        console.log(error);
    }
};

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

const createVenta = async () => {
    try {
        is_entrada.value = true;
        isLoading.value = true;
        const response = await VentaRepository.createVenta(form.value);
        mostrar_ticket.value=true;
        data_ticket.value=response.data;
        showMessage('Guardado correctamente');
        initializeCreate();
        checar_vale();
        // if(is_vale.value){
        //     abrir_vale();
        // }
        abrir_ticket();
        // abrir_vale();
        registerPagoModal.hide();
        await new Promise((resolve) => setTimeout(resolve, 1500)); // Esperar 1.5s extra
        captureAndSend();
        isLoading.value = false;
    } catch (error) {
        if (axios.isAxiosError(error)) errors.value = error.response.data.errors;
        isLoading.value = false;
        showMessage('Hay Error en la captura','error');
    }
    await nextTick(); // Esperar a que Vue renderice el modal
};

const abrir_vale = () => {
    registervale.show();
}

const abrir_ticket = () => {

    registerticket.show();
}

const checar_vale = () => {
    mostrar_vale.value=false;
    data_ticket.value.venta_detalle.forEach((element) => {
        if(element.vale_id){
            mostrar_vale.value=true;
        }
    });
}

// Función de impresión mejorada que verifica primero impresora directa
const printContent = async (content, tipoImpresion = null) => {
    // Detectar tipo de impresión desde el contentId si no se especificó
    if (!tipoImpresion) {
        if (content.includes('printable-content-vale-')) {
            tipoImpresion = 'vale';
        } else if (content.includes('printable-content-ticket')) {
            tipoImpresion = 'ticket';
        } else {
            tipoImpresion = 'ticket'; // Por defecto
        }
    }

    isLoading.value = true;
    
    try {
        // Si es ticket, intentar primero con impresora directa
        if (tipoImpresion === 'ticket' && data_ticket.value && data_ticket.value.id) {
            try {
                const response = await imprimirTicketDirecto(data_ticket.value.id);
                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 es vale, intentar primero con impresora directa
        if (tipoImpresion === 'vale') {
            let valeId = null;
            let valeToken = null;
            
            // Extraer vale_id del contentId si contiene 'printable-content-vale-'
            if (content.includes('printable-content-vale-')) {
                const match = content.match(/printable-content-vale-(\d+)/);
                if (match && match[1]) {
                    valeId = parseInt(match[1]);
                    // Buscar el vale en los detalles para obtener el token
                    if (data_ticket.value && data_ticket.value.venta_detalle) {
                        const detalleConVale = data_ticket.value.venta_detalle.find(d => d.vale_id === valeId);
                        if (detalleConVale && detalleConVale.vale && detalleConVale.vale.token) {
                            valeToken = detalleConVale.vale.token;
                        }
                    }
                }
            } else if (data_ticket.value && data_ticket.value.venta_detalle) {
                // Si no se puede extraer del contentId, buscar el primer vale
                const detalleConVale = data_ticket.value.venta_detalle.find(d => d.vale_id);
                if (detalleConVale && detalleConVale.vale_id) {
                    valeId = detalleConVale.vale_id;
                    if (detalleConVale.vale && detalleConVale.vale.token) {
                        valeToken = detalleConVale.vale.token;
                    }
                }
            }
            
            if (valeId) {
                try {
                    const response = await imprimirValeDirecto(valeId, valeToken);
                    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 el servicio de impresión con configuración de BD
        await imprimirConConfiguracion(content, tipoImpresion, storeState.current_state.sucursal_mode);
        isLoading.value = false;
    } catch (error) {
        console.error('Error al imprimir con configuración:', error);
        isLoading.value = false;
        // Fallback a función original si hay error
        printContentOriginal(content);
    }
};

// Función de impresión original como fallback
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: 80%;
                        }
                    }
                </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 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",
    });
};

const userLoad = async () => {
    const response = await obtener_user();
    store.current_user.id = response.id;
    store.current_user.name = response.name;
    store.current_user.email = response.email;
    dataTienda.value = response.tiendas;
}

const captureAndSend = async () => {
    isLoading.value = true;
    if (!ticketRef.value && !valesTempRef.value) {
        return;
    }

    await new Promise(resolve => setTimeout(resolve, 500)); // Agregar un pequeño retraso

    const canvas = await html2canvas(ticketRef.value, {
        backgroundColor: null, // Asegura que respete fondos transparentes
        useCORS: true, // Permite cargar imágenes externas si las hay
        scale: 2,
    });
    const valesTemp = valesRef.value.cloneNode(true);
    valesTemp.style.position = 'absolute';
    valesTemp.style.left = '-9999px';
    document.body.appendChild(valesTemp);
    const canvasVale = await html2canvas(valesTemp, {
        backgroundColor: null, // Asegura que respete fondos transparentes
        useCORS: true, // Permite cargar imágenes externas si las hay
        scale: 2,
    });
    document.body.removeChild(valesTemp);

    // Convertir la imagen a base64 y luego a Blob
    const dataURL = canvas.toDataURL("image/png");
    const blob = await (await fetch(dataURL)).blob();

    const dataURLVale = canvasVale.toDataURL("image/png");
    const blobVale = await (await fetch(dataURLVale)).blob();

    if (!blob && !blobVale) {
        return;
    }

    const formData = new FormData();
    formData.append("ticket", blob, "ticket.png");
    formData.append("vales", blobVale, "vales.png");

    try {
        const response = await VentaRepository.seedValeTicket(formData, data_ticket.value.id);
    } catch (error) {
        console.error("Error al enviar la imagen:", error);
    }
    isLoading.value = false;
};

const agregar_pagos = () => {
    form.value.pagos.push({
        banco: "",
        folio_pago: "",
        tipo_pago_id: 1,
        pago: 0
    });
};

const removerItemPagos = (i) => {
    form.value.pagos.splice(i, 1);
    onChangeValoresTotal();
};

const getBancos = async () => {
    const response = await BancoRepository.getBancoForSelect();
    optionsBancos.value = response.data.map(item => item.nombre);
};

onMounted(async () => {
    await userLoad();
    const model_sucursal = await getSucursalAll();
    optionsSucursales.value = model_sucursal;
    const model_tipo_pago = await getTipoPagoAll();
    optionsTipoPago.value = model_tipo_pago;
    await getBancos();
    modal_index_cliente = new window.bootstrap.Modal(
        document.getElementById("modal_index_cliente")
    );
    modal_index_productos = new window.bootstrap.Modal(
        document.getElementById("modal_index_productos")
    );
    modal_index_tratamientos = new window.bootstrap.Modal(
        document.getElementById("modal_index_tratamientos")
    );
    modal_index_sesiones = new window.bootstrap.Modal(
        document.getElementById("modal_index_sesiones")
    );
    productostiendasModal = new window.bootstrap.Modal(
        document.getElementById("productostiendasModal")
    );
    registerPagoModal = new window.bootstrap.Modal(
        document.getElementById("registerPagoModal")
    );
    registerticket = new window.bootstrap.Modal(
        document.getElementById("registerticket")
    );
    registervale = new window.bootstrap.Modal(
        document.getElementById("registervale")
    );
    initializeCreate();
    isLoading.value=false;
});
</script>
