<?php 

include('libraryPHP/site_config.php');

include('libraryPHP/session_check_url.php');

    

?>


<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

     <title><?php echo $appName?> | <?php echo $pageTitle?></title>

        

         <!-- App favicon -->



    <?php echo $appFaviconHtml?> 


    <!-- theme css start -->

     <?php include("commoncss.php"); ?>


    <!-- theme css end -->

  

    <style>

        .eye {

            position: absolute;

            right: 52%;

            transform: translate(0, -176%);

            top: auto;

            cursor: pointer;

        }



        #togglePassword1 {

            position: absolute;

            right: 52%;

            transform: translate(0, -176%);

            top: auto;

            cursor: pointer;

        }



        #togglePassword2 {

            position: absolute;

            right: 154%;

            transform: translate(0, -174%);

            top: auto;

            cursor: pointer;

        }



        #togglePassword3 {

            position: absolute;

            right: 52%;

            transform: translate(0, -176%);

            top: auto;

            cursor: pointer;

        }



        #togglePassword4 {

            position: absolute;

            right: 154%;

            transform: translate(0, -174%);

            top: auto;

            cursor: pointer;

        }



        #togglePassword5 {

            position: absolute;

            right: 52%;

            transform: translate(0, -174%);

            top: auto;

            cursor: pointer;

        }



        #togglePassword6 {

            position: absolute;

            right: 154%;

            transform: translate(0, -174%);

            top: auto;

            cursor: pointer;

        }
          .profile-image img {
    height: auto;
    max-width: 180px!important;
    width: 120px!important;
    height: 120px!important;
}

.profile-header img {
            height: auto;
            max-width: 800px;
            width: 100%;
        }

        .open_my_popup {

            display: none;

        }

        .open_my_popup .imgae_view_bg {

            width: 100%;

            height: 100vh;

            background: #000;

            position: fixed;

            top: 0px;

            left: 0px;

            opacity: 0.8;

            z-index: 999;

        }

        .open_my_popup .view_popup {

            width: 96%;

            margin: 0px 2%;

            height: 100vh;

            position: fixed;

            top: 0px;

/*            right: 0px;*/

            z-index: 999;

        }

        .open_my_popup .view_popup img {

            width: 100%;

            height: 119vh;

            object-fit: contain;

            padding-top: 84px;

            padding-bottom: 157px;

        }

        .close_my_popup {

            position: fixed;

            top: 75px;

            right: 10px;

            background: #1b79b8;

            width: 30px;

            height: 30px;

            text-align: center;

            z-index: 99999;

            border-radius: 50%;

        }

        .close_my_popup img {

            width: 15px;

            padding-top: 7px;

        }



    </style>

    </style>

</head>



