<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NearBeach Kudos - rate us.</title>

    <!--
    Bootstrap and jquery are utilised throughout ALL of NearBeach
    -->
    {% load static %}
    <script src="{% static 'NearBeach/widgets/jquery/jquery-3.3.1.min.js' %}"></script>
    <script src="{% static 'NearBeach/widgets/bootstrap/js/bootstrap.bundle.js' %}"></script>
    <link rel="stylesheet" href="{% static 'NearBeach/widgets/bootstrap/css/bootstrap.css' %}" />

    <style>
        .star{
          color: goldenrod;
          font-size: 2.0rem;
          padding: 0 1rem; /* space out the stars */
        }
        .star::before{
          content: '\2606';    /* star outline */
          cursor: pointer;
        }
        .star.rated::before{
          /* the style for a selected star */
          content: '\2605';  /* filled star */
        }

        .stars{
            counter-reset: rateme 0;
            font-size: 2.0rem;
            font-weight: 900;
        }
        .star.rated{
            counter-increment: rateme 1;
        }
        .stars::after{
            content: counter(rateme) '/5';
        }

        input {
            -moz-appearance: none;
            -webkit-appearance: none;
            appearance: none;
        }
    </style>
</head>
<body class="bg-light" style="padding-bottom: 200px;">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
        <div class="container">
            <a class="navbar-brand" href="javascript:void(0)">NearBeach - Kudos</a>
        </div>
    </nav>


    <div class="container">
        <div class="col-lg-12">
            <form id="kudos_form" action="/kudos_rating/{{ kudos_key }}/" method="POST">
                {% csrf_token %}
                {{ kudos_form.media }}

                <!-- PROJECT INFORMATION -->
                <h2>Project - {{ project_results.project_id }}</h2>
                <h5>{{ project_results.project_name }}</h5>
                {{ kudos_form.project_description }}
                <table>
                    <tr><td>Organisation: {{ project_results.organisations_id }}</td></tr>
                    <tr><td>Project Status: Completed</td></tr>
                    <tr><td>Start Date: {{ project_results.project_start_date }}</td></tr>
                    <tr><td>End Date: {{ project_results.project_end_date }}</td></tr>
                </table>

                <!-- RATING -->
                <h2><label for="id_kudos_rating">Kudos Rating - how well did we do?</label></h2>
                <div class="stars" data-rating="3">
                    <!-- Rating 1-->
                    <input type="radio" id="id_kudos_rating_0" value="1" name="kudos_rating">
                    <label for="id_kudos_rating_0">
                        <span class="star"></span>
                    </label>

                    <!-- Rating 2-->
                    <input type="radio" id="id_kudos_rating_1" value="2" name="kudos_rating">
                    <label for="id_kudos_rating_1">
                        <span class="star"></span>
                    </label>

                    <!-- Rating 3-->
                    <input type="radio" id="id_kudos_rating_2" value="3" name="kudos_rating" checked="checked">
                    <label for="id_kudos_rating_2">
                        <span class="star"></span>
                    </label>

                    <!-- Rating 4-->
                    <input type="radio" id="id_kudos_rating_3" value="4" name="kudos_rating">
                    <label for="id_kudos_rating_3">
                        <span class="star"></span>
                    </label>

                    <!-- Rating 5-->
                    <input type="radio" id="id_kudos_rating_4" value="5" name="kudos_rating">
                    <label for="id_kudos_rating_4">
                        <span class="star"></span>
                    </label>
                </div><br/>

                <h2><label for="id_improvement_note">Is there anything we can improve?</label></h2>
                <div class="row">
                    {{ kudos_form.improvement_note }}
                </div><br/>

                <h2><label for="id_liked_note">Is there anything you liked about our service?</label></h2>
                <div class="row">
                    {{ kudos_form.liked_note }}
                </div><br/>

                <h2><label for="id_extra_kudos">Did you want to give extra kudos to a team member working on this project?</label></h2>
                <div class="row">
                    {{ kudos_form.extra_kudos }}
                </div><br/>
                <div class="align-items-center">
                    <input type="submit" value="Submit Kudos" class="btn btn-primary">
                </div>
            </form>
        </div>
    </div>

    <script>

        //initial setup
        document.addEventListener('DOMContentLoaded', function(){
            let stars = document.querySelectorAll('.star');
            stars.forEach(function(star){
                star.addEventListener('click', setRating);
            });

            let rating = parseInt(document.querySelector('.stars').getAttribute('data-rating'));
            let target = stars[rating - 1];
            target.dispatchEvent(new MouseEvent('click'));
        });
        function setRating(ev){
            let span = ev.currentTarget;
            let stars = document.querySelectorAll('.star');
            let match = false;
            let num = 0;
            stars.forEach(function(star, index){
                if(match){
                    star.classList.remove('rated');
                }else{
                    star.classList.add('rated');
                }
                //are we currently looking at the span that was clicked
                if(star === span){
                    match = true;
                    num = index + 1;
                }
            });
            document.querySelector('.stars').setAttribute('data-rating', num);
        }

    </script>
</body>
</html>