<?php 
session_start();
include 'conn_auth.php';
include 'customInfo.php';
include 'outputfunction.php';
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Profile - <?php echo $rowUser['cust_name']; ?></title>
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="webfiles/fav-icon.png">
    <!-- Pignose Calender -->
    <link href="mz/plugins/pg-calendar/css/pignose.calendar.min.css" rel="stylesheet">
    <!-- Chartist -->
    <link rel="stylesheet" href="mz/plugins/chartist/css/chartist.min.css">
    <link rel="stylesheet" href="mz/plugins/chartist-plugin-tooltips/css/chartist-plugin-tooltip.css">
    <!-- Custom Stylesheet -->
    <link href="mz/css/style.css" rel="stylesheet">
    <link href="mz/css/xtrastyle.css" rel="stylesheet">
<style type="text/css">
    #btnChangePassrd {
        color: blue;
        text-decoration: underline;
    }
    .frm-input {
        margin-top: 10px;
    }
</style>
</head>

<body>

    <!--*******************
        Preloader start
    ********************-->
<!--     <div id="preloader">
        <div class="loader">
            <svg class="circular" viewBox="25 25 50 50">
                <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="3" stroke-miterlimit="10" />
            </svg>
        </div>
    </div>
 -->    <!--*******************
        Preloader end
    ********************-->

    
    <!--**********************************
        Main wrapper start
    ***********************************-->
    <div id="main-wrapper">

        <!--**********************************
            Nav header start
        ***********************************-->
        <div class="nav-header">
            <div class="brand-logo">
                <a href="index.html">
                    <b class="logo-abbr"><img src="images/logo.png" alt=""> </b>
                    <span class="logo-compact"><img src="./images/logo-compact.png" alt=""></span>
                    <span class="brand-title">
                        <img src="images/logo-text.png" alt="">
                    </span>
                </a>
            </div>
        </div>
        <!--**********************************
            Nav header end
        ***********************************-->

        <!--**********************************
            Header start
        ***********************************-->
        <?php include 'user_header.php'; ?>
        <!--**********************************
            Header end ti-comment-alt
        ***********************************-->

        <!--**********************************
            Sidebar start
        ***********************************-->
        <?php include 'user_sidebar.php'; ?>
        <!--**********************************
            Sidebar end
        ***********************************-->

        <!--**********************************
            Content body start
        ***********************************-->


