@include('Admin.layouts.app')
@include('Admin.layouts.sidebar')
@section('title', 'Admin Profile')

         <!-- Begin Page Content -->
         <div class="container-fluid">

<!-- Page Heading -->
<h1 class="h3 mb-2 text-gray-800">Admin Profile</h1>
<div class="innerpagedetails card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Admin Profile</h6>

</div>
<!-- DataTales Example -->
<div class="   mb-4">
    <section  class="user-page" >
    <div class="mt-4">
    

    <div class=" mb-4">
     
      <div class="card-body">
        <div class="row my-3">
         
        
                                        <div class="col-lg-4">
                                            <h4 class="mb-0">Name</h4>
                                            <p class="text-18-black">{{Auth::user()->name}}</p>
                                        </div>
                                        <div class="col-lg-8">
                                            <h4 class="mb-0">Email</h4>
                                            <p class="text-18-black">{{Auth::user()->email}}</p>
                                        </div>
                                        <div class="col-lg-4">
                                            <h4 class="mb-0">Phone</h4>
                                            <p class="text-18-black">{{Auth::user()->phone ?? '---'}}</p>
                                        </div>
                                        <div class="row">
                                        <div class="col-lg-3">
                                        <button class="btn-gazna" style="font-size:14px;height:50px;" data-backdrop="static" data-keyboard="false" data-toggle="modal" data-target="#changePasswordModal">Change Password</button>                                            
                                        </div>
                                    
                                        <div class="col-lg-2">
                                        <button id="profileButton"  class="btn-gazna" style="font-size:14px;height:50px;" >Edit Profile</button>
                                      </div>
</div>
                                       
                                        
                                       
        </div>
      </div>
    </div>

    </section>

</div>                       
  </div>
</div>

    


    






</div>

    </div>
</div>

</div>
<!-- /.container-fluid -->
    </div>
    <!-- End of Main Content -->

<div class="modal fade" id="changePasswordModal" tabindex="-1" role="dialog" aria-labelledby="changePasswordModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="changePasswordModalLabel">Change Password</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="post" id="change-password-form" action="{{route('admin.password.change')}}">
       @csrf
          <div class="form-group">
            <label for="oldPassword">Old Password</label>
              <div class="input-group">
            <input type="password"  name="current_password" class="form-control" id="oldPassword" required>
             <div class="input-group-append">
                <button class="btn btn-outline-secondary toggle-password" type="button">
                  <i class="fa fa-eye"></i>
                </button>
              </div>
           
              
</div>
<span class="text-danger" id="current_msg"></span>
          </div>
          <div class="form-group">
            <label for="newPassword">New Password</label>
            <div class="input-group">
              <input type="password" name="password" class="form-control" id="newPassword" required>
              <div class="input-group-append">
                <button class="btn btn-outline-secondary toggle-password" type="button">
                  <i class="fa fa-eye"></i>
                </button>
              </div>
             
              
                                
            </div>
            <span class="text-danger" id="password_error"></span>
          </div>
          <div class="form-group">
            <label for="confirmPassword">Confirm Password</label>
            <div class="input-group">
              <input type="password" name="confirm_password" class="form-control" id="confirmPassword" required>
              <div class="input-group-append">
                <button class="btn btn-outline-secondary toggle-password" type="button">
                  <i class="fa fa-eye"></i>
                </button>
              </div>
              
            </div>
            <span class="text-danger" id="confirmpassword_error"></span>
          </div>
      
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn-gazna" style="font-size:14px;height:50px;">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div>
<script>
  $(function(){
     $('#current_msg').hide();
     $('#password_error').hide();
     $('#confirmpassword_error').hide();
  });
$('#change-password-form').submit(function(e) {
        e.preventDefault();
        $('#current_msg').text('');
     $('#password_error').text('');
     $('#confirmpassword_error').text('');
        var form = $(this);
        var url = form.attr('action');
        var method = form.attr('method');
        var data = form.serialize();
        console.log('data:'+data);
        $.ajax({
            url: url,
            type: method,
            data: data,
            dataType: 'json',
            success: function(response) {
                    // password updated successfully, do something
                    Swal.fire({
  title: 'Password updated Successfully',
  showClass: {
    popup: 'animate__animated animate__fadeInDown'
  },
  hideClass: {
    popup: 'animate__animated animate__fadeOutUp'
  }
}).then(function(){
  $('#changePasswordModal').modal('hide');
  location.reload();
});
                
            },
            error:function(res){
              console.log(res.responseJSON);
              if(res.responseJSON.error)
              {
               
                $('#current_msg').text(res.responseJSON.error);
                $('#current_msg').show();
              }
              if(res.responseJSON.errors.password){
                $('#password_error').text(res.responseJSON.errors.password);
                $('#password_error').show();
              }
              if(res.responseJSON.errors.confirm_password){
                $('#confirmpassword_error').text(res.responseJSON.errors.confirm_password);
                $('#confirmpassword_error').show();
              }

            }
        });
    });
    </script>
@if(Session::has('done'))
<script>
   Swal.fire({
  title: 'Profile updated Successfully',
  showClass: {
    popup: 'animate__animated animate__fadeInDown'
  },
  hideClass: {
    popup: 'animate__animated animate__fadeOutUp'
  }
})
</script>
@endif
<script>
  $(document).ready(function() {
  $('.toggle-password').click(function() {
    $(this).toggleClass('active');
    var input = $(this).parent().prev();
    if (input.attr('type') === 'password') {
      input.attr('type', 'text');
    } else {
      input.attr('type', 'password');
    }
  });
});


document.getElementById('profileButton').addEventListener('click', function() {
        window.location.href = "{{ route('admin.profile.edit') }}";
    });
  </script>

@include('Admin.layouts.footer')
@include('Admin.layouts.modal')