<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">Productos</h1>
                                <button
                                    class="btn btn-black pull-right m-1"
                                    @click="refrescar"
                                >
                                    Refrescar
                                </button>
                                <button
                                    class="btn btn-black pull-right m-1"
                                    data-bs-toggle="modal"
                                    data-bs-target="#registerModal"
                                    @click="initializeCreate"
                                >
                                    Nuevo
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="custom-table">
                        <v-client-table
                            :data="obtener_expedientes"
                            :columns="columns1"
                            :options="table_option1"
                        >
                            <template #precios="item">
                                {{ item.row.precio }}
                            </template>
                            <template #actions="item">
                                <a
                                    href="javascript:void(0);"
                                    title="Edit"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    @click="getProductoId(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-edit-2"
                                    >
                                        <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="Imprimir código de barras"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    @click="imprimirCodigoBarras(item.row.id, item.row.codigo_barras)"
                                    v-if="item.row.codigo_barras"
                                >
                                    <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-printer"
                                    >
                                        <polyline points="6 9 6 2 18 2 18 9"></polyline>
                                        <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
                                        <rect x="6" y="14" width="12" height="8"></rect>
                                    </svg>
                                </a>
                                <a
                                    href="javascript:void(0);"
                                    title="Delete"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    @click="deleteItem(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>
                </div>
            </div>
        </div>
        <!-- Register Modal -->
        <div
            class="modal fade"
            id="registerModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="registerModalLabel"
            aria-hidden="true"
            v-show="true"
        >
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div
                        class="modal-header titulo-dorado"
                        id="registerModalLabel"
                    >
                        <h4 class="modal-title">
                            {{ editedIndex === -1 ? "Nuevo " : "Editar " }}
                        </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-8 col-sm-12 col-8">
                                    <div class="form-group">
                                        <label>Código de barra</label>
                                        <div class="input-group mb-2">
                                            <input
                                                type="text"
                                                class="form-control"
                                                placeholder="Código de barra EAN-13 (13 dígitos)"
                                                v-model="form.codigo_barras"
                                                maxlength="13"
                                                @input="form.codigo_barras = form.codigo_barras.replace(/\D/g, '').slice(0, 13)"
                                                :class="[is_entrada ? (!errors.codigo_barras ? 'is-valid' : 'is-invalid') : '']"
                                            />
                                            <button
                                                type="button"
                                                class="btn btn-outline-secondary"
                                                @click="generarCodigoBarras"
                                                title="Generar código EAN-13 único"
                                            >
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <path d="M21 12v1a10 10 0 1 1-8-7.5M12 3v9m0 0l3-3m-3 3l-3-3"></path>
                                                </svg>
                                            </button>
                                            <button
                                                type="button"
                                                class="btn btn-outline-secondary"
                                                @click="mostrarVistaPrevia"
                                                :disabled="!form.codigo_barras || form.codigo_barras.length !== 13"
                                                title="Ver vista previa del código de barras"
                                            >
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                                    <circle cx="12" cy="12" r="3"></circle>
                                                </svg>
                                            </button>
                                        </div>
                                        <small class="form-text text-muted">
                                            {{ (form.codigo_barras ? form.codigo_barras.length : 0) }}/13 dígitos (EAN-13)
                                        </small>
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.codigo_barras">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Presentación</label>
                                        <input
                                            type="text"
                                            class="form-control mb-2"
                                            placeholder="Presentación"
                                            v-model="form.nombre"
                                            :class="[is_entrada ? (!errors.nombre ? 'is-valid' : 'is-invalid') : '']"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.nombre">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Nombre Corto</label>
                                        <input
                                            type="text"
                                            class="form-control mb-2"
                                            placeholder="Nombre corto"
                                            v-model="form.nombre_corto"
                                            :class="[is_entrada ? (!errors.nombre_corto ? 'is-valid' : 'is-invalid') : '']"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.nombre_corto">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Descripción</label>
                                        <quill-editor
                                            v-model:value="form.descripcion"
                                            :options="options1"
                                        ></quill-editor>
                                    </div>
                                    <div class="form-group">
                                        <label>Marca</label>
                                        <multiselect
                                            v-model="marca_id"
                                            mode="tags"
                                            :close-on-select="true"
                                            :searchable="true"
                                            :options="optionsMarca"
                                            :class="[
                                                is_entrada
                                                    ? !errors.marca_id
                                                        ? 'is-valid'
                                                        : 'is-invalid'
                                                    : '',
                                            ]"
                                            selected-label=""
                                            select-label=""
                                            deselect-label=""
                                            placeholder="Seleccione..."
                                            :showNoOptions="false"
                                            :showNoResults="false"
                                            @update:model-value="changeMarca"
                                            label="marca"
                                            track-by="marca"
                                        >
                                        </multiselect>
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.marca_id">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <div
                                            data-upload-id="myFirstImage"
                                            :class="[
                                            is_entrada
                                                    ? !errors.imagen
                                                        ? 'custom-file-container is-valid'
                                                        : 'custom-file-container is-invalid'
                                                    : 'custom-file-container',
                                            ]"
                                        >
                                            <label>Imagen <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Limpiar imagen" ref="limpiarImagen">x</a></label>
                                            <label class="custom-file-container__custom-file">
                                                <input
                                                type="file"
                                                class="custom-file-container__custom-file__custom-file-input"
                                                accept="image/*"
                                                v-on:change="getFileInputValue"
                                                />
                                                <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
                                                <span class="custom-file-container__custom-file__custom-file-control"></span>
                                                <span class="custom-file-container__custom-file__custom-file-control">Elija el archivo...<span class="custom-file-container__custom-file__custom-file-control__button"> Cargar </span></span>
                                            </label>
                                            <div class="custom-file-container__image-preview" v-show="habilitarImgCreate">

                                            </div>
                                            <div class="custom-file-container__image-preview_update" v-show="habilitarImgUpdate">
                                                <img :src="form.path" alt="" style="height: 100%;"/>
                                            </div>
                                        </div>
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.imagen">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Tipo de producto</label>
                                        <multiselect
                                            v-model="tipo_producto_id"
                                            mode="tags"
                                            :close-on-select="true"
                                            :searchable="true"
                                            :options="optionsTipoProducto"
                                            :class="[
                                                is_entrada
                                                    ? !errors.tipo_producto_id
                                                        ? 'is-valid'
                                                        : 'is-invalid'
                                                    : '',
                                            ]"
                                            selected-label=""
                                            select-label=""
                                            deselect-label=""
                                            placeholder="Seleccione..."
                                            :showNoOptions="false"
                                            :showNoResults="false"
                                            @update:model-value="changeTipoProducto"
                                            label="descripcion"
                                            track-by="descripcion"
                                        >
                                        </multiselect>
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.tipo_producto_id">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Tipo de tratamiento</label>
                                        <multiselect
                                            v-model="tipo_servicio_id"
                                            mode="tags"
                                            :close-on-select="true"
                                            :searchable="true"
                                            :options="optionsTipoServicio"
                                            :class="[
                                                is_entrada
                                                    ? !errors.tipo_servicio_id
                                                        ? 'is-valid'
                                                        : 'is-invalid'
                                                    : '',
                                            ]"
                                            selected-label=""
                                            select-label=""
                                            deselect-label=""
                                            placeholder="Seleccione..."
                                            :showNoOptions="false"
                                            :showNoResults="false"
                                            @update:model-value="changeTipoServicio"
                                            label="descripcion"
                                            track-by="descripcion"
                                        >
                                        </multiselect>
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.tipo_servicio_id">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Precio</label>
                                        <input
                                            type="text"
                                            class="form-control mb-2"
                                            placeholder="Precio"
                                            v-model="form.precio"
                                            :class="[is_entrada ? (!errors.precio ? 'is-valid' : 'is-invalid') : '']"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.precio">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="col-md-6 col-sm-12 col-6">
                                    <div class="form-group">
                                        <label>Ieps</label>
                                        <input
                                            type="text"
                                            class="form-control mb-2"
                                            placeholder="Ieps"
                                            v-model="form.ieps"
                                            :class="[is_entrada ? (!errors.ieps ? 'is-valid' : 'is-invalid') : '']"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.ieps">
                                                {{ 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.estatus"
                                            mode="tags"
                                            :close-on-select="true"
                                            :searchable="true"
                                            :options="optionsEstatus"
                                            :class="[
                                                is_entrada
                                                    ? !errors.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.estatus">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <button
                                            type="button"
                                            class="btn btn-black w-100"
                                            v-show="editedIndex === -1"
                                            @click="createProducto"
                                        >
                                            Guardar
                                        </button>

                                        <button
                                            type="button"
                                            class="btn btn-black w-100"
                                            v-show="editedIndex !== -1"
                                            @click="updateProducto"
                                        >
                                            Actualizar
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </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="deleteProducto()"
                        >
                            Aceptar
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Vista Previa Código de Barras Modal -->
        <div
            class="modal fade"
            id="barcodePreviewModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="barcodePreviewModalLabel"
            aria-hidden="true"
        >
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="barcodePreviewModalLabel">
                            Vista Previa - Código de Barras EAN-13
                        </h5>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body text-center">
                        <div class="mb-3">
                            <p class="mb-2"><strong>Código:</strong> {{ form.codigo_barras }}</p>
                        </div>
                        <div class="d-flex justify-content-center">
                            <svg id="barcode-preview"></svg>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            class="btn btn-black"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                        >
                            Cerrar
                        </button>
                    </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 } 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 ProductoRepository from "@/repositories/ProductoRepository";
import * as MarcaRepository from "@/repositories/MarcaRepository";
import * as TipoServicioRepository from "@/repositories/TipoServicioRepository";
import * as TipoProductoRepository from "@/repositories/TipoProductoRepository";
import axios from "axios";
import { useStateStore } from '@/store/StateStore';
import Multiselect from "@suadelabs/vue3-multiselect";
import "@suadelabs/vue3-multiselect/dist/vue3-multiselect.css";

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

// 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 FileUploadWithPreview from 'file-upload-with-preview';

import { quillEditor } from 'vue3-quill';
import 'vue3-quill/lib/vue3-quill.css';
import JsBarcode from 'jsbarcode';

useMeta({ title: "EGURROLA" });

const store = useAuthStore();
const storeState = useStateStore();
const obtener_expedientes = ref([]);

//formulario crear y eliminar
let registerModal = ref(false);
let deleteModal = ref(false);
const is_entrada = ref(false);
const editedIndex = ref(-1);
const formComponent = ref(null);
const errors = ref({});
const form = ref({
    codigo_barras:'',
    nombre:'',
    nombre_corto:'',
    descripcion:null,
    precio:0.00,
    tiene_iva:'si',
    iva:16,
    tiene_ieps:'no',
    ieps:0,
    estatus:'activo',
    marca_id:null,
    tipo_producto_id:null,
    tipo_servicio_id:null,
    imagen:null,
    path:null,
});
const habilitarImgCreate=ref(true);
const habilitarImgUpdate=ref(false);
const limpiarImagen=ref(null);
let barcodePreviewModal = ref(null);

const options1 = ref({
    placeholder:'Escribrir aqui...',
    modules: {
        toolbar: [
            [{ header: 1 }, { header: 2 }],
            ['bold', 'italic', 'underline'],
            [{ color: [] }, { background: [] }],
            [{ indent: '-1' }, { indent: '+1' }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ align: [] }],
        ],
    },
});


