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

{% block title %}Mes Tickets{% endblock %}

{% block body %}
<!--link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js" type="module"></script-->
<style>
  .form-control-focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.was-validated :valid + .form-control-focus {
  border-color: #198754;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.was-validated :invalid + .form-control-focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
</style>
<script>
    $(document).ready(function () {
        $(".page-title h1").text("Visualisation d'une demande");
        $(".bandeau-img img").attr("src","https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/icon_ticket.png");

        refreshEstimations();
        refreshTimes();
        /*$.getJSON("/activities/ajax-list/", function(result) {
            var options = $("#list_activities option");
            //don't forget error handling!
            $.each(result, function(item) {
                console.log('activityName => ' + item.activities.activityName);
                //options.append($("<option />").val(item.activityName).text(item.activityName));
            });
        });*/

        var typePointage = "";
        var currentUrl = window.location.href;

        /* Cnditions d'affichage des boutons d'actions */
        var assignee = {{ assignee.id }};
        var connectedUser = {{ user_id }};
        var realStart = "{{ ticketRealStartDate }}";
        var realEnd = "{{ ticketRealEndDate }}";

        /* Visible que pour l'utilisateur à qui le ticket est assigné */
        if( assignee == connectedUser ){

            if(( realStart == "" )&&( realEnd == "" )){
                $('#digi_ticket_start_button').removeClass('dig-hide');
            }

            if(( realStart !== "" )&&( realEnd == "" )){
                $('#digi_ticket_stop_button').removeClass('dig-hide');
                
            }

            if(( realStart !== "" )&&( realEnd !== "" )){
                $('#digi_ticket_archive_button').removeClass('dig-hide');
            }

        }

        $('#digi_ticket_stop_button').click(function() {

            var url = window.location.href;
            typePointage = 'ticket';

            $('#pointage_ticket_quantity').val( "{{ duree }}" );
            $('#pointageTicketPopup').modal('show');
            
        })

        $('#digi_ticket_start_button').click(function() {

            $('#digi-task-widget-task-label').html('<div style="color: blue; font-weight: bold;">Ticket en cours</div>');
            $('#digi-task-widget-task-id').html('<a href="/tickets/' + {{ ticket.id }} + '/details" target="_blank">{{ ticket.fonctionalID }}</a>');
            $('#digi-widget-btn-stop').css('color', 'red');

            var url = window.location.href;

            window.location.href = "/tickets/" + {{ ticketId }} + "/start";
            window.location.href = url;

        })

        $('#digi-widget-btn-stop').click(function() {
            window.location.href = "/tickets/" + {{ ticketId }} + "/stop"; 
        });

        /* Remontée des statuts d'un ticket */
        $.ajax({
            url: '/status/ajax-list',
            method: "get",
            dataType: "json",
            data: {
                object: "ticket"
            }
        }).done(function (response) {

            var data = response.data;
            let statusDropdown = $('#list_status');

            for (var index = 0; index <= data.length-1; index++) {

                var statusName = data[index].statusNames;
                var statusValue = data[index].statusValues;
                console.log('statusName => ' + statusName);
                statusDropdown.append('<option value="' + statusValue + '">' + statusName + '</option>');
                
            }
                
        }).fail(function (response) {
            alert("Une erreur est survenue à la récupération des statuts. Veuillez réessayer plus tard.");
        });
        

        $.ajax({
            url: '/activities/ajax-list/',
            method: "get",
            dataType: "json",
            data: {}
        }).done(function (response) {
            var data = response.activities;
            let activitiesDropdown = $('#list_activities');
            let activitiesPointageDropdown = $('#list_activities_pointage');
            let activitiesPointageTicketDropdown = $('#list_activities_pointage_ticket');

            for (var index = 0; index <= data.length-1; index++) {

                var activityName = data[index].activityName;
                var typeActivityName = data[index].typeActivity;
                console.log('activityName => ' + activityName);
                //activitiesDropdown.append($("<option />").val(activityName).text(activityName));
                activitiesDropdown.append('<option value="' + activityName + '">' + activityName + '</option>');
                activitiesPointageDropdown.append('<option value="' + activityName + '">' + activityName + '</option>');
                activitiesPointageTicketDropdown.append('<option value="' + activityName + '">' + activityName + '</option>');
            }
                
        }).fail(function (response) {
            alert("Une erreur est survenue à l'insertion du tag. Veuillez réessayer plus tard.");
        });


        /* Datatable de clients */
        $('#ChildrenTicketsTable').DataTable({
            "columnDefs": [
                { "width": "8%", "targets": 0 }
            ],
            "oLanguage": {
                "sEmptyTable": "My Custom Message On Empty Table"
            },
            "language": {
                "emptyTable": "Ce ticket n'a pas de tickets enfants.",
                "infoEmpty": "Cliquer sur 'Créer un ticket' enfant pour en ajouter un."
            },
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/ajax-children-tickets/',
                dataSrc: 'data',
                dataType: 'json',
                data: {
                    idTicket: "{{ ticketId }}"
                }
            },
            ordering: true,
            paging: false,
            columns: [
                { data: 'refID' },
                { data: 'type' },
                { data: 'ticketTitle' },
                { data: 'ticketExcerpt' },
                { data: 'ticketAssignation' },
                { data: 'ticketStatus' },
                { data: 'ticketEstimation' },
                { data: 'ticketSpent' },
                { data: 'ticketComments' },
                { data: 'actions' }
            ]
        });

        /* Taches liées */
        $('#TasksTable').DataTable({
            "columnDefs": [
            ],
            "language": {
                "emptyTable": "Il n'y a pour le moment aucune tache associée.",
                "infoEmpty": "Créez une tache en cliquant sur le bouton 'Créer une tache'."
            },
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/tasks/ajax-linked-tickets/{{ ticketId }}',
                dataSrc: 'tasks',
                dataType: 'json',
            },
            ordering: true,
            paging: false,
            fixedHeader: true,
            columns: [
                { data: 'taskID' },
                { data: 'taskName' },
                { data: 'taskStatus' },
                { data: 'taskDuration' },
                { data: 'taskStarted' },
                { data: 'actions' }
            ]
        });

        $('#btn-comment').click(function(){
            $('#commentPopup').modal('show');
        });

        $('#btn-pointage-ticket').click(function(){
            $('#pointageTicketPopup').modal('show');
        });

        /*$('#btn-add-estimation').click(function(){
            $('#estimationPopup').modal('show');
        });*/

        $('#btnSaveComment').click(function(){

            var comment = $('#ticket_comments').val();
            var idTicket = "{{ ticketId }}";
            var currentURL = window.location.href;

            $('#commentPopup').modal('hide');

            $.ajax({
                url: '/comments/ajax-add/',
                method: "get",
                dataType: "json",
                data: {
                    message: comment,
                    idTicket: idTicket
                }
            }).done(function (response) {
                console.log('Le commentaire ' + comment + ' a bien été inséré dans la base.');
                window.location.href = currentURL;
            }).fail(function (response) {
                alert("Une erreur est survenue à l'insertion du tag. Veuillez réessayer plus tard.");
            });

        });

        $('#btnCancelComment').click(function(){
            $('#commentPopup').modal('hide');
        });

        $('#btn-save-estimation').click(function(){
            /* Save estimation */
            var activity = $('#list_activities').val();
            var comments = $('#estimation_comments').val();
            var quantity = $('#estimation_quantity').val();
            var unit = $('#estimation_unit').val();
            var progress = $('#estimation_progress').val();
            var date = $('#ticket_ticketDate').val();
            var idTask = 0;

            addTime(activity, date, comments, quantity, unit, progress, {{ ticketId }}, idTask, 0)
            refreshEstimations();
            $('#estimationPopup').modal('hide');
        });

        $('#btn-save-pointage').click(function(){
            var currentURL = window.location.href;
            /* Save estimation */
            var activity = $('#list_activities_pointage').val();
            var comments = $('#pointage_comments').val();
            var quantity = $('#pointage_quantity').val();
            var progress = $('#pointage_progress').val();
            var idTask = $('#pointageModalTitle span').text();
            var date = $('#pointage_date').val();

            console.log( "activity = " + activity + ", comments = " + comments + ", quantity = " + quantity + ", unit = h" + ", progress = " + progress + ", idTask = " + idTask );

            addTime(activity, date, comments, quantity, "h", progress, {{ ticketId }}, idTask, 1);
            refreshTimes();

            
            
            
        });

        $('#btn-save-pointage-ticket').click(function(){
            var currentURL = window.location.href;

            /* Save estimation */
            var activity = $('#list_activities_pointage_ticket').val();
            var comments = $('#pointage_ticket_comments').val();
            var quantity = $('#pointage_ticket_quantity').val();
            var progress = $('#pointage_ticket_progress').val();
            var date = $('#pointage_ticket_date').val();
            var statusName = $('#list_status').val();

            console.log( "activity = " + activity + ", comments = " + comments + ", quantity = " + quantity + ", unit = h" + ", progress = " + progress + ", idTask = 0, date = " + date );

            addTime(activity, date, comments, quantity, "h", progress, {{ ticketId }}, 0, 1, formatDateToComponent(new Date(date), statusName));
            refreshTimes();

            $('#pointageTicketPopup').modal('hide');

            window.location.href = currentUrl;

            /*if(typePointage == 'ticket'){
                $.ajax({
                url: "/ticket-stop",
                method: "get",
                dataType: "json",
                data: {
                    id: "{{ ticket.id }}",
                    status: "dev_termine",
                    comment: comments,
                    percent: progress,
                    isArchived: false
                },
                success: {
                    //console.log("ticket stopped.");
                    //window.location.href = url;
                }
                }).done(function (response) {
                    //$('#pointagePopup').modal('hide');
                    $('#pointageTicketPopup').modal('hide');
                }).fail(function (response) {
                    console.log("Une erreur est survenue. Veuillez réessayer plus tard.");
                });
            }*/
            


            /*$id = $request->get('id');
            $statusName = $request->get('status');
            $text = $request->get('comment');
            $percent = $request->get('percent');
            $isArchived = $request->get('isArchived');*/

            

        });
    })
