{% extends 'base.html.twig' %}
{% block title %}Mes tickets{% endblock %}
{% block body %}
<script>
    var filter = '';
    var selectedVersion = '';
    var currentURL = window.location.href;

    function setVersionPopup(version, idVersion){
        //selectedVersion = $(this).attr("versionName");
        $('a[versionname="' + version + '"]').parent().addClass("selected");
        console.log("selectedVersion = " + version);
        $('#popupTitleVersionName').text(version);
        $('#popupTitleVersionId').text(idVersion);
        selectedVersion = version;

        //$('#versionName').text(selectedVersion);
        $('#ticketProjectLinkPopup').modal('show');

        //console.log("selectedVersion2 = " + $('#popupTitleVersionName').text());

    }

    function addTicketToSprint(idTicket, idProject){
        selectedVersion = $('#popupTitleVersionName').text();
        var idVersion = $('#popupTitleVersionId').text();
        console.log("idTicket = " + idTicket + ", idProject = " + idProject + ", selectedVersion = " + selectedVersion + ", versionId = " + idVersion);
        window.location.href = "/versions/add-ticket/" + idProject + "/" + selectedVersion + "/" + idTicket + "/" + idVersion;
        //window.location.href = "/project/" + idProject + "/content";
    }
    $(document).ready(function () {
        var projet = '<a href="/projects/{{ project.id }}/">{{ project.projectName }}</a>'; 
        $(".page-title h1").text("Tickets du projet {{ project.projectName }}");
        $(".bandeau-img img").attr("src","https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/icon_ticket.png");

        

        /* Datatable de tickets */
        var ticketsTable = $('#TicketsTable').DataTable({
            "columnDefs": [
                { "width": "8%", "targets": 0 }
            ],
            /*"search": {
                return: true
            },*/
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/tickets/ajax-list-project',
                data: {
                    project_id : {{ project_id }},
                },
                dataSrc: 'data',
                dataType: 'json',
            },
            ordering: true,
            paging: true,
            searching: true,
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Enter Last Name"
            },
            columns: [
                { data: 'parentID' },
                { data: 'refID' },
                { data: 'type' },
                { data: 'ticketTitle' },
                { data: 'ticketAssignation' },
                { data: 'ticketStatus' },
                { data: 'ticketEstimation' },
                { data: 'ticketSpent' },
                { data: 'ticketAvancement' },
                { data: 'ticketRAF' },
                { data: 'ticketComments' },
                { data: 'actions' }
            ]
        });

        /* Datatable de selection des tickets */
        var ticketProjectLinkTable = $('#ticketProjectLinkTable').DataTable({
            search: {
                return: true
            },
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/ajax-tickets-version-selector/',
                data: {
                    project_id : "{{ project.id }}"
                },
                dataSrc: 'data',
                dataType: 'json',
            },
            ordering: true,
            paging: false,
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Enter Last Name"
            },
            columns: [
                { data: 'parentID' },
                { data: 'refID' },
                { data: 'version' },
                { data: 'type' },
                { data: 'ticketTitle' },
                { data: 'ticketAssignation' },
                { data: 'ticketStatus' },
                { data: 'ticketComments' },
                { data: 'actions' }
                
            ]
        });

        $('#btn-ticket-creator').click(function(){
            filter = 'creator';
            $('#TicketsTable').DataTable().ajax.reload();
        })

        $('#btn-ticket-assignee').click(function(){
            filter = 'assignee';
            $('#TicketsTable').DataTable().ajax.reload();
        })

        $('#btn-ticket-responsable').click(function(){
            filter = 'responsable';
            $('#TicketsTable').DataTable().ajax.reload();
        })

        $('#btn-create-sprint').click(function(){
            $('#sprintPopup').modal('show');
        })

        $('#btn-link-ticket-sprint').click(function(){

            selectedVersion = $(this).attr("versionName");

            $('#versionName').text(selectedVersion);
            $('#ticketProjectLinkPopup').modal('show');

        })

        $('#btn-save-sprint').click(function(){

            var sprintTitle = $('#sprintTitle').val();
            var sprintStart = $('#sprint_date_start').val();
            var sprintEnd = $('#sprint_date_end').val();
            var sprintComments = $('#sprint_comments').val();
            var color = $('#color').val();
            var backgroundColor = $('#backgroundColor').val();

            console.log("sprintStart = " + sprintStart + ", sprintEnd = " + sprintEnd);

            /* Alimentation de la liste des projets */
            $.ajax({
                url: '/version/ajax-add',
                method: "get",
                dataType: "json",
                data: {
                    project_id : "{{ project.id }}",
                    sprint_title: sprintTitle,
                    sprint_start: sprintStart,
                    sprint_end: sprintEnd,
                    sprint_comments: sprintComments,
                    backgroundColor: backgroundColor,
                    color: color
                },
                success: {

                }
            }).done(function (response) {
                var data = response.data;

                console.log('data = ' + data);

                window.location.href = currentURL;

                /*for (var index = 0; index <= data.length-1; index++) {
                    var project = data[index].row;
                    $('#task_project').append(project);
                }*/

            }).fail(function (response) {
                alert("Une erreur est survenue à l'insertion du sprint. Veuillez réessayer plus tard.");
            });

            //version/ajax-add

        })
    })