const isLoading = ref(true);

//select2
const marca_id = ref({
    id: null,
    marca: "",
});
const optionsMarca = ref([]);

const changeMarca = (data) => {
    if (data == null) {
        const result = optionsMarca.value.find(item => item.id === form.value.marca_id);
        if (result) {
            marca_id.value = {
                id: form.value.marca_id,
                marca: result.marca
            };
        }
        return;
    }
    form.value.marca_id = data.id;
};

const tipo_servicio_id = ref({
    id: null,
    descripcion: "",
});
const optionsTipoServicio = ref([]);

const changeTipoServicio = (data) => {
    if (data == null) {
        const result = optionsTipoServicio.value.find(item => item.id === form.value.tipo_servicio_id);
        if (result) {
            tipo_servicio_id.value = {
                id: form.value.tipo_servicio_id,
                descripcion: result.descripcion
            };
        }
        return;
    }
    form.value.tipo_servicio_id = data.id;
};

const tipo_producto_id = ref({
    id: null,
    marca: "",
});
const optionsTipoProducto = ref([]);

const changeTipoProducto = (data) => {
    if (data == null) {
        const result = optionsTipoProducto.value.find(item => item.id === form.value.tipo_producto_id);
        if (result) {
            tipo_producto_id.value = {
                id: form.value.tipo_producto_id,
                descripcion: result.descripcion
            };
        }
        return;
    }
    form.value.tipo_producto_id = data.id;
};

