{% 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");

        /* Datatable de clients */
        $('#ChildrenTicketsTable').DataTable({
            "columnDefs": [
                { "width": "8%", "targets": 0 }
            ],
            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": [
            ],
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/tasks/ajax-linked-tickets/{{ ticketId }}',
                dataSrc: 'tasks',
                dataType: 'json',
            },
            ordering: true,
            paging: false,
            fixedHeader: true,
            fixedColumns: true,
            columns: [
                { data: 'taskID' },
                { data: 'taskName' },
                { data: 'taskDescription' },
                { data: 'taskStatus' },
                { data: 'taskDuration' },
                { data: 'taskStarted' },
                { data: 'actions' }
            ]
        });

        $('#modifyType').click(function(){
            if ($('#select_type')[0].hasAttribute("disabled")){
                alert("disabled !");
                $('#select_type').removeAttr("disabled");
            }else{
                alert("enabled !");
                $('#select_type').attr('disabled', 'disabled');
            }
        });

        $('#btn-comment').click(function(){
            $('#commentPopup').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');
        });
    })
</script>
<script type="module">
    import Tags from "https://cdn.jsdelivr.net/gh/lekoala/bootstrap5-tags@master/tags.js";
    Tags.init("select");
</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>

<!--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">
                            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-5 gap-2 gap-md-5">
                        <!--begin::Card toolbar-->
                        <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                            <!--begin::Add user-->
                            <a href="/tickets-part1/0/add" class="btn btn-digi">
                                Créer une demande
                            </a>
                            <!--end::Add user-->
                        </div>
                        <!--end::Card toolbar-->
                    </div>
                    <div class="card-body pt-0">
                        <!-- Users Datatable -->
                        <table id="TicketsTable" class="dataTable hover striped" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>Ticket parent</th>
                                    <th># Ticket</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>Avancement</th>
                                    <th>Reste à faire</th>
                                    <th>Commentaires</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
			</div>
		</div>
	</div>
</div>






