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

{% block localstyle %}
    html { height:100%}
    body { height:100%; background-color:#efefef;}
    
    #main {
        padding-left:0px;
        margin-bottom:0px;
    }

    h3 { font-size:14px; margin-top:15px;}
    #mycontent { width: 5000px; display:none; }

    .btn-link {
        cursor:pointer;
    }

    .control-label {
        margin-bottom:0px;
    }
    
    .tag {
        border-radius: 5px;
        padding: 4px 8px;
        //margin-bottom: 2px;
        display: inline-block;
        min-width: 35px;
        text-align: center;
        color: #ffffff !important;
        zoom: 70%;
    }

    .tag i {
        margin-right:5px;
    }

    .tooltip-inner {
        text-align: left !important; /* Aligne le texte à gauche */
        white-space: pre-line; /* Conserve les retours à la ligne */
    }

    .assignee {
        width:30px;
        margin: 5px 5px 0px 0px;
    }

    .state-closed {
        background-color: #cdcdcd !important;
    }

    .text-small { font-size:80%}
    .text-verysmall { font-size:70%}

    .submenu a:hover {
        text-decoration: none;
        color: var(--colorfttitlelight);
    }
{% endblock %}

{% block body %}
    {% set start = microtime(true) %}

    <div class="d-flex">
        <div id="filters" class="d-flex flex-column pl-2 pr-2 " style="width:350px; background-color:var(--colorbgbodydark);min-height:1500px;">
            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre JALONS</label>
                <select id="filtermilestones" multiple="multiple" class="form-control">
                    {% for giteamilestone in giteamilestones %}
                        <option value="{{giteamilestone.id}}">{{giteamilestone.title}}</option>
                    {% endfor %}
                    <option value="-100">Aucun</option>
                </select>
            </div>

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre SPRINT</label>
                <select id="filtersprints" multiple="multiple" class="form-control">
                    {% for sprint in sprints %}
                        <option value="{{sprint.giteamilestone~"-"~sprint.id}}">{{sprint.giteamilestonename}}-{{sprint.name}}</option>
                    {% endfor %}
                    {% for giteamilestone in giteamilestones %}
                        <option value="{{giteamilestone.id~"--100"}}">{{giteamilestone.title}}-Aucun</option>
                    {% endfor %}
                </select>
            </div>

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre TYPES</label>
                <select id="filtertypes" multiple="multiple" class="form-control">
                    {% for type in scrum.scrumtypes %}
                        <option value="{{type.giteaid}}">{{type.name}}</option>
                    {% endfor %}
                </select>
            </div>

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre EQUIPES</label>
                <select id="filterteams" multiple="multiple" class="form-control">
                    {% for team in scrum.scrumteams %}
                        <option value="{{team.giteaid}}">{{team.name}}</option>
                    {% endfor %}
                </select>
            </div>

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre PRIORITES</label>
                <select id="filterprioritys" multiple="multiple" class="form-control">
                    {% for priority in scrum.scrumprioritys %}
                        <option value="{{priority.giteaid}}">{{priority.name}}</option>
                    {% endfor %}
                </select>
            </div>

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre ETIQUETTES</label>
                <select id="filterlabels" multiple="multiple" class="form-control">
                    {% for gitealabel in gitealabels %}
                        <option value="{{gitealabel.id}}">{{gitealabel.name}}</option>
                    {% endfor %}
                </select>
            </div>

            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre AFFECTATIONS</label>
                <select id="filterassignees" multiple="multiple" class="form-control">
                    {% for giteaassignee in giteaassignees %}
                        <option value="{{giteaassignee.id}}">{{giteaassignee.login}}</option>
                    {% endfor %}
                </select>
            </div>


            <div style="width:100%" class="mt-3">
                <label class="control-label" style="color:var(--colorftbodydark)">Filtre EXCLUSIONS</label>
                <select id="filterexcludes" multiple="multiple" class="form-control">
                    {% for gitealabel in gitealabels %}
                        <option value="{{gitealabel.id}}">{{gitealabel.name}}</option>
                    {% endfor %}
                </select>
            </div>    

            <div style="width:100%" class="mt-3">
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="viewcondensed">
                    <label class="custom-control-label" for="viewcondensed" style="color:var(--colorfttitledark);">Vue condensée</label>
                </div>
            </div>

            <div id="tbestim" class="mt-5">
            </div>        
        </div>

        <div class="pl-3" style="width:100%;">
            <div id="haveupdate" style="display:none" class="alert alert-danger pr-2 mt-3">
                Votre projet a été mise à jour par un tier. Souhaitez-vous raffraichir votre projet ?<br>
                <a href="{{path('app_scrum_view',{id:scrum.id})}}" class="btn btn-success mt-3">Rafraichir</a>
            </div>

            <div class="mt-4" style="zoom:80%">
                <button class="btn btn-success" onClick="showFilters()"><i class="fas fa-filter"></i></button>
                <a class="btn btn-success" href="{{path('app_scrum_table',{id:scrum.id})}}"><i class="fas fa-ticket-alt"></i></a>
                <a class="btn btn-success" href="{{path('app_scrum_stat',{id:scrum.id})}}"><i class="fas fa-chart-area"></i></a>               
                <a href="{{giteaUrl}}/{{scrum.giteajson.owner.login}}/{{scrum.giteajson.name}}/issues/new" class="btn btn-success" target="_blank">Nouveau Ticket</a>
                <span id="textfilters"></span>
            </div>

            {% for column in tbissues %}
                <div class="d-inline-block mt-3 align-top mb-5 p-2" data-column="{{column.gicol}}" style="width: 18rem;">
                    <h2 style="text-transform: uppercase; text-align:center; font-size:26px">{{ column.nmcol }}</h2>
                    <div class="card-body p-1">
                        {% for jalon in column.jalons %}
                            {% for sprint in jalon.sprints %}
                                <div class="card mb-3" data-column="{{column.gicol}}" data-milestone="{{jalon.gijal}}" data-sprint="{{sprint.idspr}}" data-millestonesprint="{{jalon.gijal~"-"~sprint.idspr}}">
                                    <div class="card-header p-1 d-flex" style="font-size:16px; cursor:pointer;" onClick="$(this).next('.card-body').toggle()">
                                        <div>
                                            JALON = {{jalon.nmjal}}
                                            {% if sprint.idspr!=-100 %}
                                            <br>
                                            SPRINT = {{sprint.nmspr}}
                                            {% endif %}
                                        </div>

                                        <div class="ml-auto" data-weight="{{column.gicol~"-"~jalon.gijal~"-"~sprint.idspr}}">
                                            
                                        </div>
                                    </div>                            

                                    <div class="card-body p-1">
                                        <ul class="scrumcolumn list-group" style="min-height:50px" data-column="{{column.gicol}}" data-milestone="{{jalon.gijal}}" data-sprint="{{sprint.idspr}}"  data-millestonesprint="{{jalon.gijal~"-"~sprint.idspr}}">
                                            {% for issue in sprint.issues %}
                                                {% set tosee=false %}
                                                {% if app.session.get('viewclosed')=="true" and issue.giteastate=="closed" %}
                                                    {% set tosee=true %}
                                                {% endif %}
                                                {% if issue.giteastate!="closed" %}
                                                    {% set tosee=true %}
                                                {% endif %}

                                                {% if tosee %}
                                                    {% set datalabels="" %}
                                                    {% set datateams="" %}
                                                    {% set datatypes="" %}
                                                    {% set dataprioritys="datapriority"~giteaprioritys|last %}
                                                    {% set issuprioritycolor=prioritycolor %}
                                                    
                                                    {% for label in issue.giteajson.labels %}
                                                        {% if label.id not in giteacolumns and label.id in giteateams %}
                                                            {% set datateams=datateams~"datateam"~label.id~" " %}
                                                        {% endif %}

                                                        {% if label.id not in giteacolumns and label.id in giteatypes %}
                                                            {% set datatypes=datatypes~"datatype"~label.id~" " %}
                                                        {% endif %}

                                                        {% if label.id not in giteacolumns and label.id in giteaprioritys %}
                                                            {% set dataprioritys="datapriority"~label.id~" " %}
                                                            {% set issuprioritycolor="#"~label.color %}
                                                        {% endif %}

                                                        {% set datalabels=datalabels~"datalabel"~label.id~" " %}
                                                    {% endfor %}

                                                    {% set dataassignees="" %}
                                                    {% for assignee in issue.giteajson.assignees %}
                                                        {% set dataassignees=dataassignees~"dataassignee"~assignee.id~" " %}
                                                    {% endfor %}

                                                    {% set backcolor="" %}
                                                    {% if not issue.color is empty %}
                                                        {% set backcolor="background-color:"~issue.color~";" %}
                                                    {% elseif issue.scrumissueblock and not issue.scrumissueblock.color is empty %}
                                                        {% set backcolor="background-color:"~issue.scrumissueblock.color~";" %}
                                                    {% endif %}

                                                    {% set notes=(not issue.notes is empty?issue.notes|striptags|replace({'\n': '<br>', '\r': '<br>'})|raw:"") %}

                                                    <div id="issu{{ issue.id }}" data-id="{{ issue.id }}" data-issue="{{ issue.id }}" data-column="{{column.gicol}}" data-milestone="{{jalon.gijal}}" data-sprint="{{sprint.idspr}}" class="card mb-1 issue issue-{{issue.id}} {{datateams}} {{datatypes}} {{dataprioritys}} {{datalabels}} {{dataassignees}} state-{{issue.giteastate}}" style="border-left: 10px solid {{issuprioritycolor}}" {{ (not notes is empty?'title='~notes:'') }}>
                                                        <div class="card-footer p-1 d-flex" style="line-height:16px; border-top:none; {{ backcolor }}" >
                                                            <div class="flex-grow-1 d-flex align-items-center" style="max-width:224px";>
                                                                <div class="pr-2 issu-id"  style="cursor:move">
                                                                    #{{issue.giteanumber}}
                                                                </div>
                                                                <div class="text-small" style="cursor:pointer; word-break: break-word;" onClick="$('#issu-detail{{ issue.id }}').toggle()">
                                                                    {% if not issue.scrumissueblock is empty %}
                                                                        <div class="text-verysmall" style="margin-bottom:-5px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 160px;">
                                                                            #{{issue.scrumissueblock.giteanumber}} = {{issue.scrumissueblock.giteatitle}}
                                                                        </div>
                                                                    {% endif %}
                                                                    
                                                                    <div style="line-height:13px;">{{ issue.giteatitle }}</div>

                                                                    {% for depend in issue.scrumissuedependencies %}
                                                                        {% if loop.first %}
                                                                            <div class="text-verysmall" style="margin-top: 5px;line-height:11px; width:160px;">
                                                                        {% endif %}
                                                                                {% set style="" %}
                                                                                {% if depend.giteastate=="closed" %}
                                                                                    {% set style="text-decoration: line-through;" %}
                                                                                {% endif %}    
                                                                                <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;{{style}}">#{{depend.giteanumber}} = {{depend.giteatitle}}</div>
                                                                        {% if loop.last %}
                                                                            </div>
                                                                        {% endif %}
                                                                    {% endfor %}
                                                                </div>
                                                            </div>

                                                            <div id="viewissu{{ issue.id }}" class="viewissu mb-2" onMouseenter="issuhover(this,{{ issue.id }})" data-issue="{{ issue.id }}" data-giteaid="{{issue.giteanumber}}" data-giteatitle="{{ issue.giteatitle }}" type="button" style="line-height:9px; text-align:center;">
                                                                <i class="btn btn-link fas fa-eye p-0 m-0 fa-fw"></i>
                                                                <br><span class="text-verysmall issue{{issue.id}}-weight">{{ issue.weight }}</span>
                                                            </div>
                                                        </div>
                                                        
                                                        <div id="submenu{{issue.id}}" class="submenu" onmouseleave="issuout(this)" style="
                                                                position: absolute;
                                                                left: 214px;
                                                                top: -1px;
                                                                width:300px;
                                                                z-index:1200;
                                                                display:none;
                                                                background-color:#f7f7f7;
                                                                flex-direction: column;
                                                                border: 1px solid #cdcdcd;
                                                                border-radius: .25rem;
                                                            ">

                                                            <div id="viewissu{{ issue.id }}" class="viewissu mb-2" data-issue="{{ issue.id }}" data-giteaid="{{issue.giteanumber}}" data-giteatitle="{{ issue.giteatitle }}">
                                                                <i class="btn fas fa-eye p-0 m-0 fa-fw pl-1 pl-1"></i>
                                                                <span style="cursor:pointer;">
                                                                    Aperçu Ticket
                                                                </span>
                                                            </div>
                                                            
                                                            <a target="_blank" href="{{issue.giteajson.html_url}}" style="cursor:pointer" class="modcolumn mb-2">
                                                                <i class="btn fa fa-file fa-fw p-0 m-0 pl-1 pl-1"></i>
                                                                <span>Modifier dans Gitea</span>
                                                            </a>
                                                            
                                                            <div id="modissu{{ issue.id }}" class="modissu mb-2" data-issue="{{ issue.id }}" data-giteaid="{{issue.giteanumber}}" data-giteatitle="{{ issue.giteatitle }}">
                                                                <i class="btn fas fa-weight-hanging p-0 m-0 fa-fw pl-1 pl-1"></i>
                                                                <span style="cursor:pointer;">
                                                                    Modifier le Poids = <span class="issue{{issue.id}}-weight">{{ issue.weight }}</span>
                                                                </span>
                                                            </div>                                                            

                                                            {% if issue.scrumissueblock is empty %}
                                                            <div id="lockissu{{ issue.id }}" class="lockissu mb-2" data-issue="{{ issue.id }}" data-giteaid="{{issue.giteanumber}}" data-giteatitle="{{ issue.giteatitle }}">
                                                                <i class="btn fas fa-lock p-0 m-0 fa-fw pl-1 pl-1"></i>
                                                                <span style="cursor:pointer;">
                                                                    Ajouter ce ticket comme bloquant à
                                                                </span>
                                                            </div>        
                                                            {% else %}                      
                                                            <div id="unlockissu{{ issue.id }}" class="unlockissu mb-2" data-issue="{{ issue.id }}" data-giteaid="{{issue.giteanumber}}" data-giteatitle="{{ issue.giteatitle }}">
                                                                <i class="btn fas fa-lock p-0 m-0 fa-fw pl-1 pl-1"></i>
                                                                <span style="cursor:pointer;">
                                                                    N'est plus bloquant pour #{{ issue.scrumissueblock.giteanumber}}
                                                                </span>
                                                            </div>        
                                                            {% endif %}   

                                                            <div id="assigneissu{{ issue.id }}" class="assigneissu mb-2" data-issue="{{ issue.id }}" data-giteaid="{{issue.giteanumber}}" data-giteatitle="{{ issue.giteatitle }}">
                                                                <i class="btn fas fa-users p-0 m-0 fa-fw pl-1 pl-1"></i>
                                                                <span style="cursor:pointer;">
                                                                    Affecté à
                                                                </span>
                                                            </div>  

                                                            <div id="notesissu{{ issue.id }}" class="notesissu mb-2" data-issue="{{ issue.id }}" data-giteaid="{{issue.giteanumber}}" data-giteatitle="{{ issue.giteatitle }}">
                                                                <i class="btn fas fa-clipboard p-0 m-0 fa-fw pl-1 pl-1"></i>
                                                                <span style="cursor:pointer;">
                                                                    Notes
                                                                </span>
                                                            </div>  

                                                            <div>
                                                                <input type="text" id="colorissu{{ issue.id }}" data-issue="{{ issue.id }}" class="pick-a-color form-control form-control spectrum sp-colorize" value="{{issue.color}}" autocomplete="off">
                                                            </div>
                                                        </div>

                                                        <div id="issu-detail{{ issue.id }}" class="card-body p-1 issu-detail">
                                                            <div>
                                                            {% for label in issue.giteajson.labels %}
                                                                {% if label.id not in giteacolumns and label.id in giteaprioritys %}
                                                                    <span class="btn-link tag" style="background-color:#{{label.color}}">
                                                                        <i class="fas fa-clock"></i>
                                                                        {{ label.name }}
                                                                    </span>
                                                                {% endif %}
                                                            {% endfor %}
                                                            </div>

                                                            <div>
                                                            {% for label in issue.giteajson.labels %}
                                                                {% if label.id not in giteacolumns and label.id in giteatypes %}
                                                                    <span class="btn-link tag" style="background-color:#{{label.color}}">
                                                                        <i class="fas fa-quote-right"></i>
                                                                        {{ label.name }}
                                                                    </span>
                                                                {% endif %}
                                                            {% endfor %}
                                                            </div> 

                                                            <div>                                               
                                                            {% for label in issue.giteajson.labels %}
                                                                {% if label.id not in giteacolumns and label.id in giteateams %}
                                                                    <span class="btn-link tag" style="background-color:#{{label.color}}">
                                                                        <i class="fas fa-users"></i>
                                                                        {{ label.name }}
                                                                    </span>
                                                                {% endif %}
                                                            {% endfor %}
                                                            </div>

                                                            <div>
                                                            {% for label in issue.giteajson.labels %}
                                                                {% if label.id not in giteacolumns and label.id not in giteateams and label.id not in giteaprioritys and label.id not in giteatypes %}
                                                                    <span class="btn-link tag" style="background-color:#{{label.color}}">
                                                                        <i class="fas fa-tag"></i>
                                                                        {{ label.name }}
                                                                    </span>
                                                                {% endif %}
                                                            {% endfor %}
                                                            </div>

                                                            <div>
                                                            {% for assignee in issue.giteajson.assignees %}
                                                                <img src="{{assignee.avatar_url}}" class="assignee" title="{{assignee.username}}">
                                                            {% endfor %}
                                                            </div>

                                                            <div id="modissu{{ issue.id }}" class="modissu btn btn-link d-flex justify-content-end align-items-center" data-issue="{{ issue.id }}" data-giteaid="{{issue.giteanumber}}" data-giteatitle="{{ issue.giteatitle }}" type="button">
                                                                <i class="fas fa-weight-hanging"></i> = <span class="issue{{issue.id}}-weight">{{ issue.weight }}</span>
                                                            </div>

                                                            <div class="d-flex text-small">
                                                                <div class="text-small">Crée le {{issue.giteajson.created_at|date("d/m/y")}}</div>
                                                                <div class="text-small text-right ml-auto">Modifié le {{issue.giteajson.updated_at|date("d/m/y")}}</div>
                                                            </div>

                                                            <div class="text-small">
                                                                <div class="text-small">Par {{issue.giteajson.user.login}}</div>
                                                                {% if issue.giteastate=="closed" %}
                                                                    <div class="text-small text-right ml-auto">
                                                                    Clos le {{issue.giteajson.closed_at|date("d/m/y")}}
                                                                    </div>
                                                                {% endif %}
                                                            </div>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            {% endfor %}                                
                                        </ul>           
                                    </div>
                                </div>
                            {% endfor %}
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <div id="mymodalissue" class="modal" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                
                <div class="modal-body">
                    <div class="form-group ">
                        <label class="control-label required" for="issu_weight">
                            Poid
                        </label>
                        <input type="hidden" id="modal-issueid" name="modal-issueid" required="required" class=" form-control" value="">
                        <input type="integer" id="modal-issueweight" name="modal-issueweight" required="required" class=" form-control" value="">
                    </div>
                    <button id="issu_update" class="btn btn-success">Enregistrer</button>
                </div>            
            </div>
        </div>
    </div>

    <div id="mymodalblock" class="modal" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                
                <div class="modal-body">
                    <div class="form-group ">
                        <label class="control-label required" for="issu_weight">
                            Le ticket en cours bloque le ticket suivant
                        </label>
                        <input type="hidden" id="modal-issueid" name="modal-issueid" required="required" class=" form-control" value="">
                        <input type="integer" id="modal-issueblocked" name="modal-issueweight" required="required" class=" form-control" value="">
                    </div>
                    <button id="issu_blockupdate" class="btn btn-success">Enregistrer</button>
                </div>            
            </div>
        </div>
    </div>

    <div id="mymodalassignees" class="modal" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                
                <div class="modal-body">
                    <input type="hidden" id="modal-issueid" name="modal-issueid" required="required" class=" form-control" value="">

                    <div style="width:100%">
                        <label class="control-label required" for="issu_weight">
                            Affecté à
                        </label>
                        <select id="modal-assignees" multiple="multiple" class="form-control mb-3">
                            {% for giteaassignee in giteaassignees %}
                                <option value="{{giteaassignee.login}}">{{giteaassignee.login}}</option>
                            {% endfor %}
                        </select>
                    </div>                    
                    <button id="issu_assigne" class="btn btn-success mt-3">Enregistrer</button>
                </div>            
            </div>
        </div>
    </div>

    <div id="mymodalnotes" class="modal" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                
                <div class="modal-body">
                    <input type="hidden" id="modal-issueid" name="modal-issueid" required="required" class=" form-control" value="">

                    <div style="width:100%">
                        <textarea id="modal-notes" style="width:100%; height:300px;">
                        </textarea>
                    </div>                    
                    <button id="issu_notes" class="btn btn-success mt-3">Enregistrer</button>
                </div>            
            </div>
        </div>
    </div>

    {% set end = microtime(true) %}
    {% set duration = end - start %}
    <p>render time: {{ duration }} seconds</p>
{% endblock %}

