<template>
    <div class="layout-px-spacing">
        <div class="row layout-top-spacing">
            <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                <div class="panel p-3">
                    <div class="row">
                        <div class="col-xl-12 col-lg-12 col-sm-12">
                            <div class="text-center titulo-dorado">
                                <h1 class="pull-left">Mi lista</h1>
                                <button
                                    id="evento_recargar_tienda_index"
                                    class="btn btn-black pull-right m-1"
                                    @click="refrescar"
                                    >
                                    Refrescar
                                </button>
                                <button
                                    v-if="(is('Cliente'))"
                                    id="evento_recargar_tienda_index"
                                    class="btn btn-black pull-right m-1"
                                    @click="pagar"
                                >
                                    Pagar
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="custom-table">
                        <v-client-table
                            :data="obtener_productos"
                            :columns="columns1"
                            :options="table_option1"
                        >
                            <template #id="props">
                                <div
                                    class="card h-100 shadow-sm position-relative custom-file-container__image-preview_update_presentacion"
                                >
                                    <button
                                        class="btn btn-success btn-sm position-absolute top-0 end-0 m-2"
                                        @click="
                                            getProductoIdDetalle(props.row)
                                        "
                                    >
                                        Ver más...
                                    </button>
                                    <img :src="urls + props.row.producto.path.replace('public','/storage')" alt="" style="width: 70px;"/>
                                </div>
                            </template>
                            <template #nombre="props">
                                <table  class="cursor_activo" @click="getProductoId(props.row)">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <h3>
                                                    <b>{{ props.row.producto.nombre }}</b>
                                                </h3>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h4>
                                                    {{ currency(props.row.precio_unitario) }} X {{ props.row.cantidad }} = {{ currency(props.row.total) }}
                                                </h4>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </template>
                            <template #actions="item">
                                <a
                                    href="javascript:void(0);"
                                    title="Delete"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    @click="getProductoId(item.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-edit-2" data-v-5522efca=""><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
                                </a>
                                <a
                                    href="javascript:void(0);"
                                    title="Delete"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    @click="deleteItemTemp(item.row.id)"
                                >
                                    <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>
                            </template>
                        </v-client-table>
                        <div class="row">
                            <div class="col-xl-12 col-lg-12 col-sm-12">
                                <div style="text-align: start;">
                                    <button
                                        v-if="(is('Cliente'))"
                                        id="evento_recargar_tienda_index"
                                        class="btn btn-black pull-left m-1"
                                        @click="pagar"
                                    >
                                        Pagar
                                    </button>
                                </div>
                                <div style="text-align: end;">
                                    <h4><b>Total: {{ currency(suma_total) }}</b></h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Register Modal -->
        <div
            class="modal fade"
            id="registerModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="registerModalLabel"
            aria-hidden="true"
            v-show="true"
        >
            <div class="modal-dialog modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header titulo-dorado" id="registerModalLabel">
                        <h4 class="modal-title">Cambiar cantidad</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-md-12 col-sm-12 col-12">
                                <div class="custom-file-container__image-preview_update_presentacion_tienda">

                                    <form class="mt-0" ref="formComponent" @submit.stop.prevent="">
                                        <table class="mt-0">
                                            <tbody>
                                                <tr>
                                                    <td colspan="1">
                                                        <h4>
                                                            <b>Precio:</b>
                                                        </h4>
                                                    </td>
                                                    <td></td>
                                                    <td colspan="1">
                                                        <h4>
                                                            <b>Total:</b>
                                                        </h4>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">
                                                        <h4>
                                                            {{ currency(dataPreview.precio) }}
                                                        </h4>
                                                    </td>
                                                    <td></td>
                                                    <td colspan="1">
                                                        <h4>
                                                            {{ currency(dataPreview.precio * form.cantidad) }}
                                                        </h4>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="3">
                                                        <div class="input-group mt-4">
                                                            <button
                                                                type="button"
                                                                class="btn btn-warning"
                                                                @click="
                                                                    () => {
                                                                        form.cantidad--;
                                                                    }
                                                                "
                                                            >
                                                                <svg
                                                                    viewBox="0 0 16 16"
                                                                    width="1em"
                                                                    height="1em"
                                                                    focusable="false"
                                                                    role="img"
                                                                    aria-label="dash"
                                                                    aria-hidden="true"
                                                                    xmlns="http://www.w3.org/2000/svg"
                                                                    fill="currentColor"
                                                                    class="bi-dash b-icon bi"
                                                                >
                                                                    <g transform="translate(8 8) scale(1.25 1.25) translate(-8 -8)"><path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"></path></g>
                                                                </svg>
                                                            </button>
                                                            <number-spinner v-model="form.cantidad" :min="1" class="form-control" :vertical="true" :circular="true" :max="1000" />

                                                            <button
                                                                type="button"
                                                                class="btn btn-danger"
                                                                @click="
                                                                    () => {
                                                                        form.cantidad++;
                                                                    }
                                                                "
                                                            >
                                                                <svg
                                                                    viewBox="0 0 16 16"
                                                                    width="1em"
                                                                    height="1em"
                                                                    focusable="false"
                                                                    role="img"
                                                                    aria-label="plus"
                                                                    aria-hidden="true"
                                                                    xmlns="http://www.w3.org/2000/svg"
                                                                    fill="currentColor"
                                                                    class="bi-plus b-icon bi"
                                                                >
                                                                    <g transform="translate(8 8) scale(1.25 1.25) translate(-8 -8)">
                                                                        <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
                                                                    </g>
                                                                </svg>
                                                            </button>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <td></td>
                                                    <td width="50%">
                                                        <div class="form-group mt-4">
                                                            <button
                                                                type="button"
                                                                class="btn btn-black w-100"
                                                                @click="updateTienda"
                                                            >
                                                                Actualizar carrito
                                                            </button>
                                                        </div>
                                                        <div class="form-group mt-1">
                                                            <button
                                                                type="button"
                                                                class="btn btn-danger w-100"
                                                                @click="deleteItem"
                                                            >
                                                                Eliminar
                                                            </button>
                                                        </div>
                                                    </td>
                                                    <td></td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Register Modal detalle -->
        <div
            class="modal fade"
            id="registerModalDetalle"
            tabindex="-1"
            role="dialog"
            aria-labelledby="registerModalLabel"
            aria-hidden="true"
            v-show="true"
        >
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div
                        class="modal-header titulo-dorado"
                        id="registerModalLabel"
                    >
                        <h4 class="modal-title">Ver más</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">
                                <h3>
                                    <b>{{ dataPreview.nombre }}</b>
                                </h3>
                            </div>
                            <div
                                class="col-md-6 col-sm-12 col-6"
                                style="text-align: center"
                            >
                                <img
                                    :src="
                                        urls +
                                        dataPreview.path.replace(
                                            'public',
                                            '/storage'
                                        )
                                    "
                                    alt=""
                                    style="width: 80%"
                                />
                            </div>
                            <div class="col-md-6 col-sm-12 col-6">
                                <div
                                    class="custom-file-container__image-preview_update_presentacion_tienda"
                                >
                                    <table class="mt-3">
                                        <tbody>
                                            <tr>
                                                <td colspan="2">
                                                    <h6>
                                                        <b>Marca:</b>
                                                    </h6>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <h6>
                                                        {{ dataPreview.marca }}
                                                    </h6>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <h6>
                                                        <b>Tipo producto:</b>
                                                    </h6>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <h6>
                                                        {{
                                                            dataPreview.tipo_producto
                                                        }}
                                                    </h6>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <h6>
                                                        <b>Tipo tratamiento:</b>
                                                    </h6>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <h6>
                                                        {{
                                                            dataPreview.tipo_tratamiento
                                                        }}
                                                    </h6>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-sm-12 mt-4">
                                <span v-html="dataPreview.descripcion"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Eliminar Modal -->
        <div
            class="modal fade"
            id="deleteModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
        >
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">
                            ¿Estás seguro de eliminar este producto?
                        </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="deleteTienda()"
                        >
                            Aceptar
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal direccion -->
        <div
            id="modal_index_direccion"
            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">Buscar dirección</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">
                            <button
                                class="btn btn-black pull-right m-1"
                                @click="nuevoDireccion"
                            >
                                Nuevo
                            </button>
                            <input
                                v-model="search.search"
                                class="form-control w-100 product-search"
                                placeholder="Buscar..."
                                @keyup.enter="getAllDirecciones"
                            />
                        </div>
                        <div class="custom-table">
                            <v-client-table
                                :data="obtener_direcciones"
                                :columns="columns_direcciones"
                                :options="table_option_direcciones"
                                ref="table_direccion"
                            >
                                <template #id="props">
                                    <button class="btn btn-black" @click="agregarDireccion(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>
        <!-- Modal datos fiscales-->
        <div
            id="modal_index_datos_fiscales"
            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">Buscar Constancia de situación fiscal</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">
                            <button
                                class="btn btn-black pull-right m-1"
                                @click="nuevoDatosFiscales"
                            >
                                Nuevo
                            </button>
                            <input
                                v-model="search.search"
                                class="form-control w-100 product-search"
                                placeholder="Buscar..."
                                @keyup.enter="getAllDatosFiscales"
                            />
                        </div>
                        <div class="custom-table">
                            <v-client-table
                                :data="obtener_datos_fiscales"
                                :columns="columns_datos_fiscales"
                                :options="table_option_datos_fiscales"
                                ref="table_datos_fiscales"
                            >
                                <template #id="props">
                                    <button class="btn btn-black" @click="agregarDatosFiscales(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>
        <!-- Modal opciones de pago -->
        <div
            id="modal_index_opciones_pago"
            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">Buscar opciones de pago</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="getAllOpcionesPago"
                            />
                        </div>
                        <div class="custom-table">
                            <v-client-table
                                :data="obtener_opciones_pago"
                                :columns="columns_opciones_pago"
                                :options="table_option_opciones_pago"
                                ref="table_opciones_pago"
                            >
                                <template #id="props">
                                    <button class="btn btn-black" @click="agregarOpcionesPago(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>
        <!-- Modal ventas proceso -->
        <div
            id="modal_index_ventas"
            class="modal fade"
        >
            <div class="modal-dialog modal-lg">
                <div class="modal-content mailbox-popup">
                    <div class="modal-header">
                        <h5 class="modal-title">Proceso de pago</h5>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        <!-- Sección 1: Opción de Pago -->
                        <div class="mb-4">
                            <h5 class="titulo-dorado">1. Opción de Pago</h5>
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i> Selecciona la opción de pago por transferencia bancaria.
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p v-if="form_pagar.opcion_pago_transferencia_id">
                                        <i class="fas fa-check-circle text-success"></i> Opción de pago seleccionada
                                    </p>
                                    <p v-else>
                                        <i class="fas fa-exclamation-circle text-warning"></i> No has seleccionado una opción de pago
                                    </p>
                                    <div class="form-group">
                                        <input
                                            type="hidden"
                                            v-model="form_pagar.opcion_pago_transferencia_id"
                                            :class="[
                                                is_entrada
                                                    ? !errors.opcion_pago_transferencia_id
                                                        ? 'is-valid'
                                                        : 'is-invalid'
                                                    : '',
                                            ]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.opcion_pago_transferencia_id" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                    <div
                                        v-if="form_pagar.opcion_pago_transferencia_id"
                                        class="table-responsive"
                                    >
                                        <table class="table table-bordered">
                                            <tbody>
                                                <tr>
                                                    <th width="10%">Banco</th>
                                                    <th width="30%">Titular</th>
                                                    <th width="40%">CLABE</th>
                                                    <th width="20%">Cuenta</th>
                                                </tr>
                                                <tr>
                                                    <td>{{ preeview_opciones_pago.banco }}</td>
                                                    <td>{{ preeview_opciones_pago.titular }}</td>
                                                    <td>{{ preeview_opciones_pago.clabe }}</td>
                                                    <td>{{ preeview_opciones_pago.cuenta }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <button class="btn btn-black" @click="abrirModalOpcionesPago">
                                    {{ form_pagar.opcion_pago_transferencia_id ? 'Cambiar' : 'Seleccionar' }}
                                </button>
                            </div>
                        </div>

                        <!-- Sección 2: Dirección de Entrega -->
                        <div class="mb-4">
                            <h5 class="titulo-dorado">2. Dirección de Entrega</h5>
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i> La dirección de entrega es obligatoria para procesar tu pedido.
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p v-if="form_pagar.direccion_id">
                                        <i class="fas fa-check-circle text-success"></i> Dirección seleccionada
                                    </p>
                                    <p v-else>
                                        <i class="fas fa-exclamation-circle text-warning"></i> No has seleccionado una dirección
                                    </p>
                                    <div class="form-group">
                                        <input
                                            type="hidden"
                                            v-model="form_pagar.direccion_id"
                                            :class="[
                                                is_entrada
                                                    ? !errors.direccion_id
                                                        ? 'is-valid'
                                                        : 'is-invalid'
                                                    : '',
                                            ]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.direccion_id" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                    <div
                                        v-if="form_pagar.direccion_id"
                                        class="table-responsive"
                                    >
                                        <table class="table table-bordered">
                                            <tbody>
                                                <tr>
                                                    <th width="20%">Calle</th>
                                                    <th width="5%">Número Exterior</th>
                                                    <th width="5%">Número Interior</th>
                                                    <th width="30%">Colonia</th>
                                                    <th width="20%">Ciudad</th>
                                                    <th width="20%">Estado</th>
                                                </tr>
                                                <tr>
                                                    <td>{{ preeview_direccion.calle }}</td>
                                                    <td>{{ preeview_direccion.numero_exterior }}</td>
                                                    <td>{{ preeview_direccion.numero_interior }}</td>
                                                    <td>{{ preeview_direccion.colonia }}</td>
                                                    <td>{{ preeview_direccion.ciudad }}</td>
                                                    <td>{{ preeview_direccion.estado }}</td>
                                                </tr>
                                                <tr>
                                                    <td colspan="6">
                                                        <p class="mb-0"><b>Referencia:</b></p>
                                                        <p class="mb-0">{{ preeview_direccion.referencia }}</p>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <button class="btn btn-black" @click="abrirModalDireccion">
                                    {{ form_pagar.direccion_id ? 'Cambiar' : 'Seleccionar' }}
                                </button>
                            </div>
                        </div>

                        <!-- Sección 3: Datos Fiscales (Opcional) -->
                        <div class="mb-4">
                            <h5 class="titulo-dorado">3. Datos Fiscales (Opcional)</h5>
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i> Si necesitas factura, selecciona tus datos fiscales.
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p v-if="form_pagar.datos_fiscales_id">
                                        <i class="fas fa-check-circle text-success"></i> Datos fiscales seleccionados
                                    </p>
                                    <p v-else>
                                        <i class="fas fa-exclamation-circle text-warning"></i> No has seleccionado datos fiscales
                                    </p>
                                    <div class="form-group">
                                        <input
                                            type="hidden"
                                            v-model="form_pagar.datos_fiscales_id"
                                            :class="[
                                                is_entrada
                                                    ? !errors.datos_fiscales_id
                                                        ? 'is-valid'
                                                        : 'is-invalid'
                                                    : '',
                                            ]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.datos_fiscales_id" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                    <div
                                        v-if="form_pagar.datos_fiscales_id"
                                        class="table-responsive"
                                    >
                                        <table class="table table-bordered">
                                            <tbody>
                                                <tr>
                                                    <th width="20%">RFC</th>
                                                    <th width="80%">Razón Social</th>
                                                </tr>
                                                <tr>
                                                    <td>{{ preeview_datos_fiscales.rfc }}</td>
                                                    <td>{{ preeview_datos_fiscales.razon_social }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <button class="btn btn-black" @click="abrirModalDatosFiscales">
                                    {{ form_pagar.datos_fiscales_id ? 'Cambiar' : 'Seleccionar' }}
                                </button>
                            </div>
                        </div>

                        <!-- Sección 4: Comprobante de Pago -->
                        <div class="mb-4">
                            <h5 class="titulo-dorado">4. Comprobante de Pago</h5>
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i> Sube el comprobante de tu transferencia bancaria.
                            </div>
                            <div class="custom-file-container" data-upload-id="comprobantePago">
                                <div class="form-group">
                                    <input
                                        id="comprobante_pago_file"
                                        type="file"
                                        :class="[
                                            is_entrada
                                                ? !errors.comprobante_pago
                                                    ? 'form-control is-valid'
                                                    : 'form-control  is-invalid'
                                                : 'form-control',
                                        ]"
                                        accept="image/*,.pdf"
                                        @change="handleComprobanteUpload"
                                    />
                                    <div class="valid-feedback"></div>
                                    <div class="invalid-feedback">
                                        <li v-for="item in errors.comprobante_pago" :key="item">
                                            {{ item }}
                                        </li>
                                    </div>
                                </div>
                            </div>
                            <div class="alert alert-info">
                                Los tipos de archivo permitidos son: pdf, jpg, jpeg, png y el tamaño máximo es de 2MB.
                            </div>
                        </div>

                        <!-- Información Importante -->
                        <div class="alert alert-warning">
                            <h6><i class="fas fa-clock"></i> Información Importante:</h6>
                            <ul class="mb-0">
                                <li>La validación de tu pago puede tardar hasta 2 días hábiles.</li>
                                <li>Recibirás una notificación cuando tu pago sea confirmado.</li>
                                <li>Tu pedido será procesado una vez confirmado el pago.</li>
                            </ul>
                        </div>

                        <!-- Botón de Procesar -->
                        <div class="text-center mt-4">
                            <button
                                class="btn btn-black btn-lg"
                                :disabled="!form_pagar.direccion_id || !form_pagar.opcion_pago_transferencia_id"
                                @click="procesarPago"
                            >
                                Procesar Pago
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Register Modal nueva direccion -->
        <div
            class="modal fade"
            id="modal_new_direccion"
            tabindex="-1"
            role="dialog"
            aria-labelledby="modal_new_direccionLabel"
            aria-hidden="true"
            v-show="true"
        >
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div
                        class="modal-header titulo-dorado"
                        id="modal_new_direccionLabel"
                    >
                        <h4 class="modal-title">
                            Nueva dirección
                        </h4>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        <form
                            class="mt-0"
                            ref="formComponent"
                            @submit.stop.prevent=""
                        >
                            <div class="row">
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Calle</label>
                                        <textarea
                                            class="form-control mb-2"
                                            placeholder="Calle"
                                            v-model="formDireccion.calle"
                                            :class="[
                                                is_entrada_direccion
                                                    ? !errors_direccion.calle
                                                        ? 'is-valid'
                                                        : 'is-invalid'
                                                    : '',
                                            ]"
                                        >
                                        </textarea>
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors_direccion.calle" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Número exterior</label>
                                        <input
                                            type="text"
                                            class="form-control mb-2"
                                            placeholder="Número exterior"
                                            v-model="formDireccion.numero_exterior"
                                            :class="[is_entrada_direccion ? !errors_direccion.numero_exterior ? 'is-valid' : 'is-invalid' : '',]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors_direccion.numero_exterior" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Número interior</label>
                                        <input
                                            type="text"
                                            class="form-control mb-2"
                                            placeholder="Número interior"
                                            v-model="formDireccion.numero_interior"
                                            :class="[is_entrada_direccion ? !errors_direccion.numero_interior ? 'is-valid' : 'is-invalid' : '',]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors_direccion.numero_interior" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Colonia</label>
                                        <input
                                            type="text"
                                            class="form-control mb-2"
                                            placeholder="Colonia"
                                            v-model="formDireccion.colonia"
                                            :class="[is_entrada_direccion ? !errors_direccion.colonia ? 'is-valid' : 'is-invalid' : '',]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors_direccion.colonia" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Código postal</label>
                                        <input
                                            type="text"
                                            class="form-control mb-2"
                                            placeholder="Código postal"
                                            v-model="formDireccion.codigo_postal"
                                            :class="[is_entrada_direccion ? !errors_direccion.codigo_postal ? 'is-valid' : 'is-invalid' : '',]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors_direccion.codigo_postal" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Ciudad</label>
                                        <input
                                            type="text"
                                            class="form-control mb-2"
                                            placeholder="Ciudad"
                                            v-model="formDireccion.ciudad"
                                            :class="[is_entrada_direccion ? !errors_direccion.ciudad ? 'is-valid' : 'is-invalid' : '',]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors_direccion.ciudad" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Estado</label>
                                        <input
                                            type="text"
                                            class="form-control mb-2"
                                            placeholder="Estado"
                                            v-model="formDireccion.estado"
                                            :class="[is_entrada_direccion ? !errors_direccion.estado ? 'is-valid' : 'is-invalid' : '',]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors_direccion.estado" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>País</label>
                                        <input
                                            type="text"
                                            class="form-control mb-2"
                                            placeholder="País"
                                            v-model="formDireccion.pais"
                                            :class="[is_entrada_direccion ? !errors_direccion.pais ? 'is-valid' : 'is-invalid' : '',]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors_direccion.pais" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Principal</label>
                                        <multiselect
                                            v-model="formDireccion.es_principal"
                                            mode="tags"
                                            :close-on-select="true"
                                            :searchable="true"
                                            :options="optionsEsPrincipal"
                                            :class="[
                                                is_entrada_direccion
                                                    ? !errors_direccion.es_principal
                                                        ? '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 in errors_direccion.es_principal" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Estatus</label>
                                        <multiselect
                                            v-model="formDireccion.estatus"
                                            mode="tags"
                                            :close-on-select="true"
                                            :searchable="true"
                                            :options="optionsEstatus"
                                            :class="[
                                                is_entrada_direccion
                                                    ? !errors_direccion.estatus
                                                        ? '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 in errors_direccion.estatus" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-sm-12 col-12">
                                <div class="form-group">
                                    <label>Referencia</label>
                                    <textarea
                                        class="form-control mb-2"
                                        placeholder="Referencia"
                                        v-model="formDireccion.referencia"
                                        :class="[
                                            is_entrada_direccion
                                                ? !errors_direccion.referencia
                                                    ? 'is-valid'
                                                    : 'is-invalid'
                                                : '',
                                        ]"
                                    >
                                    </textarea>
                                    <div class="valid-feedback"></div>
                                    <div class="invalid-feedback">
                                        <li v-for="item in errors_direccion.referencia" :key="item">
                                            {{ item }}
                                        </li>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 m-1">
                                    <div class="form-group">
                                        <button
                                            type="button"
                                            class="btn btn-black w-100"
                                            @click="createDireccion"
                                        >
                                            Guardar
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- Register Modal nueva datos fiscales -->
        <div
            class="modal fade"
            id="modal_new_datos_fiscales"
            tabindex="-1"
            role="dialog"
            aria-labelledby="modal_new_datos_fiscalesLabel"
            aria-hidden="true"
            v-show="true"
        >
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div
                        class="modal-header titulo-dorado"
                        id="modal_new_datos_fiscalesLabel"
                    >
                        <h4 class="modal-title">
                            Nueva datos fiscales
                        </h4>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        <form
                            class="mt-0"
                            ref="formComponent"
                            @submit.stop.prevent=""
                        >
                            <div class="row">
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>RFC</label>
                                        <input
                                            type="text"
                                            class="form-control mb-2"
                                            placeholder="RFC"
                                            v-model="form_datos_fiscales.rfc"
                                            :class="[is_entrada_datos_fiscales ? !errors_datos_fiscales.rfc ? 'is-valid' : 'is-invalid' : '',]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors_datos_fiscales.rfc" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Razón social</label>
                                        <input
                                            type="text"
                                            class="form-control mb-2"
                                            placeholder="Razón social"
                                            v-model="form_datos_fiscales.razon_social"
                                            :class="[is_entrada_datos_fiscales ? !errors_datos_fiscales.razon_social ? 'is-valid' : 'is-invalid' : '',]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors_datos_fiscales.razon_social" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Correo</label>
                                        <input
                                            type="email"
                                            class="form-control mb-2"
                                            placeholder="Correo electrónico"
                                            v-model="form_datos_fiscales.correo"
                                            :class="[is_entrada_datos_fiscales ? !errors_datos_fiscales.correo ? 'is-valid' : 'is-invalid' : '',]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors_datos_fiscales.correo" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Uso de CFDI</label>
                                        <multiselect
                                            v-model="form_datos_fiscales.uso_cfdi"
                                            :close-on-select="true"
                                            :searchable="true"
                                            :options="optionsUsoCfdi"
                                            label="label"
                                            track-by="value"
                                            :class="[
                                                is_entrada_datos_fiscales
                                                    ? !errors_datos_fiscales.uso_cfdi
                                                        ? '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 in errors_datos_fiscales.uso_cfdi" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Régimen Fiscal</label>
                                        <multiselect
                                            v-model="form_datos_fiscales.regimen_fiscal"
                                            :close-on-select="true"
                                            :searchable="true"
                                            :options="optionsRegimenFiscal"
                                            label="label"
                                            track-by="value"
                                            :class="[
                                                is_entrada_datos_fiscales
                                                    ? !errors_datos_fiscales.regimen_fiscal
                                                        ? '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 in errors_datos_fiscales.regimen_fiscal" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Método de Pago</label>
                                        <multiselect
                                            v-model="form_datos_fiscales.metodo_pago"
                                            :close-on-select="true"
                                            :searchable="true"
                                            :options="optionsMetodoPago"
                                            label="label"
                                            track-by="value"
                                            :class="[
                                                is_entrada_datos_fiscales
                                                    ? !errors_datos_fiscales.metodo_pago
                                                        ? '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 in errors_datos_fiscales.metodo_pago" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Principal</label>
                                        <multiselect
                                            v-model="form_datos_fiscales.es_principal"
                                            mode="tags"
                                            :close-on-select="true"
                                            :searchable="true"
                                            :options="optionsEsPrincipal"
                                            :class="[
                                                is_entrada_datos_fiscales
                                                    ? !errors_datos_fiscales.es_principal
                                                        ? '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 in errors_datos_fiscales.es_principal" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Estatus</label>
                                        <multiselect
                                            v-model="form_datos_fiscales.estatus"
                                            mode="tags"
                                            :close-on-select="true"
                                            :searchable="true"
                                            :options="optionsEstatus"
                                            :class="[
                                                is_entrada_datos_fiscales
                                                    ? !errors_datos_fiscales.estatus
                                                        ? '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 in errors_datos_fiscales.estatus" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Constancia de situación fiscal</label>
                                        <input
                                            id="documento_fiscal_file"
                                            type="file"
                                            accept="pdf/*"
                                            placeholder="Razón social"
                                            v-on:change="getFileInputValue"
                                            :class="[is_entrada_datos_fiscales ? !errors_datos_fiscales.documento_fiscal_file ? 'is-valid' : 'is-invalid' : '',]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors_datos_fiscales.documento_fiscal_file" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 m-1">
                                    <div class="form-group">
                                        <button
                                            type="button"
                                            class="btn btn-black w-100"
                                            @click="createDatoFiscal"
                                        >
                                            Guardar
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <loading v-model:active="isLoading"
        :can-cancel="false"
        :is-full-page="true"/>
    </div>
