@extends('layout.master')
@section('pageTitle')
  <title>Dashboard</title>
  <link rel="stylesheet" href="/css/invoice.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
@endsection
@section('metaCSRF')
  <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('contents')
  <style>
    .restriction-cls {
      font-size:0.9em;
    }
    .user-alerts {
      display:none;
      padding:20px;
      border-radius:4px;
    }
    .password-alerts {
      display:none;
      padding:20px;
      border-radius:4px;
    }
    .dataTables_filter {
      display: none;
    }
    #usertable th{
      width:auto !important;
    }
    .currency-conversion {
      display:none;
    }
  </style>
  <div class="single-pro-review-area mt-t-30 mg-b-15">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="product-payment-inner-st">
            <ul id="myTabedu1" class="tab-review-design">
              <li class="active"><a href="#basicinfo">Profile Information</a></li>
            </ul>
            <div id="myTabContent" class="tab-content custom-product-edit">
              <div class="product-tab-list tab-pane fade active in" id="basicinfo">
                <div class="basic-form-area mg-b-15">
                  <div class="container-fluid">
                    <form id="edit-user-form">
                      <div class="row">
                        <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
                            <div class="sparkline8-list mt-b-30">
                              <div class="sparkline8-hd">
                                  <div class="main-sparkline8-hd">
                                      <h1>User Details</h1>
                                  </div>
                              </div>
                              <div class="sparkline8-graph">
                                <div class="basic-login-form-ad">
                                  <div class="basic-login-inner" style="border:1px solid rgba(0,0,0,0.1);padding:20px;">
                                    <div class="row">
                                      <div class="col-md-6">
                                        <div class="form-group-inner">
                                            <label>User Name</label>
                                            <input type="text" name="username" class="form-control" value="" readonly/>
                                          </div>
                                      </div>
                                      <div class="col-md-6">
                                        <div class="form-group-inner">
                                            <label>&nbsp;</label><br>
                                            <button id="change-password-btn" class="btn btn-info" type="button" style="width:100%;" data-toggle="modal" data-target="#passwordSelected">Change Password</button>
                                          </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-md-12">
                                      <div class="basic-login-inner" style="border:1px solid rgba(0,0,0,0.1);padding:20px;">
                                        <div class="form-group-inner">
                                          <label>First Name</label>
                                          <input type="text" name="firstname" class="form-control" value="" />
                                        </div>
                                        <div class="form-group-inner">
                                          <label>Last Name</label>
                                          <input type="text" name="lastname" class="form-control" value="" />
                                        </div>
                                        <div class="form-group-inner">
                                          <label>Email Address</label>
                                          <input type="email" name="email" class="form-control" value="" />
                                        </div>
                                        <div class="form-group-inner">
                                          <label>Contact Number</label>
                                          <input type="text" name="contact" class="form-control" value="" />
                                        </div>
                                        <div class="row">
                                          <div class="col-lg-12">
                                            <button id="update-user-btn" class="btn btn-success" type="button">Update Changes</button>
                                          </div>
                                        </div>
                                        <br>
                                        <div class="row">
                                          <div class="col-lg-12">
                                            <div class="alert-success user-alert-updated user-alerts">
                                                User successfully Updated!
                                            </div>
                                            <div class="alert-danger alert-mg-b user-alert-failed user-alerts">
                                                <strong>Unable to Continue!</strong> Please complete the form.
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="passwordSelected" class="modal modal-edu-general modal-zoomInDown fade" role="dialog">
      <div class="modal-dialog modal-sm">
          <div class="modal-content alert alert-info" style="margin:0px;">
            <div class="modal-close-area modal-close-df">
                <a class="close" data-dismiss="modal" href="" id="srv-edit-button-close" ><i class="fa fa-close"></i></a>
            </div>
            <h4>Change Password</h4>
            <div class="change-password" style="padding:15px;border:1px solid rgba(0,0,0,0.1);">
              <form id="change-password-form">
                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group">
                      <input type="hidden" name="username" class="form-control" value="" />
                      <label>Current Password</label>
                      <input type="password" name="oldpass" class="form-control" value="" />
                      <label>New Password</label>
                      <input type="password" name="newpass1" class="form-control" value="" />
                      <label>Confirm Password</label>
                      <input type="password" name="newpass2" class="form-control" value="" />
                    </div>
                  </div>
                </div>
              </form>
            </div>
            <br>
            <button id="confirm-password-btn" class="btn btn-warning" type="button" style="width:100%;">Confirm Password</button>
            <div class="alert-msgs" style="margin-top:10px;">
              <div class="alert-success password-alert-updated password-alerts">
                  Password Updated!
              </div>
              <div class="alert-danger alert-mg-b password-alert-failed password-alerts">
                  <div class="password-alerts" id="empty-input">
                    <strong>Please complete the form</strong>
                  </div>
                  <div class="password-alerts" id="error-response">
                    <h5 id="error-messages-2"></h5>
                  </div>
                  </p>
              </div>
            </div>
          </div>
      </div>
  </div>
@endsection
@section('js')
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
  $('#change-password-btn').on('click',function(){
    $('.password-alerts').hide();
  });
  $('#confirm-password-btn').on('click',function(event){
    event.preventDefault();
    $('.password-alerts').hide();
    $.ajax({
      url:'/change-password',
      headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
      type:'POST',
      data: $('#change-password-form').serialize(),
      success:function(e){
        if(e){
            console.log(e);
            if(e.code == 0){
              $('.password-alert-updated').show();
            }
            else if(e.code > 0){

              if(e.code > 1){
                $('#error-response').show();
                $('#error-messages-2').text(e.msg);
              }
              else {
                $('#empty-input').show();
              }
              $('.password-alert-failed').show();
            }
          }
        }
      });
  });
  $('#update-user-btn').on('click',function(event){
    event.preventDefault();
    $('.user-alerts').hide();
    $.ajax({
      url:'/edit-user-details',
      headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
      type:'POST',
      data: $('#edit-user-form').serialize(),
      success:function(e){
        if(e){
            console.log(e);
            if(e.code == 0){
              $('.user-alert-updated').show();
            }
          }
        }
      });
  });
</script>
@endsection