</script>
<script>
    
</script>
<!-- Popup sprint::begin -->
<div class="modal fade" id="sprintPopup" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content digi-modal">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Création d'une version</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
            <label for="sprint_title" class="form-label">Nom de la version</label>
            <input type="text" name="sprint_title" id="sprintTitle" class="form-control" placeholder="Nommer le sprint">
        </div>
        <div class="mb-3" style="display: flex;justify-content: space-between; margin-left: 5%; margin-right: 5%;">
            <div>
                <label for="sprint_date_start" class="form-label">Date de démarrage</label>
                <input type="date" id="sprint_date_start" class="form-control" placeholder="Date de démarrage">
            </div>
            <div>
                <label for="sprint_date_end" class="form-label">Date d'échéance</label>
                <input type="date" id="sprint_date_end" class="form-control" placeholder="Date d'échéance">
            </div>
        </div>
        <div class="mb-3">
            <label for="sprint_comments" class="form-label">Commentaires</label>
            <textarea id="sprint_comments" class="form-control" name="sprint_comments" placeholder="Décrire le sprint" rows="7" cols="20"></textarea>
         </div>

         <!-- Couleur du texte -->
        <div class="mb-3">
            <label for="color" class="form-label">Couleur à associer au texte</label>
            <input type="color" class="form-control form-control-color" id="color" value="#ffffff" title="Sélectionner une couleur">
            <div id="emailHelp" class="form-text">Choisir une couleur pour le texte</div>
        </div>

        <!-- Couleur du statut -->
        <div class="mb-3">
            <label for="backgroundColor" class="form-label">Couleur à associer au fond</label>
            <input type="color" class="form-control form-control-color" id="backgroundColor" value="#563d7c" title="Sélectionner une couleur">
            <div id="emailHelp" class="form-text">Choisir une couleur pour le fond</div>
        </div>

      </div>
      <div class="modal-footer pos-controls" style="display: block;">
        <div class="d-flex my-4 pos-right">
            <a id="btn-save-sprint" class="btn btn-digi" style="color: #ffffff;">
                <i class="fa-solid fa-floppy-disk" style="color: #ffffff;"></i>                          
                <!--begin::Indicator label-->
                <span class="indicator-label">Enregistrer</span>
                <!--end::Indicator label-->
            </a>
        </div>
        <div class="d-flex my-4 pos-left">
            <a id="btn-quit-sprint" data-bs-dismiss="modal" class="btn btn-digi red" style="color: #ffffff;">
                <i class="fa-solid fa-door-open" style="color: #ffffff;"></i>                          
                <!--begin::Indicator label-->
                <span class="indicator-label">Quitter</span>
                <!--end::Indicator label-->
            </a>
        </div>
        <!--button type="button" id="btnSaveComment" class="btn-digi pos-right"><i class="fa-solid fa-floppy-disk"></i>&nbsp;Enregistrer</button>
        <button type="button" id="btnCancelComment" class="btn-digi red pos-left"><i class="fa-solid fa-floppy-disk"></i>&nbsp;Quitter</button-->
      </div>
    </div>
  </div>