</template>
<style>
.table3 .actions svg {
    padding: 2px;
}
</style>

<script setup>
import { onMounted, ref, inject } from "vue";
import "@/assets/sass/elements/tooltip.scss";
import { useMeta } from "@/composables/use-meta";
import { useAuthStore } from "@/store/AuthStore";
import * as UserRepository from "@/repositories/UserRepository";
import * as TiendaRepository from "@/repositories/TiendaRepository";
import * as DireccionEntregaRepository from "@/repositories/DireccionEntregaRepositoriy";
import * as OpcionPagoTransferenciaRepository from "@/repositories/OpcionPagoTransferenciaRepository";
import * as DatoFiscalRepository from "@/repositories/DatoFiscalRepository";
import { NumberSpinner } from 'vue3-number-spinner';
import { useRoute } from "vue-router";
import Multiselect from "@suadelabs/vue3-multiselect";
import "@suadelabs/vue3-multiselect/dist/vue3-multiselect.css";
// loading
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/css/index.css';

import '@/assets/sass/forms/file-upload-with-preview.min.css';

import '@/assets/sass/scrollspyNav.scss';

import axios from "axios";

useMeta({ title: "EGURROLA" });

const store = useAuthStore();
const obtener_productos = ref([]);
const route = useRoute();

const urls = ref(process.env.MIX_URL);

