<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">Clientes</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="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_clientes"
                            :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 #direcciones="props">
                                <router-link :class="'btn btn-' + (props.row.direcciones_entrega.length==0?'warning':'success')" :to="'/direcciones/entrega/'+props.row.id">
                                    {{ props.row.direcciones_entrega ? props.row.direcciones_entrega.length : 0 }}&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 #datos_fiscales="props">
                                <router-link :class="'btn btn-' + (props.row.datos_fiscales.length==0?'warning':'success')" :to="'/datos-fiscales/lista/'+props.row.id">
                                    {{ props.row.datos_fiscales ? props.row.datos_fiscales.length : 0 }}&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="getClienteId(item.row.id)"
                                            >
                                                Editar
                                            </a>
                                        </li>
                                        <li>
                                            <a
                                                href="javascript:void(0);"
                                                class="dropdown-item"
                                                @click="deleteItem(item.row.id)"
                                            >
                                                Eliminar
                                            </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="getClienteAll" :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-md" 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="form-group">
                                <label>Nombre</label>
                                <input
                                    type="text"
                                    class="form-control mb-2"
                                    placeholder="Nombre"
                                    v-model="form.razonSocial"
                                    :class="[is_entrada ? (!errors.razonSocial ? 'is-valid' : 'is-invalid') : '']"
                                />
                                <div class="valid-feedback"></div>
                                <div class="invalid-feedback">
                                    <li v-for="item in errors.razonSocial">
                                        {{ item }}
                                    </li>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>RFC</label>
                                <input
                                    type="text"
                                    class="form-control mb-2"
                                    placeholder="RFC"
                                    v-model="form.rfc"
                                />
                            </div>
                            <div class="form-group">
                                <label>Email</label>
                                <input
                                    type="email"
                                    class="form-control mb-2"
                                    placeholder="Email"
                                    v-model="form.email"
                                    :class="[is_entrada ? (!errors.email ? 'is-valid' : 'is-invalid') : '']"
                                />
                                <div class="valid-feedback"></div>
                                <div class="invalid-feedback">
                                    <li v-for="item in errors.email">
                                        {{ item }}
                                    </li>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Celular</label>
                                <input
                                    type="text"
                                    class="form-control mb-4"
                                    placeholder="Celular"
                                    v-model="form.celular"
                                />
                            </div>
                            <div class="form-group">
                                <label class="">Observación:</label>
                                <textarea
                                    v-model="form.observacion"
                                    class="form-control mb-4"
                                    placeholder="Agregar observación"
                                    rows="3"
                                ></textarea>
                            </div>
                            <div class="form-group">
                                <button
                                    type="button"
                                    class="btn btn-black w-100"
                                    v-show="editedIndex === -1"
                                    @click="createCliente"
                                >
                                    Guardar
                                </button>

                                <button
                                    type="button"
                                    class="btn btn-black w-100"
                                    v-show="editedIndex  !== -1"
                                    @click="updateCliente"
                                >
                                    Actualizar
                                </button>
                            </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 cliente?</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="deleteCliente()">Eliminar</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 ClienteRepository from "@/repositories/ClienteRepository";
import Pagination from 'v-pagination-3';

// 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 store = useAuthStore();
const obtener_clientes = ref([]);

//formulario crear y eliminar
let registerModal = ref(false);
let deleteModal = ref(false);
const page = ref(1);
const isLoading = ref(true);
const order = ref({
    name:'razonSocial',
    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 formComponent = ref(null);
const errors = ref({});
const form = ref({
    rfc: "",
    razonSocial: null,
    email: null,
    celular: null,
    observacion:''
});


//table 2
const columns1 = ref([
    "id",
    "count_exp",
    "razonSocial",
    "rfc",
    "celular",
    "email",
    'observacion',
    'direcciones',
    'datos_fiscales',
    "actions",
]);
const table_option1 = ref({
    headings: {
        id: (h, row, index) => {
            return "Folio";
        },
        razonSocial: (h, row, index) => {
            return "Cliente";
        },
        observacion: (h, row, index) => {
            return "Observación";
        },
        actions: (h, row, index) => {
            return "";
        },
        count_exp: (h, row, index) => {
            return "Expedientes";
        },
    },
    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 createCliente = async () => {
  try {
    is_entrada.value = true;
    isLoading.value = true;
    const response = await ClienteRepository.createCliente(form.value);
    showMessage('Guardado correctamente');
    initializeCreate();
    close();
    initialize();
    isLoading.value = false;
} catch (error) {
    if (axios.isAxiosError(error)) errors.value = error.response.data.errors;
    isLoading.value = false;
  }
};

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

const getClienteId = async (id) => {
  try {
    const response = await ClienteRepository.getClienteId(id);
    form.value = {
        rfc: response.data.rfc,
        razonSocial: response.data.razonSocial,
        celular: response.data.celular,
        email: response.data.email,
        observacion: response.data.observacion,
    };
    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 deleteCliente = async () => {
  try {
    const response = await ClienteRepository.deleteCliente(editedIndex.value);
    showMessage('Eliminado correctamente');
    closeDelete();
    initialize();
  } catch (error) {
    if (axios.isAxiosError(error)) errors.value = error.response.data.errors;
    console.log(error);
  }
};

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

const initializeCreate = () => {
  form.value = {
    rfc: "",
    razonSocial: null,
    email: null,
    celular: null,
  };
  errors.value = {};
  editedIndex.value = -1;
};

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

const getClienteAll = async (inicio="no") => {
    try {
        isLoading.value=true;
        const params={
            search:search.value,
            order:order.value
        }
        if(inicio=="si"){
            page.value=1;
        }
        const response = await ClienteRepository.getAll(page.value,pageSize.value,params);
        obtener_clientes.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:'razonSocial',
        order:'DESC',
    };
    getClienteAll();
};

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

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',
    });
};

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