@extends('layouts.app')

@push('style')
<style>
 #registerForm i {
        margin-left: -40px;
        margin-top: 20px;
        cursor: pointer;
        z-index: 9999;
}

.help-block {
    display: block;
    padding: .375rem .75rem;
}
    </style>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css"/>
 
  @endpush

@section('content')  
   
   
<form id="registerForm" class="d-flex flex-column justify-content-center mt-2" action="{{ LaravelLocalization::localizeUrl('updateUserData') }}">   

        <div class="lead d-block  pb-0   align-content-center mx-auto text-center" >
            <h3>{{__('applabels.myAccountData')}} </h3> 
        </div>
        @if (isset($message))
        <div class="d-flex justify-content-center  mb-3 col-sm-12  ">
            <div class="input-group  col-sm-12  pb-4 alert alert-info justify-content-center mx-auto " role="alert">
            <div class="input-group justify-content-center flex-nowrap  ">
                <svg class="bi flex-shrink-0 me-2" width="32" height="32" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
                <span>{{  $message  }}</span>
            </div>
            </div>
        </div>
        @endif
            

 

       <input    type='hidden' id='id'  name='id'   value='{{$user->id}}' >
      <div class="d-flex justify-content-center  mb-3 col-sm-12  ">
          <div class="input-group justify-content-center flex-nowrap  ">
              <label class="input-group-text col-sm-4" for="usersname">{{ __('applabels.accountname') }}</label> 
              <input class="form-control item col-sm-8 private-input"   type='text' id='usersname'  name='usersname' placeholder="   " value='{{isset($user->name) ? $user->name : "" }}' required>
              <div class="invalid-feedback">Please </div>  
          </div>
      </div>
      <div class="d-flex justify-content-center  mb-3 col-sm-12 mx-auto">
          <div class="input-group justify-content-center flex-nowrap  ">
              <label class="input-group-text col-sm-4" for="usersemail">{{ __('applabels.accountemail') }}</label> 
              <input class="form-control item col-sm-8 private-input"   type='email' name='usersemail'  id='usersemail' placeholder="  " value='{{isset($user->email) ? $user->email : "" }}' required readonly>
              <div class="invalid-feedback">Please </div>  
          </div>
      </div>
      <div class="d-flex justify-content-center  mb-3 col-sm-12 mx-auto">
          <div class="input-group justify-content-center flex-nowrap  ">
              <label class="input-group-text col-sm-4" for="usersphone">{{ __('applabels.accountphone') }}</label> 
              <input class="form-control item col-sm-8 private-input"   type='number' name='usersphone'  id='usersphone' placeholder="  " value='{{isset($user->phone) ? $user->phone : "" }}' required >
              <div class="invalid-feedback">Please </div>  
          </div>
      </div>
 
       
 
      <div class="d-flex justify-content-center mt-4 pt-4  mb-0 col-sm-12 mx-auto">
          <div class="input-group justify-content-center flex-nowrap  ">
               <h3>{{ __('applabels.billingData') }}</h3>
                 
          </div>
      </div>
      <div class="d-flex justify-content-center  mb-3 col-sm-12 mx-auto">
          <div class="input-group justify-content-center flex-nowrap  ">
              <label class="input-group-text col-sm-4" for="paymentname">{{ __('applabels.name') }}</label> 
              <input class="form-control item col-sm-8 private-input"   type='text' id='paymentname'  name='paymentname' placeholder="   " value='{{isset($user->billingdata[0]->name) ? $user->billingdata[0]->name : "" }} ' required>
              <div class="invalid-feedback">Please </div>  
          </div>
      </div>
      <div class="d-flex justify-content-center  mb-3 col-sm-12 mx-auto">
          <div class="input-group justify-content-center flex-nowrap  ">
              <label class="input-group-text col-sm-4" for="paymentemail">{{ __('menu.email') }}</label> 
              <input class="form-control item col-sm-8 private-input"   type='email' name='paymentemail'  id='paymentemail' placeholder=" " value='{{isset($user->billingdata[0]->email) ? $user->billingdata[0]->email : "" }}' required>
              <div class="invalid-feedback">Please </div>  
          </div>
      </div>

      <div class="d-flex justify-content-center   mb-3 col-sm-12 mx-auto">                    
          <div class="input-group justify-content-center flex-nowrap ">
              <label class="input-group-text col-sm-4" for="paymentphone">{{ __('menu.phone') }}</label>
              <input class="form-control item col-sm-8 private-input"   type='number' name='paymentphone'  id='paymentphone' placeholder=" " value='{{isset($user->billingdata[0]->phone) ? $user->billingdata[0]->phone : "" }}' required>
              <div class="invalid-feedback">Please </div>
          </div>
      </div>  

      
      <div class="d-flex justify-content-center   mb-3 col-sm-12 mx-auto">                    
          <div class="input-group justify-content-center flex-nowrap ">
            
              <label class="input-group-text col-sm-4" for="company">{{ __('applabels.companyname') }}</label> 
              <input class="form-control item col-sm-8 company-input"   type='text' name='company'  value='{{isset($user->billingdata[0]->company) ? $user->billingdata[0]->company : "" }}'  >
              
          </div>
          
      </div>
      <div class="d-flex justify-content-center  mb-3 col-sm-12 mx-auto">
          <div class="input-group justify-content-center flex-nowrap  ">
              <label class="input-group-text col-sm-4" for="VAT">{{ __('applabels.VAT') }}</label> 
              <input class="form-control item col-sm-8 company-input"   type='text' name='VAT' placeholder=" " value='{{isset($user->billingdata[0]->VAT) ? $user->billingdata[0]->VAT : "" }}'   >
              <div class="help-block with-errors"></div>
          </div>
      </div>
      <div class="d-flex justify-content-center  mb-3 col-sm-12 mx-auto">
          <div class="input-group justify-content-center flex-nowrap  ">
              <label class="input-group-text col-sm-4" for="address">{{ __('applabels.address') }}</label> 
              <input class="form-control item col-sm-8 company-input"   type='text' name='address' placeholder="  " value='{{isset($user->billingdata[0]->address) ? $user->billingdata[0]->address : "" }}' >
          </div>
      </div>
      <div class="d-flex justify-content-center  mb-3 col-sm-12 mx-auto">
          <div class="input-group justify-content-center flex-nowrap  ">
              <label class="input-group-text col-sm-4" for="zicode">{{ __('applabels.zip') }}</label> 
              <input class="form-control item col-sm-8 company-input"   type='text' name='zipcode' placeholder="   " value='{{isset($user->billingdata[0]->zipcode) ? $user->billingdata[0]->zipcode : "" }}' >
          </div>
      </div>
      <div class="d-flex justify-content-center  mb-3 col-sm-12 mx-auto">
          <div class="input-group justify-content-center flex-nowrap  ">
              <label class="input-group-text col-sm-4" for="city">{{ __('applabels.city') }}</label> 
              <input class="form-control item col-sm-8 company-input"   type='text' name='city'value='{{isset($user->billingdata[0]->city) ? $user->billingdata[0]->city : "" }}' >
          </div>
      </div>   

      <div class="d-flex justify-content-center  mb-3 col-sm-12 mx-auto">
          <div class="input-group justify-content-center flex-nowrap  ">
              <label class="input-group-text col-sm-4" for="country">{{ __('applabels.country') }}</label> 
              <select class="custom-select w-75 ps-2 company-input" name="country" id="country"    >
                @if (isset($user->billingdata[0]->country) )
                <!-- country set -->
                @else
                 <option value="" >{{ __("applabels.select") }}</option>
                @endif
                  @foreach($countries as $pais)
                    <option value="{{ $pais }}" {{ ( $pais == ( isset($user->billingdata[0]) ? $user->billingdata[0]->country : '' )  ? 'selected' : '' ) }}>{{ $pais }} </option>
                  @endforeach
                  
                    
              </select>
          </div>

          <!-- Show the messages in #errors -->
      
      </div>  
         
        <div class="text-center mx-auto d-block" style="z-index: 99999">
            <div id="loadingGif" style="display:none;"><img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif"></div>
        </div>
        <div class="d-flex justify-content-center  mb-3 col-sm-12 mx-auto">
            <div class="form-footer input-group justify-content-center flex-nowrap  ">
             <button type="submit" id="saveBtn"  >{{ __('applabels.datatable Save') }}</button>          
            </div>      
        </div>         

        <div class="d-flex justify-content-center mt-4 mb-3 col-sm-12 mx-auto">
            <div class="input-group justify-content-center flex-nowrap  ">
               <h3>{{ __('applabels.changePassword') }}</h3>
            </div>
        </div>  
          
        <div class="d-flex justify-content-center  mb-3 col-sm-12 mx-auto">
            <div class="input-group justify-content-center flex-nowrap  ">
            <label class="input-group-text col-sm-4" for="newpassword">{{ __('applabels.password') }}</label> 
            <input class="form-control   col-sm-8  "   type='password' name='newpassword'   id='newpassword' autocomplete="new-password"  >
            <i class="fa-solid fa-eye-slash" id="togglePassword1"></i>
        
            </div>
        </div>
        <div class="d-flex justify-content-center  mb-3 col-sm-12 mx-auto">
            <div class="input-group justify-content-center flex-nowrap  ">
                <label class="input-group-text col-sm-4" for="confirm_password">{{ __('applabels.confirmpassword') }}</label> 
                <input class="form-control   col-sm-8 "   type='password' name='confirm_password'   id='confirm_password' autocomplete="new-password"   >
                <i class="fa-solid  fa-eye-slash" id="togglePassword2"></i>
                
            </div>
        </div>

        <div class="d-flex justify-content-center  mb-3 col-sm-12 mx-auto">
            <div class="input-group justify-content-start flex-nowrap  ">
                <!-- #messages is where the messages are placed inside -->
                
                    <div class="col-12  ">
                        <div id="errormessages"></div>
                    </div>
                
             
            </div>
        </div>

        <div class="d-flex justify-content-center  mb-3 col-sm-12 mx-auto">
            <div class="form-footer input-group justify-content-center flex-nowrap  ">
             <button type="submit" id="savePassword"  >{{ __('applabels.datatable Save') }}</button>          
            </div>      
        </div> 
