<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">
                            <h1 class="pull-left">Cliente: {{ titulo_mo }}</h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl-12 col-lg-12 col-sm-12">
                            <div class="text-center titulo-dorado">
                                <h1 class="pull-left">Datos fiscales</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_datos_fiscales"
                            :columns="columns1"
                            :options="table_option1"
                        >
                            <template #documento_fiscal="item">
                                <a 
                                    v-if="item.row.documento_fiscal_path" 
                                    :href="item.row.documento_fiscal_path" 
                                    target="_blank"
                                    class="text-decoration-none"
                                >
                                    Descargar :
                                    <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"
                                    >
                                        <!-- Documento -->
                                        <path d="M4 2h10l6 6v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"/>
                                        <polyline points="14 2 14 8 20 8" />

                                        <!-- Letras P -->
                                        <path d="M6.5 13v4M6.5 13h1.2a1 1 0 0 1 0 2h-1.2" />

                                        <!-- Letra D -->
                                        <path d="M10 13v4M10 13h1a1.5 1.5 0 0 1 0 3h-1" />

                                        <!-- Letra F -->
                                        <path d="M14 13v4M14 13h1.5M14 15h1" />
                                    </svg>
                                </a>
                                <span v-else class="text-muted">Sin documento</span>
                            </template>
                            <template #actions="item">
                                <a
                                    href="javascript:void(0);"
                                    title="Edit"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    @click="getDatoFiscalId(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="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-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.rfc"
                                            :class="[is_entrada ? !errors.rfc ? 'is-valid' : 'is-invalid' : '',]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.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.razon_social"
                                            :class="[is_entrada ? !errors.razon_social ? 'is-valid' : 'is-invalid' : '',]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.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.correo"
                                            :class="[is_entrada ? !errors.correo ? 'is-valid' : 'is-invalid' : '',]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.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.uso_cfdi"
                                            :close-on-select="true"
                                            :searchable="true"
                                            :options="optionsUsoCfdi"
                                            label="label"
                                            track-by="value"
                                            :class="[
                                                is_entrada
                                                    ? !errors.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.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.regimen_fiscal"
                                            :close-on-select="true"
                                            :searchable="true"
                                            :options="optionsRegimenFiscal"
                                            label="label"
                                            track-by="value"
                                            :class="[
                                                is_entrada
                                                    ? !errors.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.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.metodo_pago"
                                            :close-on-select="true"
                                            :searchable="true"
                                            :options="optionsMetodoPago"
                                            label="label"
                                            track-by="value"
                                            :class="[
                                                is_entrada
                                                    ? !errors.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.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.es_principal"
                                            mode="tags"
                                            :close-on-select="true"
                                            :searchable="true"
                                            :options="optionsEsPrincipal"
                                            :class="[
                                                is_entrada
                                                    ? !errors.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.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.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" :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 ? !errors.documento_fiscal_file ? 'is-valid' : 'is-invalid' : '',]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.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"
                                            v-show="editedIndex === -1"
                                            @click="createDatoFiscal"
                                        >
                                            Guardar
                                        </button>

                                        <button
                                            type="button"
                                            class="btn btn-black w-100"
                                            v-show="editedIndex !== -1"
                                            @click="updateDatoFiscal"
                                        >
                                            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 registro?
                        </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="deleteDatoFiscal()"
                        >
                            Aceptar
                        </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 DatoFiscalRepository from "@/repositories/DatoFiscalRepository";
import * as ClienteRepository from "@/repositories/ClienteRepository";
import axios from "axios";
import Multiselect from "@suadelabs/vue3-multiselect";
import "@suadelabs/vue3-multiselect/dist/vue3-multiselect.css";
import { useRoute } from "vue-router";

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

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

useMeta({ title: "EGURROLA" });

const store = useAuthStore();
const obtener_datos_fiscales = ref([]);

const titulo_mo = ref("");
const route = useRoute();

//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({
    cliente_id: route.params.clienteId,
    rfc:'',
    razon_social:'',
    correo:'',
    uso_cfdi:'',
    regimen_fiscal:'',
    metodo_pago:'',
    documento_fiscal:'',
    documento_fiscal_file:null,
    es_principal:'no',
    estatus:'activo',
});

const isLoading = ref(true);