const formatter = new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'});
const roles_is = inject('$is');
const cliente_id = ref(null);
const optionsEstatus = ref(['activo','inactivo']);
const optionsEsPrincipal = ref(['si','no']);

// Opciones SAT - Uso de CFDI
const optionsUsoCfdi = ref([
    { value: 'G01', label: 'G01 - Adquisición de mercancías' },
    { value: 'G02', label: 'G02 - Devoluciones, descuentos o bonificaciones' },
    { value: 'G03', label: 'G03 - Gastos en general' },
    { value: 'I01', label: 'I01 - Construcciones' },
    { value: 'I02', label: 'I02 - Mobiliario y equipo de oficina por inversiones' },
    { value: 'I03', label: 'I03 - Equipo de transporte' },
    { value: 'I04', label: 'I04 - Equipo de cómputo y accesorios' },
    { value: 'I05', label: 'I05 - Dados, troqueles, moldes, matrices y herramental' },
    { value: 'I06', label: 'I06 - Comunicaciones telefónicas' },
    { value: 'I07', label: 'I07 - Comunicaciones satelitales' },
    { value: 'I08', label: 'I08 - Otra maquinaria y equipo' },
    { value: 'D01', label: 'D01 - Honorarios médicos, dentales y gastos hospitalarios' },
    { value: 'D02', label: 'D02 - Gastos médicos por incapacidad o discapacidad' },
    { value: 'D03', label: 'D03 - Gastos funerales' },
    { value: 'D04', label: 'D04 - Donativos' },
    { value: 'D05', label: 'D05 - Intereses reales efectivamente pagados por créditos hipotecarios (casa habitación)' },
    { value: 'D06', label: 'D06 - Aportaciones voluntarias al SAR' },
    { value: 'D07', label: 'D07 - Primas por seguros de gastos médicos' },
    { value: 'D08', label: 'D08 - Gastos de transportación escolar obligatoria' },
    { value: 'D09', label: 'D09 - Depósitos en cuentas para el ahorro, primas que tengan como base planes de pensiones' },
    { value: 'D10', label: 'D10 - Pagos por servicios educativos (colegiaturas)' },
    { value: 'P01', label: 'P01 - Por definir' }
]);