</div>     
</form>  

 
 
 
@include('components.modalalert') 


@endsection
    @push('scripts')  
    <script type="text/javascript">  
 
            
 //const modalAlert = new bootstrap.Modal('#modalAlert')
 $(document).ready(function(){ 

    $('#registerForm').bootstrapValidator({
        container: '#errormessages',
            feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
            },

            submitButtons: 'button[type="submit"]',
            trigger: null,
           // live: 'enabled',
            fields: {
                
                newpassword: {
                
                    //enabled: false,
                    
                    message: 'The password is not valid',
                    validators: {
                        notEmpty: {
                        message: 'The password is required and cannot be empty'
                        },
                       /* identical: {
                        field: 'confirm_password',
                        message: 'The passwords must match (Password). '
                        },*/
                        stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The password must be more than 6 and less than 30 characters long (Password)'
                        },
                        regexp: {
                        regexp: /^[a-zA-Z0-9_]+$/,
                        message: 'The password can only consist of alphabetical, number and underscore (Password)'
                        }
                    }
                },

                confirm_password: {
                
                    //enabled: false,
                    
                    message: 'The password is not valid',
                    validators: {
                        notEmpty: {
                        message: 'The confirmation password is required and cannot be empty'
                        },
                        identical: {
                        field: 'newpassword',
                        message: 'The confirmation and password must match.'
                        },
                       /* stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The password must be more than 6 and less than 30 characters long (Confirm Password)'
                        },
                        regexp: {
                        regexp: /^[a-zA-Z0-9_]+$/,
                        message: 'The password can only consist of alphabetical, number and underscore (Confirm Password)'
                        }*/
                    }
                }, 
                usersphone: {
                    message: 'The phone is not valid',
                        validators: {
                            notEmpty: {
                            message: 'The phone number is required and cannot be empty'
                            }        
                        },
                }
            }
        })

         // Enable the password/confirm password validators if the password is not empty
        /* .on('keyup----------', '[name="password"]', function() {
            var isEmpty = $(this).val() == '';
            $('#registerForm')
                    .bootstrapValidator('enableFieldValidators', 'password', !isEmpty)
                    .bootstrapValidator('enableFieldValidators', 'confirm_password', !isEmpty);

            // Revalidate the field when user start typing in the password field
            if ($(this).val().length == 1) {
                $('#registerForm').bootstrapValidator('validateField', 'password')
                                .bootstrapValidator('validateField', 'confirm_password');
            }
        })*/


         // Enable the password/confirm password validators if the password is not empty
       /*  .on('blur----------', '[name="confirm_password"]', function() {
            var isEmpty = $(this).val() == '';
            $('#registerForm')
                    .bootstrapValidator('enableFieldValidators', 'password', !isEmpty)
                    .bootstrapValidator('enableFieldValidators', 'confirm_password', !isEmpty);

            // Revalidate the field when user start typing in the password field
            if ($(this).val().length == 1) {
                $('#registerForm').bootstrapValidator('validateField', 'password')
                                .bootstrapValidator('validateField', 'confirm_password');
            }
        })*/
        .on('success.form.bv', function(e) {
             // Prevent form submission
             console.log('SUCCESS')
             e.preventDefault();
             
            // Reset the message element when the form is valid
            $('#errormessage').html('');
            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');
           
            // Use Ajax to submit form data
            //modalAlert.hide();
 
            $.ajax({
                    type: 'POST',
                    url: $form.attr('action'),
                    data: $form.serialize(),
                    success: function(data) {
                        console.log(data);
                        console.log ('submited')
                        window.location.reload();
                    },

                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        console.log(textStatus);
                    }
                })
            
           
        })