</script>
<script>

/* Cette fonction rafraitchit les données des blocs d'estimation */
function refreshEstimations(){
    /* Taches liées */
    $('#estimationsTable').DataTable({
        "columnDefs": [],
        responsive: true,
        "language": {
                "emptyTable": "Ce ticket n'a pas encore été estimé.",
                "infoEmpty": "Cliquez sur Créer une estimation pour ajouter les estimations par activité."
            },
        ajax: {
            type: 'GET',
            url: '/estimation/ajax-list/{{ ticketId }}',
            dataSrc: 'estimations',
            dataType: 'json',
        },
        ordering: true,
        paging: false,
        fixedHeader: true,
        columns: [
            { data: 'id' },
            { data: 'date' },
            { data: 'typeActivity' },
            { data: 'activity' },
            { data: 'comments' },
            { data: 'estimation' },
            { data: 'createdBy' },
            { data: 'createdAt' }
        ]
    });
}

/* Cette fonction rafraitchit les données des blocs de temps passés */
function refreshTimes(){
    /* Taches liées */
    $('#pointageTable').DataTable({
        "columnDefs": [],
        "language": {
                "emptyTable": "Aucun pointage n'a été réalisé sur ce ticket.",
                "infoEmpty": "Cliquez sur 'Pointer une activité' pour les comptabiliser sur le ticket."
            },
        responsive: true,
        ajax: {
            type: 'GET',
            url: '/pointage/ajax-list/{{ ticketId }}',
            dataSrc: 'pointage',
            dataType: 'json',
        },
        ordering: true,
        paging: false,
        fixedHeader: true,
        columns: [
            { data: 'id' },
            { data: 'date' },
            { data: 'typeActivity' },
            { data: 'activity' },
            { data: 'taskID' },
            { data: 'comments' },
            { data: 'pointage' },
            { data: 'Avancement' },
            { data: 'RAF' },
            { data: 'createdBy' },
            { data: 'createdAt' }
        ]
    });
}



