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

 
@section('content')
<!-- 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> -->
<div class="section">
    <div class="mt-3">
        <h2 class="lexend">My Profile</h2>
    </div>
<div class="row mt-3">
    <div class="profile-pic">
        @php
            $profileImage = Auth::user()->images()
                ->where('type', 'image')
                ->latest()
                ->first();
        @endphp

        <img 
            src="{{ $profileImage ? asset($profileImage->url)  : asset('admin/img/profile.png') }}" 
            alt="profile"
            style="width:150px; height:150px; border-radius:50%;">
    </div>
</div>
    <div class="row mt-3">
        <div class="col-lg-10 col-xxl-10 col-xl-10 col-md-10 col-sm-12">
            <div class="profile-detail">
                <div>
                    <i class="fa-solid fa-envelope fs-22"></i>
                    <a href="mailto:{{ Auth::user()->email }}">{{ Auth::user()->email }}</a>
                </div>
                <div>
                    <i class="fa-solid fa-phone fs-22"></i>
                    <a href="tel:{{ Auth::user()->phone}}" class="fs-18">{{ Auth::user()->phone ?? '---' }}</a>
                </div>
                <div>
                    <i class="fa-solid fa-user fs-22"></i>
                    <p class="fs-18">{{ Auth::user()->name }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-5">
        <a href="{{ route('admin.profile.edit') }}">
            <button class="profile-btn">Edit Profile</button>
        </a>
    </div>
</div>



<!-- /.container-fluid -->
 
    <!-- 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" class="changepasswordform" 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 class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


@endsection
@push('body-scripts')
<script>
  $(function(){
     $('#current_msg').hide();
     $('#password_error').hide();
     $('#confirmpassword_error').hide();
  });
$('.changepasswordform').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>

@endpush