/*
        .on('error.field.bv', function(e, data) {
            // data.bv      --> The BootstrapValidator instance
            // data.field   --> The field name
            // data.element --> The field element

            // Get the messages of field
            var messages = data.bv.getMessages(data.element);

            // Remove the field messages if they're already available
            $('#alertmessage').find('li[data-field="' + data.field + '"]').remove();

            // Loop over the messages
            for (var i in messages) {
                // Create new 'li' element to show the message
                $('<li/>')
                    .attr('data-field', data.field)
                    .wrapInner(
                        $('<a/>')
                            .attr('href', 'javascript: void(0);')
                            .html(messages[i])
                            .on('click', function(e) {
                                // Focus on the invalid field
                                data.element.focus();
                            })
                    )
                    .appendTo('#alertmessage');
            }
            modalAlert.show();
            // Hide the default message
            // $field.data('bv.messages') returns the default element containing the messages
            data.element
                .data('bv.messages')
                .find('.help-block[data-bv-for="' + data.field + '"]')
                .hide();
        })

        .on('success.field.bv', function(e, data) {
            // Remove the field messages
            $('#errors').find('li[data-field="' + data.field + '"]').remove();
           
           
        });*/
     
  
    $("#saveBtn").on("click", function(e) 
    {
        if ($('#password').value != ''){
            var isEmpty = $('#newpassword').value == '';
            $('#registerForm')
                    .bootstrapValidator('enableFieldValidators', 'newpassword', !isEmpty)
                    .bootstrapValidator('enableFieldValidators', 'confirm_password', !isEmpty);

            // Revalidate the field when user start typing in the password field
            if ($(this).val().length == 1) {
                $('#registerForm').bootstrapValidator('validateField', 'newpassword')
                                .bootstrapValidator('validateField', 'confirm_password');
            }
        }
        //validate passwords 
        console.log('SUCCESS')
             e.preventDefault();
             $('#loadingGif').css('display' , "block");
            setTimeout(function() {
                $('#loadingGif').css('display' , "none");
                
            },3000);
            // Reset the message element when the form is valid
            $('#errors').html('');
            // Get the form instance
            var $form = $('#registerForm');

            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');
           console.log($form.attr('action'));
            // Use Ajax to submit form data
            $.ajax({
                    type: 'POST',
                    url: $form.attr('action'),
                    data: $form.serialize(),
                    success: function(data) {
                        console.log(data);
                        console.log ('submited')
                        window.location.reload();
                    },

                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        console.log(textStatus);
                    }
                })
            
           
          
     //   return false;
    })
});

        const togglePassword1 = $('#togglePassword1');
        const password1 = $('#newpassword');
        togglePassword1.on('click', () => {
            // Toggle the type attribute using
            // getAttribure() method
            const type = password1
                .attr('type') === 'password' ?
                'text' : 'password';
            password1.attr('type', type);
            // Toggle the eye and bi-eye icon
            togglePassword1.toggleClass('fa-eye-slash fa-eye');
        });


        const togglePassword2 = $('#togglePassword2');
        const password2 = $('#confirm_password');
        togglePassword2.on('click', () => {
            // Toggle the type attribute using
            // getAttribure() method
            const type = password2
                .attr('type') === 'password' ?
                'text' : 'password';
            password2.attr('type', type);
            // Toggle the eye and bi-eye icon
            togglePassword2.toggleClass('fa-eye-slash fa-eye');
        });

        function validateField() {
            let cont = $('#registerForm');
       
            $("#newpassword").attr('data-bv-validatorname', false);
            $("#confirm_password").attr('data-bv-validatorname', false);
           
           
            console.log(`$("#newpassword").attr('data-bv-validatorname') is ${$("#newpassword").attr('data-bv-validatorname')}`);
            console.log(`$("#confirm_password").attr('data-bv-validatorname') is ${$("#confirm_password").attr('data-bv-validatorname')}`);
        }     



        (function () {
            'use strict'
            const forms = document.querySelectorAll('.requires-validation')
            Array.from(forms)
            .forEach(function (form) {
                form.addEventListener('submit', function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
            
                form.classList.add('was-validated')
                }, false)
            })
            })()
    </script>
    @endpush