</script>
<div class="modal fade" id="commentPopup" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Laissez un commentaire</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="ticket_comments" class="form-label">Commentaires</label>
                <textarea id="ticket_comments" class="form-control" name="ticket_comments" placeholder="Commenter le ticket" rows="7" cols="20"></textarea>
            </div>
        </div>
      <div class="modal-footer pos-controls" style="display: block;">
        <button type="button" id="btnSaveComment" class="btn-glossy pos-right">Enregistrer</button>
        <button type="button" id="btnCancelComment" class="btn-glossy red pos-left">Quitter</button>
      </div>
    </div>
  </div>
</div>
<!-- Popup estimation::begin -->
<div class="modal fade" id="estimationPopup" 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">Chiffrage d'une activité</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="list_activities" class="form-label">Activité</label>
            <select class="form-control" id="list_activities" name="list_activities">
                <option value="-" selected>-- Sélectionner une activité --</option>
            </select>
        </div>
        <div class="mb-3">
            <label for="ticket_ticketDate" class="form-label">Date prévisionnelle</label>
            <input type="datetime-local" id="ticket_ticketDate" class="form-control" placeholder="Saisir une date prévisionnelle pour l'estimation">
        </div>
        <div class="mb-3">
            <textarea id="estimation_comments" class="form-control" name="ticket_comments" placeholder="Détails de l'activité" rows="7" cols="20"></textarea>
        </div>
        <div class="mb-3" style="display: inline-flex;">
            <div>
                <label for="ticket_ticketEstimation" class="form-label">Estimation</label>
                <input type="number" id="estimation_quantity" class="form-control" placeholder="Saisir une estimation">
            </div>
            &nbsp; &nbsp; 
            <div>
                <label for="exampleInputEmail1" class="form-label">Unité d'estimation</label>
                <select class="form-control" id="estimation_unit" name="estimation_unit">
                    <option value="-" selected>-- Sélectionner une activité --</option>
                    <option value="j/h">jh</option>
                    <option value="j">j</option>
                    <option value="h">h</option>
                    <option value="mn">mn</option>
                    <option value="€">€</option>
                    <option value="$">$</option>
                </select>
            </div>
            &nbsp; &nbsp; 
            <div>
                <label for="exampleInputEmail1" class="form-label">% d'avancement</label>
                <select class="form-control" id="estimation_progress" name="estimation_unit">
                    <option value="-" selected>-- Sélectionner un pourcentage --</option>
                    <option value="0">0</option>
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="40">40</option>
                    <option value="50">50</option>
                    <option value="60">60</option>
                    <option value="70">70</option>
                    <option value="80">80</option>
                    <option value="90">90</option>
                    <option value="100">100</option>
                </select>
            </div>
        </div>
      </div>
      <div class="modal-footer pos-controls" style="display: block;">
        <div class="d-flex my-4 pos-right">
            <a id="btn-save-estimation" 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-estimation" 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 -->
<!-- Popup pointage::begin -->
<div class="modal fade" id="pointagePopup" 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="pointageModalTitle">Pointage d'une activité pour la tache id = <span></span></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="pointage_date" class="form-label">Date</label>
            <input type="datetime-local" id="pointage_date" class="form-control" placeholder="Saisir la date du pointage">
        </div>
        <div class="mb-3">
            <label for="list_activities" class="form-label">Activité</label>
            <select class="form-control" id="list_activities_pointage" name="list_activities_pointage">
                <option value="-" selected>-- Sélectionner une activité à pointer --</option>
            </select>
        </div>
        <div class="mb-3">
            <textarea id="pointage_comments" class="form-control" name="ticket_comments" placeholder="Détails de l'activité" rows="7" cols="20"></textarea>
        </div>
        <div class="mb-3" style="display: inline-flex;">
            <div>
                <label for="pointage_quantity" class="form-label">Durée (h)</label>
                <input type="number" id="pointage_quantity" class="form-control" placeholder="Saisir une durée">
            </div>
            &nbsp; &nbsp; 
            <div>
                <label for="exampleInputEmail1" class="form-label">% d'avancement</label>
                <select class="form-control" id="pointage_progress" name="pointage_unit">
                    <option value="-" selected>-- Sélectionner un pourcentage --</option>
                    <option value="0">0</option>
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="40">40</option>
                    <option value="50">50</option>
                    <option value="60">60</option>
                    <option value="70">70</option>
                    <option value="80">80</option>
                    <option value="90">90</option>
                    <option value="100">100</option>
                </select>
            </div>
        </div>
      </div>
      <div class="modal-footer pos-controls" style="display: block;">
        <div class="d-flex my-4 pos-right">
            <a id="btn-save-pointage" 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-pointage" 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 pointage::end -->