// Opciones SAT - Régimen Fiscal
const optionsRegimenFiscal = ref([
    { value: '601', label: '601 - General de Ley Personas Morales' },
    { value: '603', label: '603 - Personas Morales con Fines no Lucrativos' },
    { value: '605', label: '605 - Sueldos y Salarios e Ingresos Asimilados a Salarios' },
    { value: '606', label: '606 - Arrendamiento' },
    { value: '607', label: '607 - Régimen de Enajenación o Adquisición de Bienes' },
    { value: '608', label: '608 - Demás ingresos' },
    { value: '610', label: '610 - Residentes en el Extranjero sin Establecimiento Permanente en México' },
    { value: '611', label: '611 - Ingresos por Dividendos (socios y accionistas)' },
    { value: '612', label: '612 - Personas Físicas con Actividades Empresariales y Profesionales' },
    { value: '614', label: '614 - Ingresos por intereses' },
    { value: '615', label: '615 - Régimen de los ingresos por obtención de premios' },
    { value: '616', label: '616 - Sin obligaciones fiscales' },
    { value: '620', label: '620 - Sociedades Cooperativas de Producción que optan por diferir sus ingresos' },
    { value: '621', label: '621 - Incorporación Fiscal' },
    { value: '622', label: '622 - Actividades Agrícolas, Ganaderas, Silvícolas y Pesqueras' },
    { value: '623', label: '623 - Opcional para Grupos de Sociedades' },
    { value: '624', label: '624 - Coordinados' },
    { value: '625', label: '625 - Régimen de las Actividades Empresariales con ingresos a través de Plataformas Tecnológicas' },
    { value: '626', label: '626 - Régimen Simplificado de Confianza' }
]);