// estatus
const optionsEstatus = ref(['activo','inactivo']);

//table 2
const columns1 = ref([
    "id",
    "codigo_barras",
    "nombre",
    "marca",
    "tipo_producto",
    "tipo_tratamiento",
    "precios",
    "estatus",
    "actions",
]);
const table_option1 = ref({
    headings: {
        id: (h, row, index) => {
            return "Folio";
        },
        marca: (h, row, index) => {
            return "Marca";
        },
        actions: (h, row, index) => {
            return "";
        },
        codigo_barras: (h, row, index) => {
            return "Código de barras";
        },

    },
    perPage: 20,
    perPageValues: [20, 50, 100],
    skin: "table table-hover",
    columnsClasses: { actions: "actions text-center" },
    sortable: ["id", "codigo_barras", "nombre", "marca", "tipo_producto", "tipo_tratamiento", "estatus"],
    sortIcon: {
        base: "sort-icon-none",
        up: "sort-icon-asc",
        down: "sort-icon-desc",
    },
    pagination: { nav: "scroll", chunk: 5 },
    texts: {
        count: "Mostrando {from} a {to} de {count}",
        filter: "",
        filterPlaceholder: "Buscar...",
        limit: "Resultados:",
        noResults:"No hay registros"
    },
    resizableColumns: true,
});