<div class="container-page">
    <div class="app-form">
        <div style="display: flow-root;">
            <div><h1>Détails de la demande {{ ticketRef }}</h1></div>
            <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>
        <hr class="sep-rounded">
        {{ 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" placeholder="Saisir un titre pour la demande" 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" placeholder="Saisir un titre pour la demande" 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" placeholder="Saisir un titre pour la demande" 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" placeholder="Saisir un titre pour la demande" disabled>
            </div>
            <div class="mb-3">
                <label for="ticket_ticketTitle" class="form-label">Titre</label>
                <input type="text" value="{{ titre }}" name="{{ field_name(ticketForm.ticketTitle) }}" class="form-control" id="ticket_ticketTitle" placeholder="Saisir un titre pour la demande" disabled>
                <div id="emailHelp" class="form-text">C'est le titre de la demande</div>
            </div>
            <div class="mb-3">
                <label for="ticket_ticketExcerpt" class="form-label">Extrait</label>
                <textarea disabled id="ticket_ticketExcerpt" class="form-control" name="{{ field_name(ticketForm.ticketExcerpt) }}" placeholder="Saisir un extrait pour la demande" rows="2" cols="33">{{ excerpt }}</textarea>
                <div id="emailHelp" class="form-text">Décrivez succintement votre demande</div>
            </div>
            <div class="mb-3">
                <label for="ticket_ticketDescription" class="form-label">Description</label>
                <textarea disabled id="ticket_ticketDescription" class="form-control" name="{{ field_name(ticketForm.ticketDescription) }}" placeholder="Saisir une description détaillée de la demande" rows="5" cols="33">{{ description }}</textarea>
                <div id="emailHelp" class="form-text">Décrivez votre demande plus précisément</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) }}" placeholder="Saisir un commentaire" 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) }}" placeholder="Saisir une estimation">
                </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) }}" placeholder="Saisir une estimation">
                </div>
            </div>
            <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Assigné à {{ assignee.displayName }}</label>
                <input disabled type="text" id="ticket_ticketEstimation" value="{{ assignee.displayName }}" class="form-control" name="{{ field_name(ticketForm.assignee) }}" placeholder="Saisir une estimation">
            </div>
            <br>
            {{ form_rest(ticketForm) }}
    {{ form_end(ticketForm) }}
    </div> 
    <br>
    <!-- Bloc des tickets liés -->
    <div class="app-form">
        <div class="mb-3">
            <h3><center>TICKETS LIES</center></h3>
        </div>  
        <br>
        <br>
        <div class="mb-3">
            <button type="submit" class="btn-glossy"><a href="/tickets-part1/{{ ticketId }}/add">Créer un ticket enfant</a></button>
        </div>
        <!-- Your grid container -->
        <table id="ChildrenTicketsTable" class="table table-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>
    <br>
    <!-- Bloc des taches associées -->
    <div class="app-form">
        <div class="mb-3">
            <h3><center>TACHES ASSOCIEES</center></h3>
        </div>  
        <br>
        <br>
        <div class="mb-3">
            <button type="submit" class="btn-glossy"><a href="/tasks/{{ ticketId }}/add">Créer une tache</a></button>
        </div>
        <!-- Datatable -->
        <table id="TasksTable" class="table table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>Tache</th>
                <th>Description</th>
                <th>Etat</th>
                <th>Durée</th>
                <th>Commencée le</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        </table>
    </div>
    <br>
    <div class="app-form">
        <div id="comments_block" class="mb-3">
            <h3><center>COMMENTAIRES</center></h3>
        </div>  
        <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 class="message">
            <div class="user-message-photo-even">
                <img height=86 src="/uploads/users/jim-carrey-6590bfe2ca219.jpg">
            </div>
            <div class="message-bubble-even">
                <div class="user-message-header-even">
                    <span class="user-message-name-even">Jim CARREY</span> - <span class="user-message-date">01/01/2024 10:49</span>
                </div>
                <div class="user-message-body-even">
                    <div class="user-message-even">
                        J'ai tout testé, tout fonctionne nickel ! Très bon travail du développeur!  
                    </div>
                </div>
            </div>
        </div>
        <div class="message">
            <div class="user-message-photo-odd">
                <img height=86 src="/uploads/users/jake-gyllenhaal-6590bd835eac3.jpg">
            </div>
            <div class="message-bubble-odd">
                <div class="user-message-header-odd">
                    <span class="user-message-name-odd">Jake GUILLENHAAL</span> - <span class="user-message-date">01/01/2024 14:41</span>
                </div>
                <div class="user-message-body-odd">
                    <div class="user-message-odd">
                        Super travail les mecs ! Continuez comme ça je suis fier de vous ! 
                    </div>
                </div>
            </div>
            
        </div>
        <div class="message">
            <div class="user-message-photo-even">
                <img height=86 src="/uploads/users/ryan-reynolds-658699c316966.jpg">
            </div>
            <div class="message-bubble-even">
                <div class="user-message-header-even">
                    <span class="user-message-name-even">Ryan REYNOLDS</span> - <span class="user-message-date">02/01/2024 12:21</span>
                </div>
                <div class="user-message-body-even">
                    <div class="user-message-even">
                        Un succès comme celui-ci, ça s'arrose chef ? :) 
                    </div>
                </div>
            </div>
        </div>
        <div class="message">
            <div class="user-message-photo-odd">
                <img height=86 src="/uploads/users/jake-gyllenhaal-6590bd835eac3.jpg">
            </div>
            <div class="message-bubble-odd">
                <div class="user-message-header-odd">
                    <span class="user-message-name-odd">Jake GUILLENHAAL</span> - <span class="user-message-date">04/01/2024 18:01</span>
                </div>
                <div class="user-message-body-odd">
                    <div class="user-message-odd">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                </div>
            </div>
        </div-->
    </div>
</div>  
{% endblock %}