{% extends "base.html" %}
{% comment %}
Copyright (C) 2018-2025 by BDE ENS Paris-Saclay
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load i18n static django_tables2 %}

{% block containertype %}container-fluid{% endblock %}

{% block content %}
<div class="row">
    <div class="col-xl-12">
        <div class="btn-group btn-group-toggle" style="width: 100%; padding: 0 0 2em 0">
            <a href="{% url "family:family_list" %}" class="btn btn-sm btn-outline-primary">
                {% trans "Families" %}
            </a>
            <a href="{% url "family:challenge_list" %}" class="btn btn-sm btn-outline-primary">
                {% trans "Challenges" %}
            </a>
            <a href="#" class="btn btn-sm btn-outline-primary active">
                {% trans "Manage" %}
            </a>
        </div>
    </div>
</div>

<div class="row mb-3">
    <div class='col-sm-5 col-xl-6' id="infos_div">
        {% if can_add_achievement %}
        <div class="row justify-content-center justify-content-md-end">
            {# Family details column #}
            <div class="col picture-col">
                <div class="card bg-light mb-4 text-center">
                    <a id="profile_pic_link" href="#">
                        <img src="{% static "member/img/default_picture.png" %}" id="profile_pic" alt="" class="card-img-top d-none d-sm-block">
                    </a>
                    <div class="card-body text-center text-break p-2">
                        <span id="user_note"><i class="small">{% trans "Please select a family" %}</i></span>
                    </div>
                </div>
            </div>

            {# Family selection column #}
            <div class="col-xl" id="user_select_div">
                <div class="card bg-light border-success mb-4">
                    <div class="card-header">
                        <p class="card-text font-weight-bold">
                            {% trans "Families" %}
                        </p>
                    </div>
                    <div class="card-body p-0" style="min-height:125px;">
                        <ul class="list-group list-group-flush" id="note_list"></ul>
                    </div>
                    {# User search with autocompletion #}
                    <div class="card-footer">
                        <input class="form-control mx-auto d-block mb-2" placeholder="{% trans "Name" %}" type="text" id="note" autofocus />
                        {% if user_family %}
                        <button class="btn btn-sm btn-secondary btn-block" id="select_my_family">
                            {% trans "Select my family" %} ({{ user_family.name }})
                        </button>
                        {% endif %}
                    </div>
                </div>
            </div>

            {# Summary of challenges and validate button #}
            <div class="col-xl-5" id="consos_list_div">
                <div class="card bg-light border-info mb-4">
                    <div class="card-header">
                        <p class="card-text font-weight-bold">
                            {% trans "Challenges" %}
                        </p>
                    </div>
                    <div class="card-body p-0" style="min-height:125px;">
                        <ul class="list-group list-group-flush" id="consos_list"></ul>
                    </div>
                    <div class="card-footer text-center">
                        <span id="consume_all" class="btn btn-primary">
                            {% trans "Validate!" %}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        {# Create family/challenge buttons #}
        {% if can_add_family or can_add_challenge %}
        <div class="card bg-light border-success mb-4">
          <h3 class="card-header font-weight-bold text-center">
              {% trans "Create a family or challenge" %}
          </h3>
        <div class="card-body text-center">
            {% if can_add_family %}
            <a class="btn btn-sm btn-primary mx-2" href="{% url "family:family_create" %}">
                {% trans "Add a family" %}
            </a>
            {% endif %}
            {% if can_add_challenge %}
            <a class="btn btn-sm btn-primary mx-2" href="{% url "family:challenge_create" %}">
                {% trans "Add a challenge" %}
            </a>
            {% endif %}
        </div>
        </div>
        {% endif %}
    </div>

    {# Buttons column #}
    <div class="col">
        {% if can_add_achievement %}
        <div class="card bg-light border-primary text-center mb-4">
            {# Tabs for list and search #}
            <div class="card-header">
                <ul class="nav nav-tabs nav-fill card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link font-weight-bold" data-toggle="tab" href="#list">
                            {% trans "List" %}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link font-weight-bold" data-toggle="tab" href="#search">
                            {% trans "Search" %}
                        </a>
                    </li>
                </ul>
            </div>

            {# Tabs content #}
            <div class="card-body">
                <div class="tab-content">
                    <div class="tab-pane" id="list">
                        <div class="d-inline-flex flex-wrap justify-content-center">
                            {% for challenge in all_challenges %}
                                    <button class="btn btn-outline-dark rounded-0 flex-fill"
                                            id="challenge{{ challenge.id }}" name="button" value="{{ challenge.name }}">
                                        {{ challenge.name }} ({{ challenge.points }} {% trans "points" %})
                                    </button>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="tab-pane" id="search">
                        <input class="form-control mx-auto d-block mb-3" placeholder="{% trans "Search challenge..." %}" type="search" id="search-input"/>
                        <div class="d-inline-flex flex-wrap justify-content-center" id="search-results">
                            {% for challenge in all_challenges %}
                                    <button class="btn btn-outline-dark rounded-0 flex-fill" hidden
                                            id="search_challenge{{ challenge.id }}" name="button" value="{{ challenge.name }}">
                                            {{ challenge.name }} ({{ challenge.points }} {% trans "points" %})
                                    </button>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>

        </div>
        {% endif %}
    </div>
</div>

{# achievement history #}
{% if table.data %}
    <div class="card">
        <div class="card-header position-relative" id="historyListHeading">
            <a class="stretched-link font-weight-bold" 
                href="{% url 'family:achievement_list' %}" >
                {% trans "Recent achievements history" %}
            </a>
        </div>
        <div id="history">
            {% render_table table %}
        </div>
    </div>

        <!-- Popup de validation -->
    <div class="modal fade" id="validationModal" tabindex="-1" role="dialog" aria-labelledby="validationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-success">
        <div class="modal-header bg-success text-white">
            <h5 class="modal-title" id="validationModalLabel">{% trans "Confirmation" %}</h5>
            <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
                <p><strong>{% trans "Are you sure you want to validate this challenge?" %}</strong></p>
                <p>{% trans "To have your challenge officially validated, please send a message with:" %}</p>
                <ul>
                <li>{% trans "The name of the family" %}</li>
                <li>{% trans "The name of the challenge" %}</li>
                <li>{% trans "A photo or video as proof" %}</li>
                </ul>
                <p>
                <strong>{% trans "Send it via WhatsApp to:" %}</strong>
                {% if phone_numbers %}"
                {% for num in phone_numbers %}
                    <a href="https://wa.me/{{ num }}" target="_blank">{{ num }}</a>{% if not forloop.last %}, {% endif %}
                {% endfor %}
                {% endif %}
                </p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">{% trans "OK" %}</button>
        </div>
        </div>
    </div>
    </div>
{% endif %}
{% endblock %}



{% block extrajavascript %}
    <script type="text/javascript" src="{% static "family/js/achievements.js" %}"></script>
    <script type="text/javascript">
        {% for challenge in all_challenges %}
        document.getElementById("challenge{{ challenge.id }}").addEventListener("click", function() {
            addChallenge({{ challenge.id}}, "{{ challenge.name|escapejs }}", {{ challenge.points }});
        });
        {% endfor %}
    
        {% for challenge in all_challenges %}
            document.getElementById("search_challenge{{ challenge.id }}").addEventListener("click", function() {
                addChallenge({{ challenge.id}}, "{{ challenge.name|escapejs }}", {{ challenge.points }});
            });
        {% endfor %} 
    </script>
    <script>
        document.getElementById("consume_all").addEventListener("click", function () {
            $('#validationModal').modal('show');
        });

        $('#validationModal .btn-primary').on('click', function () {
            consumeAll();
        });
        
        {% if user_family %}
        document.getElementById("select_my_family").addEventListener("click", function () {
            // Simulate selecting the user's family
            var userFamily = {
                id: {{ user_family.id }},
                name: "{{ user_family.name|escapejs }}",
                display_image: "{{ user_family.display_image.url|default:'/static/member/img/default_picture.png'|escapejs }}"
            };
            
            // Check if family is already selected
            var alreadySelected = false;
            notes_display.forEach(function (d) {
                if (d.id === userFamily.id) {
                    alreadySelected = true;
                }
            });
            
            if (!alreadySelected) {
                // Add the family to the selected families
                var disp = {
                    name: userFamily.name,
                    id: userFamily.id,
                    family: userFamily,
                };
                notes_display.push(disp);
                
                // Update the display
                const family_list = $('#note_list');
                let html = '';
                notes_display.forEach(function (disp) {
                    html += li('note_' + disp.id, disp.name, '');
                });
                
                family_list.html(html);
                
                // Add click handlers for removal
                notes_display.forEach(function (disp) {
                    const line_obj = $('#note_' + disp.id);
                    line_obj.hover(function () {
                        displayFamily(disp.family, disp.name, 'user_note', 'profile_pic');
                    });
                    line_obj.click(removeFamily(disp, 'note', notes_display, 'note_list', 'user_note', 'profile_pic'));
                });
                
                // Display the family info
                displayFamily(userFamily, userFamily.name, 'user_note', 'profile_pic');
            }
        });
        {% endif %}
    </script>
{% endblock %}