const getFileInputValue = (event) => {
    const file = event.target.files;
    form.value.imagen = file[0];
    habilitarImgCreate.value=true;
    habilitarImgUpdate.value=false;
}

const createProducto = async () => {
    try {
        isLoading.value=true;
        is_entrada.value = true;
        const response = await ProductoRepository.createProducto(
            form.value
        );
        showMessage("Guardado correctamente");
        initializeCreate();
        close();
        initialize();
    } catch (error) {
        if (axios.isAxiosError(error))
            errors.value = error.response.data.errors;
        isLoading.value=false;
    }
};

const updateProducto = async () => {
    try {
        isLoading.value=true;
        is_entrada.value = true;
        const response = await ProductoRepository.updateProducto(
            form.value,
            editedIndex.value
        );
        showMessage("Actualizado correctamente");
        close();
        initializeCreate();
        initialize();
    } catch (error) {
        if (axios.isAxiosError(error))
            errors.value = error.response.data.errors;
        isLoading.value=false;
    }
};

const getProductoId = async (id) => {
    try {
        const response = await ProductoRepository.getProductoId(id);
        marca_id.value = {
            id: response.data.producto.marca_id,
            marca: response.data.marca.marca
        };

        tipo_producto_id.value = {
            id: response.data.producto.tipo_producto_id,
            descripcion: response.data.tipoProducto.descripcion
        };

        tipo_servicio_id.value = {
            id: response.data.producto.tipo_servicio_id,
            descripcion: response.data.tipoServicio.descripcion
        };

        form.value = {
            codigo_barras: response.data.producto.codigo_barras,
            nombre: response.data.producto.nombre,
            nombre_corto: response.data.producto.nombre_corto,
            descripcion: response.data.producto.descripcion,
            precio: response.data.producto.precio,
            tiene_iva: response.data.producto.tiene_iva,
            iva: response.data.producto.iva,
            tiene_ieps: response.data.producto.tiene_ieps,
            ieps: response.data.producto.ieps,
            estatus: response.data.producto.estatus,
            marca_id: response.data.producto.marca_id,
            tipo_producto_id: response.data.producto.tipo_producto_id,
            tipo_servicio_id: response.data.producto.tipo_servicio_id,
            path: response.data.producto_path,
            imagen:null,
        };
        errors.value = {};
        habilitarImgCreate.value=false;
        habilitarImgUpdate.value=true;
        editedIndex.value = id;
        registerModal.show();
    } catch (error) {
        console.log(error);
    }
};

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

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

