<%# Settings page for users %>
<%# ARGUMENTS: user - user logged in right now, age - current user age %>

<%- include("../partials/header") -%>
<%- include("../partials/navigationPrivate") -%>

<script>

    $(document).ready(function() {
        //var age = new Date().getFullYear - user.profile.yob;
        // configure unsaved changes alert
        $("#unsaved-alert").hide(0);

        var setUnsavedAlertFor = function(id) {
            $("#" + id).on("input", function() {
                $("#unsaved-alert").show(500);
                $("#" + id).css({ "border": '#FFA500 2px solid' });
            });
        }

        setUnsavedAlertFor("name");
        setUnsavedAlertFor("bio");
        setUnsavedAlertFor("location");
        setUnsavedAlertFor("age");
        setUnsavedAlertFor("ign");
        setUnsavedAlertFor("username");

        // show/hide password requirement notification
        $("#password-req").hide();
        $("#newpw").focus(function() {
            $("#password-req").show(100);
        });
        $("#newpw").blur(function() {
            window.setTimeout(function() {
                $("#password-req").hide(100);
            }, 1000);
        });
    });
</script>

<h1 class="my-5 container">Settings</h1>

<div class="container">
    <%- include("../partials/flashes") -%>
</div>

<div class="container" id="unsaved-alert" style="display: none">
    <div class="alert alert-danger" role="alert">Careful! You have unsaved changes!</div>
</div>

<form action="/changeProfile" method="POST">
    <%# Public profile tweaks %>
    <div class="jumbotron container">

        <h3 class="mb-4">Profile</h3>

        <div class="form-group row">
            <label for="name" class="col-sm-2 col-form-label">Name</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="name" name="name" value="<%= user.profile.name %>" placeholder="Enter your name here">
            </div>
        </div>
        <div class="form-group row">
            <label for="Bio" class="col-sm-2 col-form-label">Bio</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="bio" name="bio" value="<%= user.profile.bio %>" placeholder="Introduce yourself!">
            </div>
        </div>
        <div class="form-group row">
            <label for="Location" class="col-sm-2 col-form-label">Location</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="location" name="location" value="<%= user.profile.location %>" placeholder="Where do you live?">
            </div>
        </div>
        <div class="form-group row">
            <label for="Year of Birth" class="col-sm-2 col-form-label">Year of Birth</label>
            <div class="col-sm-10">
                <input type="number" class="form-control" id="yob" name="yob" value= "<%= user.profile.yob %>"  placeholder="Enter your year of birth here">
            </div>
        </div>

        <input class="btn btn-primary" type="submit" value="Update Profile">

    </div>
</form>

<form action="/changePreferences" method="POST">
    <%# Personal preferences tweaks %>
    <div class="jumbotron container">

        <h3 class="mb-4">Personalization</h3>

        <div class="form-group">
            <div class="my-2">
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="form-check-input" id="darkMode" name="darkMode" <% if (locals.darkMode) { %> checked <% } %>>
                    <label for="darkMode" class="form-check-label">Dark Mode</label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="my-2">
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="form-check-input" id="hideProfile" name="hideProfile" <% if (user.preferences.hideProfile) { %> checked <% } %>>
                    <label for="hideProfile" class="form-check-label">Hide Public Profile and Stats</label>
                </div>
            </div>
        </div>

        <input class="btn btn-primary" type="submit" value="Update Preferences">
    </div>
</form>

<form action="/changeSettings" method="POST" >
    <%# Private account tweaks %>
    <div class="jumbotron container">

        <h3 class="mb-4">Account</h3>

        <div class="form-group row">
            <label for="Username" class="col-sm-2 col-form-label">Username</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="ign" name="ign" value="<%= user.ign %>" placeholder="Change your username">
            </div>
        </div>
        <div class="form-group row">
            <label for="Email" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="username" name="username" value="<%= user.username %>" placeholder="Change your linked email">
            </div>
        </div>
        <div class="form-group row">
            <label for="Password" class="col-sm-2 col-form-label">Change Password</label>
            <div class="col-sm-10">
                <input type="password" name="plassword" class="form-control" id="plassword" placeholder="Current password">
            </div>
            <label for="NewPW" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10 mt-1">
                <input type="password" class="form-control" name="newpw" id="newpw" placeholder="New password">
            </div>
            <label for="ConfirmPW" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10 mt-1">
                <input type="password" class="form-control" name="confirmnewpw" id="password" name="password" placeholder="Confirm new password">
                <p class="container mb-4 mt-2" id="password-req">A valid password must have a minimum of <strong>7 characters</strong> which includes at least <strong>1 letter</strong> and at least <strong>1 number</strong></p>
            </div>
        </div>

        <input class="btn btn-primary" type="submit" value="Update Account">
    </div>
</form>

<form id="delete-account-form" action="/deleteAccount" method="POST">
    <div class="jumbotron container">

        <h3 class="mb-4">Delete Account</h3>
        <div class="form-group row">
            <label for="AccDel" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
                <input type="password" name="delassword" class="form-control" id="delassword" placeholder="Current password">
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-10 my-2">
                <input type="button" class="btn btn-danger" id="submitBtn" value="Delete Account" data-bs-toggle="modal" data-bs-target="#confirm-delete-acc" />
            </div>
        </div>
    </div>
</form>

<%# Modal for confirming deletion of account %>

<div class="modal fade" id="confirm-delete-acc" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Confirm Delete Account
            </div>
            <div class="modal-body">
                Are you sure you want to delete your account?
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cancel</button>
                <a href="#" id="delete-account-confirm" class="btn btn-danger">Delete</a>
            </div>
        </div>
    </div>
</div>


<script>
    $('#delete-account-confirm').click(function(){
        /* when the submit button in the modal is clicked, submit the form */
        $('#delete-account-form').submit();
    });
</script>
<%- include("../partials/footer") -%>
