Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <?php include('../includes/scripts.php'); ?>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Scrolling Nav - Start Bootstrap Template</title>

    <!-- Bootstrap core CSS -->
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../css/scrolling-nav.css" rel="stylesheet">

    <style>
        #footer {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            padding: 1rem;
            background-color: #efefef;
            text-align: center;
        }

        #banner {
            padding: 35px 0 35px 0;
            margin-bottom: 50px;
        }

        #background {
            /*background: url('https://i.ytimg.com/vi/5KLYz0pApq0/maxresdefault.jpg') no-repeat;*/
            /*background-size: cover;*/
            /*background-position: center;*/
        }
        .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 25px;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
            position:sticky;
            top: 191px;
            left: 800px;
            right: 800px;
            bottom: 1px;
        }

        #button:hover {
            background-color: green;
        }
    </style>


</head>

<body id="page-top">
<!-- Navigation Bar -->
<?php include('../includes/header.php'); ?>
<?php include('../controller/gegevens.php'); ?>

<header class="bg-primary text-white" id="background">
    <div class="container text-center" id="banner">
        <h1>Uw persoonlijke informatie</h1>
        <p class="lead"></p>
    </div>
</header>

<div id="personal-information">
    <section id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <h5>Naam:</h5>
                    <p class="lead"><?php print($winkel[0]["FullName"]); ?> </p>
                    <ul>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section id="services">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <h5>E-mail:</h5>
                    <p class="lead"><?php print($winkel[0]["EmailAddress"]); ?></p>
                </div>
            </div>
        </div>
    </section>

    <section id="contact">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <h5>Wachtwoord</h5>
                    <p class="lead"><?php print("************"); ?></p>
                </div>
            </div>
        </div>
    </section>

    <section id="contact">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <h5>Telefoonnummer</h5>
                    <p class="lead"><?php print($winkel[0]["PhoneNumber"]); ?></p>
                </div>
            </div>
        </div>
    </section>

    <section id="contact">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <h5>Adres</h5>
                    <?php if(empty($winkel[0]["DeliveryAddresLine2"])){
                    print("<p>Nog geen adres ingevuld.</p>");
                    }else{
                        print('<p class="lead"><?php print($winkel[0]["DeliveryAddresLine2"]); ?></p>');
                    }
                    ?>

                </div>
            </div>
        </div>
    </section>

    <button class="button" id="info-button">Wijzigen</button>
</div>

<div id="edit-information" style="display:none">
    <form action="../controller/edit-info.php" method="post">
        <section id="about">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <h5>Naam:</h5>
                        <input type="text" name="fullname" class="lead" value="<?php print($winkel[0]["FullName"]); ?>">
                        <ul>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <section id="services">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <h5>E-mail:</h5>
                        <input type="email" name="email" class="lead" value="<?php print($winkel[0]["EmailAddress"]); ?>">
                    </div>
                </div>
            </div>
        </section>

        <section id="contact">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <h5>Wachtwoord</h5>
                        <input type="password" name="pass" class="lead">
                    </div>
                </div>
            </div>
        </section>

        <section id="contact">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <h5>Telefoonnummer</h5>
                        <input type="text" name="phonenumber" class="lead" value="<?php print($winkel[0]["PhoneNumber"]); ?>">
                    </div>
                </div>
            </div>
        </section>
        <input  type="submit" name="submit" class="button mb-1" value="Opslaan"><br>
    </form>

    <button class="button" id="edit-button">Terug</button>
</div>


<!-- Footer -->


<!-- Bootstrap core JavaScript -->
<script src="../vendor/jquery/jquery.min.js"></script>
<script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Plugin JavaScript -->
<script src="../vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom JavaScript for this theme -->
<script src="../js/scrolling-nav.js"></script>
<script>
    $('#info-button').on('click', function(){
        $('#personal-information').css('display', 'none');
        $('#edit-information').css('display', 'block');
    });

    $('#edit-button').on('click', function(){
        $('#personal-information').css('display', 'block');
        $('#edit-information').css('display', 'none');
    });
</script>
</body>

</html>