// Opciones SAT - Método de Pago
const optionsMetodoPago = ref([
    { value: 'PUE', label: 'PUE - Pago en una exhibición' },
    { value: 'PPD', label: 'PPD - Pago en parcialidades o diferido' },
    { value: '01', label: '01 - Efectivo' },
    { value: '02', label: '02 - Cheque nominativo' },
    { value: '03', label: '03 - Transferencia electrónica de fondos' },
    { value: '04', label: '04 - Tarjeta de crédito' },
    { value: '05', label: '05 - Monedero electrónico' },
    { value: '06', label: '06 - Dinero electrónico' },
    { value: '08', label: '08 - Vales de despensa' },
    { value: '12', label: '12 - Dación en pago' },
    { value: '13', label: '13 - Pago por subrogación' },
    { value: '14', label: '14 - Pago por consignación' },
    { value: '15', label: '15 - Condonación' },
    { value: '17', label: '17 - Compensación' },
    { value: '23', label: '23 - Novación' },
    { value: '24', label: '24 - Confusión' },
    { value: '25', label: '25 - Remisión de deuda' },
    { value: '26', label: '26 - Prescripción o caducidad' },
    { value: '27', label: '27 - A satisfacción del acreedor' },
    { value: '28', label: '28 - Tarjeta de débito' },
    { value: '29', label: '29 - Tarjeta de servicios' },
    { value: '30', label: '30 - Aplicación de anticipos' },
    { value: '31', label: '31 - Intermediario pagos' },
    { value: '99', label: '99 - Por definir' }
]);