<!-- Popup pointage ticket::begin -->
<div class="modal fade" id="pointageTicketPopup" 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="pointageTicketModalTitle">Pointage d'une activité pour le ticket <span>{{ ticket.fonctionalID }}</span></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="pointage_ticket_date" class="form-label">Date</label>
            <input type="datetime-local" id="pointage_ticket_date" class="form-control" placeholder="Saisir la date du pointage">
        </div>
        <div class="mb-3">
            <label for="list_activities" class="form-label">Activité</label>
            <select class="form-control" id="list_activities_pointage_ticket" name="list_activities_pointage_ticket">
                <option value="-" selected>-- Sélectionner une activité à pointer --</option>
            </select>
        </div>
        <div class="mb-3">
            <textarea id="pointage_ticket_comments" class="form-control" name="ticket_comments" placeholder="Détails de l'activité" rows="7" cols="20"></textarea>
        </div>
        <div class="mb-3" style="display: inline-flex;">
            <div style="width: 20%;">
                <label for="pointage_ticket_quantity" class="form-label">Durée (h)</label>
                <input type="number" id="pointage_ticket_quantity" class="form-control" placeholder="Saisir une durée">
            </div>
            &nbsp;
            <div style="width: 50%;">
                <label for="list_activities" class="form-label">Statut</label>
                <select class="form-control" id="list_status" name="list_status">
                    <option value="dev_termine" selected>DEV : Terminé</option>
                </select>
            </div>
            &nbsp;
            <div style="width: 30%;">
                <label for="exampleInputEmail1" class="form-label">% d'avancement</label>
                <select class="form-control" id="pointage_ticket_progress" name="pointage_unit">
                    <option value="0" selected>0</option>
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="40">40</option>
                    <option value="50">50</option>
                    <option value="60">60</option>
                    <option value="70">70</option>
                    <option value="80">80</option>
                    <option value="90">90</option>
                    <option value="100">100</option>
                </select>
            </div>
        </div>
      </div>
      <div class="modal-footer pos-controls" style="display: block;">
        <div class="d-flex my-4 pos-right">
            <a id="btn-save-pointage-ticket" 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-pointage" 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 pointage::end -->

<!-- Popup model -->

<div class="modal fade" id="kt_modal_new_target" tabindex="-1" style="display: none;" aria-hidden="true">
    <!--begin::Modal dialog-->
    <div class="modal-dialog modal-dialog-centered mw-650px" data-select2-id="select2-data-124-p7gr">
        <!--begin::Modal content-->
        <div class="modal-content rounded">
            <!--begin::Modal header-->
            <div class="modal-header pb-0 border-0 justify-content-end">
                <!--begin::Close-->
                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                    <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>                </div>
                <!--end::Close-->
            </div>
            <!--begin::Modal header-->

            <!--begin::Modal body-->
            <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15" data-select2-id="select2-data-123-5ab8">
                <!--begin:Form-->
                <form id="kt_modal_new_target_form" class="form fv-plugins-bootstrap5 fv-plugins-framework" action="#" data-select2-id="select2-data-kt_modal_new_target_form">
                    <!--begin::Heading-->
                    <div class="mb-13 text-center">
                        <!--begin::Title-->
                        <h1 class="mb-3">Set First Target</h1>
                        <!--end::Title-->

                        <!--begin::Description-->
                        <div class="text-muted fw-semibold fs-5">
                            If you need more info, please check <a href="#" class="fw-bold link-primary">Project Guidelines</a>.
                        </div>
                        <!--end::Description-->
                    </div>
                    <!--end::Heading-->

                    <!--begin::Input group-->
                    <div class="d-flex flex-column mb-8 fv-row fv-plugins-icon-container">
                        <!--begin::Label-->
                        <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                            <span class="required">Target Title</span>

                            
<span class="ms-1" data-bs-toggle="tooltip" aria-label="Specify a target name for future usage and reference" data-bs-original-title="Specify a target name for future usage and reference" data-kt-initialized="1">
	<i class="ki-duotone ki-information-5 text-gray-500 fs-6"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i></span>                        </label>
                        <!--end::Label-->

                        <input type="text" class="form-control form-control-solid" placeholder="Enter Target Title" name="target_title">
                    <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div></div>
                    <!--end::Input group-->

                    <!--begin::Input group-->
                    <div class="row g-9 mb-8" data-select2-id="select2-data-122-hfu1">
                        <!--begin::Col-->
                        <div class="col-md-6 fv-row fv-plugins-icon-container" data-select2-id="select2-data-121-vjby">
                            <label class="required fs-6 fw-semibold mb-2">Assign</label>

                            <select class="form-select form-select-solid select2-hidden-accessible" id="test-select" data-control="select2" data-hide-search="true" data-placeholder="Select a Team Member" name="target_assign" data-select2-id="select2-data-15-l6ta" tabindex="-1" aria-hidden="true" data-kt-initialized="1">
                                <option value="">Selectionner une activité...</option>
                            </select><span class="select2 select2-container select2-container--bootstrap5 select2-container--below" dir="ltr" data-select2-id="select2-data-16-v86j" style="width: 100%;">
                            <span class="selection">
                                <span class="select2-selection select2-selection--single form-select form-select-solid" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-target_assign-qz-container" aria-controls="select2-target_assign-qz-container">
                                    <span class="select2-selection__rendered" id="select2-target_assign-qz-container" role="textbox" aria-readonly="true" title="Sélectionner une activité">
                                        <span class="select2-selection__placeholder">Sélectionner une activité</span>
                                    </span>
                                    <span class="select2-selection__arrow" role="presentation">
                                        <b role="presentation"></b>
                                    </span>
                                </span>
                            </span>
                            <span class="dropdown-wrapper" aria-hidden="true"></span>
                        
                        <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div></div>
                        <!--end::Col-->

                        <!--begin::Col-->
                        <div class="col-md-6 fv-row">
                            <label class="required fs-6 fw-semibold mb-2">Due Date</label>

                            <!--begin::Input-->
                            <div class="position-relative d-flex align-items-center">
                                <!--begin::Icon-->
                                <i class="ki-duotone ki-calendar-8 fs-2 position-absolute mx-4"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span></i>                                <!--end::Icon-->

                                <!--begin::Datepicker-->
                                <input class="form-control form-control-solid ps-12 flatpickr-input" placeholder="Select a date" name="due_date" type="text" readonly="readonly">
                                <!--end::Datepicker-->
                            </div>
                            <!--end::Input-->
                        </div>
                        <!--end::Col-->
                    </div>
                    <!--end::Input group-->

                    <!--begin::Input group-->
                    <div class="d-flex flex-column mb-8">
                        <label class="fs-6 fw-semibold mb-2">Target Details</label>

                        <textarea class="form-control form-control-solid" rows="3" name="target_details" placeholder="Type Target Details">                        </textarea>
                    </div>
                    <!--end::Input group-->

                    <!--begin::Input group-->
                    <div class="d-flex flex-column mb-8 fv-row">
                        <!--begin::Label-->
                        <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                            <span class="required">Tags</span>

                            