const deleteProducto = async () => {
    try {
        isLoading.value=true;
        const response = await ProductoRepository.deleteProducto(
            editedIndex.value
        );
        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();
    initializeCreate();
};

const initializeCreate = () => {
    marca_id.value = {
        id: null,
        marca: "",
    };
    tipo_servicio_id.value = {
        id: null,
        descripcion: "",
    };
    tipo_producto_id.value = {
        id: null,
        descripcion: "",
    };
    form.value = {
        codigo_barras:'',
        nombre:'',
        nombre_corto:'',
        descripcion:null,
        precio:0.00,
        tiene_iva:'si',
        iva:16,
        tiene_ieps:'no',
        ieps:0,
        estatus:'activo',
        marca_id: null,
        tipo_producto_id:null,
        tipo_servicio_id:null,
        imagen:null,
        path:null,
    };
    habilitarImgCreate.value=true;
    habilitarImgUpdate.value=false;
    errors.value = {};
    editedIndex.value = -1;
    limpiarImagen.value.click();
};

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

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

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

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

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

const initialize = async () => {
    isLoading.value=true;
    const resp = await getProductoAll();
    obtener_expedientes.value = resp;
    table_option1.value = {
        headings: {
            id: (h, row, index) => {
                return "Folio";
            },
            actions: (h, row, index) => {
                return "";
            },
            codigo_barras: (h, row, index) => {
                return "Código de barras";
            },
        },
        perPage: 100,
        perPageValues: [20, 50, 100],
        skin: "table table-hover",
        columnsClasses: { actions: "actions text-center" },
        sortable: ["id", "codigo_barras", "nombre", "estatus"],
        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,
    };
    is_entrada.value = false;
    const model_marca = await getMarcaAll();
    optionsMarca.value = model_marca;
    const model_servicio = await getTipoServicioAll();
    optionsTipoServicio.value = model_servicio;
    const model_producto = await getTipoProductoAll();
    optionsTipoProducto.value = model_producto;
    isLoading.value=false;
};

const refrescar = () => {
    initialize();
    showMessage("Completado correctamente");
};

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 calcularPrecioIva = () => {
    const ivas = (form.value.iva / 100) + 1;
    return parseFloat((form.value.precio * ivas).toFixed(2));
};

const calcularPrecioIvap = (preciop, ivap) => {
    const ivas = (ivap / 100) + 1;
    return parseFloat((preciop * ivas).toFixed(2));
};

const imprimirCodigoBarras = async (productoId, codigoBarras) => {
    try {
        isLoading.value = true;
        const response = await ProductoRepository.imprimirCodigoBarras(productoId, codigoBarras);
        isLoading.value = false;
        if (response.success) {
            showMessage('Se pudo enviar la impresión correctamente', 'success');
        } else {
            showMessage(response.message || 'Error al imprimir código de barras', 'error');
        }
    } catch (error) {
        isLoading.value = false;
        console.error('Error al imprimir código de barras:', error);
        if (axios.isAxiosError(error)) {
            showMessage(error.response?.data?.message || 'Error al imprimir código de barras', 'error');
        } else {
            showMessage('Error al imprimir código de barras', 'error');
        }
    }
};

const generarCodigoBarras = async () => {
    try {
        isLoading.value = true;
        const response = await ProductoRepository.generarCodigoBarrasEAN13();
        isLoading.value = false;
        if (response.success) {
            form.value.codigo_barras = response.codigo_barras;
            showMessage('Código de barras EAN-13 generado correctamente', 'success');
        } else {
            showMessage(response.message || 'Error al generar código de barras', 'error');
        }
    } catch (error) {
        isLoading.value = false;
        console.error('Error al generar código de barras:', error);
        if (axios.isAxiosError(error)) {
            showMessage(error.response?.data?.message || 'Error al generar código de barras', 'error');
        } else {
            showMessage('Error al generar código de barras', 'error');
        }
    }
};

const mostrarVistaPrevia = () => {
    if (!form.value.codigo_barras || form.value.codigo_barras.length !== 13) {
        showMessage('El código de barras debe tener 13 dígitos para EAN-13', 'error');
        return;
    }

    // Validar que solo contenga dígitos
    if (!/^\d{13}$/.test(form.value.codigo_barras)) {
        showMessage('El código de barras debe contener solo números', 'error');
        return;
    }

    // Mostrar el modal
    barcodePreviewModal.show();

    // Generar el código de barras visualmente
    setTimeout(() => {
        try {
            // Limpiar el SVG anterior si existe
            const svgElement = document.getElementById("barcode-preview");
            if (svgElement) {
                svgElement.innerHTML = '';
            }

            JsBarcode("#barcode-preview", form.value.codigo_barras, {
                format: "EAN13",
                width: 2,
                height: 100,
                displayValue: true,
                fontSize: 20,
                margin: 10,
                valid: function(valid) {
                    if (!valid) {
                        console.warn('El código de barras puede no ser válido según el algoritmo EAN-13');
                    }
                }
            });
        } catch (error) {
            console.error('Error al generar vista previa del código de barras:', error);
            const errorMessage = error.message || 'Error al generar la vista previa del código de barras';
            showMessage(errorMessage, 'error');
            barcodePreviewModal.hide();
        }
    }, 300);
};

onMounted(async () => {
    const response = await obtener_user();
    store.current_user.id = response.id;
    store.current_user.name = response.name;
    store.current_user.email = response.email;
    registerModal = new window.bootstrap.Modal(
        document.getElementById("registerModal")
    );
    deleteModal = new window.bootstrap.Modal(
        document.getElementById("deleteModal")
    );
    barcodePreviewModal = new window.bootstrap.Modal(
        document.getElementById("barcodePreviewModal")
    );

    //single file upload
    new FileUploadWithPreview('myFirstImage', {
        images: {
            baseImage: require('@/assets/images/file-preview.png'),
            backgroundImage: '',
        },
    });

    initialize();
});
</script>
