{% extends '@EasyAdmin/page/content.html.twig' %}



 {% block main %}

     <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

     <link rel="stylesheet" type="text/css" href="{{ asset('css/sweetalert2.min.css') }}">

     <link rel="stylesheet" type="text/css" href="{{ asset('css/swiper.css') }}">

     <link rel="stylesheet" type="text/css" href="{{ asset('css/animate.css') }}">
<style>
    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>

     <div class="row">


         <div class="col-sm-12 "
              style="margin-top: -50px; z-index: 400; background-image: url('{{ asset('background/background_user.jpg') }}');  background-repeat: revert; background-size: cover ">

             <br>

             {% if user.userPicture is not null %}
                 <img src="{{ onlinePath }}/media/{{ user.userPicture }}" alt="" style="box-shadow: 0px 0px 20px 0px rgba(252,35,158,0.78);z-index: 200; width: 130px; height: 130px; border-style: solid; border-color: rgba(220,9,161,0.5); border-radius: 50% " class="circle; ">

             {% elseif  user.userPicture is  null  %}
                 <img src="{{ asset('img/user/user_testimony.jpg') }}" style="width: 130px; height: 130px" alt="">

             {% endif %}


             <i class="fas fa-camera " style="width: 40px; color: deeppink; font-size: 23px; padding: 6px;  height: 40px; border-radius: 20px; border-style: solid; border-color: deeppink; margin-left: -20px; " data-bs-toggle="tooltip" data-bs-title="Update Your Picture"></i>

             <h2 style="font-family: Lucida Handwriting; font-weight: 600; padding: 10px">Hi, {{  user.firstName}} {{ user.lastName }}</h2>

             <div class="col-sm-12  " style="height: 100px; width: 100%; margin-top: -100px; z-index: 100;

    background: -webkit-linear-gradient(90deg,  rgba(232,22,165,0.2),rgba(255,255,255,0.37)) !important;"></div>

         </div>


         <div class="col-sm-12">

             <div class="col-sm-12 " style="margin-top: 20px">

                 <h5>Changer mon Mot de Passe</h5>
             </div>

             <div class="col-sm-12 " style="height: 2px; margin-top: 10px; width: 100%; color: black; background: #0e4e36">

             </div>

         </div>


         <div class="mb-3 row" style="margin-top: 20px">
             <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
             <div class="col-sm-10">
                 <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="{{ user.email }}">
             </div>
         </div>
         <div class="mb-3 row">
             <label for="inputPassword" class="col-sm-2 col-form-label"> Current Password</label>
             <div class="col-sm-6">
                 <input type="password" class="form-control" id="inputPassword">
             </div>
         </div>

         <div class="mb-3 row">
             <label for="newPassword" class="col-sm-2 col-form-label"> New Password</label>
             <div class="col-sm-6">
                 <input type="password" class="form-control" id="newPassword">
             </div>
         </div>
         <div class="mb-3 row">
             <label for="confirmPassword" class="col-sm-2 col-form-label"> Confirm Password</label>
             <div class="col-sm-6">
                 <input type="password" class="form-control" id="confirmPassword">
             </div>
         </div>



         <button id="btnSubmitLog" onclick="updateUserPassword()"
                 type="submit" class="btn  btn-primary col-sm-8 offset-sm-2 col-md-3 offset-md-5"
                 style="height: 40px; margin-top: 20px; margin-bottom: 30px; background-color: deeppink">Change Password
             <i class="fas fa-key right" style="float: right; right: 0;"></i></button>

         </div>

     {{ parent() }}
     <script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
     <script src="{{ asset('js/materialize.min.js') }}"></script>
     <script src="{{ asset('js/sweetalert2.all.min.js') }}"></script>

     <script src="{{ asset('js/slick.js') }}"></script>
     <script src="{{ asset('js/callus.js') }}"></script>
     <script src="{{ asset('js/aes.js') }}"></script>
     <script src="{{ asset('js/tripledes.js') }}"></script>
     <script src="{{ asset('js/enc-base64-min.js') }}"></script>
     <script src="{{ asset('js/index.js') }}"></script>
     <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>


     <script type="text/javascript">

         $(document).ready(function() {


         });
         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)
             }
         });




         function updateUserPassword() {



             var inputPassword= $("#inputPassword").val();
             var newPassword= $("#newPassword").val();
             var confirmPassword= $("#confirmPassword").val();

             if(inputPassword==="" ){
                 Toast.fire({
                     icon: 'error',
                     title: "Current password is empty"
                 });

                 $("#inputPassword").addClass('invalid')
                 return
             }
             if(newPassword===""  ){
                 Toast.fire({
                     icon: 'error',
                     title: "New password is empty"
                 });

                 return
             }
             if(confirmPassword===""){
                 Toast.fire({
                     icon: 'error',
                     title: "Confirm password is empty"
                 });

                 return
             }

             if(newPassword!==confirmPassword){
                 Toast.fire({
                     icon: 'error',
                     title: "Password is not matching"
                 });
                 $("#confirmPassword").addClass('invalid');

             }else{

                 $.ajax({
                     method: "PUT",
                     tryCount  : 0,
                     retryLimit  : 4,
                     url: " {{ path('resetting') }}",
                     "headers": {
                         "Content-Type": "application/json"
                     },
                     // lastName,firstName,email, location,town,country
                     data: JSON.stringify({

                         "oldPassword": inputPassword,
                         "newPassword": confirmPassword,


                     }),
                     beforeSend:function () {

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

                         $("#btnSubmitLog").removeClass("disabled").html("Connexion")


                         Toast.fire({
                             icon: 'success',
                             title: "Pass updated"
                         });

                         setTimeout(function () {
                             window.location.assign("{{ path('app_logout') }}");
                         },3000);

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


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

                         Toast.fire({
                             icon: 'warning',
                             title: "Something Wrong"
                         });



                     }

                 });

             }

         }



     </script>


 {% endblock %}