{% extends 'base.html.twig' %}

{% block body %}
    {% for status in project.redmine.issue_statuses %}
        <div class='statusCard statusCard{{status.id}}'> 
            <h2>{{ status.name }}</h2>

            {% for sprint in project.redmine.sprints|reverse %}
                <div class='sprintCard sprintCard{{sprint.id}}'>
                    <!-- <h3>Sprint = {{ sprint.name }}</h3> -->

                    {% for version in project.redmine.versions|reverse %}
                        {% if version.id not in project.hiddenversions %}
                            <div class='versionCard versionCard{{version.id}}'>
                                <!-- <h4>Version = {{ version.name }}</h4> -->
                                <div class='versionBody' data-id='{{status.id}}|{{sprint.id}}|{{version.id}}'></div>
                            </div>
                        {% endif %}
                    {% endfor %}
                        
                    <div class='versionCard versionCardNone'>
                        <!-- <h4>Version = Aucune</h4> -->
                        <div class='versionBody' data-id='{{status.id}}|{{sprint.id}}|'></div>
                    </div>
                </div>
            {% endfor %}

            <div class='sprintCard sprintCardNone'>
                <!-- <h3>Sprint Aucun</h3> -->

                {% for version in project.redmine.versions|reverse %}
                    <div class='versionCard versionCard{{version.id}}'>
                        <!-- <h4>Version = {{ version.name }}</h4> -->
                        <div class='versionBody' data-id='{{status.id}}||{{version.id}}'></div>
                    </div>
                {% endfor %}
                
                <div class='versionCard versionCardNone'>
                    <!-- <h4>Version = Aucune</h4> -->
                    <div class='versionBody' data-id='{{status.id}}||'></div>
                </div>
            </div>

            <hr>
        </div>
    {% endfor %}

    {% for issue in issues %}
        {% if issue.redmine.updated_on|date('Ymd') >= date|date('Ymd') or (issue.redmine.closed_on is not null and issue.redmine.closed_on|date('Ymd') >= date|date('Ymd')) %}
            <div class="issueCard {{issue.color}} tracker{{issue.redmine.tracker.id}} category{{(issue.redmine.category is defined?issue.redmine.category.id:'0') }}" data-status='{{issue.redmine.status.id}}' data-sprint='{{issue.rowsprint}}' data-version='{{(issue.redmine.fixed_version is defined?issue.redmine.fixed_version.id:'')}}' data-id='{{issue.id}}'>
                #{{issue.id}} = {{issue.redmine.subject}}
            </div>
        {% endif %}
    {% endfor %}    
{% endblock %}

{% block javascripts %}
<script>
    // Ranger les issues dans status / sprint / version
    $(function () {
        $('.issueCard').each(function () {
            const id = $(this).data('status')+'|'+$(this).data('sprint')+'|'+$(this).data('version');
            const $column = $(`[data-id='${id}']`);
            if ($column.length) {
                $column.append($(this));
            }
            else { 
                console.log ('no ='+$(this).data('id'));
                $(this).remove();
            }
        });
        $('.scrumContainer').css('display', 'flex');

        // Étape 1 : Masquer les versionCard sans enfant visible dans versionBody
        document.querySelectorAll('.versionCard').forEach(card => {
            const versionBody = card.querySelector('.versionBody');
            const children = Array.from(versionBody?.children || []);

            const hasVisibleChild = children.some(child => child.offsetParent !== null);

            if (!hasVisibleChild) {
                card.style.display = 'none';
            }
        });

        // Étape 2 : Masquer les sprintCard sans versionCard visible
        document.querySelectorAll('.sprintCard').forEach(sprint => {
            const visibleVersion = Array.from(sprint.querySelectorAll('.versionCard'))
                .some(card => card.offsetParent !== null);

            if (!visibleVersion) {
                sprint.style.display = 'none';
            }
        });

        // Étape 3 : Masquer les statusCard sans sprintCard visible
        document.querySelectorAll('.statusCard').forEach(status => {
            const visibleSprint = Array.from(status.querySelectorAll('.sprintCard'))
                .some(sprint => sprint.offsetParent !== null);

            if (!visibleSprint) {
                status.style.display = 'none';
            }
        });   

        // Étape 4 : Trier les issues restantes par data-id dans chaque statusCard
        document.querySelectorAll('.statusCard').forEach(statusCard => {
            const issues = Array.from(statusCard.querySelectorAll('.issueCard'));

            // Filtrer les issues réellement visibles (au cas où certaines sont masquées)
            const visibleIssues = issues.filter(issue => issue.offsetParent !== null);

            // Trier les issues par data-id (tu peux ajuster pour une autre propriété si nécessaire)
            visibleIssues.sort((a, b) => {
                const idA = a.getAttribute('data-id');
                const idB = b.getAttribute('data-id');
                return idA.localeCompare(idB, undefined, { numeric: true, sensitivity: 'base' });
            });

            // Replacer les issues triées dans leur parent immédiat
            visibleIssues.forEach(issue => {
                const parent = issue.parentElement;
                parent.appendChild(issue);
            });
        });            
    });
</script>
{% endblock %}