//formulario crear y eliminar
let registerModal = ref(false);
let registerModalDetalle = ref(false);
let deleteModal = ref(false);
let modal_index_direccion = ref(false);
let modal_new_direccion = ref(false);
let modal_index_opciones_pago = ref(false);
let modal_index_datos_fiscales = ref(false);
let modal_new_datos_fiscales = ref(false);
let modal_index_ventas = ref(false);
const page = ref(1);
const isLoading = ref(true);
const search = ref("");
const pageSize = ref(20);
const totalPages = ref(0);
const is_entrada = ref(false);
const is_entrada_direccion = ref(false);
const is_entrada_datos_fiscales = ref(false);
const editedIndex = ref(-1);
const formComponent = ref(null);
const errors = ref({});
const errors_direccion = ref({});
const errors_datos_fiscales = ref({});
const form = ref({
    user_id: store.current_user.id,
    producto_id: null,
    cantidad: 1,
});

const dataPreview = ref({
    id: "",
    nombre: "",
    descricion: "",
    precio: "",
    total: "",
    path: "",
});

const form_pagar = ref({
    direccion_id: null,
    datos_fiscales_id: null,
    opcion_pago_transferencia_id: null,
    es_pago_tienda: 'si',
    comprobante_pago: null,
    comprobante_pago_path: null,
});

const suma_total = ref(0);



const preeview_direccion = ref({
    id: "",
    calle: "",
    numero_exterior: "",
    numero_interior: "",
    colonia: "",
    codigo_postal: "",
    ciudad: "",
    estado: "",
    es_principal: "",
});
//direcciones index
const obtener_direcciones = ref([]);
const columns_direcciones = ref([
    'id',
    'calle',
    'numero_exterior',
    'numero_interior',
    'colonia',
    'codigo_postal',
    'ciudad',
    'estado',
    'es_principal',
    'actions'
]);
const table_option_direcciones = ref({
    headings: {
        id: (h, row, index) => {
            return "Folio";
        },
        actions: (h, row, index) => {
            return "";
        },
        numero_exterior: (h, row, index) => {
            return "Número exterior";
        },
        numero_interior: (h, row, index) => {
            return "Número interior";
        },
        codigo_postal: (h, row, index) => {
            return "Código postal";
        },
    },
    perPage: 20,
    perPageValues: [20, 50, 100],
    skin: "table table-hover",
    columnsClasses: { count_exp: "count_exp text-center" },
    sortable: [
        'calle',
        'numero_exterior',
        'numero_interior',
        'colonia',
        'codigo_postal',
        'ciudad',
        'estado',
        'es_principal',
    ],
    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,
});

const preeview_opciones_pago = ref({
    id: "" ,
    banco: "",
    titular: "",
    clabe: "",
    cuenta: "",
});

//opciones de pago index
const obtener_opciones_pago = ref([]);
const columns_opciones_pago = ref([
    "id",
    "banco",
    "titular",
    "clabe",
    "cuenta",
    "actions",
]);
const table_option_opciones_pago = ref({
    headings: {
        id: (h, row, index) => {
            return "Folio";
        },
        actions: (h, row, index) => {
            return "";
        },
    },
    perPage: 20,
    perPageValues: [20, 50, 100],
    skin: "table table-hover",
    columnsClasses: { count_exp: "count_exp text-center" },
    sortable: [
        "id",
        "banco",
        "titular",
        "clabe",
        "cuenta"
    ],
    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,
});

const formDireccion = ref({
    cliente_id: cliente_id.value,
    calle:'',
    numero_exterior:'',
    numero_interior:'',
    colonia:'',
    codigo_postal:'',
    ciudad:'',
    estado:'',
    pais:'México',
    referencia:'',
    estatus:'activo',
    es_principal:'no',
});

const form_datos_fiscales = ref({
    cliente_id: cliente_id.value,
    rfc:'',
    razon_social:'',
    correo:'',
    uso_cfdi:'',
    regimen_fiscal:'',
    metodo_pago:'',
    documento_fiscal:'',
    documento_fiscal_file:null,
    es_principal:'no',
    estatus:'activo',
});

const preeview_datos_fiscales = ref({
    id: "",
    rfc: "",
    razon_social: "",
});
//datos fiscales index
const obtener_datos_fiscales = ref([]);
const columns_datos_fiscales = ref([
    'id',
    'rfc',
    'razon_social',
    "actions",
]);
const table_option_datos_fiscales = ref({
    headings: {
        id: (h, row, index) => {
            return "Folio";
        },
        actions: (h, row, index) => {
            return "";
        },
    },
    perPage: 20,
    perPageValues: [20, 50, 100],
    skin: "table table-hover",
    columnsClasses: { count_exp: "count_exp text-center" },
    sortable: [
        'id',
        'rfc',
        'razon_social',
    ],
    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,
});