</div>
<!-- Popup estimation::end -->
<!-- start ticket selection popup -->
<div class="modal fade modal-dialog-scrollable" id="ticketProjectLinkPopup" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content digi-modal">
      <div class="digi-modal-header">
        <div class="popup-header-title" style="display: flex; align-items: baseline;"><h1 class="modal-title fs-5" id="ticketSelectionPopupTitle">Ajouter un ticket à la version </h1>&nbsp;&nbsp;<span id="popupTitleVersionName"></span><span id="popupTitleVersionId" style="display:none;"></span></div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="digi-modal-body">
        <div class="card-body pt-0">
            <!-- Tickets Datatable -->
            <table id="ticketProjectLinkTable" class="dataTable hover striped rounded" style="width: 100%;">
                <thead>
                    <tr>
                        <th>Ticket parent</th>
                        <th># Ticket</th>
                        <th>Version</th>
                        <th>Type de demande</th>
                        <th>Titre</th>
                        <th>Assigné à</th>
                        <th>Statut</th>
                        <th>Commentaires</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
      </div>
      <div class="digi-modal-footer pos-controls" style="display: block;">
        <div class="d-flex my-4 pos-left">
            <a id="btn-quit-project-user-selection-modal" data-bs-dismiss="userSelectionPopup" class="btn btn-digi red" style="color: #ffffff; background-color: red;">
                <i class="fa-solid fa-door-open" style="color: #ffffff;"></i>                          
                <!--begin::Indicator label-->
                <span class="indicator-label">Quitter</span>
                <!--end::Indicator label-->
            </a>
        </div>
        <!--button type="button" id="btnSaveComment" class="btn-digi pos-right"><i class="fa-solid fa-floppy-disk"></i>&nbsp;Enregistrer</button>
        <button type="button" id="btnCancelComment" class="btn-digi red pos-left"><i class="fa-solid fa-floppy-disk"></i>&nbsp;Quitter</button-->
      </div>
    </div>
  </div>