<!-- Modal  -->
                                    <div class="modal fade" id="pageModal">
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Change Password</h5>
                                                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                                                    </button>
                                                </div>

                                                <form method="post" action="login.php?action=Change Password" id="frmChnagePasswrd">
                                                <div class="modal-body">
                                                    <p>Enter your Old password to validate your Account  </p>
                                                      <div class="row justify-content-center">
                                                        <div class="col-lg-9">
                                                            <div id="errorDiv"></div>
                                                          <div class="frm-input">
                                                            <input type="password" name="old_pass" id="old_pass" class="form-control" placeholder="Enter Old Password"> 
                                                            <input type="hidden" name="oldpass_val" id="oldpass_val" value="<?php echo $row['pass']; ?>">
                                                          </div>
                                                          <div class="frm-input">
                                                            <input type="password" name="new_passwrd" id="new_passwrd" class="form-control" placeholder="Enter New Password">
                                                          </div>
                                                          <div class="frm-input">
                                                            <input type="password" name="retype_passwrd" id="retype_passwrd" class="form-control" placeholder="Re-Enter Password">
                                                          </div>
                                                           
                                                        </div>
                                                      </div> 
                                                     
                                                                                                       
 
                                                </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 class="content-body">

            <div class="row page-titles mx-0">
                <div class="col p-md-0">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">Profile</a></li>
                        <li class="breadcrumb-item active"><a href="dashboard">Home</a></li>
                    </ol>
                </div>
            </div>
            <!-- row -->

            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-5 col-xl-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="media align-items-center mb-4">
                                    <img class="mr-3" src="<?php echo $profile_src; ?>" width="80" height="80" alt="">
                                    <div class="media-body">
                                        <h3 class="mb-0"><?php echo $rowUser['cust_name']; ?></h3>
                                        <p class="text-muted mb-0"><?php echo $rowUser['acct_nmb']; ?></p>
                                        <p class="text-muted mb-0"><?php echo $rowUser['accnt_type']; ?></p>
                                    </div>
                                </div>
                                
                                <div class="row mb-5">
                                    <div class="col-lg-12">
                                        <div class="card card-profile text-center">
                                            <span class="mb-1 text-primary"><i class="icon-envelope"></i></span>
                                            <p class="text-muted px-4"><?php echo $rowUser['email']; ?></p>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="card card-profile text-center">
                                            <span class="mb-1 text-warning"><i class="icon-phone"></i></span>
                                            <p class="text-muted"><?php echo $rowUser['phn_nmb']; ?></p>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="card card-profile text-center">
                                            <span class="mb-1 text-warning"><i class="fa fa-map-marker"></i></span>
                                            <p class="text-muted"><?php echo $rowUser['addrs']; ?></p>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="card card-profile text-center">
                                            <span class="mb-1 text-warning"><i class="fa fa-calendar"></i></span>
                                            <p class="text-muted"><?php echo $rowUser['day_birth']; ?></p>
                                        </div>
                                    </div>
                                     <div class="col-lg-12">
                                        <div class="card card-profile text-center">
                                            <span class="mb-1 text-warning"><i class="fa fa-globe"></i></span>
                                            <p class="text-muted"><?php echo $rowUser['country']; ?></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>  
                    </div>
                    <div class="col-lg-7 col-xl-8">
                        <div class="card">
                            <div class="card-body">
                                <div class="media mt-3">
                                        <div class="media-body">
                                            <div class="d-sm-flex justify-content-between mb-2">
                                                <h5 class="mb-sm-0">Current Balance <small class="text-muted ml-3">as at <?php echo date("Y, d, F h:i A") ?></small></h5>
                                            </div>
                                            <p><?php echo getCurrency(@$rowcurr['curr_type']).number_format(getBalance(@$rowUser['acct_nmb']), 2, '.', ','); ?></p>
                                            <div class="md-change-passwrd">
                                                <span>
                                                    <a href="" id="btnChangePassrd">Change Password</a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- #/ container -->
        </div>
        <!--**********************************
            Content body end
        ***********************************-->
        
        
        <!--**********************************
            Footer start
        ***********************************-->
        <?php include 'dashboard_footer.php'; ?>
        <!--**********************************
            Footer end
        ***********************************-->
    </div>
    <!--**********************************
        Main wrapper end
    ***********************************-->

    <!--**********************************
        Scripts
    ***********************************-->
  
  <script src="mz/plugins/common/common.min.js"></script>
    <script src="mz/js/custom.min.js"></script>
    <script src="mz/js/settings.js"></script>
    <script src="mz/js/gleek.js"></script>
    <script src="mz/js/styleSwitcher.js"></script>

    <!-- Chartjs -->
    <script src="mz/plugins/chart.js/Chart.bundle.min.js"></script>
    <!-- Circle progress -->
    <script src="mz/plugins/circle-progress/circle-progress.min.js"></script>
    <!-- Datamap -->
    <script src="mz/plugins/d3v3/index.js"></script>
    <script src="mz/plugins/topojson/topojson.min.js"></script>
    <script src="mz/plugins/datamaps/datamaps.world.min.js"></script>
    <!-- Morrisjs -->
    <script src="mz/plugins/raphael/raphael.min.js"></script>
    <script src="mz/plugins/morris/morris.min.js"></script>
    <!-- Pignose Calender -->
    <script src="mz/plugins/moment/moment.min.js"></script>
    <script src="mz/plugins/pg-calendar/js/pignose.calendar.min.js"></script>
    <!-- ChartistJS -->
    <script src="mz/plugins/chartist/js/chartist.min.js"></script>
    <script src="mz/plugins/chartist-plugin-tooltips/js/chartist-plugin-tooltip.min.js"></script>



    <script src="mz/js/dashboard/dashboard-1.js"></script>
    <script>
  $(document).ready(function(){
    $('#btnChangePassrd').bind("click", function(){
$('#pageModal').modal()
        return false; 
    })


// Change passwor form submit
$('#frmChnagePasswrd').bind("submit", function(){
var oldpass = $('#old_pass').val()
var new_passwrd = $('#new_passwrd').val()
var retype_passwrd = $('#retype_passwrd').val()
var oldpass_val = $('#oldpass_val').val()



    if(oldpass != oldpass_val){
           $('#errorDiv').removeClass()
           $('#errorDiv').addClass("alert alert-warning")
           $('#errorDiv').fadeIn(1900).html("Old password does not match your Entered Password").delay(4000).fadeOut(1900);
            return false;

        }



        if(new_passwrd != retype_passwrd){
           $('#errorDiv').removeClass()
           $('#errorDiv').addClass("alert alert-danger")
           $('#errorDiv').fadeIn(1900).html("Re-typed password does not match Password Entered").delay(4000).fadeOut(1900);
            return false;

        }

        if(new_passwrd == ""){
           $('#errorDiv').removeClass()
           $('#errorDiv').addClass("alert alert-danger")
           $('#errorDiv').fadeIn(1900).html("Password field must not be empty").delay(4000).fadeOut(1900);
            return false;

        }
                        var frmdata = $(this).serialize();
                        var frmurl = $(this).attr('action');
                        var frmtype = $(this).attr('method');
                    

                            $.ajax({
                             type:frmtype, 
                             url:frmurl,
                             data:frmdata,
                             beforeSend:function() {
                             $('.logoverlay').show();
                             },
                               success:function(data){
                                 window.location="login?msg=revalidate"
                                
                                }
                             
                             });
return false; 
})
  })
    </script>

</body>

</html>