<!-- ! Main -->
<main class="main users job-role-page" id="">
  <div class="container">
    <!-- <h2 class="main-title">Job Role</h2> -->
    <div class="row mrg15B justify-content-between">
      <div class="col-auto">
        <h2 class="app-page-title mb-0">My Account</h2>

      </div>
      <div class="col-auto">
        <div class="page-utilities">
          <div class="row">

            <div class="col-auto">
              <!-- <a class="btn app-btn-primary" href="job-role.html">
                      My Account

                    </a> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">

        <div class="white-block">
          <div class="row">
                 
            <div class="col-md-3 mt-0">
              <div class="profile_left_panel">
                <div class="profile_img_sec">
                  <div class="profile_img_area"><a href="<?= base_url() . 'public/admin_images/user_images/' . $user_details['user_image'] ?>" data-lightbox="<?= $user_details['user_image'] ?>"><img src="<?= ($user_details['user_image'] !=NULL) ? base_url('public/admin_images/user_images/'.$user_details['user_image']) : 'https://panchayet.syscentricdev.com/public/admin_assets/images/user.png' ?>" width="100%" alt="No Image !" style="border-radius:100%;object-fit:cover;height:100%;"></a></div><br>
                  
                  <h3>Admin User</h3>
                </div>

                <div>
                  <div class="tab">
                    <button class="tablinks" onclick="openCity(event, 'myAccount')" id="defaultOpen">
                      <i class="fa fa-user text-center mr-1"></i>
                      My Account
                    </button>
                    <button class="tablinks" onclick="openCity(event, 'change-password')"><i class="fa fa-unlock-alt"></i> Change Password</button>
                    <button class="tablinks"><i class="fa fa-sign-out"></i><a href="<?=base_url('admin/logout')?>">Log Out</a></button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-9">
              
              <div id="success_message" style="background-color: green;padding-bottom: 10px;text-align: center;padding-top: 10px; display:none;border-radius: 30px;color: #fff;margin-bottom: 15px;"></div>
              <div id="error_message" style="background-color: red;padding-bottom: 10px;text-align: center;padding-top: 10px; display:none;border-radius: 30px;color: #fff;margin-bottom: 15px;"></div>

              <div id="myAccount" class="tabcontent">
                <div class="col-md-12">
                  <form class="row" id="updateaccount" method="post" enctype="multipart/form-data" autocomplete="off">
                    <input type="hidden" class="form-control" name="user_id" value="<?=$user_details['user_id']?>">
                    <input type="hidden" class="form-control" name="profile_pic_old" value="<?=$user_details['user_image']?>">
                    <div class="col-md-12 mt-3">
                      <h4>My Account</h4>
                      <hr>
                    </div>
                    <div class="col-lg-4 col-sm-12 col-md-6 mb-3">
                      <label for="" class="form-label">Photo <span class="asterisk"> </span></label>
                      <input type="file" class="form-control" name="user_image">
                    </div>
                    <div class="col-lg-4 col-sm-12 col-md-6 mb-3">
                      <label for="" class="form-label">Name <span class="asterisk"> *</span></label>
                      <input type="text" class="form-control" name="full_name" placeholder="Name" value="<?=$user_details['full_name']?>" required="" onkeydown="return /[a-z]/i.test(event.key)">
                    </div>
                    <div class="col-lg-4 col-sm-12 col-md-6 mb-3">
                      <label for="" class="form-label">Role <span class="asterisk"> *</span></label>
                      <select class="form-select" id="role_id" name="role_id" required="" disabled>
                        <option>Select Role</option>
                        <?php 
                        if($user_details['role_id']==1){ ?>
                          <option value="1" selected>Super Admin</option>
                          <?php } else{
                            foreach($roles as $row){?>
                              <option value="<?=$row['role_id']?>" <?=($user_details['role_id']==$row['role_id']) ? 'selected' : '' ?>><?=$row['role_name']?></option>
                              <?php }
                          } ?>
                      </select>
                    </div>


                    <div class="col-lg-4 col-sm-12 col-md-6 mb-3">
                      <label for="" class="form-label">Email <span class="asterisk"> *</span></label>
                      <input type="text" class="form-control" id="email" name="email" value="<?=$user_details['email']?>" placeholder="Email" required="" readonly>
                    </div>

                    <div class="col-lg-4 col-sm-12 col-md-6 mb-3">
                      <label for="" class="form-label">Phone No <span class="asterisk">* </span></label>
                      <input type="text" class="form-control" maxlength="10" name="mobile_no" value="<?=$user_details['mobile_no']?>" placeholder="Phone No" required="" onkeyup='return (event.which >= 48 && event.which <= 57) || event.which == 8 || event.which == 46'>
                    </div>
                    <div class="col-lg-4 col-sm-12 col-md-6 mb-3">
                      <label for="tax_status" class="form-label">Gender<span class="asterisk"> *</span></label>
                      <select class="form-select" id="gender" name="gender" required="required">
                        <option value="">Select Gender</option>
                        <option value="Male" <?=($user_details['gender']== 'Male') ? 'selected' : '' ?>>Male</option>
                        <option value="Female" <?=($user_details['gender']== 'Female') ? 'selected' : '' ?>>Female</option>
                        <option value="Other" <?=($user_details['gender']== 'Other') ? 'selected' : '' ?>>Other</option>
                      </select>
                    </div>

                    <div class="col-lg-12 col-sm-12 col-md-6 mb-3">
                      <label for="" class="form-label">Full Address</label>
                      <textarea  id="address" name="address" cols="" rows="3" class="form-control" placeholder="Enter Your Full Adress Here"><?=$user_details['address']?></textarea>
                    </div>

                    <div class="col-lg-6 col-sm-12 col-md-6 mb-3">
                      <label for="" class="form-label">ABN <span class="asterisk"> </span></label>
                      <input type="text" class="form-control" id="abn" name="abn" value="<?=$user_details['abn']?>" placeholder="ABN">
                    </div>

                    <div class="col-lg-6 col-sm-12 col-md-6 mb-3">
                      <label for="" class="form-label">TFN <span class="asterisk"> </span></label>
                      <input type="text" class="form-control" id="tfn" name="tfn" value="<?=$user_details['tfn']?>" placeholder="TFN">
                    </div>

                    <div class="col-md-12 mrg15T">
                      <button type="submit" class="btn app-btn-primary">SUBMIT</button>
                      <a class="btn btn-danger" href="<?=base_url().'admin/dashboard'?>">CANCEL</a>
                    </div>
                  </form>
                </div>
              </div>
              <div id="change-password" class="tabcontent">
                <div class="col-md-12">
                  <form class="row" id="updatepassword" method="post" enctype="multipart/form-data" autocomplete="off">
                    <div class="col-md-12 mt-3">
                      <h4> Change Password</h4>
                      <hr>
                    </div>
                    <div class="col-lg-12 col-sm-12 col-md-6 mb-3">
                      <label for="" class="form-label">Old Password<span class="asterisk"> </span></label>
                      <input type="password" class="form-control" name="old_password" placeholder="Old Password" required="">

                    </div>
                    <div class="col-lg-6 col-sm-12 col-md-6 mb-3">
                      <label for="" class="form-label">New Password <span class="asterisk"> </span></label>
                      <input type="password" class="form-control" name="password" placeholder="New Password" required="">
                    </div>


                    <div class="col-lg-6 col-sm-12 col-md-6 mb-3">
                      <label for="" class="form-label">Confirm New Password <span class="asterisk"> </span></label>
                      <input type="password" class="form-control" name="confirm_password" placeholder="Confirm New Password" required="">
                    </div>

                    <div class="col-md-12 mrg15T">
                      <button type="submit" class="btn app-btn-primary">Save Change</button>
                      <a class="btn btn-danger" href="">CANCEL</a>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</main>
