<template>
    <v-app style="background-color: #f4f4f4;">
        <div class="sm:flex hidden items-center justify-between flex-col"
            style="background-color: #f4f4f4; margin-top: 3%;">

            <body style="background-color: #f4f4f4;">
                <v-container style=" background-color: #f4f4f4;">
                    <v-row align="center" justify="center">
                        <!-- Header -->
                        <v-col cols="8" lg="8" md="10" sm="10" xs="10" style=" align-items: center; ">
                            <img class="login-picture" src="../../public/images/loginpage/loginhutopy.png">
                        </v-col>

                        <!-- Connexion-objects -->
                        <v-col cols="3" lg="4" md="10" sm="10" xs="10" class="connexion-container">
                            <h1 class="text-center display-6 h1-connexion">Connexion</h1>
                            <h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous vous connecter à votre
                                compte?</h2>
                            <v-card-text>
                                <v-form class="label-mail-password">
                                    <v-text-field prepend-icon="mdi-email" type="text" v-model="user.email"
                                        label="E-mail" class="text-start"></v-text-field>
                                    <v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
                                        label="Mot de passe" class="text-start"></v-text-field>
                                </v-form>
                                <v-snackbar v-model="errorSnackBar">
                                    Email ou mot de passe invalide.
                                    <template v-slot:actions>
                                        <v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
                                    </template>
                                </v-snackbar>
                            </v-card-text>
                            <v-card-actions>
                                <div class="flex-grow-1"></div>
                                <router-link :to="{ name: 'home' }">
                                    <v-btn color="#6b0065" class="ma-2 btnhome">Accueil</v-btn>
                                </router-link>
                                <v-btn color="primary" class="ma-2 btnhome" @click="login">Login</v-btn>
                            </v-card-actions>
                            <div class="text-center">
                                <h2 class="text-center display-3 h2pasinscrit">Pas encore inscrit?</h2>
                                <router-link :to="{ name: 'contact' }">
                                    <v-btn color="#6b0065" class="inscriptionbtn"
                                        style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
                                </router-link>
                            </div>
                        </v-col>
                    </v-row>
                </v-container>

            </body>
            <FooterLayout></FooterLayout>
        </div>


        <div class="sm:hidden flex flex-col items-center justify-start"
            style="background-color: #f4f4f4; height: 100vh;">
            <img style="margin-top: 10%;  width: 350px;  box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-radius: 25px; "
                src="../../public/images/loginpage/loginhutopy.png">

            <h1 class="h1-connexion">Connexion</h1>
            <h2 class="h2-connexion">Comment souhaitez-vous
                vous connecter à votre compte?</h2>

            <v-form style="max-width: 400px; width: 350px;">
                <v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="E-mail"></v-text-field>
                <v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
                    label="Mot de passe"></v-text-field>
            </v-form>

            <v-card-actions>
                <div class="flex-grow-1"></div>
                <router-link :to="{ name: 'home' }">
                    <v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
                </router-link>
                <v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
            </v-card-actions>
            <div class="text-center">
                <h2 class="h2pasinscrit">
                    Pas encore
                    inscrit?</h2>
                <router-link :to="{ name: 'contact' }">
                    <v-btn color="#6b0065" class="inscriptionbtn"
                        style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
                </router-link>
            </div>

        </div>
    </v-app>
</template>


<script setup>
import FooterLayout from '@/layouts/FooterLayout.vue';
import { auth } from '@/stores/auth.js';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useClient } from "@/plugins/api.js";

const api = useClient()

const store = auth();
const router = useRouter()

let user = ref({});
let errorSnackBar = ref(false);

async function login() {
    try {
        await store.login(api, user.value.email, user.value.password)
        router.push('/');
    } catch (error) {
        errorSnackBar.value = true;
    }
}

</script>

<style scoped>
.h1-connexion {
    font-size: 0.55em;
}

.h2-connexion {
    font-size: 0.55em;
}

.label-mail-password {
    margin-bottom: -10%;
}


