<template>
    <div class="form auth-boxed">
        <div class="form-container outer">
            <div class="form-form">
                <div class="form-form-wrap">
                    <div class="form-container">
                        <div class="form-content">
                            <img
                                src="@/assets/images/default/logo_negro.png"
                                class="navbar-logo"
                                alt="logo"
                            />
                            <h5 class="">Iniciar sesión</h5>

                            <form novalidate class="text-start" ref="formComponent" @submit.stop.prevent="login" autocomplete="off">
                                <div class="form">
                                    <div
                                        id="username-field"
                                        class="field-wrapper input form-group"
                                    >
                                        <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-user"
                                        >
                                            <path
                                                d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
                                            ></path>
                                            <circle
                                                cx="12"
                                                cy="7"
                                                r="4"
                                            ></circle>
                                        </svg>
                                        <input
                                            type="text"
                                            class="form-control-black"
                                            placeholder="Correo"
                                            v-model="form.email"
                                            :class="[is_login ? (!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
                                        id="password-field"
                                        class="field-wrapper input mb-2 form-group"
                                    >
                                        <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-lock"
                                        >
                                            <rect
                                                x="3"
                                                y="11"
                                                width="18"
                                                height="11"
                                                rx="2"
                                                ry="2"
                                            ></rect>
                                            <path
                                                d="M7 11V7a5 5 0 0 1 10 0v4"
                                            ></path>
                                        </svg>
                                        <input
                                            v-model="form.password"
                                            :type="passwordField"
                                            class="form-control-black"
                                            placeholder="Contraseña"
                                            :class="[is_login ? (!errors.password ? 'is-valid' : 'is-invalid') : '']"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback" >
                                            <li v-for="item in errors.password">
                                                {{ item }}
                                            </li>
                                        </div>
                                        <svg
                                            @click="set_pwd_type"
                                            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"
                                            id="toggle-password"
                                            class="feather feather-eye"
                                        >
                                            <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>
                                    </div>
                                    <div
                                        class="d-sm-flex justify-content-between"
                                    >
                                        <div class="field-wrapper">
                                            <button
                                                type="submit"
                                                class="btn btn-black"
                                            >
                                                Entrar
                                            </button>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <div class="field-wrapper">
                                            <button
                                                type="button"
                                                class="forgot-pass-link center_custom"
                                                @click="recuperarpw"
                                            >
                                                ¿Has olvidado tu contraseña?
                                            </button>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <div class="field-wrapper">
                                            <router-link
                                                to="/auth/register"
                                                class="forgot-pass-link"
                                                >Registrarse</router-link
                                            >
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </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">
                            Recuperar contraseña
                        </h4>
                        <button
                        type="button"
                        data-dismiss="modal"
                        data-bs-dismiss="modal"
                        aria-label="Close"
                        class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        <h6>Solo ingresa tu correo electrónico. Es normal que la olvidemos, por suerte puedes cambiarla.</h6>
                        <form
                            class="mt-0"
                            ref="formComponent2"
                            @submit.stop.prevent=""
                            autocomplete="off"
                        >
                            <div class="row">
                                <div class="col-md-12 col-sm-12 col-12">
                                    <div class="form-group">
                                        <label>Email</label>
                                        <input
                                            type="text"
                                            class="form-control mb-2"
                                            placeholder="Correo"
                                            v-model="form2.email"
                                            :class="[is_entrada ? (!errors2.email ? 'is-valid' : 'is-invalid') : '']"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors2.email">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 mt-4">
                                    <div class="form-group">
                                        <button
                                            type="button"
                                            class="btn btn-black w-100"
                                            @click="enviar_acceso"
                                        >
                                            Enviar
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- Aviso de recuperacion -->
        <div class="modal fade" id="avisoModalPricipal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="z-index: 1100 !important">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="exampleModalLabel">¡Revisa tu correo electrónico!</h4>
                        <button type="button" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close" class="btn-close"></button>
                    </div>
                    <div class="modal-body">
                        <h6>Enviamos un enlace para que cambies tu contraseña o actives tu cuenta.</h6>
                        <h6>Recuerda revisar la bandeja de correo no deseado y de promociones.</h6>
                    </div>
                </div>
            </div>
        </div>
        <loading 
        v-model:active="isLoading"
        :can-cancel="false"
        :is-full-page="true"/>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import "@/assets/sass/authentication/auth-boxed.scss";
import * as AuthRepository from "@/repositories/AuthRepository";
import { useStateStore } from "@/store/StateStore";
import router from "@/router";

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

import { useMeta } from "@/composables/use-meta";
useMeta({ title: "EGURROLA" });
const passwordField = ref("password");
const set_pwd_type = () => {
    passwordField.value= passwordField.value==="password"?"text":"password";
};

//modales
let avisoModalPricipal = ref(null);
let registerModal = ref(false);

const formComponent = ref(null);
const is_login = ref(false);
const errors = ref({});
const form = ref({
    email: null,
    password: null,
});
const isLoading = ref(true);

const formComponent2 = ref(null);
const is_entrada = ref(false);
const errors2 = ref({});
const form2 = ref({
    email: null
});

const storeState = useStateStore();
const login = async () => {
    is_login.value = true;
    try {
        const response = await AuthRepository.createTokens(form.value);
        if (!response.success) return (errors.value = response.error);
        errors.value ={
            email: null,
            password: null,
        }
        localStorage.setItem("token", response.token);
        // router.replace({
        //     name: "home-route-principal",
        // });
        // storeState.current_state.layout='app';
        // Forzar refresh sin cache
        window.location.href = window.location.origin + window.location.pathname + '?nocache=' + Date.now();
    } catch (error) {
        console.log(error);
    }
};

const recuperarpw = () => {
    is_entrada.value = true;
    errors2.value = {};
    form2.value.email=null;
    registerModal.show();
}

const enviar_acceso = async () => {
    try {
        is_login.value = true;
        isLoading.value=true;
        const response = await AuthRepository.changePw(form2.value);
        if (!response.success) return (errors2.value = response.error);
        registerModal.hide();
        avisoModalPricipal.show();
        isLoading.value=false;
    } catch (error) {
        console.log(error);
    }
};

onMounted(async ()=>{
    registerModal = new window.bootstrap.Modal(
        document.getElementById("registerModal")
    );
    avisoModalPricipal = new window.bootstrap.Modal(
        document.getElementById("avisoModalPricipal")
    );
    isLoading.value=false;
});
</script>