<script>
  $('form#updateaccount').submit(function(e) {

      var form = $(this);

      e.preventDefault();

    $.ajax({
            url: '<?php echo base_url("admin/my_account/updateaccount"); ?>',
            method: 'post',
            data: new FormData(this),
            dataType: 'json',
            processData:false,
            contentType:false,
            cache:false,
            async: false,
            success: function(response) {
              if (response.status) {
                $("#success_message").html(response.msg);
                $("#success_message").show();
                setTimeout(function () {
                    location.reload(true);
                }, 5000);

              } else {
                $("#error_message").html(response.msg);
                $("#error_message").show();
              }
            }
          })
	})

  $('form#updatepassword').submit(function(e) {

    var form = $(this);

    e.preventDefault();

    $.ajax({
          url: '<?php echo base_url("admin/change_password/updatepassword"); ?>',
          method: 'post',
          data: new FormData(this),
          dataType: 'json',
          processData:false,
          contentType:false,
          cache:false,
          async: false,
          success: function(response) {
            if (response.status) {
              $("#success_message").html(response.msg);
              $("#success_message").show();
              setTimeout(function () {
                  location.reload(true);
              }, 5000);

            } else {
              $("#error_message").html(response.msg);
              $("#error_message").show();
            }
          }
        })
  })
</script>

<script>
  function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
  }
  
  // Get the element with id="defaultOpen" and click on it
  document.getElementById("defaultOpen").click();
  </script>