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

        /* Taches liées */
        $('#pointageTable').DataTable({
            "columnDefs": [],
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/pointage-task/ajax-list/{{ task.id }}',
                dataSrc: 'pointage',
                dataType: 'json',
            },
            ordering: true,
            paging: false,
            fixedHeader: true,
            columns: [
                { data: 'id' },
                { data: 'typeActivity' },
                { data: 'activity' },
                { data: 'comments' },
                { data: 'pointage' },
                { data: 'createdBy' },
                { data: 'createdAt' }
            ]
        });

        $('#btn-pointage-task').click(function(){

            var start = "{{ task.startedAt|date('Y-m-d H:i') }}";
            var end = moment().format('YYYY-MM-DD HH:mm');

            pointerTache(start, end, "{{ task.id }}", 0);
        });
    })
</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">
                        <!--begin::Card header-->
                        <div class="digi-card-header cursor-pointer">
                            <!--begin::Card title-->
                            <div class="digi-card-title m-0">
                                <h3 class="fw-bold m-0">Tache {{ task.taskID }}</h3>
                            </div>
                            <!--end::Card title-->
                            <div class="digi-card-action m-0">
                                <div class="d-flex">
                                    {% if (task.startedAt is null) %}
                                        <a href="/tasks/{{ task.id }}/start" class="btn btn-digi" style="background-color: darkblue; color: #ffffff;" id="kt_user_follow_button">
                                            <i class="fa-solid fa-play" style="color: #ffffff;"></i>                          
                                            <!--begin::Indicator label-->
                                            <span class="indicator-label">Commencer la tache</span>
                                            <!--end::Indicator label-->
                                        </a>
                                    {% endif %}
                                    {% if (task.startedAt is not null) and (task.finishedAt is null) %}
                                        <a onClick="stopWidget('{{ task.taskID }}')" class="btn btn-digi" style="background-color: darkblue; color: #ffffff;" id="kt_user_follow_button">
                                            <i class="fa-solid fa-stop" style="color: #ffffff;"></i>                          
                                            <!--begin::Indicator label-->
                                            <span class="indicator-label">Terminer la tache</span>
                                            <!--end::Indicator label-->
                                        </a>
                                    {% endif %}
                                    &nbsp;
                                    <a href="/tasks/{{ task.id }}/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>                          
                                        <!--begin::Indicator label-->
                                        <span class="indicator-label">Supprimer</span>
                                        <!--end::Indicator label-->
                                    </a>
                                    &nbsp;
                                    <a href="/tasks/{{ task.id }}/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="/tasks/{{ task.id }}/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> 
                            </div>
                            <!--begin::Action-->
                            
                            <!--end::Action-->    
                        </div>
                        <!--begin::Card header-->

                        <!--begin::Card body-->
                        <div class="card-body p-9">
                            <!--begin::Row-->
                            <div class="row">
                                <!--begin::Label-->
                                <label class="col-lg-2 fw-semibold text-muted">Catégorie</label>
                                <!--end::Label-->

                                <!--begin::Col-->
                                <div class="col-lg-4">                    
                                    <span class="fw-bold fs-6 text-gray-800">{{ task.category.name }}</span>                
                                </div>
                                <!--end::Col-->

                                <!--begin::Label-->
                                <label class="col-lg-2 fw-semibold text-muted">Projet</label>
                                <!--end::Label-->

                                <!--begin::Col-->
                                <div class="col-lg-4">                    
                                    <span class="fw-bold fs-6 text-gray-800">{{ task.project.projectName }}</span>                
                                </div>
                                <!--end::Col-->
                            </div>
                            <!--end::Row-->

                            <!--begin::Row-->
                            <div class="row">
                                <!--begin::Label-->
                                <label class="col-lg-2 fw-semibold text-muted">Type</label>
                                <!--end::Label-->
                                <!--begin::Col-->
                                <div class="col-lg-4">                    
                                    <span class="fw-bold fs-6 text-gray-800">{{ task.type }}</span>                
                                </div>

                                <!--begin::Label-->
                                <label class="col-lg-2 fw-semibold text-muted">Priorité</label>
                                <!--end::Label-->
                                <!--begin::Col-->
                                <div class="col-lg-4">       
                                    {% if task.priority == 0 %}             
                                        <span class="fw-bold fs-6 text-gray-800"><i class="fa-solid fa-angles-right fa-rotate-90" style="color: #74C0FC;"></i>&nbsp;<a>Très basse</a></span>      
                                    {% endif %}
                                    {% if task.priority == 1 %}             
                                        <span class="fw-bold fs-6 text-gray-800"><i class="fa-solid fa-angle-right fa-rotate-90" style="color: #B197FC;"></i>&nbsp;<a>Basse</a></span>      
                                    {% endif %}
                                    {% if task.priority == 2 %}             
                                        <span class="fw-bold fs-6 text-gray-800"><i class="fa-solid fa-minus"></i>&nbsp;<a>Normale</a></span>      
                                    {% endif %}
                                    {% if task.priority == 3 %}             
                                        <span class="fw-bold fs-6 text-gray-800"><i class="fa-solid fa-angle-right fa-rotate-270" style="color: #d29d00;"></i>&nbsp;<a>Haute</a></span>      
                                    {% endif %}
                                    {% if task.priority == 4 %}             
                                        <span class="fw-bold fs-6 text-gray-800"><i class="fa-solid fa-angles-right fa-rotate-270" style="color: #ff4013;"></i>&nbsp;<a>Très haute</a></span>      
                                    {% endif %}         
                                </div>

                                <!--end::Col-->
                                <!--begin::Label-->
                                <!--label class="col-lg-2 fw-semibold text-muted">Date de début prévisionnelle</label-->
                                <!--end::Label-->

                                <!--begin::Col-->
                                <!--div class="col-lg-4">        
                                    {#% if task.fromDate %#} 
                                        <span class="fw-bold fs-6 text-gray-800">{#{ task.fromDate|date('d/m/Y H:i') }#}</span>
                                    {#% endif %#}
                                </div-->
                                <!--end::Col-->
                            </div>
                            <!--end::Row-->

                            <!--begin::Row-->
                            <div class="row">
                                <!--begin::Label-->
                                <label class="col-lg-2 fw-semibold text-muted">Titre</label>
                                <!--end::Label-->

                                <!--begin::Col-->
                                <div class="col-lg-4">                    
                                    <span class="fw-bold fs-6 text-gray-800">{{ task.taskTitle }}</span>                
                                </div>
                                <!--end::Col-->
                                <!--begin::Label-->
                                <label class="col-lg-2 fw-semibold text-muted">Date de fin prévisionnelle</label>
                                <!--end::Label-->

                                <!--begin::Col-->
                                <div class="col-lg-4">      
                                    {% if task.toDate %} 
                                        <span class="fw-bold fs-6 text-gray-800">{{ task.toDate|date('d/m/Y H:i') }}</span>
                                    {% endif %}
                                </div>
                                <!--end::Col-->
                            </div>
                            <!--end::Row-->

                            <!--begin::Row-->
                            <div class="row">
                                <!--begin::Label-->
                                <label class="col-lg-2 fw-semibold text-muted">Description</label>
                                <!--end::Label-->

                                <!--begin::Col-->
                                <div class="col-lg-4">                    
                                    <span class="fw-bold fs-6 text-gray-800">{{ task.taskDescription }}</span>                
                                </div>
                                <!--end::Col-->
                                <!--begin::Label-->
                                <label class="col-lg-2 fw-semibold text-muted">Commencée le</label>
                                <!--end::Label-->

                                <!--begin::Col-->
                                <div class="col-lg-4">     
                                    {% if task.startedAt %} 
                                        <span class="fw-bold fs-6 text-gray-800">{{ task.startedAt|date('d/m/Y H:i') }}</span> 
                                    {% endif %}          
                                </div>
                                <!--end::Col-->
                            </div>
                            <!--end::Row-->

                            <!--begin::Row-->
                            <div class="row">
                                <!--begin::Label-->
                                <label class="col-lg-2 fw-semibold text-muted">Ticket associé</label>
                                <!--end::Label-->

                                <!--begin::Col-->
                                <div class="col-lg-4">  
                                    {% if task.ticketID is not null %}   
                                        <span class="fw-bold fs-6 text-gray-800"><a href="/tickets/{{ task.ticketID.id }}/detail">{{ task.ticketID.fonctionalID }}</a></span> 
                                    {% else %}
                                        Aucun
                                    {% endif %}              
                                </div>
                                <!--end::Col-->
                                <!--begin::Label-->
                                <label class="col-lg-2 fw-semibold text-muted">Terminée le</label>
                                <!--end::Label-->

                                <!--begin::Col-->
                                <div class="col-lg-4">                    
                                    {% if task.finishedAt %} 
                                        <span class="fw-bold fs-6 text-gray-800">{{ task.finishedAt|date('d/m/Y H:i') }}</span> 
                                    {% endif %}                
                                </div>
                                <!--end::Col-->
                            </div>
                            <!--end::Row-->
                            
                            <!--begin::Row-->
                            <div class="row">
                                <!--begin::Label-->
                                <label class="col-lg-2 fw-semibold text-muted">Responsable</label>
                                <!--end::Label-->

                                <!--begin::Col-->
                                <div class="col-lg-4">     
                                    <div> <!--style="height: 40px; width: 200px; border-radius: 20px; border: 0.2px solid gray; background-color: aliceblue;"-->               
                                        <img style="border-radius: 50% 50% 50% 50%;" height=40 src="/uploads/users/{{ task.taskAssignee.userPhoto }}">&nbsp;&nbsp;<span class="fw-bold fs-6 text-gray-800">{{ task.taskAssignee.displayName }}</span>
                                    </div>                
                                </div>
                                <!--end::Col-->

                                <!--begin::Label-->
                                <label class="col-lg-2 fw-semibold text-muted">Statut</label>
                                <!--end::Label-->

                                <!--begin::Col-->
                                <div class="col-lg-4">     
                                    {% if (task.startedAt is null) and (task.finishedAt is null) %}
                                        <div style="background-color: antiquewhite; color: #000000; border-radius: 20px; text-align: center; width: 200px;"> Tache non démarrée </div>  
                                    {% endif %}
                                    {% if (task.startedAt is not null) and (task.finishedAt is null) %}
                                        <div style="background-color: #F5CBA7; color: #000000; border-radius: 20px; text-align: center; width: 200px;"> Tache en cours </div>  
                                    {% endif %}
                                    {% if (task.startedAt is not null) and (task.finishedAt is not null) %}
                                        <div style="background-color: #D5F5E3; color: #000000; border-radius: 20px; text-align: center; width: 200px;"> Tache terminée </div>  
                                    {% endif %}           
                                </div>
                                <!--end::Col-->
                            </div>
                            <!--end::Row-->
                            
                    
                        </div>
                        <!--end::Card body-->     
                    </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" data-bs-toggle="tooltip" title="Ce bloc remonte les temps pointés sur la tache. Une tache doit contenir une seule ligne de pointage dont la durée doit êre égale à la dureée de la tache.">
                            <h3>TEMPS PASSE
                                <span class="ms-1 digi-tooltip"  aria-label="Ce bloc remonte les temps pointés sur la tache. Une tache ne doit contenir qu'une seule ligne de pointage dont la durée doit êre égale à la dureée de la tache." data-bs-original-title="Phone number must be active" data-kt-initialized="1">
                                    <i class="fa-solid fa-circle-question fs-7">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                        <span class="path3"></span>
                                    </i>
                                </span>
                            </h3>
                        </div>
                        
                        <!--begin::Actions-->
                        <div id="btn-pointage-task" class="digi-card-action">
                            <a href="#" class="btn btn-digi" style="color: #ffffff; background-color: #06668C;">
                                <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>Type d'activité</th>
                                            <th>Activité</th>
                                            <th>Commentaire</th>
                                            <th>Temps passé</th>
                                            <th>par</th>
                                            <th>Le</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
			        </div>
		        </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}