<template>
   <div id="body">
    <div class="container">
            <div class="card o-hidden border-0 shadow-lg my-5">
                <div class="card-body p-0">
                    <div class="row">
                        <div class="col-lg-6 d-none d-lg-block bg-login-image">
                            <img src="../assets/img/log.png" class="img-fluid" alt="Responsive image">
                        </div>
                        <div class="col-lg-6">
                            <div class="p-5">
                                <div class="text-center">
                                    <h1 class="h4 text-gray-900 mb-4">Créez un compte !</h1>
                                </div>
                                <form class="user" @submit="onSubmit">
                                    <div class="form-group row">
                                        <div class="col-sm-6 mb-3 mb-sm-0">
                                            <input type="text" class="form-control form-control-user" id="firstname" placeholder="Prénom">
                                        </div>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control form-control-user" id="lastname" placeholder="Nom">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control form-control-user" id="login" placeholder="Login">
                                    </div>
                                    <div class="form-group">
                                        <input type="email" class="form-control form-control-user" id="email" placeholder="Email">
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-sm-6 mb-3 mb-sm-0">
                                            <input type="password" class="form-control form-control-user" id="password" placeholder="Mot de passe">
                                        </div>
                                        <div class="col-sm-6">
                                            <input type="password" class="form-control form-control-user" id="repeatPassword" placeholder="Confirmation">
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-user btn-block">Inscription</button>
                                </form>
                                <hr>
                                <div class="text-center">
                                    <router-link to="/login">
                                        <a class="small" href="login.php">Déjà inscrit ? Connectez-vous !</a>
                                    </router-link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
   </div>
</template>

<script>
export default {
    name: 'Signup',
    data() {
      return {
        rows: [
          { type: 'text', id: 'login', placeholder: 'Login'},
          { type: 'password', id: 'password', placeholder: 'Mot de passe'}
        ]
      }
    },
    methods: {
      onSubmit(evt) {
        evt.preventDefault()
        // const href = window.location.href;
        // const url = href.substring(0, href.lastIndexOf('/')) + "/api/api.php/user";
        // const form = document.forms[0];
        // let body = { 'role': 0 };

        // Object.entries(form.elements).forEach((key) => {
        //     if (key[1].id != "repeatPassword")
        //         body[key[1].id] = key[1].value;
        // })
        
        // fetch(url, {
        //     method: 'POST',
        //     headers: { 'Content-Type': 'application/json' },
        //     body: JSON.stringify(body)
        // })
        //     .then(response => {
        //         if (response.status === 200) {
        //             window.location.href = href.substring(0, href.lastIndexOf('/')) + "/login.php";
        //         } else {
        //             throw new Error('Something went wrong on api server!');
        //         }
        //     }).catch(error => {
        //         console.error(error);
        //     });
      }
    }
  }
</script>