// estatus
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' }
]);
//table 2
const columns1 = ref([
    'id',
    'rfc',
    'razon_social',
    'documento_fiscal',
    'es_principal',
    'estatus',
    'actions'
]);
const table_option1 = ref({
    headings: {
        id: (h, row, index) => {
            return "Folio";
        },
        actions: (h, row, index) => {
            return "";
        },
        documento_fiscal: (h, row, index) => {
            return "Constancia";
        },
        razon_social: (h, row, index) => {
            return "Razón social";
        },  
        
    },
    perPage: 20,
    perPageValues: [20, 50, 100],
    skin: "table table-hover",
    columnsClasses: { actions: "actions text-center" },
    sortable: [
        'id',
        'rfc',
        'razon_social',
        'documento_fiscal',
        'es_principal',
        '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 createDatoFiscal = async () => {
    try {
        isLoading.value=true;
        is_entrada.value = true;
        
        // Preparar datos para enviar (extraer solo el value de los objetos)
        const formData = {
            ...form.value,
            uso_cfdi: form.value.uso_cfdi?.value || form.value.uso_cfdi || '',
            regimen_fiscal: form.value.regimen_fiscal?.value || form.value.regimen_fiscal || '',
            metodo_pago: form.value.metodo_pago?.value || form.value.metodo_pago || '',
        };
        
        const response = await DatoFiscalRepository.createDatoFiscal(formData);
        showMessage("Guardado correctamente");
        initializeCreate();
        close();
        initialize();
    } catch (error) {
        if (axios.isAxiosError(error))
            errors.value = error.response.data.errors;
        isLoading.value=false;
    }
};

const updateDatoFiscal = async () => {
    try {
        isLoading.value=true;
        is_entrada.value = true;
        
        // Preparar datos para enviar (extraer solo el value de los objetos)
        const formData = {
            ...form.value,
            uso_cfdi: form.value.uso_cfdi?.value || form.value.uso_cfdi || '',
            regimen_fiscal: form.value.regimen_fiscal?.value || form.value.regimen_fiscal || '',
            metodo_pago: form.value.metodo_pago?.value || form.value.metodo_pago || '',
        };
        
        const response = await DatoFiscalRepository.updateDatoFiscal(
            formData,
            editedIndex.value
        );
        showMessage("Actualizado correctamente");
        close();
        initializeCreate();
        initialize();
    } catch (error) {
        if (axios.isAxiosError(error))
            errors.value = error.response.data.errors;
        isLoading.value=false;
    }
};

const getDatoFiscalId = async (id) => {
    try {
        const response = await DatoFiscalRepository.getDatoFiscalId(id);
        
        // Buscar el objeto completo para uso_cfdi, regimen_fiscal y metodo_pago
        const usoCfdiObj = optionsUsoCfdi.value.find(opt => opt.value === response.data.uso_cfdi);
        const regimenFiscalObj = optionsRegimenFiscal.value.find(opt => opt.value === response.data.regimen_fiscal);
        const metodoPagoObj = optionsMetodoPago.value.find(opt => opt.value === response.data.metodo_pago);
        
        form.value = {
            cliente_id: route.params.clienteId,
            rfc: response.data.rfc || '',
            razon_social: response.data.razon_social || '',
            correo: response.data.correo || '',
            uso_cfdi: usoCfdiObj || null,
            regimen_fiscal: regimenFiscalObj || null,
            metodo_pago: metodoPagoObj || null,
            documento_fiscal: response.data.documento_fiscal || '',
            documento_fiscal_file: null,
            estatus: response.data.estatus || 'activo',
            es_principal: response.data.es_principal || 'no',
        };
        errors.value = {};
        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 deleteDatoFiscal = async () => {
    try {
        isLoading.value=true;
        const response = await DatoFiscalRepository.deleteDatoFiscal(
            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 = () => {
    form.value = {
        cliente_id: route.params.clienteId,
        rfc:'',
        razon_social:'',
        correo:'',
        uso_cfdi:'',
        regimen_fiscal:'',
        metodo_pago:'',
        documento_fiscal:'',
        es_principal:'no',
        estatus:'activo',
    };
    errors.value = {};
    editedIndex.value = -1;
    document.getElementById('documento_fiscal_file').value = null;
};

const getPage = async () => {
    try {
        const response = await DatoFiscalRepository.getPage(route.params.clienteId);
        console.log(response);
        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 getPage();
    obtener_datos_fiscales.value = resp;
    table_option1.value = {
        headings: {
            id: (h, row, index) => {
                return "Folio";
            },
            actions: (h, row, index) => {
                return "";
            },
            documento_fiscal: (h, row, index) => {
                return "Constancia";
            },
            razon_social: (h, row, index) => {
                return "Razón social";
            },
        },
        perPage: 100,
        perPageValues: [20, 50, 100],
        skin: "table table-hover",
        columnsClasses: { actions: "actions text-center" },
        sortable: [
            'id',
            'rfc',
            'razon_social',
            'documento_fiscal',
            'es_principal',
            '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;
    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 getClienteIdPrin = async (id) => {
    try {
        const response = await ClienteRepository.getClienteId(id);
        titulo_mo.value = response.data.razonSocial;
    } catch (error) {
        console.log(error);
    }
};

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

onMounted(async () => {
    getClienteIdPrin(route.params.clienteId);
    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")
    );

    initialize();
});
</script>
