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

{% block title %}Ajout d'une tache{% 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>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></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);
    }

    .criticity-tooltip {
        --bs-tooltip-bg: var(--bd-violet-bg);
        --bs-tooltip-color: var(--bs-white);
    }

</style>
<script>

    /*const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    const popoverList = [popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));*/

    $(document).ready(function () {
        $(".page-title h1").text("Edition d'une tache");
        $(".bandeau-img img").attr("src","https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/icon_ticket.png");

        $("#task_taskFromDate").value = new Date($.now());
        $("#task_taskToDate").value = new Date($.now());

        /* Alimentation de la liste des tickets */
            $.ajax({
               url: '/tickets/ajax-tickets-list-for-task',
               method: "get",
               dataType: "json",
               data: {},
               success: {

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

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

                for (var index = 0; index <= data.length-1; index++) {
                    var ticket = data[index].row;
                    console.log("ticket = " + ticket);
                    $('#task_edit_ticket_list').append(ticket);
                }

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

            /* Alimentation de la liste des projets */
            $.ajax({
               url: '/projects/ajax-projects-list-for-task',
               method: "get",
               dataType: "json",
               data: {},
               success: {

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

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

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

            }).fail(function (response) {
                alert("Une erreur est survenue à l'insertion du projet. Veuillez réessayer plus tard.");
            });
    })
</script>
<!--script type="module">
    import Tags from "https://cdn.jsdelivr.net/gh/lekoala/bootstrap5-tags@master/tags.js";
    Tags.init("select");
</script-->
<!--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="/tasks" class="text-muted text-hover-primary">
                                Taches                            
							</a>                              
						</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-3 gap-1 gap-md-2">
                    </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><h1>Editer la tache {{ task.taskID }}</h1></div>
                                        </div>
                                        <!--end::Name-->
                                    </div>
                                    <!--end::User-->
                                    <!--begin::Actions-->
                                    <!--div class="d-flex my-4">
                                        <a href="/tickets/delete" class="btn btn-digi" style="background-color: red; color: #ffffff;" id="kt_user_follow_button">
                                            <i class="fa-solid fa-trash" style="color: #ffffff;"></i>                          
                                            
                                            <span class="indicator-label">Supprimer</span>
                                            
                                        </a>
                                        &nbsp;
                                        <a href="/tickets/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>                          
                                            
                                            <span class="indicator-label">Dupliquer</span>
                                            
                                        </a>
                                        &nbsp;
                                        <a href="/tickets/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>                          
                                            
                                            <span class="indicator-label">Modifier</span>
                                            
                                        </a>
                                    </div-->
                                    <!--end::Actions-->
                                </div>
                                <!--end::Title-->
               
                                <!--div style="display: flow-root;">
                                    <br>
                                    <hr class="sep-rounded">
                                    <div style="float:right; margin-left:10px;"><a href="/tickets//delete" class="btn-glossy red">Supprimer</a></div>
                                    <div style="float:right; margin-left:10px;"><a href="/tickets//duplicate" class="btn-glossy green">Dupliquer</a></div>
                                    <div style="float:right;"><a href="/tickets/edit" target="_blank" class="btn-glossy">Modifier</a></div>
                                </div-->
                            
                                {{ form_start(taskForm) }}
                                    <div class="mb-3">
                                        <label for="task_taskTitle" class="form-label">Titre</label>
                                        <input type="text" name="{{ field_name(taskForm.taskTitle) }}" value="{{ field_value(taskForm.taskTitle) }}" class="form-control" id="task_taskTitle" placeholder="Saisir un titre pour la tache">
                                        <div id="emailHelp" class="form-text">C'est le titre de la tache</div>
                                    </div>
                                    <div class="mb-3">
                                        <label for="task_taskDescription" class="form-label">Description</label>
                                        <textarea id="task_taskDescription" class="form-control" name="{{ field_name(taskForm.taskDescription) }}" placeholder="Saisir une description détaillée de la tache" rows="5" cols="33">{{ field_value(taskForm.taskDescription) }}</textarea>
                                        <div id="emailHelp" class="form-text">Décrivez votre tache plus précisément</div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="form-check form-switch mb-3">
                                            <input class="form-check-input" type="checkbox" role="switch" name="{{ field_name(taskForm.isFinished) }}" value="{{ task.isFinished }}" id="task_isFinished">
                                            <label class="form-label" for="task_isFinished">Tache terminée</label>
                                        </div>
                                    </div>
                                    <div class="form-check form-switch mb-3">
                                        <label class="form-label" for="isPrivate">Tache privée</label>
                                        <input class="form-check-input" type="checkbox" role="switch" id="isPrivate" name="{{ field_name(taskForm.isPrivate) }}" value="{{ task.isPrivate }}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="task_taskPriority" class="form-label">Priorité</label>
                                        <select id="task_taskPriority" name="{{ field_name(taskForm.priority) }}" class="form-control">
                                            {% for label, value in field_choices(taskForm.priority) %}
                                            <option value="{{ value }}">{{ label }}</option>
                                            {% endfor %}
                                        </select>
                                    </div> 
                                    <div class="mb-3">
                                        <label for="task_taskAssignee" class="form-label">Assigné à</label>
                                        <select id="task_taskAssignee" name="{{ field_name(taskForm.taskAssignee) }}" class="form-control">
                                            {% for label, value in field_choices(taskForm.taskAssignee) %}
                                                {% set selected = '' %}
                                                {% if label == task.taskAssignee.displayName %}
                                                    {% set selected = 'selected' %}
                                                {% endif %}
                                                <option value="{{ value }}" {{ selected }}>{{ label }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>   
                                    <div class="mb-3">
                                        <div class="mb-3 choice-object">
                                            <label class="form-label" for="duration">Temps passé</label>
                                            <input class="form-control" type="string" name="{{ field_name(taskForm.duration) }}" value="{{ field_value(taskForm.duration) }}" id="duration">
                                        </div>
                                    </div> 
                                    <br>
                                    <div class="accordion" id="accordionAdvanced">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingLinks">
                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLinks" aria-expanded="false" aria-controls="collapseLinks">
                                                    <i class="fa-solid fa-link"></i>&nbsp;Liens projets / Tickets
                                                </button>
                                            </h2>
                                            <div id="collapseLinks" class="accordion-collapse collapse" aria-labelledby="headingLinks" data-bs-parent="#accordionAdvanced">
                                                <div class="accordion-body">
                                                    <div class="mb-3">
                                                        <label for="task_edit_projects_list" class="form-label">Projet</label>
                                                        <select id="task_edit_projects_list" name="{{ field_name(taskForm.project) }}" class="form-control">
                                                            {% for label, value in field_choices(taskForm.project) %}
                                                                {% set selected = 0 %}
                                                                {% if value == task.project %}
                                                                    {% set selected = 'selected' %}
                                                                {% endif %}
                                                                <option value="{{ value }}" {{ selected }}>{{ label }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                    <br>
                                                    <div class="mb-3">
                                                        <label for="ticketID" class="form-label">Ticket à associer</label>
                                                        <select id="ticketID" name="{{ field_name(taskForm.ticketID) }}" class="form-control">
                                                            {% for label, value in field_choices(taskForm.ticketID) %}
                                                                {% set selected = '' %}
                                                                {% if value == task.ticketID %}
                                                                    {% set selected = 'selected' %}
                                                                {% endif %}
                                                                <option value="{{ value }}" {{ selected }}>{{ label }}</option>
                                                            {% endfor %}
                                                        </select>
                                                        <!--select id="ticketID" name="ticketID" class="form-control">
                                                        <option value="{#{ task.ticketID }#}">{#{ task.ticketID }#}</option>
                                                        </select-->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingPlanification">
                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlanification" aria-expanded="false" aria-controls="collapsePlanification">
                                                    <i class="fa-solid fa-calendar"></i>&nbsp;Planification
                                                </button>
                                            </h2>
                                            <div id="collapsePlanification" class="accordion-collapse collapse" aria-labelledby="headingPlanification" data-bs-parent="#accordionAdvanced">
                                                <div class="accordion-body">
                                                    <div class="mb-3 choice-object">
                                                        <label for="task_taskStartedAt" class="form-label">Commencée le</label>
                                                        <input type="datetime-local" value="{{ field_value(taskForm.startedAt) }}" name="{{ field_name(taskForm.startedAt) }}" class="form-control" id="task_taskStartedAt" placeholder="Saisir un titre pour la tache">
                                                        <div id="taskStartedAtHelp" class="form-text">Date à laquelle la tache a été lancée</div>
                                                    </div>
                                                    <!--div class="mb-3 choice-object">
                                                        <label for="task_taskFromDate" class="form-label">De</label>
                                                        <input type="datetime-local" value="{#{ field_value(taskForm.fromDate) }#}" name="{#{ field_name(taskForm.fromDate) }#}" class="form-control" id="task_taskFromDate" placeholder="Saisir un titre pour la tache">
                                                        <div id="emailHelp" class="form-text">Date de prévision de la tache</div>
                                                    </div-->
                                                    <div class="mb-3 choice-object">
                                                        <label for="task_taskToDate" class="form-label">Délai</label>
                                                        <input type="datetime-local" value="{{ field_value(taskForm.ToDate) }}" name="{{ field_name(taskForm.ToDate) }}" class="form-control" id="task_taskToDate" placeholder="Saisir un titre pour la tache">
                                                        <div id="emailHelp" class="form-text">Date d'échéance de la tache</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingPersonnalisation">
                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePerso" aria-expanded="false" aria-controls="collapsePerso">
                                                    <i class="fa-solid fa-person"></i>&nbsp;Personnalisation
                                                </button>
                                            </h2>
                                            <div id="collapsePerso" class="accordion-collapse collapse" aria-labelledby="headingPersonnalisation" data-bs-parent="#accordionAdvanced">
                                                <div class="accordion-body">
                                                    <!-- Type -->
                                                    <div class="mb-3">
                                                        <label for="task_taskType" class="form-label">Type</label>
                                                        <select id="task_taskType" name="{{ field_name(taskForm.type) }}" class="form-control" disabled>
                                                            {% for label, value in field_choices(taskForm.type) %}
                                                                {% set selected = '' %}
                                                                {% if label == task.type %}
                                                                    {% set selected = 'selected' %}
                                                                {% endif %}
                                                                <option value="{{ value }}" {{ selected }}>{{ label }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>

                                                    <!-- Catégorie -->
                                                    <div class="mb-3">
                                                        <label for="exampleInputEmail1" class="form-label">Catégorie</label>
                                                         <select id="task_taskType" name="{{ field_name(taskForm.category) }}" class="form-control">
                                                            {% for label, value in field_choices(taskForm.category) %}
                                                                {% set selected = '' %}
                                                                {% if label == task.category.name %}
                                                                    {% set selected = 'selected' %}
                                                                {% endif %}
                                                                <option value="{{ value }}" {{ selected }}>{{ label }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>

                                                    <!-- Couleur du texte -->
                                                    <div class="mb-3">
                                                        <label for="status_textcolor" class="form-label">Couleur du texte</label>
                                                        <input type="color" class="form-control form-control-color" id="status_textcolor" name="{{ field_name(taskForm.textColor) }}" value="{{ field_value(taskForm.textColor) }}" value="#ffffff" title="Sélectionner une couleur">
                                                    </div>

                                                    <!-- Couleur du statut -->
                                                    <div class="mb-3">
                                                        <label for="status_color" class="form-label">Couleur du fond</label>
                                                        <input type="color" class="form-control form-control-color" id="status_color" name="{{ field_name(taskForm.backgroundColor) }}" value="{{ field_value(taskForm.backgroundColor) }}" title="Sélectionner une couleur">
                                                    </div>


                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <button style="background-color: #06668C; color: #ffffff;" type="submit" class="btn btn-digi indicator-label"><i class="fa-solid fa-floppy-disk" style="color: #ffffff;"></i>&nbsp;<span class="indicator-label">Enregistrer la tache</span></button>
                                    {{ form_rest(taskForm) }}
                                    {{ form_end(taskForm) }}
                            </div>
                        </div>
			        </div>
		        </div>
	        </div>
        </div>
    </div>
</div>
{% endblock %}