//table 2
const columns1 = ref([
    "id",
    "nombre",
    'actions'
]);
const table_option1 = ref({
    headings: {
        id: (h, row, index) => {
            return "Lista";
        },
        nombrenombre_producto: (h, row, index) => {
            return "";
        },
        actions: (h, row, index) => {
            return "";
        },
    },
    perPage: 20,
    perPageValues: [20, 50, 100],
    skin: "table table-hover",
    columnsClasses: { nombre_producto: "productos-presentacion" },
    sortable: ["nombre_producto"],
    sortIcon: {
        base: "sort-icon-none",
        up: "sort-icon-asc",
        down: "sort-icon-desc",
    },
    pagination: { nav: "scroll", chunk: 5, show: true, dropdown: false },
    resizableColumns: true,
    filterable: true,
    texts: {
        count: "Mostrando {from} a {to} de {count}",
        filter: "",
        filterPlaceholder: "Buscar...",
        limit: "Resultados:",
        noResults:"No hay registros"
    },
});

const updateTienda = async () => {
  try {
    is_entrada.value = true;
    isLoading.value = true;
    const response = await TiendaRepository.updateTienda(
      form.value,
      editedIndex.value
    );
    document.getElementById("evento_recargar_tienda").click();
    showMessage('Agregado correctamente');
    close();
    initializeCreate();
    initialize();
  } catch (error) {
    if (axios.isAxiosError(error)) errors.value = error.response.data.errors;
    isLoading.value = false;
  }
};

const getProductoId = async (data) => {
  try {
    form.value = {
        user_id: store.current_user.id,
        producto_id: data.producto.id,
        cantidad: data.cantidad,
    };
    dataPreview.value = {
        id: data.producto.id,
        nombre:   data.producto.nombre,
        descripcion:  data.producto.descripcion,
        precio:  data.precio_unitario,
        total:  data.total,
        path:  data.producto.path,
    };
    errors.value = {};
    editedIndex.value = data.id;
    registerModal.show();
  } catch (error) {
    console.log(error);
  }
};

const close = () => {
  registerModal.hide();
  editedIndex.value = -1;
};

const initializeCreate = () => {
    form.value = {
        user_id: store.current_user.id,
        producto_id: null,
        cantidad: 1,
    };
    errors.value = {};
    editedIndex.value = -1;
};

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

const getProductoAll = async (inicio="no") => {
    try {
        isLoading.value=true;
        const response = await TiendaRepository.getAll();
        obtener_productos.value = response.data;
        suma_total.value = response.datasum.sum;
        isLoading.value=false;
    } catch (error) {
        console.log(error);
    }
};

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

const initialize = async () => {
    search.value = "";
    isLoading.value = true;
    page.value = 1;
    pageSize.value = 20;
    totalPages.value = 0;
    is_entrada.value = false;
    getProductoAll();
};

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

const deleteItem = () => {
    deleteModal.show();
};

const deleteItemTemp = (id=null) => {
    deleteModal.show();
    if(id !== null){
        editedIndex.value = id;
    }
};

const deleteTienda = async () => {
    try {
        isLoading.value=true;
        const response = await TiendaRepository.deleteTienda(
            editedIndex.value
        );
        document.getElementById("evento_recargar_tienda").click();
        showMessage("Eliminado correctamente");
        closeDelete();
        initialize();
    } catch (error) {
        if (axios.isAxiosError(error))
            errors.value = error.response.data.errors;
        isLoading.value=false;
        console.log(error);
    }
};

const closeDelete = () => {
    deleteModal.hide();
    registerModal.hide();
    initializeCreate();
};

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 getProductoIdDetalle = async (data) => {
    try {
        console.log(data, 'data');
        dataPreview.value = {
            id: data.producto.id,
            nombre: data.producto.nombre,
            descripcion: data.producto.descripcion,
            marca: data.producto.marca,
            tipo_producto: data.producto.tipo_producto,
            tipo_tratamiento: data.producto.tipo_tratamiento,
            precio: data.producto.precio,
            total: data.producto.total,
            path: data.producto.path,
        };
        errors.value = {};
        registerModalDetalle.show();
    } catch (error) {
        console.log(error);
    }
};

const getAllDirecciones = async () => {
    try {
        isLoading.value = true;
        const response = await DireccionEntregaRepository.getDireccionForSelect(cliente_id.value);
        obtener_direcciones.value = response.data;
        isLoading.value = false;
    } catch (error) {
        console.log(error);
    }
};

const getAllOpcionesPago = async () => {
    try {
        const response = await OpcionPagoTransferenciaRepository.getOpcionPagoTransferenciaForSelect();
        obtener_opciones_pago.value = response.data;
    } catch (error) {
        console.log(error);
    }
};

const getAllDatosFiscales = async () => {
    if(cliente_id.value){

    }

    try {
        const response = await DatoFiscalRepository.getDatoFiscalForSelect(cliente_id.value);
        obtener_datos_fiscales.value = response.data;
    } catch (error) {
        console.log(error);
    }
};

const abrirModalDireccion = async () => {
    isLoading.value = true;
    search.value = {
        search: "",
    };
    await getAllDirecciones();
    modal_index_direccion.show();
    isLoading.value = false;
}

const agregarDireccion = (row) => {
    form_pagar.value.direccion_id = row.id;
    preeview_direccion.value = {
        id: row.id,
        calle: row.calle,
        numero_exterior: row.numero_exterior,
        numero_interior: row.numero_interior,
        colonia: row.colonia,
        codigo_postal: row.codigo_postal,
        ciudad: row.ciudad,
        estado: row.estado,
    };
    modal_index_direccion.hide();
}

const abrirModalOpcionesPago = async () => {
    isLoading.value = true;
    search.value = {
        search: "",
    }
    await getAllOpcionesPago();
    modal_index_opciones_pago.show();
    isLoading.value = false;
}

const agregarOpcionesPago = (row) => {
    preeview_opciones_pago.value = {
        id: row.id,
        banco: row.banco,
        titular: row.titular,
        clabe: row.clabe,
        cuenta: row.cuenta,
    };
    form_pagar.value.opcion_pago_transferencia_id = row.id;
    modal_index_opciones_pago.hide();
}

const abrirModalDatosFiscales = async () => {
    isLoading.value = true;
    search.value = {
        search: "",
    }
    await getAllDatosFiscales();
    modal_index_datos_fiscales.show();
    isLoading.value = false;
}

const agregarDatosFiscales = (row) => {
    preeview_datos_fiscales.value = {
        id: row.id,
        rfc: row.rfc,
        razon_social: row.razon_social,
    };
    form_pagar.value.datos_fiscales_id = row.id;
    modal_index_datos_fiscales.hide();
}

const comprobantePago = ref(null);

const handleComprobanteUpload = (event) => {
    const file = event.target.files[0];
    if (file) {
        form_pagar.value.comprobante_pago = file;
    }
};

