@extends('admin.layout.app') 
@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Update Profile</h1> </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{url('admin/dashboard')}}"><i class="fas fa-home"></i></a>
                            </li>
                            <li class="breadcrumb-item active">Profile</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <section class="content">
            <div class="row card">
                <div class="col-md-12">
                    <form class="needs-validation formSubmit" action="{{url('admin/edit-profile')}}" method="post" enctype="multipart/form-data" name="update_profile_page" id="update_profile_page">
                        @csrf

                      <div class="row"> 
                            <div class="col-md-2" style="display: none;">
                              <img src="{{asset($user->profile_image ?? 'notImage.jpg')}}" width="100px" height="100px">
                          </div> 
                          <div class="col-md-4" style="display: none;">
                            <label>Image</label>
                            <input type="file" class="form-control d-flex" accept="image/*" style="padding: 3.2px;" name="profile_image">
                            </div>
                    
                            <div class="col-md-3">
                              <label>Name<span style="color:red;">*</span></label>
                              <input type="text" class="form-control" placeholder="First Name" name="first_name" required value="{{$user->name ?? ''}}">
                          </div>
                    
                            <div class="col-md-3" style="display: none;">
                              <label>Last Name</label>
                              <input type="text" class="form-control" placeholder="Last Name" name="last_name" value="{{$user->last_name ?? ''}}">
                          </div>
                      </div>

              <div class="row mb-2 text-right">
                 <div class="col">
                    <button type="submit" class="btn btn-primary" id="loderButton"><i class="fa fa-spinner fa-pulse fa-fw" id="loderIcon" style="display:none;"></i>Update</button>
                    <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
                </div>
            </div>
        </form>
    </div>
</div>
</section>

<div class="col-sm-6">
    <h4 class="ml-3">Change Password</h4> 
</div>
<section class="content">
    <div class="row card">
        <div class="col-md-12">
            <form class="needs-validation formSubmit" action="{{url('admin/change-password')}}" method="post" enctype="multipart/form-data" name="change_password_page" id="change_password_page">
                @csrf
                
                    <div class="row">
                        <div class="col-md-4">
                          <label>Current Password<span style="color:red;">*</span></label>
                          <input type="password" class="form-control" placeholder="Current Password" name="current_password" required> 
                            <i class="toggle-password fa fa-fw fa-eye-slash icone-eye"></i>
                          </div>
                      
                       <div class="col-md-4">
                          <label>New Password<span style="color:red;">*</span></label>
                          <input type="password" class="form-control" placeholder="New Password" name="new_password" required> 
                            <i class="toggle-password fa fa-fw fa-eye-slash icone-eye"></i>
                      </div>
                  
                      <div class="col-md-4">
                          <label>Confirm Password<span style="color:red;">*</span></label>
                          <input type="password" class="form-control" placeholder="Confirm Password" name="confirm_password" required> 
                            <i class="toggle-password fa fa-fw fa-eye-slash icone-eye"></i>
                      </div>
                  </div>

                  <div class="row mb-2 text-right mt-3">
                     <div class="col">
                        <button type="submit" class="btn btn-primary" id="loderButton"><i class="fa fa-spinner fa-pulse fa-fw" id="loderIcon" style="display:none;"></i>Update</button>
                        <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
</div>
<!-- new section -->
@endsection

@section('javascript')




<!-- select 2 -->
<script>
  $(function () {
        //Initialize Select2 Elements
        $('.select2').select2()

        //Initialize Select2 Elements
        $('.select2bs4').select2({
          theme: 'bootstrap4'
      })


    }) 
</script>
<!-- end select 2 -->
<script type="text/javascript">
   // add modal
   $(document).on('submit', 'form#change_password_page', function(e) { 
      e.preventDefault();
      var data = new FormData(this);
      $('#loderIcon').show();
      $('#loderButton').prop("disabled", true);

      $.ajax({
          cache:false,
          contentType: false,
          processData: false,
          url: $(this).attr("action"),
          method: $(this).attr("method"),
          dataType: "json",
          data: data,
          success: function(response) { 
           $('#loderIcon').hide();
           $('#loderButton').prop("disabled", false);

           if (response.responseCode == 200) {
            toastr.success(response.responseMessage); 
            location.reload();
        } else {
            toastr.error(response.responseMessage);
        }
    }
}); 
  }); 
</script>


<script type="text/javascript">
   // add modal
   $(document).on('submit', 'form#update_profile_page', function(e) { 
      e.preventDefault();
      var data = new FormData(this);
      $('#loderIcon').show();
      $('#loderButton').prop("disabled", true);

      $.ajax({
          cache:false,
          contentType: false,
          processData: false,
          url: $(this).attr("action"),
          method: $(this).attr("method"),
          dataType: "json",
          data: data,
          success: function(response) { 
           $('#loderIcon').hide();
           $('#loderButton').prop("disabled", false);

           if (response.responseCode == 200) {
            toastr.success(response.responseMessage); 
            location.reload();
        } else {
            toastr.error(response.responseMessage);
        }
    }
}); 
  }); 
</script>
@stop