{% extends "base.html" %}

{% load i18n %}
{% load widget_tweaks %}
{% load static %}

{% block title %}{% trans "Your Special Mention" %}{% endblock %}


{% block content %}

    <section class="intro">
        <article class="text-center">

            {% if profile.avatar and not profile.enabled_privacy_mode %}

                <figure class="block w-24 h-24">
                    <img
                            class="w-24 h-24 rounded-full"
                            src="{{ profile.avatar_thumbnail.url }}"
                            alt="Picture of {{ profile }}"
                    />
                </figure>
                
                {% else %}
                
                <div class="flex w-24 h-24 bg-light text-primary text-4xl rounded-full items-center justify-center">
                    {% if profile.preferred_name %}{{ profile.preferred_name|make_list|first }}{% else %}{{ profile.user.first_name|make_list|first }}{% endif %}{{ profile.user.last_name|make_list|first }}
                </div>

            {% endif %}

            <h1>{{ profile }}</h1>

            {% include 'carers/partials/organization_details.html' with profile=profile %}

        </article>
    </section>


    <h2>Your Special Mention</h2>

    <form class="card -mt-4" method="post" action=".">
        {% csrf_token %}

        <div class="form-group">
            <p>
                <label for="id_rating" class="cursor-pointer">How many stars would you like to send {{ profile }}?</label>
            </p>

            {{ form.rating }}

            <div class="flex gap-x-1 mt-1">
                {% with ''|center:5 as range %}
                    {% for _ in range %}
                        <span onclick="setRating({{ forloop.counter }})" id="star-{{ forloop.counter }}"
                              data-counter="{{ forloop.counter }}"
                              class="star p-2 rounded bg-light text-dark text-opacity-40 hover:text-secondary hover:text-opacity-100 cursor-pointer hover:bg-primary transition-all">
                    {% include 'components/icons/icon-star.html' %}
                </span>
                    {% endfor %}
                {% endwith %}
            </div>

        </div>

        <div class="form-group">
            <p>
                <label for="id_rating" class="cursor-pointer">Would you like to explain why?</label>
            </p>
            {{ form.text|attr:"placeholder:Example: He/She is amazing, they looked after my father and they built an amazing relationship!" }}
            {% include 'components/form_field_errors.html' with field=form.text %}
        </div>

        <div class="form-group">
            <p>
                <label for="id_relationship_to_user" class="cursor-pointer">How do you
                    know {{ profile }}?</label>
            </p>
            {{ form.relationship_to_user|attr:"placeholder:i.e My Fathers carer" }}
            {% include 'components/form_field_errors.html' with field=form.relationship_to_user %}
        </div>
    
    <h2 class="text-left mt-4">Your Contact Details</h2>
    <p class="text-lg">Please provide your details as we may contact you to authenticate your special mention if necessary. Special Mentions cannot be submitted anonymously.</p>
    <p class="text-lg">Your full name may be passed to the caring person or service provider handling special mentions but not to any other third party. Your full name, email and telephone will not be published.</p>

        <div class="form-group">
            <p>
                <label for="id_reviewer_first_name" class="cursor-pointer">First Name</label>
            </p>
            {{ form.reviewer_first_name|attr:"placeholder:First Name" }}
                        {% include 'components/form_field_errors.html' with field=form.reviewer_first_name %}
        </div>
            <div class="form-group">
            <p>
                <label for="id_reviewer_last_name" class="cursor-pointer">Last Name</label>
            </p>
            {{ form.reviewer_last_name|attr:"placeholder:Last Name" }}
                        {% include 'components/form_field_errors.html' with field=form.reviewer_last_name %}
        </div>

        <div class="form-group">
            <p>
                <label for="id_reviewer_phone" class="cursor-pointer">Telephone</label>
            </p>
            {{ form.reviewer_phone|attr:"placeholder:i.e 07909654389" }}
                        {% include 'components/form_field_errors.html' with field=form.reviewer_phone %}

        </div>

        <div class="form-group">
            <p>
                <label for="id_reviewer_email" class="cursor-pointer">Email</label>
            </p>
            {{ form.reviewer_email|attr:"placeholder:i.e info@carehome.org.uk" }}
            {% include 'components/form_field_errors.html' with field=form.reviewer_email %}
        </div>
    
            <div class="form-group">
                <label id="id_display_initials_only" for="id_display_initials_only" class="cursor-pointer">Your first name and the initial of your surname will be published alongside your review on the app (as displayed below). Our special mention policy is not to include the full surname of an individual leaving a special mention. If you prefer for just your initials to be displayed, please tick here: </label>
<input 
    type="checkbox" 
    class="visible opacity-100 indent-8 static"
    id="id_display_initials_only" 
    name="display_initials_only" 
    {% if form.display_initials_only.value %}checked{% endif %}
/>
            {% include 'components/form_field_errors.html' with field=form.display_initials_only %}
        </div>

        <button class="btn btn-primary mt-2 md:mt-3" type="submit">
            <span class="btn-text">{% trans 'Submit your review' %}</span>
            <span class="white"></span>
        </button>
    </form>


    <script>
        function setRating(value) {
            document.querySelector('#id_rating').value = value;
            updateStars(value);
        }

        function updateStars(value) {
            const stars = document.querySelectorAll('.star')
            for (const star of stars) {
                star.dataset.counter <= value
                    ? star.classList.add('text-secondary', 'bg-primary', '!text-opacity-100')
                    : star.classList.remove('text-secondary', 'bg-primary', '!text-opacity-100')
            }
        }

    </script>

{% endblock %}