<template>
   <div>
        <div class="col-md-8 left-side" >
                    <div class="logo" >
                        <img src="img/logo-cosmos.gif" alt="Cosmos" >
                        <p>Faites tourner et gagnez à tous les coups</p>
                    </div>
                    <br>
                    <div class="spin">

                        <img class="img-responsive" src="img/spin.png" alt="Cosmos" >

                        
                    </div>



                </div><!--col-sm-6-->

        <div class="col-md-4 right-side">
            <h3>S'enregistrer pour jouer</h3>
            <p class="font-weight-normal">Tous les champs sont obligatoires</p>

            <div class="form">

                <div :class="{'form-group' : !errorsHas(`name`) , 'form-group has-error': errorsHas(`name`)}">

                        <input  placeholder="Nom*" id="name" type="text" class="form-control input-lg" name="name" v-model="name" required autofocus>
                            <span class="help-block" v-if="errors.name">
                                <strong v-for="error in errors.name"> {{error}} </strong>
                            </span>
                </div>

                <div :class="{'form-group' : !errorsHas(`email`), 'form-group has-error': errorsHas(`email`)}">
                    
                        <input  placeholder="E-mail*" id="email" type="email" class="form-control input-lg" name="email" v-model="email" required>

                            <span class="help-block" v-if="errors.email">
                                <strong v-for="error in errors.email"> {{error}} </strong>
                            </span>
                </div>

                <div :class="{'form-group' : !errorsHas(`tel`), 'form-group has-error': errorsHas(`tel`)}">
                   
                        <input  placeholder="Tel*" id="tel" type="numeric" class="form-control input-lg" name="tel" v-model="tel" required>

                            <span class="help-block" v-if="errors.tel">
                                <strong v-for="error in errors.tel"> {{error}} </strong>
                            </span>
                </div>

                <div :class="{'form-group' : !errorsHas(`ville`), 'form-group has-error': errorsHas(`ville`)}">
                 
                        <select id="ville" class="browser-default form-control input-lg" name="ville" v-model="ville" @change="filerMagasins(allMagasins,ville)">
                                <option selected value="0">Ville</option>
                                <option v-for="ville in villes" v-text="ville.intitule" :value="ville.id"></option>
                        </select>
                            <span class="help-block" v-if="errors.ville">
                                <strong v-for="error in errors.ville"> {{error}} </strong>
                            </span>
                </div>

                <div :class="{'form-group overflow' : !errorsHas(`captcha`), 'form-group overflow has-error': errorsHas(`captcha`)}">
                    
                        <div class="g-recaptcha" data-sitekey="6LdMQDEUAAAAAM_LNF50y9E8Z76KFPKaD3As12za"></div>

                            <span class="help-block" v-if="errors.captcha">
                                <strong > {{errors.captcha}} </strong>
                            </span>
                </div>

                <div class="text-xs-center">
                    <button class="btn btn-yellow" @click="register">S'enregistrer</button>

                </div>
            </div>
            <!-- form -->
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                'villes':[],
                'allMagasins':[],
                'magasins':[],
                'name': null,
                'email': null,
                'tel': null,
                'magasin': 0,
                'ville': 0,
                'errors':[],
            }
        },
        mounted() {
            this.getData(this)
        },
        methods:{
            getData(vm){

                $.get('api/welcomeData', function(data) {
                    vm.villes = data.villes     
                    vm.allMagasins = data.magasins     
                });

            },
            filerMagasins(allMagasins, ville){
                
                this.magasins = _.filter(allMagasins, function(magasin) {
                    return magasin.ville_id == ville 
                })

            },
            register(){
                var vm = this
                var data = {
                    'name': vm.name,
                    'email': vm.email,
                    'tel': vm.tel,
                    'ville': vm.ville,
                    'magasin': vm.magasin,
                    'g-recaptcha-response':$('#g-recaptcha-response').val(),
                }

                $.ajax({
                    url: 'api/register',
                    type: 'post',
                    data: data,
                })
                .done(function(data) {
                    console.log("success register");
                    vm.$parent.registerSuccess(data.api_token,vm.email)
                })
                .fail(function(data) {
                    vm.$parent.email = vm.email
                    console.log("error");

                    if (data.status == 422){

                        vm.errors = data.responseJSON

                    }else if( data.status == 403 ){

                        vm.$parent.userAlreadyPlayed()
                    }

                })
                .always(function() {
                    console.log("complete register");
                });
                
            },
            errorsHas(key){
                var vm = this
                return _.has(vm.errors,key)
            }
        }
    }
</script>

<style>
    .overflow{
        overflow: auto;
    }
    .btn-yellow{
        background: #F4C600; color:rgb(15, 29, 64); float: right; font-weight: bold;
    }
    .text-xs-center{
            margin-top: 30px;
    }
    
</style>