const procesarPago = async () => {
    try {
        if (!form_pagar.value.direccion_id || !form_pagar.value.opcion_pago_transferencia_id) {
            showMessage('Por favor, completa los campos obligatorios', 'error');
            return;
        }

        isLoading.value = true;

        // Aquí iría tu llamada a la API para procesar el pago
        const response = await TiendaRepository.pagar(form_pagar.value);

        showMessage('Pago procesado correctamente');
        modal_index_ventas.hide();

        // router.push({ name: 'ventas.mis_ventas' });
        window.location.href = '/ventas/mis-compras';

    } catch (error) {
        console.error(error);
        showMessage('Error al procesar el pago', 'error');
    } finally {
        isLoading.value = false;
    }
};

const pagar = async () => {
    errors.value = {};
    document.getElementById('comprobante_pago_file').value = null;
    modal_index_ventas.show();
}

const nuevoDireccion = () => {
    formDireccion.value = {
        cliente_id: cliente_id.value,
        calle:'',
        numero_exterior:'',
        numero_interior:'',
        colonia:'',
        codigo_postal:'',
        ciudad:'',
        estado:'',
        pais:'México',
        referencia:'',
        estatus:'activo',
        es_principal:'no',
    };
    is_entrada_direccion.value = true;
    errors_direccion.value = {};
    modal_index_direccion.hide();
    modal_new_direccion.show();
}

const createDireccion = async () => {
    try {
        isLoading.value=true;
        is_entrada_direccion.value = true;
        const response = await DireccionEntregaRepository.createDireccion(
            formDireccion.value
        );
        showMessage(response.message);
        modal_new_direccion.hide();
        isLoading.value=false;
        agregarDireccion(response.data);
    } catch (error) {
        if (axios.isAxiosError(error))
            errors_direccion.value = error.response.data.errors;
        isLoading.value=false;
    }
};

const nuevoDatosFiscales = () => {
    form_datos_fiscales.value = {
        cliente_id: cliente_id.value,
        rfc:'',
        razon_social:'',
        correo:'',
        uso_cfdi:'',
        regimen_fiscal:'',
        metodo_pago:'',
        documento_fiscal:'',
        documento_fiscal_file:null,
        es_principal:'no',
        estatus:'activo',
    };
    is_entrada_datos_fiscales.value = false;
    errors_datos_fiscales.value = {};
    document.getElementById('documento_fiscal_file').value = null;
    modal_index_datos_fiscales.hide();
    modal_new_datos_fiscales.show();
}

const getFileInputValue = (event) => {
    const file = event.target.files;
    form_datos_fiscales.value.documento_fiscal_file = file[0];
}

const createDatoFiscal = async () => {
    try {
        isLoading.value=true;
        is_entrada_datos_fiscales.value = true;

        // Preparar datos para enviar (extraer solo el value de los objetos)
        const formData = {
            ...form_datos_fiscales.value,
            uso_cfdi: form_datos_fiscales.value.uso_cfdi?.value || form_datos_fiscales.value.uso_cfdi || '',
            regimen_fiscal: form_datos_fiscales.value.regimen_fiscal?.value || form_datos_fiscales.value.regimen_fiscal || '',
            metodo_pago: form_datos_fiscales.value.metodo_pago?.value || form_datos_fiscales.value.metodo_pago || '',
        };

        const response = await DatoFiscalRepository.createDatoFiscal(formData);
        showMessage(response.message);
        modal_new_datos_fiscales.hide();
        isLoading.value=false;
        agregarDatosFiscales(response.data);
    } catch (error) {
        if (axios.isAxiosError(error))
            errors_datos_fiscales.value = error.response.data.errors;
        isLoading.value=false;
    }
};

onMounted(async () => {
    const response = await obtener_user();
    store.current_user.id = response.id;
    store.current_user.name = response.name;
    store.current_user.email = response.email;
    store.current_user.role = response.roles['0'].name;
    store.current_user.tipo_cliente = response.tipo_cliente;
    if(roles_is("Cliente")){
        cliente_id.value = response.cliente_id;
        if(response.cliente.direcciones){
            preeview_direccion.value = {
                id: response.cliente.direcciones.id,
                calle: response.cliente.direcciones.calle,
                numero_exterior: response.cliente.direcciones.numero_exterior,
                numero_interior: response.cliente.direcciones.numero_interior,
                colonia: response.cliente.direcciones.colonia,
                codigo_postal: response.cliente.direcciones.codigo_postal,
                ciudad: response.cliente.direcciones.ciudad,
            };
            form_pagar.value.direccion_id = response.cliente.direcciones.id;
        }
        if(response.cliente.fiscales){
            preeview_datos_fiscales.value = {
                id: response.cliente.fiscales.id,
                rfc: response.cliente.fiscales.rfc,
                razon_social: response.cliente.fiscales.razon_social,
            }
            form_pagar.value.datos_fiscales_id = response.cliente.fiscales.id;
        }
        form_pagar.value.cliente_id = response.cliente_id;
    }
    const response_principal = await OpcionPagoTransferenciaRepository.getOpcionPagoTransferenciaPrincipal();
    if(response_principal.data){
        preeview_opciones_pago.value = {
            id: response_principal.data.id,
            banco: response_principal.data.banco,
            titular: response_principal.data.titular,
            clabe: response_principal.data.clabe,
            cuenta: response_principal.data.cuenta,
        }
        form_pagar.value.opcion_pago_transferencia_id = response_principal.data.id;
    }
    registerModal = new window.bootstrap.Modal(document.getElementById('registerModal'));
    registerModalDetalle = new window.bootstrap.Modal(
        document.getElementById("registerModalDetalle")
    );
    deleteModal = new window.bootstrap.Modal(
        document.getElementById("deleteModal")
    );
    modal_index_direccion = new window.bootstrap.Modal(
        document.getElementById("modal_index_direccion")
    );
    modal_index_opciones_pago = new window.bootstrap.Modal(
        document.getElementById("modal_index_opciones_pago")
    );
    modal_index_datos_fiscales = new window.bootstrap.Modal(
        document.getElementById("modal_index_datos_fiscales")
    );
    initialize();
    modal_index_ventas = new window.bootstrap.Modal(
        document.getElementById("modal_index_ventas")
    );
    modal_new_direccion = new window.bootstrap.Modal(
        document.getElementById("modal_new_direccion")
    );
    modal_new_datos_fiscales = new window.bootstrap.Modal(
        document.getElementById("modal_new_datos_fiscales")
    );
});
</script>