<span class="ms-1" data-bs-toggle="tooltip" aria-label="Specify a target priorty" data-bs-original-title="Specify a target priorty" data-kt-initialized="1">
	<i class="ki-duotone ki-information-5 text-gray-500 fs-6"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i></span>                        </label>
                        <!--end::Label-->

                        <tags class="tagify form-control form-control-solid tagify--noTags tagify--empty" tabindex="-1" aria-expanded="false">
            <span contenteditable="" tabindex="0" data-placeholder="​" aria-placeholder="" class="tagify__input" role="textbox" aria-autocomplete="both" aria-multiline="false"></span>
                ​
        </tags><input class="form-control form-control-solid" value="Important, Urgent" name="tags" tabindex="-1">
                    </div>
                    <!--end::Input group-->

                    <!--begin::Input group-->
                    <div class="d-flex flex-stack mb-8">
                        <!--begin::Label-->
                        <div class="me-5">
                            <label class="fs-6 fw-semibold">Adding Users by Team Members</label>

                            <div class="fs-7 fw-semibold text-muted">If you need more info, please check budget planning</div>
                        </div>
                        <!--end::Label-->

                        <!--begin::Switch-->
                        <label class="form-check form-switch form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" value="1" checked="checked">
                            <span class="form-check-label fw-semibold text-muted">
                                Allowed
                            </span>
                        </label>
                        <!--end::Switch-->
                    </div>
                    <!--end::Input group-->

                    <!--begin::Input group-->
                    <div class="mb-15 fv-row">
                        <!--begin::Wrapper-->
                        <div class="d-flex flex-stack">
                            <!--begin::Label-->
                            <div class="fw-semibold me-5">
                                <label class="fs-6">Notifications</label>

                                <div class="fs-7 text-muted">Allow Notifications by Phone or Email</div>
                            </div>
                            <!--end::Label-->

                            <!--begin::Checkboxes-->
                            <div class="d-flex align-items-center">
                                <!--begin::Checkbox-->
                                <label class="form-check form-check-custom form-check-solid me-10">
                                    <input class="form-check-input h-20px w-20px" type="checkbox" name="communication[]" value="email" checked="checked">

                                    <span class="form-check-label fw-semibold">
                                        Email
                                    </span>
                                </label>
                                <!--end::Checkbox-->

                                <!--begin::Checkbox-->
                                <label class="form-check form-check-custom form-check-solid">
                                    <input class="form-check-input h-20px w-20px" type="checkbox" name="communication[]" value="phone">

                                    <span class="form-check-label fw-semibold">
                                        Phone
                                    </span>
                                </label>
                                <!--end::Checkbox-->
                            </div>
                            <!--end::Checkboxes-->
                        </div>
                        <!--end::Wrapper-->
                    </div>
                    <!--end::Input group-->

                    <!--begin::Actions-->
                    <div class="text-center">
                        <button type="reset" id="kt_modal_new_target_cancel" class="btn btn-light me-3">
                            Cancel
                        </button>

                        <button type="submit" id="kt_modal_new_target_submit" class="btn btn-primary">
                            <span class="indicator-label">
                                Submit
                            </span>
                            <span class="indicator-progress">
                                Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                            </span>
                        </button>
                    </div>
                    <!--end::Actions-->
                </form>
                <!--end:Form-->
            </div>
            <!--end::Modal body-->
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>


