{% extends 'base.html' %}

{% load carer_tags %}


{% load i18n %}
{% load static %}
{% block title %}{% trans "Profile" %}{% endblock %}

{% block content %}

    <section x-data="{qrOpen: false}" class="intro relative overflow-hidden">
            {#        notification #}
{#            <div class="w-full p-4 rounded-md bg-[#EFF0F7] text-center">#}
{##}
{#        <h4 class="text-[20px] md:text-[22px] font-bold leading-tight md:leading-tight">#}
{#            Welcome to Peopleoo#}
{#        </h4>#}
{#        <p class="text-[16px] md:text-[20px] leading-normal md:leading-normal">#}
{#            Some welcome message that is only displayed the first time visited.#}
{#        </p>#}
{#    </div>#}
            {#        notification #}
        <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">
                    {{ profile.user.first_name|make_list|first }}{{ profile.user.last_name|make_list|first }}
                </div>

            {% endif %}

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

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

        </article>

        {% if visitor %}

            <a href="{% url 'add_review' user_id=profile.user_id %}" class="btn btn-primary">
                <span class="btn-text">Leave {{ profile }} a Special Mention</span>
                <span class="btn-loader white"></span>
            </a>

        {% else %}

            <div class="flex flex-col items-center gap-y-2 w-full">

                <button id="share-link" onclick="copyToClipboard('{{ base_url }}{% url 'add_review' user_id=profile.user_id %}')"
                        class="btn btn-primary">
                    {% include 'components/icons/icon-link.html' %}
                    <span>Share Special Mention Link</span>
                </button>

                <button @click="qrOpen = true" class="btn btn-border">
                    {% include 'components/icons/icon-qr.html' %}
                    Share QR Code
                </button>

            {% if staff_link_request %}
                <button hx-get="{% url 'accept_link_request' link_request_pk=staff_link_request.pk %}" hx-confirm="Are you sure you want to share your reviews with {{ staff_link_request.organisation.name }}?"
                        class="btn bg-green-400 text-white">
                    <span>Accept Staff Link Request from {{ staff_link_request.organisation.name }}</span>
                </button>
            {% endif %}
            

            </div>

            {#<a href="{% url 'edit_profile' %}"#}
            {#   class="absolute right-5 text-sm text-primary font-medium flex items-center gap-x-1 group cursor-pointer hover:text-dark transition-all">#}
            {#    {% include 'components/icons/icon-edit.html' %}#}
            {#    Edit#}
            {#</a>#}

        {% endif %}

        {#  QR Code  #}
        <div @click.self="qrOpen = false" :class="qrOpen ? '' : 'opacity-0 invisible'"
             class="absolute inset-x-0 inset-y-0 bg-white flex flex-col justify-center items-center">

            <img class="max-w-[250px]" src="{{ profile.qr_code.url }}" alt="{{ profile }}'s QR code for YooCare">

            <button @click="qrOpen = false" class="btn btn-primary max-w-[200px] mb-6">
                {% include 'components/icons/icon-arrow-left.html' %}
                Back
            </button>
        </div>

    </section>
    {% if quizzes %}
    <section class="intro overflow-hidden">

    <div class="mt-5 w-full text-center">
        <h3 class="text-[20px] md:text-[22px] font-bold leading-tight md:leading-tight">
            Quizzes
        </h3>
        <p class="text-[16px] md:text-[18px] leading-normal md:leading-normal">
            By completing the quizzes, you're building your digital employee passport – helping employers find talent by skill and location.
        </p>

                <div class="mt-4 text-right">
            <p class="text-[14px] leading-tight">

                {{ completed_quizzes_count }}/{{ total_quizzes_count }} quizzes completed
            </p>
            <div class="mt-3 relative w-full h-2 rounded-full bg-[#EFF0F7]">

                <div style="width:{{ completed_percentage }}%;" class="absolute top-0 left-0 bottom-0 bg-[#22A573] rounded-full"></div>
            </div>
        </div>

    </div>
        {% endif %}

    <div class="w-full mt-4 grid grid-cols-2 gap-4 text-center">

    {% for quiz in quizzes %}
            <a href="{% url 'quiz_start' quiz_id=quiz.pk %}" class="relative p-4 rounded-md{% if quiz.is_complete %} bg-white border-2 border-[#22A573] {% else %} bg-[#EFF0F7] border-2 border-[#EFF0F7] {% endif %} cursor-pointer hover:opacity-80 duration-300">
                {# tick #}
                {% if quiz.is_complete %}
                <span class="absolute top-2 right-2 inline-block rounded-full bg-[#22A573] text-white p-1">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-3">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                </svg>
            </span>
                    {% endif %}

            <img
                class="w-[60px] h-[60px] rounded-full mx-auto mb-2"
                src="{% if quiz.icon %}{{ quiz.icon.url }}{% else %}{% static 'media/images/care_icon.png' %}{% endif %}"
                alt="img"
            />
            <h3 class="font-semibold text-[16px] leading-tight">
                {{ quiz.name }}
            </h3>
            <p class="text-[14px] leading-normal">
                {{ quiz.minutes_to_complete_quiz }} min quiz
            </p>
        </a>
    {% endfor %}
    </div>
</section>

    {# Latest Reviews #}
    <section>
        <h2>Latest Special Mentions</h2>
        <ul class="w-full flex flex-col gap-y-3 mt-2">
            {% for review in reviews %}
                <li class="card relative flex flex-col gap-y-1">
                    <div class="flex justify-between items-start gap-x-3 mb-1 md:mb-2">
                        <div class="flex flex-col items-start gap-1.5 sm:flex-row sm:items-baseline">
                            <h3>{{ review.review_display_name }}</h3>
                            <span class="flex order-first sm:order-last mb-1 sm:mb-0">
                            {% for _ in review.rating|range %}
                                <img class="w-5 h-5" src="{% static 'media/images/star.svg' %}"/>
                            {% endfor %}
                            </span>
                        </div>

                        <p class="text-sm text-dark font-bold text-opacity-50">{{ review.created_at|date:"M d, Y" }}</p>
                    </div>

                    <p class="md:text-[1.125rem]">{{ review.text }}</p>
                    <p class="text-primary font-medium text-base md:mt-1">{{ review.relationship_to_user }}</p>

                 {% if not visitor %}
                    <button hx-get="{% url 'report_review' review_pk=review.pk %}" hx-confirm="Are you sure you want to report this Special Mention?" hx-target="this" class="text-sm text-red-500 font-medium flex items-center justify-end gap-x-1 group cursor-pointer hover:text-dark transition-all">
                        {% include 'components/icons/icon-warning.html' %}
                        Report
                    </button>
                {% endif %}

                </li>
            {% empty %}
                <li class="card">
                    <p class="md:text-[1.125rem]">No Special Mentions yet! Ask friends and colleagues for a special mention.</p>
                </li>
            {% endfor %}
        </ul>

        {# Only show load more button if there xxx reviews? #}
{#        {% if profile.user.reviews.all %}#}
{#            <a href="#" class="btn btn-border mt-3">#}
{#                <span class="btn-text">Load more reviews</span>#}
{#                <span class="btn-loader"></span>#}
{#            </a>#}
{#        {% endif %}#}
    </section>

    {# Experience #}
{#    <section class="card">#}
{#        <div class="flex justify-between border-b-2 border-primary pb-3">#}
{#            <h2>Your Experience</h2>#}
{#            <a class="text-sm text-primary font-medium flex items-center gap-x-1 group cursor-pointer hover:text-dark transition-all">#}
{#                {% include 'components/icons/icon-edit.html' %}#}
{#                Edit#}
{#            </a>#}
{#        </div>#}
{##}
{#        <ul class="flex flex-col">#}
{#            {% for experience in profile.user.workexperience_set.all %}#}
{#                <li class="border-b border-input-border border-opacity-50 last:border-0 py-3 last:pb-0 md:text-[1.125rem]">#}
{#                    {{ experience }}#}
{#                </li>#}
{#            {% empty %}#}
{#                <li class="pt-3 md:text-[1.125rem]">#}
{#                    No experience added yet!#}
{#                </li>#}
{#            {% endfor %}#}
{#        </ul>#}
{#    </section>#}
{##}
    {# Qualifications #}
{#    <section class="card">#}
{#        <div class="flex justify-between border-b-2 border-primary pb-3">#}
{#            <h2>Your Qualifications</h2>#}
{#            <a class="text-sm text-primary font-medium flex items-center gap-x-1 group cursor-pointer hover:text-dark transition-all">#}
{#                {% include 'components/icons/icon-edit.html' %}#}
{#                Edit#}
{#            </a>#}
{#        </div>#}
{#        <ul class="flex flex-col">#}
{#            {% for qualification in profile.user.qualification_set.all %}#}
{#                <li class="border-b border-input-border border-opacity-50 last:border-0 py-3 last:pb-0 md:text-[1.125rem]">#}
{#                    {{ qualification }}#}
{#                </li>#}
{#            {% empty %}#}
{#                <li class="pt-3 md:text-[1.125rem]">#}
{#                    No qualification added yet!#}
{#                </li>#}
{#            {% endfor %}#}
{#        </ul>#}
{#    </section>#}
{##}
    
    {# Skills #}
{#    <section class="card">#}
{#        <div class="flex justify-between border-b-2 border-primary pb-3">#}
{#            <h2>Your Special Skills & Interests</h2>#}
{#            <a class="text-sm text-primary font-medium flex items-center gap-x-1 group cursor-pointer hover:text-dark transition-all">#}
{#                {% include 'components/icons/icon-edit.html' %}#}
{#                Edit#}
{#            </a>#}
{#        </div>#}
{#        <ul class="flex flex-col">#}
{#            {% if profile.hobbies %}#}
{#                <li class="border-b border-input-border border-opacity-50 last:border-0 py-3 last:pb-0 md:text-[1.125rem]">#}
{#                    {{ profile.hobbies }}#}
{#                </li>#}
{#            {% else %}#}
{#                <li class="pt-3 md:text-[1.125rem]">#}
{#                    No information added yet!#}
{#                </li>#}
{#            {% endif %}#}
{#        </ul>#}
{#    </section>#}
{##}
    {# Additional Info #}
{#    <section class="card">#}
{#        <div class="flex justify-between border-b-2 border-primary pb-3">#}
{#            <h2>Additional Information</h2>#}
{#            <a class="text-sm text-primary font-medium flex items-center gap-x-1 group cursor-pointer hover:text-dark transition-all">#}
{#                {% include 'components/icons/icon-edit.html' %}#}
{#                Edit#}
{#            </a>#}
{#        </div>#}
{#        <ul class="flex flex-col2">#}
{#            {% if profile.extra_text %}#}
{#                <li class="border-b border-input-border border-opacity-50 last:border-0 py-3 last:pb-0 md:text-[1.125rem]">#}
{#                    {{ profile.extra_text }}#}
{#                </li>#}
{#            {% else %}#}
{#                <li class="pt-3 md:text-[1.125rem]">#}
{#                    No additional information added!#}
{#                </li>#}
{#            {% endif %}#}
{#        </ul>#}
{#    </section>#}


    <script>
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(function () {
                const shareLinkBtn = document.querySelector('#share-link')
                const shareLinkTxt = shareLinkBtn.querySelector('span')
                shareLinkTxt.textContent = 'Copied to Clipboard'
                
                setTimeout(() => {
                    shareLinkTxt.textContent = 'Share Special Mention Link'
                }, 3000)
            }, function (err) {
                console.error('Could not copy text: ', err);
            });
        }
    </script>


{% endblock %}