{% block localjavascript %}
    function showFilters() {
        if($("#filters").hasClass("d-flex")) {
            toshow=0;
            $("#filters").addClass("d-none");
            $("#filters").removeClass("d-flex");
        }
        else {
            toshow=1;
            $("#filters").addClass("d-flex");
            $("#filters").removeClass("d-none");
        }

        $.ajax({
            method: "POST",
            url: "{{ path('app_user_preference') }}",
            data: {
                key:'showfilters',
                id:{{scrum.id}},
                value: toshow
            }
        });        
    }
    
    $(document).ready(function() {
        $(".issue").tooltip({
            content: function() {
                return $(this).data('tooltip'); // Utilise le contenu de l'attribut data-tooltip
            },
            items: '[data-tooltip]', // Spécifie les éléments qui déclenchent le tooltip
            html: true // Autorise le HTML dans le tooltip (si nécessaire pour certains tooltips personnalisés)
        });

        // Apply Filter
        function showhide() {
            // Vue condensée
            if($("#viewcondensed").is(':checked')) {
                $(".issu-detail").hide();
            }
            else {
                $(".issu-detail").show();
            }

            // Afficher masquer les jalons
            if($("#filtermilestones").val().length !== 0 && $("#filtersprints").val().length === 0) {
                $("[data-milestone]").hide();     
                $.each($("#filtermilestones").val(), function( index, value ) {
                    console.log(value);
                    $("[data-milestone="+value+"]").show();
                });
            }
            else $("[data-milestone]").show();

            // Afficher masquer les sprints
            if($("#filtersprints").val().length !== 0) {
                $("[data-millestonesprint]").hide();     
                $.each($("#filtersprints").val(), function( index, value ) {
                    $("[data-millestonesprint="+value+"]").show();
                });
            }
            else if($("#filtermilestones").val().length === 0)$("[data-millestonesprint]").show();

            $(".issue").show();
            
            $( ".issue" ).each(function( index ) {
                domissue=$(this);
                toshow=true;

                if(toshow&&$("#filterteams").val().length !== 0) {
                    toshow=false;
                    $.each($("#filterteams").val(), function( index, value ) {
                        if (domissue.hasClass("datateam"+value))
                            toshow=true;
                    });
                }

                if(toshow&&$("#filterprioritys").val().length !== 0) {
                    toshow=false;
                    $.each($("#filterprioritys").val(), function( index, value ) {
                        if (domissue.hasClass("datapriority"+value))
                            toshow=true;
                    });
                }

                if(toshow&&$("#filtertypes").val().length !== 0) {
                    toshow=false;
                    $.each($("#filtertypes").val(), function( index, value ) {
                        if (domissue.hasClass("datatype"+value))
                            toshow=true;
                    });
                }

                if(toshow&&$("#filterlabels").val().length !== 0) {
                    toshow=false;
                    $.each($("#filterlabels").val(), function( index, value ) {
                        if(domissue.hasClass("datalabel"+value))
                            toshow=true;
                    });
                }

                if(toshow&&$("#filterassignees").val().length !== 0) {
                    toshow=false;
                    $.each($("#filterassignees").val(), function( index, value ) {
                        if (domissue.hasClass("dataassignee"+value))
                            toshow=true;
                    });
                }

                if(toshow&&$("#filterexcludes").val().length !== 0) {
                    $.each($("#filterexcludes").val(), function( index, value ) {
                        if(domissue.hasClass("datalabel"+value))
                            toshow=false;
                    });
                }

                if(!toshow) domissue.hide();
            });

            textfilters="";
            if($("#filtermilestones").val().length!==0) {
                data = $("#filtermilestones").select2('data');
                textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>JALONS</b> =";
                $.each($("#filtermilestones").val(), function( index, value ) {
                    if(index>0)textfilters=textfilters+" &";
                    textfilters=textfilters+" "+data[index].text;
                });
            }

            if($("#filtersprints").val().length!==0) {
                data = $("#filtersprints").select2('data');
                textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>SPRINT</b> =";
                $.each($("#filtersprints").val(), function( index, value ) {
                    if(index>0)textfilters=textfilters+" &";
                    textfilters=textfilters+" "+data[index].text;
                });
            }

            if($("#filterteams").val().length!==0) {
                data = $("#filterteams").select2('data');
                textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>EQUIPES</b> =";
                $.each($("#filterteams").val(), function( index, value ) {
                    if(index>0)textfilters=textfilters+" &";
                    textfilters=textfilters+" "+data[index].text;
                });
            }

            if($("#filterprioritys").val().length!==0) {
                data = $("#filterprioritys").select2('data');
                textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>EQUIPES</b> =";
                $.each($("#filterprioritys").val(), function( index, value ) {
                    if(index>0)textfilters=textfilters+" &";
                    textfilters=textfilters+" "+data[index].text;
                });
            }

            if($("#filtertypes").val().length!==0) {
                data = $("#filtertypes").select2('data');
                textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>EQUIPES</b> =";
                $.each($("#filtertypes").val(), function( index, value ) {
                    if(index>0)textfilters=textfilters+" &";
                    textfilters=textfilters+" "+data[index].text;
                });
            }

            if($("#filterlabels").val().length!==0) {
                data = $("#filterlabels").select2('data');
                textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>ETIQUETTES</b> =";
                $.each($("#filterlabels").val(), function( index, value ) {
                    if(index>0)textfilters=textfilters+" &";
                    textfilters=textfilters+" "+data[index].text;
                });
            }

            if($("#filterassignees").val().length!==0) {
                data = $("#filterassignees").select2('data');
                textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>AFFECTATIONS</b> =";
                $.each($("#filterassignees").val(), function( index, value ) {
                    if(index>0)textfilters=textfilters+" &";
                    textfilters=textfilters+" "+data[index].text;
                });
            } 

            if($("#filterexcludes").val().length!==0) {
                data = $("#filterexcludes").select2('data');
                textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>EXCLURE ETIQUETTES</b> =";
                $.each($("#filterexcludes").val(), function( index, value ) {
                    if(index>0)textfilters=textfilters+" &";
                    textfilters=textfilters+" "+data[index].text;
                });
            }


            $("#textfilters").html(textfilters);       
        }


        $(document).on('click','.viewissu',function(){
            $(".submenu").hide();
            url="{{path('app_scrumissue_view',{id:"xxx"})}}";
            url=url.replace("xxx",$(this).data("issue"));

            ModalLoad('mymodallarge','Aperçu Ticket',url);
        });

        $(document).on('click','.lockissu',function(){
            $(".modal-title").html("#"+$(this).data("giteaid")+" - "+$(this).data("giteatitle"));
            $("#modal-issueid").val($(this).data("issue"));
            $("#modal-issueblocked").val("");
            $("#mymodalblock").modal('show');
            $("#modal-issueblocked").focus();
        });

        $("#issu_blockupdate").click(function(){
            $.ajax({
                method: "POST",
                url: "{{path("app_scrumissue_block")}}",
                data: {
                    id:$("#modal-issueid").val(),
                    issueblocked:$("#modal-issueblocked").val(),
                },
                success: function(data) {
                    location.reload();
                },
                error: function (request, status, error) {
                    $("#issueblocked").modal('hide');
                }
            });        
        });

        $(document).on('click','.unlockissu',function(){
            if (window.confirm("Souhaitez-vous enlever le blocage ?")) {
                $.ajax({
                    method: "POST",
                    url: "{{path("app_scrumissue_unblock")}}",
                    data: {
                        id:$(this).data("issue"),
                    },
                    success: function(data) {
                        location.reload();
                    },
                    error: function (request, status, error) {
                        alert("pb sur le déblocage");
                    }
                });  
            }
        });

        $(document).on('click','.modissu',function(){
            $(".modal-title").html("#"+$(this).data("giteaid")+" - "+$(this).data("giteatitle"));
            $("#modal-issueid").val($(this).data("issue"));
            
            $.ajax({
                method: "POST",
                url: "{{path("app_scrumissue_info")}}",
                data: {
                    id:$("#modal-issueid").val(),
                },
                success: function(data) {
                    $("#modal-issueweight").val(data.weight);
                    $("#mymodalissue").modal('show');
                    $("#modal-issueweight").focus();
                },
            });                   
        });

        $("#issu_update").click(function(){
            $.ajax({
                method: "POST",
                url: "{{path("app_scrumissue_update")}}",
                data: {
                    id:$("#modal-issueid").val(),
                    weight:$("#modal-issueweight").val(),
                },
                success: function(data) {
                    $(".issue"+$("#modal-issueid").val()+"-weight").html($("#modal-issueweight").val());
                    refreshinfo();
                    $("#mymodalissue").modal('hide');
                },
                error: function (request, status, error) {
                    $("#mymodalissue").modal('hide');
                }
            });        
        });

        $(".pick-a-color").on("change", function() {
            $.ajax({
                method: "POST",
                url: "{{path("app_scrumissue_color")}}",
                data: {
                    id:$(this).data("issue"),
                    color:$(this).val(),
                },
                success: function(data) {
                    location.reload();
                },
                error: function (request, status, error) {
                    alert("pb sur le set color");
                }
            });  
        });

        $(document).on('click','.assigneissu',function(){
            $(".modal-title").html("#"+$(this).data("giteaid")+" - "+$(this).data("giteatitle"));
            $("#modal-issueid").val($(this).data("issue"));


            $.ajax({
                method: "POST",
                url: "{{path("app_scrumissue_info")}}",
                data: {
                    id:$("#modal-issueid").val(),
                },
                success: function(data) {
                    var tbassignees=[];
                    if(data.giteajson.assignees) {
                        for (let assignee of data.giteajson.assignees) {
                            tbassignees.push(assignee.login);
                        }
                    }

                    $('#modal-assignees').select2();
                    $('#modal-assignees').val(tbassignees);
                    $('#modal-assignees').trigger('change');

                    $("#mymodalassignees").modal('show');
                    $(".submenu").hide();
                    $("#modal-assignees").focus();                    
                },
            });             
        });

        $("#issu_assigne").click(function(){
            $.ajax({
                method: "POST",
                url: "{{path("app_scrumissue_assigne")}}",
                data: {
                    id:$("#modal-issueid").val(),
                    assignees: $("#modal-assignees").val(),
                },
                success: function(data) {
                    location.reload();
                },
                error: function (request, status, error) {
                    alert("pb sur l'affectation au ticket");
                }
            });        
        });        

        $(document).on('click','.notesissu',function(){
            $(".modal-title").html("#"+$(this).data("giteaid")+" - "+$(this).data("giteatitle"));
            $("#modal-issueid").val($(this).data("issue"));


            $.ajax({
                method: "POST",
                url: "{{path("app_scrumissue_info")}}",
                data: {
                    id:$("#modal-issueid").val(),
                },
                success: function(data) {
                    $('#modal-notes').val(data.notes);

                    $("#mymodalnotes").modal('show');
                    $(".submenu").hide();
                    $("#modal-notes").focus();                    
                },
            });             
        });

        $("#issu_notes").click(function(){
            $.ajax({
                method: "POST",
                url: "{{path("app_scrumissue_notes")}}",
                data: {
                    id:$("#modal-issueid").val(),
                    notes: $("#modal-notes").val(),
                },
                success: function(data) {
                    location.reload();
                },
                error: function (request, status, error) {
                    alert("pb sur enregistrement du ticket");
                }
            });        
        });  

        // Filter Milestones
        function filtermilestones() {
            $.ajax({
                method: "POST",
                url: "{{ path('app_user_preference') }}",
                data: {
                    key:'filtermilestones',
                    id:{{scrum.id}},
                    value: $("#filtermilestones").val()
                }
            });

            showhide();
        }

        $('#filtermilestones').select2();
        {% if filtermilestones %}
            {% for milestone in filtermilestones %}
                $("#filtermilestones").val($("#filtermilestones").val().concat("{{milestone}}"));
            {%endfor%}
            $('#filtermilestones').trigger('change');
        {% endif %}
        $('#filtermilestones').on("select2:select", function(e) {
            filtermilestones(); 
        });
        $('#filtermilestones').on("select2:unselect", function(e) { 
            filtermilestones();
        });

        // Filter Sprint
        function filtersprints() {
            $.ajax({
                method: "POST",
                url: "{{ path('app_user_preference') }}",
                data: {
                    key:'filtersprints',
                    id:{{scrum.id}},
                    value: $("#filtersprints").val()
                }
            });

            showhide();
        }

        $('#filtersprints').select2({sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),});
        {% if filtersprints %}
            {% for sprint in filtersprints %}
                $("#filtersprints").val($("#filtersprints").val().concat("{{sprint}}"));
            {%endfor%}
            $('#filtersprints').trigger('change');
        {% endif %}
        $('#filtersprints').on("select2:select", function(e) {
            filtersprints(); 
        });
        $('#filtersprints').on("select2:unselect", function(e) { 
            filtersprints();
        });

        // Filter Teams
        function filterteams() {
            $.ajax({
                method: "POST",
                url: "{{ path('app_user_preference') }}",
                data: {
                    key:'filterteams',
                    id:{{scrum.id}},
                    value: $("#filterteams").val()
                }
            });

            showhide();
        }

        $('#filterteams').select2();
        {% if filterteams %}
            {% for team in filterteams %}
                $("#filterteams").val($("#filterteams").val().concat("{{team}}"));
            {%endfor%}
            $('#filterteams').trigger('change');
        {% endif %}
        $('#filterteams').on("select2:select", function(e) {
            filterteams(); 
        });
        $('#filterteams').on("select2:unselect", function(e) { 
            filterteams();
        });

        // Filter Proritys
        function filterprioritys() {
            $.ajax({
                method: "POST",
                url: "{{ path('app_user_preference') }}",
                data: {
                    key:'filterprioritys',
                    id:{{scrum.id}},
                    value: $("#filterprioritys").val()
                }
            });

            showhide();
        }

        $('#filterprioritys').select2();
        {% if filterprioritys %}
            {% for priority in filterprioritys %}
                $("#filterprioritys").val($("#filterprioritys").val().concat("{{priority}}"));
            {%endfor%}
            $('#filterprioritys').trigger('change');
        {% endif %}
        $('#filterprioritys').on("select2:select", function(e) {
            filterprioritys(); 
        });
        $('#filterprioritys').on("select2:unselect", function(e) { 
            filterprioritys();
        });

        // Filter Types
        function filtertypes() {
            $.ajax({
                method: "POST",
                url: "{{ path('app_user_preference') }}",
                data: {
                    key:'filtertypes',
                    id:{{scrum.id}},
                    value: $("#filtertypes").val()
                }
            });

            showhide();
        }

        $('#filtertypes').select2();
        {% if filtertypes %}
            {% for type in filtertypes %}
                $("#filtertypes").val($("#filtertypes").val().concat("{{type}}"));
            {%endfor%}
            $('#filtertypes').trigger('change');
        {% endif %}
        $('#filtertypes').on("select2:select", function(e) {
            filtertypes(); 
        });
        $('#filtertypes').on("select2:unselect", function(e) { 
            filtertypes();
        });

        // Filter Labels
        function filterlabels() {
            $.ajax({
                method: "POST",
                url: "{{ path('app_user_preference') }}",
                data: {
                    key:'filterlabels',
                    id:{{scrum.id}},
                    value: $("#filterlabels").val()
                }
            });

            showhide();
        }
        $('#filterlabels').select2();
        {% if filterlabels %}
            {% for label in filterlabels %}
                $("#filterlabels").val($("#filterlabels").val().concat("{{label}}"));
            {%endfor%}
            $('#filterlabels').trigger('change');
        {% endif %}
        $('#filterlabels').on("select2:select", function(e) {
            filterlabels(); 
        });
        $('#filterlabels').on("select2:unselect", function(e) { 
            filterlabels();
        });

        // Filtre Assignees
        function filterassignees() {
            $.ajax({
                method: "POST",
                url: "{{ path('app_user_preference') }}",
                data: {
                    key:'filterassignees',
                    id:{{scrum.id}},
                    value: $("#filterassignees").val()
                }
            });

            showhide();
        }
        $('#filterassignees').select2();
        {% if filterassignees %}
            {% for assignee in filterassignees %}
                $("#filterassignees").val($("#filterassignees").val().concat("{{assignee}}"));
            {%endfor%}
            $('#filterassignees').trigger('change');
        {% endif %}
        $('#filterassignees').on("select2:select", function(e) {
            filterassignees(); 
        });
        $('#filterassignees').on("select2:unselect", function(e) { 
            filterassignees();
        });

        // Filter Labels
        function filterexcludes() {
            $.ajax({
                method: "POST",
                url: "{{ path('app_user_preference') }}",
                data: {
                    key:'filterexcludes',
                    id:{{scrum.id}},
                    value: $("#filterexcludes").val()
                }
            });

            showhide();
        }
        $('#filterexcludes').select2();
        {% if filterexcludes %}
            {% for label in filterexcludes %}
                $("#filterexcludes").val($("#filterexcludes").val().concat("{{label}}"));
            {%endfor%}
            $('#filterexcludes').trigger('change');
        {% endif %}
        $('#filterexcludes').on("select2:select", function(e) {
            filterexcludes(); 
        });
        $('#filterexcludes').on("select2:unselect", function(e) { 
            filterexcludes();
        });

        // View condensed
        {% if viewcondensed %}
            $("#viewcondensed").prop( "checked", {{ viewcondensed }} )
        {% endif %}

        $('#viewcondensed').change(function() {
            $.ajax({
                method: "POST",
                url: "{{ path('app_user_preference') }}",
                data: {
                    key:'viewcondensed',
                    id:{{scrum.id}},
                    value: this.checked
                }
            }).done(function( data ) {
                showhide();
            });   
        }); 


        // Resume filtre
        {% if not showfilters %}
        $("#filters").addClass("d-none");
        $("#filters").removeClass("d-flex");
        {% endif %}

        // Appliy filters
        showhide();
        refreshinfo();
        $("#mycontent").show();

        lastupdate="{{updatedate|date("Ymd H:i")}}";
        console.log(lastupdate);

        
        $( ".scrumcolumn" ).sortable({
            handle: ".issu-id",
            connectWith: ".scrumcolumn",
            cursor: "move",
            start: function( event, ui ) {
                $(".submenu").hide();
            },
            stop: function( event, ui ) {
                id=$(ui.item).data("issue");
                oldcolumn=$(ui.item).data("column");
                oldmilestone=$(ui.item).data("milestone");
                oldsprint=$(ui.item).data("sprint");
                newcolumn=$(ui.item).parent().data("column");
                newmilestone=$(ui.item).parent().data("milestone");
                newsprint=$(ui.item).parent().data("sprint");
                console.log("ID = "+id+" = Column : "+oldcolumn+">>"+newcolumn+" = Milestone : "+oldmilestone+">>"+newmilestone+" = Sprint : "+oldsprint+">>"+newsprint );

                if(oldcolumn!=newcolumn||oldmilestone!=newmilestone||oldsprint!=newsprint) {
                    $.ajax({
                        method: "POST",
                        url: "{{path("app_scrumissue_change")}}",
                        data: {
                            id:id,
                            oldcolumn:oldcolumn,
                            oldmilestone:oldmilestone,
                            oldsprint:oldsprint,
                            newcolumn:newcolumn,
                            newmilestone:newmilestone,
                            newsprint:newsprint
                        },
                        success: function(data) {
                            $(ui.item).data("column",newcolumn);
                            $(ui.item).data("milestone",newmilestone);
                            $(ui.item).data("sprint",newsprint);
                            if(data) lastupdate=data;
                            console.log(lastupdate);

                            refreshinfo();                            
                        },
                        error: function (request, status, error) {
                            $( ".scrumcolumn" ).sortable('cancel');
                        }
                    });                
                }               

                lstordered="";
                $(".scrumcolumn div" ).each(function( index ) {
                    if($(this).data("id")) {
                        if(index==0) lstordered=$(this).data("id");
                        else lstordered=lstordered+","+$(this).data("id");
                    }    
                }); 

                $.ajax({
                    method: "POST",
                    url: "{{path("app_scrumissue_order")}}",
                    data: {
                        id:{{scrum.id}},
                        lstordered:lstordered,
                    }
                });
            },
        });  
        
        var intervalId = window.setInterval(function(){
            $.ajax({
                method: "POST",
                url: "{{path("app_scrumissue_ctrlchange")}}",
                data: {
                    id:{{scrum.id}},
                    lastupdate:lastupdate
                },
                success: function(fgupdated) {
                    if(fgupdated=="1") {
                        $("#haveupdate").show();
                    }
                }
            });                  
        }, 300000);
                 
    });


    function refreshinfo() {
        $.ajax({
            method: "POST",
            url: "{{path("app_scrum_info",{id:scrum.id})}}",
            success: function(data) {
                html="";
                $("[data-weight]").html("");

                Object.entries(data.tbestim).forEach(entry => {
                    const [keyj, jalon] = entry;
                    
                    html+='<table style="color:var(--colorftbodydark);zoom:75%; width:100%; border:1px solid var(--colorbgbodylight)">';
                    html+='<tr>';
                    html+='<td class="pl-1">'+jalon.nmjal+'</td>';
                    html+='<td class="pr-1" style="width:30px;text-align:right;">'+jalon.nbjrs+'</span></td>';
                    html+='</tr>';
                    
                    nofirst=false;
                    Object.entries(jalon.sprints).forEach(entry => {
                        const [keys, sprint] = entry;
                        if(nofirst || sprint.idspr!=-100) {
                            html+='<tr>';
                            html+='<td class="pl-1">'+sprint.nmspr+'</td>';
                            html+='<td class="pr-1" style="width:30px;text-align:right;">'+sprint.nbjrs+'</span></td>';
                            html+='</tr>';
                        }

                        Object.entries(sprint.columns).forEach(entry => {
                            const [keys, column] = entry;
                            $("[data-weight="+column.gicol+"-"+jalon.gijal+"-"+sprint.idspr+"]").html(column.nbjrs);

                        });
                        nofirst=true;
                    });              

                    html+='</table>';
                });

                $("#tbestim").html(html);
            }
        });
    }

    function issuhover(btn,idissu) {
        $(".submenu").hide();
        $("#submenu"+idissu).css("display","flex");
    } 

    function issuout(menu) {
        $(menu).css("display","none");
    }
{% endblock %}