<!--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="/tickets" class="text-muted text-hover-primary">
                                Liste des tickets                         
							</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">
                            Détail de la demande : {{ ticketRef }}                         
						</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="digi-card-header align-items-center py-3 gap-1 gap-md-2">
                        <div class="digi-card-title"><h1>Détails de la demande {{ ticketRef }}</h1></div>
                        <!--begin::Actions-->
                        <div class="digi-card-action">
                            <a href="/tickets/{{ ticketId }}/archive" class="btn btn-digi dig-hide" style="color: #ffffff;" id="digi_ticket_archive_button">
                                <i class="fa-solid fa-archive" style="color: #ffffff;"></i>                          
                                <!--begin::Indicator label-->
                                <span class="indicator-label">Archiver le ticket</span>
                                <!--end::Indicator label-->
                            </a>
                            &nbsp;
                            <a class="btn btn-digi dig-hide" style="color: #ffffff; background-color: #3364FF;" id="digi_ticket_stop_button">
                                <i class="fa-solid fa-stop" style="color: #ffffff;"></i>                          
                                <!--begin::Indicator label-->
                                <span class="indicator-label">Terminer le ticket</span>
                                <!--end::Indicator label-->
                            </a>
                            &nbsp;
                            <a class="btn btn-digi dig-hide" style="color: #ffffff;" id="digi_ticket_start_button">
                                <i class="fa-solid fa-play" style="color: #ffffff;"></i>                          
                                <!--begin::Indicator label-->
                                <span class="indicator-label">Commencer le ticket</span>
                                <!--end::Indicator label-->
                            </a>
                            &nbsp;
                            <a href="/tickets/{{ ticketId }}/delete" class="btn btn-digi red" style="color: #ffffff;" id="kt_user_follow_button">
                                <i class="fa-solid fa-trash" style="color: #ffffff;"></i>                          
                                <!--begin::Indicator label-->
                                <span class="indicator-label">Supprimer</span>
                                <!--end::Indicator label-->
                            </a>
                            &nbsp;
                            <a href="/tickets/{{ ticketId }}/duplicate" class="btn btn-digi" style="background-color: blue; color: #ffffff;" id="kt_user_follow_button">
                                <i class="fa-solid fa-copy" style="color: #ffffff;"></i>                          
                                <!--begin::Indicator label-->
                                <span class="indicator-label">Dupliquer</span>
                                <!--end::Indicator label-->
                            </a>
                            &nbsp;
                            <a href="/tickets/{{ ticketId }}/edit" class="btn btn-digi" style="background-color: green; color: #ffffff;" id="kt_user_follow_button">
                                <i class="fa-solid fa-pen-to-square" style="color: #ffffff;"></i>                          
                                <!--begin::Indicator label-->
                                <span class="indicator-label">Modifier</span>
                                <!--end::Indicator label-->
                            </a>
                        </div>
                        <!--end::Actions-->
                    </div>
                    <div class="card-body pt-0">
                        <div class="d-flex flex-wrap flex-sm-nowrap">
                            <!--begin::Info-->
                            <div class="flex-grow-1">
                                <!--begin::Title-->
                                <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                                    <!--begin::User-->
                                    <div class="d-flex flex-column">
                                        <!--begin::Name-->
                                        <div class="d-flex align-items-center mb-2">
                                            
                                        </div>
                                        <!--end::Name-->
                                    </div>
                                    <!--end::User-->
                                    
                                </div>
                                <!--end::Title-->
               
                                <!--div style="display: flow-root;">
                                    <br>
                                    <hr class="sep-rounded">
                                    <div style="float:right; margin-left:10px;"><a href="/tickets/{{ ticketId }}/delete" class="btn-glossy red">Supprimer</a></div>
                                    <div style="float:right; margin-left:10px;"><a href="/tickets/{{ ticketId }}/duplicate" class="btn-glossy green">Dupliquer</a></div>
                                    <div style="float:right;"><a href="/tickets/{{ ticketId }}/edit" target="_blank" class="btn-glossy">Modifier</a></div>
                                </div-->
                            
                                {{ form_start(ticketForm) }}
                                    <div class="mb-3 choice-object">
                                        <label for="exampleInputEmail1" class="form-label">Demande parente</label>
                                        <input type="text" value={{ functionalID }} name="{{ field_name(ticketForm.type) }}" class="form-control" disabled>
                                    </div>
                                    &nbsp;
                                    <div class="mb-3 choice-object">
                                        <label for="exampleInputEmail1" class="form-label">Type de demande</label>
                                        <input type="text" value="{{ type }}" name="{{ field_name(ticketForm.type) }}" class="form-control" disabled>
                                    </div>
                                    &nbsp;
                                    <div class="mb-3 choice-object">
                                        <label for="exampleInputEmail1" class="form-label">Projet</label>
                                        <input type="text" value="{{ projet.projectName }}" name="{{ field_name(ticketForm.project) }}" class="form-control" disabled>
                                    </div>
                                    &nbsp;
                                    <div class="mb-3 choice-object">
                                        <label for="exampleInputEmail1" class="form-label">Statut</label>
                                        <input type="text" value="{{ statut.statusName }}" name="{{ field_name(ticketForm.ticketStatus) }}" class="form-control" disabled>
                                    </div>
                                    <div class="mb-3">
                                        <label for="ticket_ticketTitle" class="form-label">Titre</label>
                                        <input type="text" value="{{ titre }}" title="C'est le titre de la demande" name="{{ field_name(ticketForm.ticketTitle) }}" class="form-control" id="ticket_ticketTitle" disabled>
                                        <div id="emailHelp" class="form-text"></div>
                                    </div>
                                    <div class="mb-3">
                                        <label for="ticket_ticketExcerpt" class="form-label">Extrait</label>
                                        <textarea disabled id="ticket_ticketExcerpt" title="Description succinte de la demande" class="form-control" name="{{ field_name(ticketForm.ticketExcerpt) }}" rows="2" cols="33">{{ excerpt }}</textarea>
                                        <div id="emailHelp" class="form-text"></div>
                                    </div>
                                    <div class="mb-3">
                                        <label for="ticket_ticketDescription" class="form-label">Description</label>
                                        <textarea disabled id="ticket_ticketDescription" title="Précisions sur la demande" class="form-control" name="{{ field_name(ticketForm.ticketDescription) }}" rows="5" cols="33">{{ description }}</textarea>
                                        <div id="emailHelp" class="form-text"></div>
                                    </div>
                                    <div class="mb-3">
                                        <label for="ticket_ticketComments" class="form-label">Commentaire</label>
                                        <textarea disabled id="ticket_ticketComments" class="form-control" name="{{ field_name(ticketForm.ticketComments) }}" rows="3" cols="33">{{ commentaire }}</textarea>
                                    </div>
                                    <div class="mb-3" style="display: inline-flex;">
                                        <div>
                                            <label for="ticket_ticketEstimation" class="form-label">Estimation</label>
                                            <input disabled type="number" id="ticket_ticketEstimation" value="{{ estimation }}" class="form-control" name="{{ field_name(ticketForm.ticketEstimation) }}" placeholder="Saisir une estimation">
                                        </div>
                                        &nbsp; &nbsp; 
                                        <div>
                                            <label for="exampleInputEmail1" class="form-label">Unité d'estimation</label>
                                            <input disabled type="text" id="ticket_ticketEstimation" value="{{ unit }}" class="form-control" name="{{ field_name(ticketForm.ticketCostUnit) }}">
                                        </div>
                                        &nbsp; &nbsp; 
                                        <div>
                                            <label for="exampleInputEmail1" class="form-label">% d'avancement</label>
                                            <input disabled type="text" id="ticket_ticketEstimation" value="{{ progress }}" class="form-control" name="{{ field_name(ticketForm.progressPercent) }}">
                                        </div>
                                        &nbsp; &nbsp; 
                                        <div>
                                            <label for="exampleInputEmail1" class="form-label">Temps pointé</label>
                                            <input disabled type="text" id="ticket_ticketPointage" value="{{ pointage }}" class="form-control" name="{{ field_name(ticketForm.ticketSpent) }}">
                                        </div>
                                        &nbsp; &nbsp; 
                                        <div>
                                            <label for="exampleInputEmail1" class="form-label">Total temps passé</label>
                                            <input disabled type="text" id="ticket_ticketPointage" value="{{ totalTime }}" class="form-control" name="{{ field_name(ticketForm.ticketSpent) }}">
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label for="exampleInputEmail1" class="form-label">Assigné à</label>
                                        <input disabled type="text" id="ticket_ticketEstimation" value="{{ assignee.displayName }}" class="form-control" name="{{ field_name(ticketForm.assignee) }}">
                                    </div>
                                    <br>
                                    {{ form_rest(ticketForm) }}
                                {{ form_end(ticketForm) }}
                            </div>
                        </div>
			        </div>
		        </div>
                <br>
                <br>
                <!-- Bloc des tickets liés -->
                <div class="digi-card card-flush">
                    <div class="digi-card-header align-items-center py-3 gap-1 gap-md-2">
                        <div class="digi-card-title"><h1><h3><center>TICKETS LIES</center></h3></h1></div>
                        <!--begin::Actions-->
                        <div class="digi-card-action">
                            <a href="/tickets-part1/{{ ticketId }}/add" class="btn btn-digi" style="color: #ffffff;">
                                <i class="fa-solid fa-ticket-simple" style="color: #ffffff;"></i>                          
                                <!--begin::Indicator label-->
                                <span class="indicator-label">Créer un ticket enfant</span>
                                <!--end::Indicator label-->
                            </a>
                        </div>
                        <!--end::Actions-->
                    </div>
                    <div class="card-body pt-0">
                        <div class="d-flex flex-wrap flex-sm-nowrap">
                            <!--begin::Info-->
                            <div class="flex-grow-1">
                                <!--begin::Title-->
                                <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                                    <!--begin::User-->
                                    <div class="d-flex flex-column">
                                        <!--begin::Name-->
                                        <div class="d-flex align-items-center mb-2">
                                            
                                        </div>
                                        <!--end::Name-->
                                    </div>
                                    <!--end::User-->
                                </div>
                                <!--end::Title-->
                                <!-- Datatable des tickets enfants -->
                                <table id="ChildrenTicketsTable" class="dataTable hover striped" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Type de demande</th>
                                            <th>Titre</th>
                                            <th>Extrait</th>
                                            <th>Assigné à</th>
                                            <th>Statut</th>
                                            <th>Estimation</th>
                                            <th>Consommé</th>
                                            <th>Commentaires</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
			        </div>
		        </div>
                <br>
                <br>
                <!-- Bloc des taches associées -->
                <div class="digi-card card-flush">
                    <div class="digi-card-header align-items-center py-3 gap-1 gap-md-2">
                        <div class="digi-card-title"><h1><h3><center>TACHES ASSOCIEES : <span style="font-weight: bold;">{{ totalTasks }}h</span></center></h3></h1></div>
                        <!--begin::Actions-->
                        <div class="digi-card-action">
                            <a href="/tasks/{{ ticketId }}/add" class="btn btn-digi" style="color: #ffffff;">
                                <i class="fa-solid fa-list-check" style="color: #ffffff;"></i>                          
                                <!--begin::Indicator label-->
                                <span class="indicator-label">Créer / Associer une tache</span>
                                <!--end::Indicator label-->
                            </a>
                        </div>
                        <!--end::Actions-->
                    </div>
                    <div class="card-body pt-0">
                        <div class="d-flex flex-wrap flex-sm-nowrap">
                            <!--begin::Info-->
                            <div class="flex-grow-1">
                                <!--begin::Title-->
                                <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                                    <!--begin::User-->
                                    <div class="d-flex flex-column">
                                        <!--begin::Name-->
                                        <div class="d-flex align-items-center mb-2">
                                            
                                        </div>
                                        <!--end::Name-->
                                    </div>
                                    <!--end::User-->
                                </div>
                                <!--end::Title-->
                                <!-- Datatable des taches liées -->
                                <table id="TasksTable" class="dataTable hover striped">
                                    <thead>
                                        <tr>
                                            <th># Tache</th>
                                            <th>Titre</th>
                                            <th>Etat</th>
                                            <th>Durée</th>
                                            <th>Commencée le</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
			        </div>
		        </div>
                <br>
                <br>
                <!-- Bloc du chiffrage du ticket -->
                <div class="digi-card card-flush">
                    <div class="digi-card-header align-items-center py-3 gap-1 gap-md-2">
                        <div class="digi-card-title"><h1><h3><center>ESTIMATION DETAILLEE DU TICKET</center></h3></h1></div>
                        <!--begin::Actions-->
                        <div class="digi-card-action">
                            <a data-bs-toggle="modal" data-bs-target="#estimationPopup" id="btn-add-estimation" class="btn btn-digi" style="color: #ffffff;">
                                <i class="fa-solid fa-plus" style="color: #ffffff;"></i>                          
                                <!--begin::Indicator label-->
                                <span class="indicator-label">Ajouter une estimation</span>
                                <!--end::Indicator label-->
                            </a>
                        </div>
                        <!--end::Actions-->
                    </div>
                    <div class="card-body pt-0">
                        <div class="d-flex flex-wrap flex-sm-nowrap">
                            <!--begin::Info-->
                            <div class="flex-grow-1">
                                <!--begin::Title-->
                                <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                                    <!--begin::User-->
                                    <div class="d-flex flex-column">
                                        <!--begin::Name-->
                                        <div class="d-flex align-items-center mb-2">
                                            
                                        </div>
                                        <!--end::Name-->
                                    </div>
                                    <!--end::User-->
                                    
                                </div>
                                <!--end::Title-->
                                <!-- Datatable des activités estimées -->
                                <table id="estimationsTable" class="dataTable hover striped" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Date</th>
                                            <th>Type d'activité</th>
                                            <th>Activité</th>
                                            <th>Commentaires</th>
                                            <th>Estimation</th>
                                            <th>Estimée par</th>
                                            <th>Le</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
			        </div>
		        </div>
                <br>
                <br>
                <!-- Bloc du chiffrage du ticket -->
                <div class="digi-card card-flush">
                    <div class="digi-card-header align-items-center py-3 gap-1 gap-md-2">
                        <div class="digi-card-title"><h1><h3><center>TEMPS PASSE : <span style="font-weight: bold;">{{ pointage }}h</span></center></h3></h1></div>
                        <!--begin::Actions-->
                        <div id="btn-pointage-ticket" class="digi-card-action">
                            <a href="#" class="btn btn-digi" style="color: #ffffff;">
                                <i class="fa-solid fa-check-double" style="color: #ffffff;"></i>                          
                                <!--begin::Indicator label-->
                                <span class="indicator-label">Pointer une activité</span>
                                <!--end::Indicator label-->
                            </a>
                        </div>
                        <!--end::Actions-->
                    </div>
                    <div class="card-body pt-0">
                        <div class="d-flex flex-wrap flex-sm-nowrap">
                            <!--begin::Info-->
                            <div class="flex-grow-1">
                                <!--begin::Title-->
                                <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                                    <!--begin::User-->
                                    <div class="d-flex flex-column">
                                        <!--begin::Name-->
                                        <div class="d-flex align-items-center mb-2">
                                            
                                        </div>
                                        <!--end::Name-->
                                    </div>
                                    <!--end::User-->
                                </div>
                                <!--end::Title-->
                                <!-- Datatable du temps passé -->
                                <table id="pointageTable" class="dataTable hover striped" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Date</th>
                                            <th>Type d'activité</th>
                                            <th>Activité</th>
                                            <th>Tache</th>
                                            <th>Commentaire</th>
                                            <th>Temps passé</th>
                                            <th>Avancement</th>
                                            <th>Reste à faire</th>
                                            <th>par</th>
                                            <th>Le</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
			        </div>
		        </div>
                <br>
                <br>
                <!-- Bloc des commentaires associées -->
                <div class="digi-card card-flush">
                    <div class="digi-card-header align-items-center py-3 gap-1 gap-md-2">
                        <div class="digi-card-title"><h1><h3><center>COMMENTAIRES</center></h3></h1></div>
                        <!--begin::Actions-->
                        <div class="digi-card-action">
                            <a id="btn-comment" type="submit" class="btn btn-digi" style="color: #ffffff;">
                                <i class="fa-solid fa-comments" style="color: #ffffff;"></i>                          
                                <!--begin::Indicator label-->
                                <span class="indicator-label">Commenter</span>
                                <!--end::Indicator label-->
                            </a>
                        </div>
                        <!--end::Actions-->
                    </div>
                    <div class="card-body pt-0">
                        <div class="d-flex flex-wrap flex-sm-nowrap">
                            <!--begin::Info-->
                            <div class="flex-grow-1">
                                <!--begin::Title-->
                                <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                                    <!--begin::User-->
                                    <div class="d-flex flex-column">
                                        <!--begin::Name-->
                                        <div class="d-flex align-items-center mb-2">
                                            
                                        </div>
                                        <!--end::Name-->
                                    </div>
                                    <!--end::User-->
                                </div>
                                <!--end::Title-->
                                <!-- Commentaires associés au ticket -->
                                <br>
                                <br>
                                <!--div class="mb-3">
                                    <button id="btn-comment" type="submit" class="btn-glossy">Commenter</button>
                                </div-->  
                                <br>
                                <br>
                                <!-- Message area -->
                                {% if comments == null %}
                                <div class="message">
                                    <div class="no-comments">Ce ticket n'a pour le moment jamais été commenté. Cliquez sur commenter pour laisser votre premier commentaire.</div>
                                </div>
                                {% else %}
                                    {% set i = 0 %}
                                    {% for comment in comments %}
                                    {% set i = i + 1 %}
                                    {% if i is odd %}
                                    <div class="message">
                                        <div class="user-message-photo-odd">
                                            <img height=86 src='/uploads/users/{{ comment.photoURL }}'>
                                        </div>
                                        <div class="message-bubble-odd">
                                            <div class="user-message-header-odd">
                                                <span class="user-message-name-odd">{{ comment.displayName }}</span> - <span class="user-message-date">{{ comment.date }}</span>
                                            </div>
                                            <div class="user-message-body-odd">
                                                <div class="user-message-odd">
                                                    {{ comment.message }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% else %}
                                    <div class="message">
                                        <div class="user-message-photo-even">
                                            <img height=86 src='/uploads/users/{{ comment.photoURL }}'>
                                        </div>
                                        <div class="message-bubble-even">
                                            <div class="user-message-header-even">
                                                <span class="user-message-name-even">{{ comment.displayName }}</span> - <span class="user-message-date">{{ comment.date }}</span>
                                            </div>
                                            <div class="user-message-body-even">
                                                <div class="user-message-even">
                                                    {{ comment.message }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% endif %}
                                    {% endfor %}
                                {% endif %}    
                            </div>
                        </div>
			        </div>
		        </div>
	        </div>
        </div>
    </div>
</div>  
{% endblock %}