{% extends "./template.html" %}
{% block content %}
{% load static %}
<script type="text/javascript" src="{% static 'NearBeach/javascript/csrf_finder.js' %}"></script>
<body onload="on_page_load()">
    <div class="card mt-4">
        <div class="card-header">
            <h1>My Profile</h1>
        </div>
        <div class="card-body">
            <div class="alert alert-success" id="save_state" role="alert"></div>
            <form id="user_information_form" name="user_information_form" method="POST" enctype="multipart/form-data">
                {% csrf_token %}

                <div class="form-row">
                    <!--FIRST NAME-->
                    <div class="form-group col-md-6">
                        <label for="id_first_name">First Name</label>
                        {{ my_profile_form.first_name }}
                    </div>

                    <!--LAST NAME-->
                    <div class="form-group col-md-6">
                        <label for="id_last_name">First Name</label>
                        {{ my_profile_form.last_name }}
                    </div>
                </div>


                <!--EMAIL-->
                <div class="form-group">
                    <label for="id_email">Email</label>
                    {{ my_profile_form.email }}
                </div>

                <!--PASSWORD1-->
                <label>Password: Leave fields blank if you do not require to change your password</label>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="id_password1">Password</label>
                        {{ my_profile_form.password1 }}
                    </div>

                    <!--PASSWORD2-->
                    <div class="form-group col-md-6">
                        <label for="id_password2">Repeate Password</label>
                        {{ my_profile_form.password2 }}
                    </div>
                </div>


                <!--ABOUT YOU-->
                <label>About you:</label>
                <div class="form-label-group">
                    {{ about_user_form.media }}{{ about_user_form.about_user_text }}
                </div>
                <input class="btn btn-primary" type="submit" value="Update Profile" id="submit_user" onclick="update_user()">
            </form>
        </div>
    </div>


    <div class="card mt-4">
        <div class="card-header">
            <h2>Add User Weblinks</h2>
        </div>
        <div class="card-body">
            <form id="user_weblink" name="user_weblink" method="POST" enctype="multipart/form-data" class="mt-4">
                Loading...
            </form>
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header">
            <h3>Input Wants</h3>
        </div>
        <div class="card-body">
            <form id="user_want" name="user_want" method="POST" enctype="multipart/form-data" class="mt-4">
                <h2>User Wants</h2>
                Loading...
            </form>
        </div>
    </div>


    {% if project_results %}
        <div class="card mt-4">
            <div class="card-header">
                <h2>Projects Worked on</h2>
            </div>
            <div class="card-body">
                <table class="table table-hover table-striped">
                    <thead>
                        <tr>
                            <td width="20%">Project Link</td>
                            <td width="60%">Project Name</td>
                            <td width="20%">Project Status</td>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in project_results %}
                            <tr>
                                <td><a href="{% url 'project_information' row.project_id %}">PRO{{ row.project_id }}</a></td>
                                <td>{{ row.project_name }}</td>
                                <td>{{ row.project_status }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% endif %}

    <script>
        $("#user_information_form").on("submit", function(e) {
            e.preventDefault();

            update_user();
        });

        $("#user_weblink").on("submit", function (e) {
            e.preventDefault();

            $.ajax({
                url: '/user_weblink_view/',
                type: 'POST',
                data: $(this).serialize(),
                success: function (data) {
                    $("#user_weblink").html(data);
                },
                error: function () {
                    new_error("Sorry, something went wrong submitting user weblink");
                }
            })
        })

        $("#user_want").on("submit", function (e) {
            e.preventDefault();

            $.ajax({
                type: 'POST',
                url: '/user_want_view/',
                data: $(this).serialize(),
                success: function(data) {
                    $("#user_want").html(data);
                },
                error: function() {
                    new_error("Sorry, submitting the user want caused an error");
                }
            })
        });

        function enable_submit() {
            /*
            The password fields have been changed. We will look at the passwords fields and if both fields contain the
            same data, then we enable the submit button. Otherwise we disable it.
             */
            var password1 = $("#id_password1").val(),
                password2 = $("#id_password2").val();

            if (password1 == password2) {
                $("#submit_user").prop("disabled",false);
            } else {
                $("#submit_user").prop("disabled",true)
            }
        }

        function on_page_load() {
            $("#save_state").hide();
            load_user_want();
            load_user_weblink();
        }

        function load_user_weblink() {
            $.ajax({
                url: '/user_weblink_view/',
                type: 'GET',
                data:  {},
                dataType: 'HTML',
                success: function (data) {
                    $("#user_weblink").html(data);
                },
                error: function () {
                    new_error("Sorry, the user weblinks did not load correctly");
                }
            })
        }

        function load_user_want() {
            $.ajax({
                url: '/user_want_view/',
                type: 'GET',
                data: {},
                dataType: 'html',
                success: function (data) {
                    $("#user_want").html(data);
                },
                error: function() {
                    new_error("Sorry, the User Wants did not load correctly");
                }
            })
        }

        function update_user() {
            $("#save_state").html("Currently Saving Project");

            $.ajax({
                url: '/my_profile/',
                type: "POST",
                data: $("#user_information_form").serialize(),
                success: function(data) {
                    //State that the function has saved
                    var current_time = Date();
                    $("#save_state").html("Saved last on " + current_time);
                    $("#save_state").show();
                },
                error: function () {
                    new_error("Sorry, but saving this has not worked");
                }
            });
        }

        function user_want_remove(user_want_id) {
            //Send data to the database
            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            $.ajax({
                url: '/user_want_remove/' + user_want_id + '/',
                type: 'POST',
                data: {},
                success: function (data) {
                    load_user_want();
                },
                error: function () {
                    new_error("Sorry, removing the user want failed")
                }
            })
        }

        function user_weblink_remove(user_weblink_id) {
            //Send data to the database
            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            $.ajax({
                url: '/user_weblink_remove/' + user_weblink_id + '/',
                type: 'POST',
                data: {},
                success: function (data) {
                    load_user_weblink();
                },
                error: function () {
                    new_error("Sorry, removing the user weblink failed")
                }
            })
        }

    </script>

</body>

{% endblock %}