<?php
/**
 * userProfile.php -- User's Profile
 */

include '../inc/config.inc.php'; // Configuration

ob_start();
session_start();

//date_default_timezone_set('Africa/Lagos');

error_reporting(E_ALL);
ini_set('display_errors', 1);

if ( !isset($_SESSION['admin']) || $_SESSION["loggedin"] !== true || trim($_SESSION['admin']) == '' ){
	//header('Location: ' . $BASE_URL . 'wp-admin/');
    header('Location: ' . $BASE_URL . 'signin');
	exit;
}

if ( isset($_GET['id']) ){
    $user_id = intval($_GET['id']);
    // Users
    $users = $db_con->prepare("SELECT * FROM users WHERE id='$user_id'");
    $users->execute();
    $user = $users->fetch(PDO::FETCH_ASSOC);

?>

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Alert Signals Nation - User Profile</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="../img/Signals-Alert-3.png" type="image/x-icon" />
    <link rel="apple-touch-icon-precomposed" href="../img/Signals-Alert-3.png" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="css/responsive.css">

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" rel="stylesheet" />
    <style>
        /*------ Google Font Style ------ */
        body {font-family:'Roboto'!important;}
    </style>
    
</head>
<body class="sidebar-main-active right-column-fixed">
    <!-- loader Start -->
    <div id="loading">
        <div id="loading-center">
        </div>
    </div>
    <!-- loader END -->
    <!-- Wrapper Start -->
    <div class="wrapper">
        <!-- Sidebar  -->
        <?php include 'navbar.php' ?>
        <!-- TOP Nav Bar -
         <!-- TOP Nav Bar END -->
        <!-- Page Content  -->
        <div id="content-page" class="content-page">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="iq-card">
                            <div class="iq-card-body profile-page p-0">
                                <div class="profile-header">
                                    <div class="cover-container">
                                        <img src="images/page-img/profile-bg.jpg" alt="profile-bg" class="rounded img-fluid w-100">
                                        <ul class="header-nav d-flex flex-wrap justify-end p-0 m-0">
                                            <li>
                                                <span class="d-inline-block" data-trigger="hover" data-toggle="popover" data-content="View Front ID"><a href="javascript:void();" id="front"><i class="ri-eye-line"></i></a></span>
                                            </li>
                                            <li>
                                                <span class="d-inline-block" data-trigger="hover" data-toggle="popover" data-content="View Back ID"><a href="javascript:void();" id="back"><i class="ri-eye-line"></i></a></span>
                                            </li>
                                        </ul>
                                        <!-- The Modal -->
                                        <div id="myModalFront" class="modal">
                                            <!--<span class="close">&times;</span>-->
                                            <img class="modal-content" src="../wp-user/uploads/<?= $user['idcard_front']; ?>">
                                            <div id="caption">ID Front View [ <a href="#" style="color:#fff;" onclick="modalFront.style.display = 'none'">close popup</a> ]</div>
                                        </div>
                                        <div id="myModalBack" class="modal">
                                            <!--<span class="close">&times;</span>-->
                                            <img class="modal-content" src="../wp-user/uploads/<?= $user['idcard_back']; ?>">
                                            <div id="caption">ID Back View [ <a href="#" style="color:#fff;" onclick="modalBack.style.display = 'none'">close popup</a> ]</div>
                                        </div>
                                        <style>
                                            #myImg {
                                                border-radius: 5px;
                                                cursor: pointer;
                                                transition: 0.3s;
                                            }

                                            #myImg:hover {
                                                opacity: 0.7;
                                            }

                                            /* The Modal (background) */
                                            .modal {
                                                display: none;
                                                /* Hidden by default */
                                                position: fixed;
                                                /* Stay in place */
                                                z-index: 1;
                                                /* Sit on top */
                                                padding-top: 100px;
                                                /* Location of the box */
                                                left: 0;
                                                top: 0;
                                                width: 100%;
                                                /* Full width */
                                                height: 100%;
                                                /* Full height */
                                                overflow: auto;
                                                /* Enable scroll if needed */
                                                background-color: rgb(0, 0, 0);
                                                /* Fallback color */
                                                background-color: rgba(0, 0, 0, 0.9);
                                                /* Black w/ opacity */
                                            }

                                            /* Modal Content (image) */
                                            .modal-content {
                                                margin: auto;
                                                display: block;
                                                width: 80%;
                                                max-width: 700px;
                                            }

                                            /* Caption of Modal Image */
                                            #caption {
                                                margin: auto;
                                                display: block;
                                                width: 80%;
                                                max-width: 700px;
                                                text-align: center;
                                                color: #ccc;
                                                padding: 10px 0;
                                                height: 150px;
                                            }

                                            /* Add Animation */
                                            .modal-content,
                                            #caption {
                                                -webkit-animation-name: zoom;
                                                -webkit-animation-duration: 0.6s;
                                                animation-name: zoom;
                                                animation-duration: 0.6s;
                                            }

                                            @-webkit-keyframes zoom {
                                                from {
                                                    -webkit-transform: scale(0)
                                                }

                                                to {
                                                    -webkit-transform: scale(1)
                                                }
                                            }

                                            @keyframes zoom {
                                                from {
                                                    transform: scale(0)
                                                }

                                                to {
                                                    transform: scale(1)
                                                }
                                            }

                                            /* The Close Button */
                                            .close {
                                                position: absolute;
                                                top: 15px;
                                                right: 35px;
                                                color: #f1f1f1;
                                                font-size: 40px;
                                                font-weight: bold;
                                                transition: 0.3s;
                                            }

                                            .close:hover,
                                            .close:focus {
                                                color: #bbb;
                                                text-decoration: none;
                                                cursor: pointer;
                                            }

                                            /* 100% Image Width on Smaller Screens */
                                            @media only screen and (max-width: 700px) {
                                                .modal-content {
                                                    width: 100%;
                                                }
                                            }
                                        </style>
                                        <script>
                                            // Get the modal
                                            var modalFront = document.getElementById("myModalFront");
                                            var imgFront = document.getElementById("front");
                                            imgFront.onclick = function(){
                                                modalFront.style.display = "block";
                                            }

                                            var modalBack = document.getElementById("myModalBack");
                                            var imgBack = document.getElementById("back");
                                            imgBack.onclick = function(){
                                                modalBack.style.display = "block";
                                            }

                                            // Get the <span> element that closes the modal
                                            var span = document.getElementsByClassName("close")[0];

                                            // When the user clicks on <span> (x), close the modal
                                            span.onclick = function() {
                                                modal.style.display = "none";
                                            }
                                        </script>
                                    </div>
                                    <div class="profile-info iq-card-body">
                                        <div class="row align-items-center">
                                            <div class="col-sm-12 col-md-6">
                                                <div class="user-detail">
                                                    <div class="d-flex flex-wrap align-items-center">
                                                        <div class="profile-img">
                                                            <?php
                                                            if ( empty($user['picture']) ){
                                                                echo '<img src="../wp-user/images/user/11.png" alt="profile-img" class="avatar-130 img-fluid" />';
                                                            } else {
                                                                echo '<img src="../wp-user/uploads/'.$user['picture'].'" alt="profile-img" class="avatar-130 img-fluid" />';
                                                            }
                                                            ?>
                                                        </div>
                                                        <div class="profile-detail d-flex align-items-center ml-3">
                                                            <h3 class="line-height"><?= $user['fullname']; ?></h3><!--
                                                            <p class="m-0 pl-3"> - Web designer</p>-->
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-12 col-md-6">
                                                <ul class="nav nav-pills d-flex align-items-end float-right profile-feed-items p-0 m-0">
                                                    <li>
                                                        <a class="nav-link active" data-toggle="pill" href="#profile">Profile</a>
                                                    </li>
                                                    <li>
                                                        <a class="nav-link" href="userEdit?id=<?= $user['id']; ?>">More Options</a>
                                                    </li>
                                                    <!--<li>
                                                        <a class="nav-link" data-toggle="pill" href="#profile-friends">friends</a>
                                                    </li>
                                                    <li>
                                                        <a class="nav-link" data-toggle="pill" href="#profile-profile">profile</a>
                                                    </li>-->
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 profile-center">
                        <div class="tab-content">
                            <div class="tab-pane fade active show" id="profile" role="tabpanel">
                                <div class="iq-card">
                                    <div class="iq-card-body p-0">
                                        <div class="user-post-data p-3">
                                            <div class="d-flex flex-wrap">
                                                <div class="media-support-user-img mr-3">
                                                    <img class="rounded-circle img-fluid" src="../wp-user/uploads/<?= $user['picture']; ?>" alt="">
                                                </div>
                                                <div class="iq-header-title">
                                                    <h4 class="card-title">Profile</h4>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="comment-area p-3">
                                            <div class="iq-card-header d-flex justify-content-between">
                                                <div class="iq-header-title">
                                                    <h4 class="card-title">About User</h4>
                                                </div>
                                            </div>
                                            <div class="iq-card-body">
                                                <div class="mt-2">
                                                    <h6>Name:</h6>
                                                    <p><?= $user['fullname']; ?></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>Username:</h6>
                                                    <p><?= $user['username']; ?></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>Gender:</h6>
                                                    <p><?= $user['gender']; ?></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>Date of Birth:</h6>
                                                    <p><?= $user['dob']; ?></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>Age:</h6>
                                                    <p><?= $user['age']; ?></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>Marital Status:</h6>
                                                    <p><?= $user['marital_status']; ?></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>Contact:</h6>
                                                    <p><a href="callto:<?= $user['phone']; ?>"><?= $user['phone']; ?></a></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>Email:</h6>
                                                    <p><a href="mailto:<?= $user['email']; ?>"><?= $user['email']; ?></a></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>Address:</h6>
                                                    <p><?= $user['home_address']; ?></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>City:</h6>
                                                    <p><?= $user['city']; ?></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>Zip/Postal Code:</h6>
                                                    <p><?= $user['postal_code']; ?></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>Country:</h6>
                                                    <p><?= $user['country']; ?></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>Currency:</h6>
                                                    <p><?= $user['currency']; ?></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>Facebook:</h6>
                                                    <p><?= $user['facebook']; ?></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>Twitter:</h6>
                                                    <p><?= $user['twitter']; ?></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>Google+:</h6>
                                                    <p><?= $user['googleplus']; ?></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>Instagram:</h6>
                                                    <p><?= $user['instagram']; ?></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>YouTube:</h6>
                                                    <p><?= $user['youtube']; ?></p>
                                                </div>
                                                <div class="mt-2">
                                                    <h6>WhatsApp:</h6>
                                                    <p><?= $user['whatsapp']; ?></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Wrapper END -->
    <!-- Footer -->
    <?php include 'footer.php' ?>

    <!-- color-customizer END -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- Appear JavaScript -->
    <script src="js/jquery.appear.js"></script>
    <!-- Countdown JavaScript -->
    <script src="js/countdown.min.js"></script>
    <!-- Counterup JavaScript -->
    <script src="js/waypoints.min.js"></script>
    <script src="js/jquery.counterup.min.js"></script>
    <!-- Wow JavaScript -->
    <script src="js/wow.min.js"></script>
    <!-- Apexcharts JavaScript -->
    <script src="js/apexcharts.js"></script>
    <!-- Slick JavaScript -->
    <script src="js/slick.min.js"></script>
    <!-- Select2 JavaScript -->
    <script src="js/select2.min.js"></script>
    <!-- Owl Carousel JavaScript -->
    <script src="js/owl.carousel.min.js"></script>
    <!-- Magnific Popup JavaScript -->
    <script src="js/jquery.magnific-popup.min.js"></script>
    <!-- Smooth Scrollbar JavaScript -->
    <script src="js/smooth-scrollbar.js"></script>
    <!-- lottie JavaScript -->
    <script src="js/lottie.js"></script>
    <!-- am core JavaScript -->
    <script src="js/core.js"></script>
    <!-- am charts JavaScript -->
    <script src="js/charts.js"></script>
    <!-- am animated JavaScript -->
    <script src="js/animated.js"></script>
    <!-- am kelly JavaScript -->
    <script src="js/kelly.js"></script>
    <!-- am maps JavaScript -->
    <script src="js/maps.js"></script>
    <!-- am worldLow JavaScript -->
    <script src="js/worldLow.js"></script>
    <!-- Style Customizer -->
    <script src="js/style-customizer.js"></script>
    <!-- Chart Custom JavaScript -->
    <script src="js/chart-custom.js"></script>
    <!-- Custom JavaScript -->
    <script src="js/custom.js"></script>

</body>
</html>

<?php
}
?>