@media (min-width: 300px) {
    .h1-connexion {
        font-size: 2em;
        margin-bottom: 5%;
    }

    .h2-connexion {
        font-size: 1.1em;
        margin-bottom: 5%;

        text-align: center;
    }

    .h2pasinscrit {
        margin-bottom: 6%;
        font-size: 1.1em;
    }

    .inscriptionbtn {
        transform: scale(.7);
    }
}

@media (min-width: 450px) and (max-width: 670px) {
    .h1-connexion {
        font-size: 2em;
        margin-bottom: 5%;
    }

    .h2-connexion {
        font-size: 1.1em;
        margin-bottom: 5%;

        text-align: center;
    }

    .h2pasinscrit {
        margin-bottom: 6%;
        font-size: 1.1em;
    }

    .inscriptionbtn {
        transform: scale(.7);
    }

    .login-picture {
        width: auto;
        border-radius: 30px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);


    }
}

@media (min-width: 641px) and (max-width: 770px) {
    .h1-connexion {
        font-size: 2.5em;
    }

    .h2-connexion {
        font-size: 1.1em;
        margin-bottom: 5%;
    }

    .h2pasinscrit {
        margin-bottom: 5%;
        font-size: 1.1em;
    }

    .label-mail-password {
        margin-bottom: -3%;
        width: 425px;
        margin-left: 6%;

    }

    .btnhome {

        font-size: 1em;

        justify-content: center;
        transform: matrix(1, 0, 0, 1, -160, 0);
    }

    .login-picture {
        width: auto;
        border-radius: 30px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);


    }

    .inscriptionbtn {
        transform: scale(.8);
    }
}

@media (min-width: 769px) and (max-width: 1280px) {
    .h1-connexion {
        font-size: 3em;
    }

    .h2-connexion {
        font-size: 1.2em;
        margin-bottom: 5%;
    }

    .h2pasinscrit {
        margin-bottom: 5%;
        font-size: 1.7em;
    }

    .label-mail-password {
        margin-bottom: -3%;
        width: 550px;
        margin-left: 9%;

    }

    .inscriptionbtn {
        transform: scale(.8);
    }

    .login-picture {
        width: auto;
        border-radius: 30px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);


    }

    .btnhome {
        font-size: 1em;

        justify-content: center;

    }
}

@media (min-width: 1279px) and (max-width: 1920px) {
    .h1-connexion {
        font-size: 2em;
        margin-top: 4%;
        font-weight: 600;
    }

    .h2-connexion {
        font-size: 1em;
        margin-bottom: 5%;
        font-weight: 500;
    }

    .h2pasinscrit {
        margin-bottom: 5%;
        font-size: 1.3em;
    }

    .label-mail-password {
        margin-bottom: -10%;
        margin-top: -4%;

    }

    .inscriptionbtn {
        transform: scale(.6);
        margin-top: -5%;
    }

    .login-picture {
        width: auto;
        border-radius: 30px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
        margin-left: -5%;

    }
}

@media (min-width: 1921px) {
    .h1-connexion {
        font-size: 4.2em;
    }

    .h2-connexion {
        font-size: 1.3em;
        margin-bottom: 5%;
        margin-left: 6%;
    }

    .h2pasinscrit {
        margin-bottom: 5%;
        font-size: 1.7em;
    }


    .label-mail-password {
        margin-left: 5%;
        margin-bottom: 0%;
        width: auto;
    }

    .connexion-container {
        margin-left: -7%;

    }

    .login-picture {
        width: auto;
        border-radius: 30px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
        margin-left: -10%;
    }
}

@media (min-width: 2500px) and (max-width: 4000px) {
    .h1-connexion {
        font-size: 6.2em;
    }

    .h2-connexion {
        font-size: 1.7em;
        margin-bottom: 5%;
    }

    .h2pasinscrit {
        margin-bottom: 5%;
        font-size: 1.7em;
    }

    .label-mail-password {
        margin-bottom: 0%;
        margin-left: 10%;
        width: auto;
    }

    .inscriptionbtn {
        transform: scale(1);
    }


    .connexion-container {
        margin-left: -3%;
    }

    .login-picture {
        width: auto;
        border-radius: 30px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
        margin-left: -5%;
    }
}
</style>