<body>



    <!-- Main Wrapper -->

    <div class="main-wrapper">



        <!-- Header start  -->

        <?php include("header.php"); ?>

        <!-- /Header end -->



        <!-- Sidebar -->

        <?php include("sidebar.php"); ?>

        <!-- /Sidebar -->



        <!-- Page Wrapper -->

        <div class="page-wrapper">



            <div class="content container-fluid">



                <!-- Page Header -->

                <div class="page-header">

                    <div class="row">

                        <div class="col">

                            <h3 class="page-title">Profile</h3>

                            <ul class="breadcrumb">

                                <li class="breadcrumb-item"><a href="dashboard.php">Dashboard</a></li>

                                <li class="breadcrumb-item active">Profile</li>

                            </ul>

                        </div>

                    </div>

                </div>

                <!-- /Page Header -->



                <!-- start write start -->

                <div class="row">

                    <div class="col-md-12">

                        <div class="profile-header">

                            <div class="row align-items-center">

                                

                                <div class="col-auto profile-image">

                                    <a href="#">

                                        <img class="rounded-circle" alt="User Image" src="<?php echo $img_url_user_main.$getEditData['image']; ?>"  onerror="this.src='assets/images/placeholder.png';">

                                    </a>

                                </div>

                                <div class="col ml-md-n2 profile-user-info">

                                    <h4 class="user-name mb-0"><?php echo $getEditData['name']; ?></h4>

                                    <h6 class="text-muted"><?php echo $getEditData['email']; ?></h6>

                                    <!-- <div class="user-Location"><i class="fa fa-map-marker"></i> Florida, United States</div> -->

                                    <!-- <div class="about-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> -->

                                </div>

                                <!-- <div class="col-auto profile-btn">

										

										<a href="" class="btn btn-primary">

											Edit

										</a>

									</div> -->

                            </div>

                        </div>

                        <div class="profile-menu">

                            <ul class="nav nav-tabs nav-tabs-solid">

                                <li class="nav-item">

                                    <a class="nav-link active" data-bs-toggle="tab" href="#per_details_tab">Profile</a>

                                </li>

                                <li class="nav-item">

                                    <a class="nav-link" data-bs-toggle="tab" href="#password_tab">Change Password</a>

                                </li>

                            </ul>

                        </div>

                        <div class="tab-content profile-tab-cont">



                            <!-- Personal Details Tab -->

                            <div class="tab-pane fade show active" id="per_details_tab">



                                <!-- Personal Details -->

                                <div class="row">

                                    <div class="col-lg-12">

                                        <div class="card">

                                            <div class="card-body">

                                                <h5 class="card-title d-flex justify-content-between">

                                                    <span>Personal Details</span>

                                                    <!-- <a class="edit-link" data-bs-toggle="modal" href="#edit_personal_details"><i class="fa fa-edit me-1"></i>Edit</a> -->

                                                </h5>

                                               <form class="form-horizontal" action="" method="post" id="form_validation_profile"  enctype="multipart/form-data">

                              <input required="required" type="hidden" id="action1" name="action" value="editadminprofile">

                              <input required="required" type="hidden" id="id1" name="id" value="<?php echo $_SESSION['user_id']; ?>">

                                                    <div class="form-group row">

                                                        <label class="col-form-label col-md-2">Name</label>

                                                        <div class="col-md-10">

                                                             <input type="text" class="form-control" value="<?php echo $getEditData['name']; ?>" name="name" placeholder="Enter name" maxlength=50 >

                                                        </div>

                                                    </div>

                                                   


                                                    <div class="form-group row">

                                                        <label class="col-form-label col-md-2">Email</label>

                                                        <div class="col-md-10">

                                                              <input class="form-control" type="email" name="email" placeholder="Enter email" value="<?php echo $getEditData['email']; ?>" id="email">


                                                        </div>

                                                    </div>

                                                    <div class="form-group row">

                                                        <label class="col-form-label col-md-2"></label>

                                                        <div class="col-md-10">

                                                            <div href="#img_view">

                                                                <img src="<?php echo $img_url_user_main.$getEditData['image']; ?>" class="img-responsive rounded-circle" name="profile_image" id="image_holder1" style="width:80px; height: 80px;" onerror="this.src='assets/images/placeholder.png'" alt="">



                                                                <a href="" class="close_my_popup"><img src=""></a>

                                                            </div>

                                                        </div>

                                                    </div>

                                                    <div class="form-group row">

                                                        <label class="col-form-label col-md-2">Upload Image</label>

                                                        <div class="col-md-10">

                                                            <input class="form-control" type="file" id="fileUpload1" name="image">

                                                            <label style="color:red;">(Note : please choose image resolution with 500X500 pixels)</label>

                                                        </div>

                                                    </div>





                                                    <!-- <div class="form-group row">

                                                        <label class="col-form-label col-md-2">Textarea</label>

                                                        <div class="col-md-10">

                                                            <textarea rows="5" cols="5" class="form-control" placeholder="Enter text here"></textarea>

                                                        </div>

                                                    </div> -->



                                                    <div class="form-group row">

                                                        <label class="col-form-label col-md-2"></label>

                                                        <div class="col-md-10">

                                                            <button class="btn btn-primary" type="submit">Update</button>

                                                        </div>

                                                    </div>





                                                </form>

                                            </div>

                                        </div>



                                    </div>

                                </div>

                                <!-- /Personal Details -->



                            </div>

                            <!-- /Personal Details Tab -->



                            <!-- Change Password Tab -->

                            <div id="password_tab" class="tab-pane fade">



                                <div class="card">

                                    <div class="card-body">

                                        <h5 class="card-title">Change Password</h5>

                                        <div class="row">

                                            <div class="col-md-10 col-lg-6">

                                                 <form action="" method="post" id="form_validation_password" class="form-horizontal">
                                  <input required="required" type="hidden" id="action" name="action" value="edit_admin_password">
                                  <input required="required" type="hidden" id="id" name="id" value="<?php echo $_SESSION['user_id']; ?>">


                                                    <div class="form-group">

                                                        <label>Old Password</label>

                                                        <input type="password" class="form-control" id="oldpassword" name="old_password" placeholder="Enter Old Password" maxlength="16">

                                                        <span class="eye" onclick="myfunction1()">

                                                            <i class="fa fa-eye-slash" id="togglePassword1"></i>

                                                            <i class="fa fa-eye " id="togglePassword2" style="display:none;"></i>

                                                        </span>

                                                    </div>

                                                    <div class="form-group">

                                                        <label>New Password</label>

                                                        <input type="password" class="form-control" id="new_password" name="new_password" placeholder="Enter New Password" maxlength="16">

                                                        <span class="eye" onclick="myfunction2()">

                                                            <i class="fa fa-eye-slash " id="togglePassword3"></i>

                                                            <i class="fa fa-eye " id="togglePassword4" style="display:none;"></i>

                                                        </span>

                                                    </div>

                                                    <div class="form-group">

                                                        <label>Confirm Password</label>

                                                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Enter Confirm Password" maxlength="16">

                                                        <span class="eye" onclick="myfunction3()">

                                                            <i class="fa fa-eye-slash " id="togglePassword5"></i>

                                                            <i class="fa fa-eye " id="togglePassword6" style="display:none;"></i>

                                                        </span>

                                                    </div>

                                                    <button class="btn btn-primary" type="submit">Update</button>

                                                </form>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                            <!-- /Change Password Tab -->



                        </div>

                    </div>

                </div>



                <!-- start write end -->

            </div>

        </div>

        <!-- /Page Wrapper -->

        <!-- footer start -->

        <?php include("footer.php"); ?>

        <!-- footer end -->

    </div>

    <!-- /Main Wrapper -->



    <!-- sctipt start  -->

    <!-- <?php //include("theme_script.php"); ?> -->

    <!-- script end -->

    <script>

        function myfunction1() {

            var x = document.getElementById("oldpassword");

            var y = document.getElementById("togglePassword1");

            var z = document.getElementById("togglePassword2");



            if (x.type === 'password') {

                x.type = "text";

                y.style.display = "none";

                z.style.display = "block";

            } else {

                x.type = "password";

                y.style.display = "block";

                z.style.display = "none";

            }

        }



        function myfunction2() {

            var x = document.getElementById("new_password");

            var y = document.getElementById("togglePassword3");

            var z = document.getElementById("togglePassword4");



            if (x.type === 'password') {

                x.type = "text";

                y.style.display = "none";

                z.style.display = "block";

            } else {

                x.type = "password";

                y.style.display = "block";

                z.style.display = "none";

            }

        }



        function myfunction3() {

            var x = document.getElementById("confirm_password");

            var y = document.getElementById("togglePassword5");

            var z = document.getElementById("togglePassword6");



            if (x.type === 'password') {

                x.type = "text";

                y.style.display = "none";

                z.style.display = "block";

            } else {

                x.type = "password";

                y.style.display = "block";

                z.style.display = "none";

            }

        }

    </script>

    <script>

        // image.onchange = evt => {

        //     const [file] = image.files

        //     if (file) {

        //         priview_img.src = URL.createObjectURL(file)

        //     }

        // }

    </script>


    <?php include('commonjs.php')?>

        

            <!-- extra js -->
          


  <!-- extra js -->
