{% extends 'base.html.twig' %}

{% block title %}{{ companyName }}| Login{% endblock %}

{% block body %}


    <div class="row white" style="margin-top: -20px">



        <div class="col s12">

            <div class="col s12 l10 offset-l1" data-aos="zoom-out-down" style="margin-bottom: 40px" data-aos-duration="3000">


                <h3 class="center-align  " style=" font-size: 28px; color: #047ffc; font-family:'Reem Kufi', sans-serif">

                    BIENVENUE SUR <a href="{{ path('app_home') }}"> <img src="{{ asset('img/logo-logercm.png') }}" class="  " style="max-height: 60px" alt=""></a>

                </h3>

                <div class="divider col s4 offset-s4 black"></div>

            </div>
        </div>

        <p class="center-align center" style=" font-size: 24px; color: black; font-family:'Reem Kufi', sans-serif">le meilleur site d'achat de ticket de voyage et de réservation des véhicules en ligne.</p>


        <div class="col s12 m10 offset-m1 l11 push-l1">
            <div class="col s12 hide" id="preloadStep2">
                <div class="progress">
                    <div class="indeterminate pink"></div>
                </div>
                <h5 class="center-align center" id="connexionStep" style="margin-top: -10px"><b>connexion...</b></h5>
            </div>

            <div class="col s12  m10 offset-m1  l5   card hoverable z-depth-4 animated zoomIn" style=" box-shadow: 0px 0px 8px 0px #047ffc; border-radius: 20px">
                <h5 class="center center-align" style="  margin-top: 30px">


                    <span style="font-size: 30px; "> Connectez vous à votre compte. </span>
                </h5>

                <div class="divider col s4 offset-s4 black"></div>
                <br>

                <form data-aos="zoom-out-down" data-aos-duration="2000" onsubmit="return false;" class="col l12 m12 s12 xl12  " id="login_form_customer" style="margin-top: 2%;">

                    <div class="col   s12      input-field center center-block center-align">
                        <i class="fas fa-user-circle prefix active" style="color:#047ffc;font-size: 24px  ">  </i>
                        <input required="required" type="email" id="username_log" name="username_log" class="validate">

                        <label for="username_log" data-error="wrong" data-success="ok" class="active">Nom d'utilisateur </label>
                        <span id="username_log_check" class="helper-text" data-error="wrong" data-success="ok"></span>

                    </div>
                    
                    <div class="col   s12      input-field center center-block center-align" style="margin-top: -5px">
                        <i class="fas fa-key prefix active" style="color:#047ffc;font-size: 24px  ">  </i>
                        <input required="required" type="password" id="password_log" name="usermane_log" class="validate">

                        <label for="password_log" data-error="wrong" data-success="ok" class="active">Mot de Passe </label>
                        <span id="password_log_check" class="helper-text" data-error="wrong" data-success="ok"></span>
                    </div>


                    <div class="col   s12 hide" id="idShowField" style="margin-bottom: 20px">

                    </div>
                    <div class="col s12" style="margin-top: 2px; margin-bottom: 20px">
                          <span style="margin-top: 10px">En continuant, vous nous autorisez à utiliser vos informations conformément à
                              <a href="index.php?page=term">nos conditions d'utilisation </a> et à notre <a href="index.php?page=term">politique de confidentialité</a>.</span>

                    </div>
                    <button  id="btnCustomerLogin" class="btn waves-effect   waves-light col s10 offset-s1" style=" height: 45px ;background: #047ffc;
    outline: none;
    color: #fff;
    font-weight: 600;
    border: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;

	border-radius: 10px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    box-shadow: 0px 0px 8px 0px #047ffc;; margin-top: 2% ; border-radius:5px " type="submit"><span>Connexion</span>
                        <i class="fas fa-power-off right active"> </i>
                    </button>


                    <div class="col s12" style="margin-top: 20px">
                        <div class="col s6 left left-align">


                            <p>
                                <label class="active">
                                    <input type="checkbox">
                                    <span>Maintenir ma session</span>
                                </label>
                            </p>
                        </div>
                        <div class="col s6 right right-align">
                            <a href="#" class="for">Mot de passe oublié...?</a>
                        </div>
                    </div>
                    <div class="col s12 " style="margin-top: 10px;">
                        <div class="col s5 divider grey accent-2">

                        </div>
                        <div class="col s2">
                            <a href="#!" style="margin-left: 10px; margin-top: -20px" class="btn-floating  grey accent-2"><span style="font-size: 20px; margin-left: 2px" class="center center-align"><b>OU</b></span></a>
                        </div>
                        <div class="col s5   divider grey accent-2"></div>


                    </div>

                    <div class="col s12  m10 offset-m1 center center-align" style="margin-top: 15px">
                        <div style="max-width: 300px; min-width: 200px;" scope="public_profile,email" onlogin="checkLoginState()" class="fb-login-button z-depth-2 hoverable fb_iframe_widget" data-width="200" data-max-rows="1" data-size="large" data-button-type="continue_with" data-use-continue-as="true" login_text="

                    " fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=203015117013939&amp;button_type=continue_with&amp;container_width=300&amp;locale=en_US&amp;login_text=%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&amp;max_rows=1&amp;scope=public_profile%2Cemail&amp;sdk=joey&amp;size=large&amp;use_continue_as=true&amp;width=200"><span style="vertical-align: bottom; width: 240px; height: 40px;"><iframe name="f228fd2b68b20d4" width="200px" height="1000px" data-testid="fb:login_button Facebook Social Plugin" title="fb:login_button Facebook Social Plugin" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" allow="encrypted-media" src="https://web.facebook.com/v3.2/plugins/login_button.php?app_id=203015117013939&amp;button_type=continue_with&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3Fversion%3D46%23cb%3Df1dba3ecd5c8e5c%26domain%3Detravel.cm%26is_canvas%3Dfalse%26origin%3Dhttps%253A%252F%252Fetravel.cm%252Ff1666880857ee0c%26relation%3Dparent.parent&amp;container_width=300&amp;locale=en_US&amp;login_text=%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&amp;max_rows=1&amp;scope=public_profile%2Cemail&amp;sdk=joey&amp;size=large&amp;use_continue_as=true&amp;width=200" style="border: none; visibility: visible; width: 240px; height: 40px;" class=""></iframe></span></div>

                    </div>

                    <div class="col s12 m10 offset-m1 center center-align" style="margin-top: 15px; margin-bottom: 10px">


                        <div id="signin-button" style="max-width: 300px; min-width: 250px" class="g-signin2 center center-block  z-depth-3 hoverable waves-effect waves-ripple waves-red  " data-onsuccess="onSignIn" data-width="200" data-longtitle="true" data-gapiscan="true" data-onload="true"><div style="height:36px;width:200px;" class="abcRioButton abcRioButtonLightBlue"><div class="abcRioButtonContentWrapper"><div class="abcRioButtonIcon" style="padding:8px"><div style="width:18px;height:18px;" class="abcRioButtonSvgImageWithFallback abcRioButtonIconImage abcRioButtonIconImage18"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg></div></div><span style="font-size:13px;line-height:34px;" class="abcRioButtonContents"><span id="not_signed_inc21qjy1f865t">Se connecter avec Google</span><span id="connectedc21qjy1f865t" style="display:none">Connecté avec Google</span></span></div></div></div>

                    </div>


                    <div class="col s12 center center-align" style="margin-top: 10px; margin-bottom: 20px">
                    <span style="font-size: 20px">Vous êtes nouveau?
                        <a href="{{ path('app_register',

                            {'destination': path('app_user_log') })
                        }}">Créez votre compte ici!
                        </a>
                    </span>
                    </div>
                </form>


            </div>
            <div class="col s12 m10 offset-m1 l6 push-l1 hide-on-med-and-down hide-on-med-only">

                <img src="{{ asset('img/bannerpng.png') }}" class="  " style="margin-top: 30px; max-height: 450px; max-width: 450px; min-width: 250px; min-height: 250px " alt="">
                <p style=" font-size: 24px; color: black; font-family:'Reem Kufi', sans-serif">
                    Avec une assistance client 24h/24h, 7j/7j.</p>


                <a style="background: #047ffc; margin-bottom: 20px;
    outline: none;
    color: #fff;
    font-weight: 600;
    border: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;

	border-radius: 10px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    box-shadow: 0px 0px 8px 0px #047ffc;; margin-top: 2% " href="{{ path('app_home') }}"   class=" waves-purple waves-effect btn col s10    btn-large  ">
                    <span>Retour à l'accueil</span>
                    <i class="fas fa-home right active"> </i>
                </a>
            </div>

        </div>

    </div>

    
    
    
{% endblock %}


  {% block javascripts %}

      {{ parent() }}
      
      <script type="text/javascript">

          var Toast = Swal.mixin({
              toast: true,
              position: 'top-end',
              showConfirmButton: false,
              timer: 14000,
              timerProgressBar: true,
              didOpen: (toast) => {
                  toast.addEventListener('mouseenter', Swal.stopTimer)
                  toast.addEventListener('mouseleave', Swal.resumeTimer)
              }
          });


          var apiBaseUrl="{{ host }}"
          var loginUrl="{{ path('authentication_token') }}";
          $('#login_form_customer').submit(function(){
              submitLoginForm()
          });
          
         
          function submitLoginForm() {

              var password_log= $("#password_log").val();
              var username_log= $("#username_log").val();

              $.ajax({
                  method: "POST",
                  tryCount  : 0,
                  retryLimit  : 4,
                  url: loginUrl,
                  "headers": {
                      "Content-Type": "application/json"
                  },
                  data: JSON.stringify({

                      "email": username_log,
                      "password": password_log

                  }),
                  beforeSend:function () {

                      $("#preloadStep2").removeClass("hide");
                      $("#btnSubmitLog").addClass("disabled").html("login in progress...");
                  },
                  success: function(data){
                      $("#preloadStep2").addClass("hide");

                      $("#btnSubmitLog").removeClass("disabled").html("Connexion")
                      setCookie("{{ companyName }}_user_token",data.token,1);
                      setCookie("{{ companyName }}_user_userpass",password_log,1);
                      setCookie("{{ companyName }}_user_username",username_log,1);



                      Toast.fire({
                          icon: 'success',
                          title: "Welcome Back"
                      });

                      document.getElementById("login_form_customer").reset();

                  },
                  error:function (xhr, textStatus, errorThrown) {
                      $("#btnSubmitLog").removeClass("disabled").html("Try Again")


                      $("#preloadStep2").addClass("hide");

                      Toast.fire({
                          icon: 'warning',
                          title: "Invalid Username or Password"
                      });

                      $("#password_log").addClass('invalid');
                      $("#username_log").addClass('invalid');

                  }

              });


          }
          
      </script>
  {% endblock %}