</div>
<!-- end ticket selection popup -->
<!--begin::Main-->
<div class="app-main flex-column flex-row-fluid " id="kt_app_main">
	<!--begin::Content wrapper-->
	<div class="d-flex flex-column flex-column-fluid">       
		<!--begin::Toolbar-->
		<div id="kt_app_toolbar" class="app-toolbar  py-3 py-lg-6 ">
            <!--begin::Toolbar container-->
        	<div id="kt_app_toolbar_container" class="app-container  container-xxl d-flex flex-stack ">
				<!--begin::Page title-->
				<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3 ">
					<!--begin::Title-->
					<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Multipurpose</h1>
					<!--end::Title-->
					<!--begin::Breadcrumb-->
					<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
							<a href="/" class="text-muted text-hover-primary">
                                Accueil                            
							</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-500 w-5px h-2px"></span>
						</li>
                    	<!--end::Item--> 
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            <a href="/projects/detail/{{ project.id }}" class="text-muted text-hover-primary">
                                Projet {{ project.projectName }}                                 
							</a>                    
						</li>
                        <!--end::Item-->
                        <!--begin::Item-->
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-500 w-5px h-2px"></span>
						</li>
                    	<!--end::Item--> 
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            Tickets                                 
						</li>
                        <!--end::Item-->            
                    </ul>
        			<!--end::Breadcrumb-->
    			</div>
				<!--end::Page title-->
				<!--begin::Actions-->
				<!--div class="d-flex align-items-center gap-2 gap-lg-3">
            		<a href="/uploads/projects/digistack-logo-6599e5052c381.png#" class="btn btn-sm fw-bold btn-secondary" data-bs-toggle="modal" data-bs-target="#kt_modal_create_app">Rollover</a>
					<a href="/user/add" class="btn btn-sm fw-bold btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_new_target">
						Ajouter un utilisateur
					</a>
				</div-->
			<!--end::Actions-->
			</div>
		<!--end::Toolbar container-->
		</div>
		<!--end::Toolbar-->                                        
                    
		<!--begin::Content-->
		<div id="kt_app_content" class="app-content  flex-column-fluid ">
			<!--begin::Content container-->
			<div id="kt_app_content_container" class="app-container  container-xxl ">
                <div class="digi-card card-flush">
                    <div class="card-header align-items-center py-2 gap-2 gap-md-5">
                        <!--div style="text-align: right;" class="from-label">Voir les tickets en tant que :</div-->
                        <!--begin::Card toolbar-->
                        <div class="card-toolbar flex-row-fluid justify-content-end gap-5" style="display: flex; justify-content: space-between !important;">
                            <!--begin::Add user-->
                            <a style="height: 40px;" href="/tickets-part1/0/add" class="btn btn-digi"><i class="fa-solid fa-plus" style="color: #ffffff;"></i>&nbsp;Créer une demande</a>
                            <a style="height: 40px;" id="btn-create-sprint" class="btn btn-digi-green"><i class="fa-solid fa-plus" style="color: #ffffff;"></i>&nbsp;Créer une nouvelle Version</a>
                        </div>
                        <!--end::Card toolbar-->
                        <!--begin::Card toolbar-->
                        <br>
                        <br>
                        <div class="card-toolbar flex-row-fluid justify-content-end gap-5" style="display: flex; justify-content: space-between !important;">
                            <h1>Backlog</h1>
                        </div>
                        <!--end::Card toolbar-->
                    </div>
                    <div class="card-body pt-0">
                        <!-- Users Datatable -->
                        <table id="TicketsTable" class="dataTable hover striped rounded display compact" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>Ticket parent</th>
                                    <th># Ticket</th>
                                    <th>Type de demande</th>
                                    <th>Titre</th>
                                    <th>Assigné à</th>
                                    <th>Statut</th>
                                    <th>Estimation</th>
                                    <th>Consommé</th>
                                    <th>Avancement</th>
                                    <th>Reste à faire</th>
                                    <th>Commentaires</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                {% for versionData in versionsData %}
                {% set version = versionData.version %}
                {% set percent = versionData.percent %}
                {% set count = versionData.count %}
                {% set intervenants = versionData.intervenants %}
                <br>
                <div class="digi-card card-flush">
                    <div class="card-header align-items-center py-2 gap-2 gap-md-5">
                        <!--div style="text-align: right;" class="from-label">Voir les tickets en tant que :</div-->
                        <!--begin::Card toolbar-->
                        <div class="card-toolbar flex-row-fluid justify-content-end gap-5" style="display: flex; justify-content: space-between !important;">
                            <!--begin::Add user-->
                            <div class="" id="btn-link-ticket-sprint"><a style="height: 40px;" versionName="{{ version.versionName }}" onClick="setVersionPopup('{{ version.versionName }}, {{ version.id }}')"  class="btn btn-digi"><i class="fa-solid fa-plus" style="color: #ffffff;"></i>&nbsp;Associer une demande à cette version</a></div>
                            <div class="" id="btn-archive-sprint"><a style="height: 40px;" class="btn btn-digi-green"><i class="fa-solid fa-plus" style="color: #ffffff;"></i>&nbsp;Archiver cette version</a></div>
                        </div>
                        <!--end::Card toolbar-->
                        <!--begin::Card toolbar-->
                        <br>
                        <br>
                        <div class="card-toolbar flex-row-fluid justify-content-end gap-5" style="display: flex; justify-content: space-between !important;">
                            <h3 id="selectionPopupVersionName" style="background-color: {{ version.backgroundColor }}; border-radius: 20px;"><a href="/version/{{ version.id }}/edit"><div style=" color: {{ version.color }}; margin-left: 20px; margin-right: 20px;">{{ version.versionName }}</div></a></h3>
                        </div>
                        <!--begin::Sprint infos section-->
                        <div class="sprint-infos-section">
                            <div style="font-weight: bold;">{{ version.versionTitle }} </div>
                            <div>Date de démarrage : <span>{{ version.versionStartDate|date('d/m/Y') }}</span></div>
                            <div>Date d'échéance : <span>{{ version.versionEndDate|date('d/m/Y') }}</span></div>
                            <div>Date de livraison prévue : <span>{{ version.estimatedDeliveryDate|date('d/m/Y') }}</span></div>
                            <br/>
                            <div>Intervenants : <span>{{ intervenants|raw }}</span></div>
                        </div>
                        <!--end::Sprint infos section-->
                        <div class="d-flex align-items-center flex-column mt-3 w-100">
                            <div class="d-flex justify-content-between fw-bold fs-6 text-white opacity-75 w-100 mt-auto mb-2">
                                <span style="color: black;">{{ count }} tickets à terminer</span>
                                <span style="color: blue;">{{ percent }}%</span>
                            </div>

                            <div class="h-8px mx-3 w-100 bg-opacity-50 rounded" style="background-color: {{ version.backgroundColor }} !important;">
                                <div class="rounded h-8px" role="progressbar" style="border: 1px solid #000; width: {{ percent }}%; background-color: {{ version.color }}; !important" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <!--end::Card toolbar-->
                    </div>
                    <div class="card-body pt-0">
                        <!-- Users Datatable -->
                        <table id="SprintTable" class="dataTable hover striped rounded display compact cell-border" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>Ticket parent</th>
                                    <th># Ticket</th>
                                    <th>Type de demande</th>
                                    <th>Titre</th>
                                    <th>Assigné à</th>
                                    <th>Statut</th>
                                    <th>Estimation</th>
                                    <th>Consommé</th>
                                    <th>Avancement</th>
                                    <th>Reste à faire</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% set tickets = versionData.tickets %}
                                {% if tickets|length == 0 %}
                                    <tr><td colspan=11><div style="text-align: center; background-color: #ECF0FD; color: black;">Aucun ticket n'a encore été associé à cette version.</div></td></tr>
                                {% else %}
                                    {% for ticket in tickets %}
                                    <tr>
                                        <td style="text-align: center;"><a href="/tickets/{{ ticket.parentID }}/detail">{{ ticket.parentID }}</a></td>
                                        <td><a href="/tickets/{{ ticket.id }}/detail">{{ ticket.fonctionalID }}</a></td>
                                        <td>{{ ticket.type }}</td>
                                        <td>{{ ticket.ticketTitle }}</td>
                                        <td>{{ ticket.assignee.displayName }}</td>
                                        <td><div style="width: 120px; text-align: center; background-color: {{ ticket.ticketStatus.color }}; color: {{ ticket.ticketStatus.textColor }}; border-radius: 20px;">{{ ticket.ticketStatus.statusName }}</div></td>
                                        <td>{{ ticket.ticketEstimation }} {{ ticket.ticketCostUnit }}</td>
                                        {% if ticket.ticketSpent is null %}
                                            <td>0 {{ ticket.ticketCostUnit }}</td>
                                        {% else %}
                                            <td>{{ ticket.ticketSpent }} {{ ticket.ticketCostUnit }}</td>
                                        {% endif %}
                                        <td>{{ ticket.progressPercent }} %</td>
                                        {% if ticket.ticketRAF is null %}
                                            <td>0 {{ ticket.ticketCostUnit }}</td>
                                        {% else %}
                                            <td>{{ ticket.ticketRAF }} {{ ticket.ticketCostUnit }}</td>
                                        {% endif %}
                                    </tr>
                                    {% endfor %}
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% endfor %}
			</div>
		</div>
	</div>
</div>
<!--end::Row-->  
{% endblock %}