<?php include_once('extrajs.php') ?>

<script>  

$(document).ready(function(){
jQuery.validator.addMethod("noSpace", function(value, element) {
     return value == '' || value.trim().length != 0;  
   }, "Please do not enter space");

  
$.validator.addMethod("customemail", 
    function(value, element) {
        return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value);
    }, 
    "Enter valid email"
); 

 
        //---------------------- start for validations ---------------------
        $("#form_validation_profile").validate({
          rules: {

            name: {
              required: true,
              minlength: 3,
              // maxlength: 50,
              noSpace:true,

            },
            email: {
              required: true,
              minlength: 3,
              maxlength: 50,
            customemail: true,
              remote: {
                url: URLAPI+'user_controller.php',
                type: 'get',
                data: {
                  'action': 'email_check_edit',
                  'email': function() {
                    return $("#email").val();
                  },
                  'id': '<?php echo $_SESSION['user_id'];; ?>'
                }
              }
            },
            

          },
          messages: {

            name: {
              required: msgValidation.emptyName[language],
              minlength: msgValidation.validMinLength[language],
              maxlength: msgValidation.validMaxLength[language],
            },
            email: {
              required: msgValidation.emptyEmail[language],
              minlength: msgValidation.validMinLength[language],
              maxlength: msgValidation.validMaxLength[language],
              email: msgValidation.validEmail[language],
               // customemail: msgValidation.validEmail[language],
               remote: msgValidation.emptyEmailExist[language],
             },


           },
  submitHandler: function(form) {
             var email_get = $('#email').val();
             $('.err_forgtemail').html('');
             if(validateEmail(email_get)==false){
              $('.err_forgtemail').append('<span class="error" style=" color:#FF0000;  display: inline-block;position: absolute;font-size: 14px;font-weight: 700;padding-top: 3px; margin-bottom:5px;">'+msgValidation.validEmail[language]+'</span>');
              return false;
            }
            
            var link = URLAPI+'user_controller.php';
            //var data=$(form).serialize();
            var data = new FormData($(form)[0]);
            var messsage = msgLoading.blankMessage[language];
            console.log('messsage',messsage);
            apiRequest.postFile(link, data, messsage).then(function(obj){
              console.log('obj',obj);
              if(obj.success === true) {
                   //------------ Operation Message --------------------
                   var title = msgTitleOperation.blankMessage[language];
                   var messsage = obj.msg[language];
                   //msgSuccessErrorHtml.success(title, messsage, msgSuccessErrorHtmlSelector);
                     
        
                        //------------ Operation Message End--------------------
                        //swal_alert(title,messsage,"#","success");
                        swal({
                          title: title,
                          text: messsage,
                            icon: "success", //error, success, info
                            button: "Ok",
                          }).then((value) => {
                            window.location.href="profile.php?id=<?php echo $_SESSION['user_id']; ?>";
                          });
                          return true;
                        } else {
                    //------------ Operation Message --------------------
                    var title = msgTitleOperation.blankMessage[language];
                    var messsage = obj.msg[language];
                    msgSuccessErrorHtml.error(title, messsage, msgSuccessErrorHtmlSelector);
                        //------------ Operation Message End--------------------
                        swal({
                          title: title,
                          text: messsage,
                            icon: "error", //error, success, info
                            button: "Ok",
                          });
                    //------------ Operation Message End--------------------
                  }
                },function(err){
                  console.log('err',err);
                //alert('Server not responde');
                //------------ Operation Message --------------------
                var title = msgTitleOperation.errorOnServer[language];
                var messsage = msgOperations.errorOnServer[language];
                msgSuccessErrorHtml.error(title, messsage, msgSuccessErrorHtmlSelector);
                //------------ Operation Message End--------------------
                        swal({
                          title: title,
                          text: messsage,
                          icon: "error", //error, success, info
                          button: "Ok",
                          });
                //------------ Operation Message End--------------------
                return false;
              });
            return false;
          }
        });
 //---------------------- start for validations ---------------------

 $("#form_validation_password").validate({
  rules: {
    old_password: {
      required: true,
      minlength: 6,
      maxlength: 16,
      noSpace: true,
    },
    new_password: {
      required: true,
      minlength: 6,
      maxlength: 16,
      noSpace: true,
    },
    confirm_password: {
      required: true,
      minlength: 6,
      maxlength: 16,
      noSpace: true,
      equalTo: "#new_password",
    },
  },
  messages: {
    old_password: {
      required: msgValidation.emptyOldPassword[language],
      minlength: msgValidation.validMinlengthpass[language],
      maxlength: msgValidation.validMaxlengthpass[language],
    },
    new_password: {
      required: msgValidation.emptyNewPassword[language],
      minlength: msgValidation.validMinlengthpass[language],
      maxlength: msgValidation.validMaxlengthpass[language],
    },
    confirm_password: {
      required: msgValidation.emptyConfirmPassword[language],
      minlength: msgValidation.validMinlengthpass[language],
      maxlength: msgValidation.validMaxlengthpass[language],
      equalTo: msgValidation.validConfirmPassword[language],
    },
  },
  submitHandler: function(form) {
    /*form.submit();*/
    var link = URLAPI+'user_controller.php';
                    //var data=$(form).serialize();
                    var data = new FormData($(form)[0]);

                    var messsage = msgLoading.blankMessage[language];
                    console.log('messsage',messsage);

                    apiRequest.postFile(link, data, messsage).then(function(obj){
                      console.log('obj',obj);
                      if(obj.success === true) {

                           //------------ Operation Message --------------------
                           var title = msgTitleOperation.blankMessage[language];
                           var messsage = obj.msg[language];
                           msgSuccessErrorHtml.success(title, messsage, msgSuccessErrorHtmlSelector);
                          
                        //------------ Operation Message End--------------------
                        //swal_alert(title,messsage,"#","success");
                        swal({
                          title: title,
                          text: messsage,
                            icon: "success", //error, success, info
                            button: "Ok",
                          }).then((value) => {
                            $("#form_validation_password")[0].reset();
                            window.location.href="index.php?id=<?php echo $_SESSION['user_id']; ?>";
                          });
                          return true;
                        } else {
                            //------------ Operation Message --------------------
                            var title = msgTitleOperation.blankMessage[language];
                            var messsage = obj.msg[language];
                            msgSuccessErrorHtml.error(title, messsage, msgSuccessErrorHtmlSelector);
                        //------------ Operation Message End--------------------
                        swal({
                          title: title,
                          text: messsage,
                            icon: "error", //error, success, info
                            button: "Ok",
                          });
                            //------------ Operation Message End--------------------
                          }
                        },function(err){
                          console.log('err',err);
                        //alert('Server not responde');

                        //------------ Operation Message --------------------
                        var title = msgTitleOperation.errorOnServer[language];
                        var messsage = msgOperations.errorOnServer[language];
                        msgSuccessErrorHtml.error(title, messsage, msgSuccessErrorHtmlSelector);
                        //------------ Operation Message End--------------------
                        swal({
                          title: title,
                          text: messsage,
                            icon: "error", //error, success, info
                            button: "Ok",
                          });
                        //------------ Operation Message End--------------------
                        return false;
                      });

                    return false;
                  }
                });
          //---------------------- start for validations end ---------------------
          // $('#fileUpload').change(function(event){
          //   var x = URL.createObjectURL(event.target.files[0]);
          //   $('#priview_img').attr('src',x);
          // });
        });  

      </script>

         <script>
        // for image validation
        $("#fileUpload1").on('change', function () {
        //----------------- Image Preview and validation code start here -------------------
        var countFiles = $(this)[0].files.length;
        if(countFiles==0){
            $(this)[0].value='';
              var image_holder = $("#image_holder1");
              $(image_holder).attr('src', '<?php echo $img_url_user_main.$getEditData['image'] ?> ');
                // notifyMessage.warning('Warning!', 'This browser does not support FileReader');
                return false;
        }else{
            var imgPath = $(this)[0].value;
            var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
            var image_holder = $("#image_holder1");
            console.log('fffdfh',image_holder);
            image_holder.empty();
            console.log('123',image_holder);
            console.log('countFiles',countFiles);

            if (extn == "png" || extn == "jpg" || extn == "jpeg") {
                if (typeof (FileReader) != "undefined") {
                    for (var i = 0; i < countFiles; i++) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            $(image_holder).attr('src', e.target.result);
                        }
                        image_holder.show();
                        reader.readAsDataURL($(this)[0].files[i]);
                    }

                }else {
                    $(this)[0].value='';
                    // notifyMessage.warning('Warning!', 'This browser does not support FileReader');
                    return false;
                }

            }else {
                $(this)[0].value='';
                swal({
                    // title: title,
                    text: 'You can choose only("jpeg","jpg","png")file',
                    icon: "warning", //error, success, info
                    button: "Ok",
                })
                return false;
            }

        }
        
        //----------------- Image Preview and validation code end here -------------------
        });
    </script>




</body>



</html>
