<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">Inventarios</h1>
                                <button
                                    class="btn btn-black pull-right m-1"
                                    @click="refrescar"
                                >
                                    Refrescar
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="w-100">
                        <div class="row">
                            <div class="col-lg-10 mt-4">
                                <input v-model="search" class="form-control w-100 product-search" placeholder="Buscar..." @keyup.enter="getBuscar" />
                            </div>
                            <div class="col-lg-2">
                                <div class="form-group form-inline pull-right VueTables__limit">
                                    <div class="VueTables__limit-field">
                                        <label>Resultados</label>
                                        <multiselect 
                                            v-model="pageSize" 
                                            :options="options_select2" 
                                            :searchable="true" 
                                            :preselect-first="true" 
                                            selected-label="" 
                                            select-label="" 
                                            deselect-label=""
                                            placeholder="Seleccionar..."
                                            :showNoOptions="false"
                                            :showNoResults="false"
                                            @update:model-value="getBuscar"
                                        >
                                        </multiselect>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="custom-table">
                        <v-client-table
                            :data="obtener_inventarios"
                            :columns="columns1"
                            :options="table_option1"
                        >
                            <template #count_exp="props">
                                <router-link :class="'btn btn-' + (props.row.count_exp==0?'warning':'success')" :to="'/expedientes/'+props.row.id">
                                    {{ props.row.count_exp }}&nbsp
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-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>
                                </router-link>
                            </template>
                            <template #actions="item">
                                <div
                                    class="me-2 custom-dropdown dropdown btn-group"
                                >
                                    <a
                                        class="btn dropdown-toggle btn-icon-only"
                                        href="#"
                                        role="button"
                                        id="pendingTask"
                                        data-bs-toggle="dropdown"
                                        aria-haspopup="true"
                                        aria-expanded="false"
                                    >
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            style="width: 24px; height: 24px"
                                            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-more-horizontal"
                                        >
                                            <circle
                                                cx="12"
                                                cy="12"
                                                r="1"
                                            ></circle>
                                            <circle
                                                cx="19"
                                                cy="12"
                                                r="1"
                                            ></circle>
                                            <circle
                                                cx="5"
                                                cy="12"
                                                r="1"
                                            ></circle>
                                        </svg>
                                    </a>

                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li>
                                            <a
                                                href="javascript:void(0);"
                                                class="dropdown-item"
                                                @click="getInventarioId(item.row)"
                                            >
                                                ver
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </template>
                        </v-client-table>
                        <div class="VueTables VueTables--client">
                            <div class="text-center">
                                <pagination v-model="page" :records="totalPages" :per-page="pageSize" @paginate="getInventarioAll" :options="options_page"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Register Modal -->
        <div
            class="modal fade"
            id="registerModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="registerModalLabel"
            aria-hidden="true"
            v-show="true"
        >
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header titulo-dorado" id="registerModalLabel">
                        <h4 class="modal-title">Ver</h4>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <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="height: 100%;"/>
                            </div>
                            <div class="col-md-6 col-sm-12 col-6">
                                <div class="custom-file-container__image-preview_update_presentacion_tienda">

                                    <form class="mt-0" ref="formComponent" @submit.stop.prevent="">
                                        <table class="table mt-3">
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <h5>
                                                            <b>Precio: </b>
                                                        </h5>
                                                    </td>
                                                    <td>
                                                        <h5>
                                                            {{ currency(dataPreview.precio) }}
                                                        </h5>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <h5>
                                                            <b>Iva: </b>
                                                        </h5>
                                                    </td>
                                                    <td>
                                                        <h5>
                                                            {{ currency(dataPreview.iva) }}
                                                        </h5>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <h5>
                                                            <b>Sucursal: </b>
                                                        </h5>
                                                    </td>
                                                    <td>
                                                        <h5>
                                                            {{ dataPreview.sucursal }}
                                                        </h5>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" style="text-align: center;">
                                                        <h5>
                                                            <b>Cantidades: </b>
                                                        </h5>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <h5>
                                                            <b>Existencia: </b>
                                                        </h5>
                                                    </td>
                                                    <td>
                                                        <h5>
                                                            {{ dataPreview.cantidad_existente }}
                                                        </h5>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <h5>
                                                            <b>Vendidos: </b>
                                                        </h5>
                                                    </td>
                                                    <td>
                                                        <h5>
                                                            {{ dataPreview.cantidad_vendido }}
                                                        </h5>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </form>
                                </div>
                            </div>
                            <div class="col-sm-12 mt-4">
                                <span v-html="dataPreview.descripcion"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <loading v-model:active="isLoading"
        :can-cancel="false"
        :is-full-page="true"/>
        <button
            id="evento_recargar_reservar"
            type="button"
            v-show="false"
            class="btn btn-black"
            @click="getInventarioAll"
        ></button>
    </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 InventarioRepository from "@/repositories/InventarioRepository";
import Pagination from 'v-pagination-3';

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

// select2
import Multiselect from '@suadelabs/vue3-multiselect';
import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css';

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

import axios from "axios";

useMeta({ title: "EGURROLA" });

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

//formulario crear y eliminar
let registerModal = ref(false);
const page = ref(1);
const isLoading = ref(true);
const order = ref({
    name:'id',
    order:'DESC',
});
const search = ref("");
const options_select2 = ref([20, 50, 100]);
const pageSize = ref(20);
const totalPages = ref(0);
const is_entrada = ref(false);
const editedIndex = ref(-1);
const errors = ref({});
const dataPreview = ref({
    nombre:'',
    descripcion:'',
    precio:'',
    sucursal:'',
    iva:'',
    ieps:'',
    cantidad_existente:'',
    cantidad_vendido:'',
    path:'',
});
const filtro = ref({
    sucursal_id:null
});
const formatter = new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'});


//table 2
const columns1 = ref([
    "sucursal",
    "nombre",
    "cantidad_existente",
    "cantidad_vendido",
    "actions"
]);
const table_option1 = ref({
    headings: {
        nombre: (h, row, index) => {
            return "Producto";
        },
        actions: (h, row, index) => {
            return "";
        },
    },
    perPage: 100,
    perPageValues: [],
    skin: "table table-hover",
    columnsClasses: { actions: "actions text-center" },
    sortable: [],
    sortIcon: {
        base: "sort-icon-none",
        up: "sort-icon-asc",
        down: "sort-icon-desc",
    },
    pagination: { nav: "scroll", chunk: 5, show: false, dropdown: false },
    resizableColumns: true,
    filterable: false,
    texts: {
        noResults:"No hay registros"
    },
});

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

const getInventarioId = (data) => {
  try {
    dataPreview.value = {
        nombre:data.nombre,
        descripcion:data.descripcion,
        precio:data.precio,
        sucursal:data.sucursal,
        iva:data.iva,
        ieps:data.ieps,
        cantidad_existente:data.cantidad_existente,
        cantidad_vendido:data.cantidad_vendido,
        path:data.path,
    };
    errors.value = {};
    editedIndex.value = data.id;
    registerModal.show();
  } catch (error) {
    console.log(error);
  }
};

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

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

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

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

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

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

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'));
    initialize();
});
</script>
