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

{% block title %}Nouveau client{% endblock %}

{% block body %}
<style>
    .digi-card-action {
        /*width: 100%;*/
    }
</style>
<script>
    $(document).ready(function () {
        $(".page-title h1").text("Fiche projet : {{ project.projectName }}");
        $(".bandeau-img img").attr("src","https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/icon_office.png");
        $(".bandeau-img a").attr("href","/projects");

        /* Datatable de clients */
        $('#projectTicketsTable').DataTable({
            oLanguage: {
                "sEmptyTable": "My Custom Message On Empty Table"
            },
            language: {
                "emptyTable": "Ce projet n'a pas encore de tickets associés.",
                "infoEmpty": "Cliquer sur 'Créer un ticket' pour en ajouter un."
            },
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/ajax-project-tickets/',
                dataSrc: 'data',
                dataType: 'json',
                data: {
                    projectName: "{{ project.projectName }}"
                }
            },
            ordering: true,
            paging: false,
            columns: [
                { data: 'refID' },
                { data: 'type' },
                { data: 'ticketTitle' },
                { data: 'ticketAssignation' },
                { data: 'ticketStatus' },
                { data: 'ticketEstimation' },
                { data: 'ticketSpent' },
                { data: 'ticketAvancement' },
                { data: 'ticketRAF' },
                { data: 'actions' }
            ]
        });

        /* Datatable de tous les utilisateurs */
        var usersTable = $('#ProjectUsersSelectionTable').DataTable({
            columnDefs: [
                { 
                    width: '5%', targets: 4
                }],
            paging: false,
            /*scrollCollapse: true,
            scrollX: true,*/
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/users/project-ajax-list/{{ project.id }}',
                dataSrc: 'data',
                dataType: 'json',
            },
            ordering: true,
            paging: true,
            search: {
                return: true
            },
            "bPaginate": true,
            "bFilter": true,
            "bInfo": true,
            columns: [
                { data: 'userID' },
                { data: 'userPhoto' },
                { data: 'userNom' },
                { data: 'userPrenom' },
                { data: 'userFunction' },
                { data: 'userJob' },
                { data: 'userMail' },
                { data: 'userActions' }
            ]
        });


        /* Datatable de ressources */
        $('#projectUsersTable').DataTable({
            "columnDefs": [
                { "width": "8%", "targets": 0 }
            ],
            "oLanguage": {
                "sEmptyTable": "My Custom Message On Empty Table"
            },
            "language": {
                "emptyTable": "Ce projet n'a pas encore de ressource affectée.",
                "infoEmpty": "Cliquer sur 'Ajouter une ressource' pour accorder l'accès à un utilisateur."
            },
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/projects/ajax-project-users/',
                dataSrc: 'data',
                dataType: 'json',
                data: {
                    projectName: "{{ project.projectName }}"
                }
            },
            ordering: true,
            paging: false,
            columns: [

                { data: 'identifiant' },
                { data: 'photo' },
                { data: 'nom' },
                { data: 'prenom' },
                { data: 'fonction' },
                { data: 'poste' },
                { data: 'mail' },
                { data: 'actions' }
            ]
        });

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



        $('#btn-add-user-project').click(function(){
            alert('add user to project');
        });

        $('#btn-link-ticket').click(function(){
            //alert('add user to project');
        });

        /*$('#digi-card-action-add-user').click(function(){
            $('#userSelectionPopup').modal('show');
        })*/
    })

</script>
<!-- start user selection popup -->
<div class="modal fade modal-dialog-scrollable" id="userSelectionPopup" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content digi-modal">
      <div class="digi-modal-header">
        <h1 class="modal-title fs-5" id="userSelectionPopupTitle">Ajout d'une ressource au projet</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="digi-modal-body">
        <div class="card-body pt-0">
            <!-- Users Datatable -->
            <table id="ProjectUsersSelectionTable" class="dataTable hover compact stripe nowrap display" width="60%">
                <thead style="">
                    <tr>
                        <th>Identifiant</th>
                        <th>Photo</th>
                        <th>Nom</th>
                        <th>Prénom</th>
                        <th>Fonction</th>
                        <th>Poste</th>
                        <th>Mail</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
      </div>
      <div class="digi-modal-footer pos-controls" style="display: block;">
        <div class="d-flex my-4 pos-left">
            <a id="btn-quit-project-user-selection-modal" data-bs-dismiss="userSelectionPopup" class="btn btn-digi red" style="color: #ffffff; background-color: red;">
                <i class="fa-solid fa-door-open" style="color: #ffffff;"></i>                          
                <!--begin::Indicator label-->
                <span class="indicator-label">Quitter</span>
                <!--end::Indicator label-->
            </a>
        </div>
        <!--button type="button" id="btnSaveComment" class="btn-digi pos-right"><i class="fa-solid fa-floppy-disk"></i>&nbsp;Enregistrer</button>
        <button type="button" id="btnCancelComment" class="btn-digi red pos-left"><i class="fa-solid fa-floppy-disk"></i>&nbsp;Quitter</button-->
      </div>
    </div>
  </div>
</div>
<!-- end user selection popup -->
<!-- start ticket selection popup -->
<div class="modal fade modal-dialog-scrollable" id="ticketSelectionPopup" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content digi-modal">
      <div class="digi-modal-header">
        <div class="popup-header-title" style="display: flex; align-items: baseline;"><h1 class="modal-title fs-5" id="ticketSelectionPopupTitle">Association d'un ticket au projet </h1>&nbsp;&nbsp;<span>{{ project.projectName }}</span></div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="digi-modal-body">
        <div class="card-body pt-0">
            <!-- Tickets Datatable -->
            <table id="TicketsTable" class="dataTable hover striped rounded" style="width: 100%;">
                <thead>
                    <tr>
                        <th>Ticket parent</th>
                        <th># Ticket</th>
                        <th>Projet</th>
                        <th>Type de demande</th>
                        <th>Titre</th>
                        <th>Assigné à</th>
                        <th>Statut</th>
                        <th>Commentaires</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
      </div>
      <div class="digi-modal-footer pos-controls" style="display: block;">
        <div class="d-flex my-4 pos-left">
            <a id="btn-quit-project-user-selection-modal" data-bs-dismiss="userSelectionPopup" class="btn btn-digi red" style="color: #ffffff; background-color: red;">
                <i class="fa-solid fa-door-open" style="color: #ffffff;"></i>                          
                <!--begin::Indicator label-->
                <span class="indicator-label">Quitter</span>
                <!--end::Indicator label-->
            </a>
        </div>
        <!--button type="button" id="btnSaveComment" class="btn-digi pos-right"><i class="fa-solid fa-floppy-disk"></i>&nbsp;Enregistrer</button>
        <button type="button" id="btnCancelComment" class="btn-digi red pos-left"><i class="fa-solid fa-floppy-disk"></i>&nbsp;Quitter</button-->
      </div>
    </div>
  </div>
</div>
<!-- end ticket selection popup -->
<!--begin::Main-->
<div class="app-main flex-column flex-row-fluid " id="kt_app_main">
	<!--begin::Content wrapper-->
	<div class="d-flex flex-column flex-column-fluid">       
		<!--begin::Toolbar-->
		<div id="kt_app_toolbar" class="app-toolbar  py-3 py-lg-6 ">
            <!--begin::Toolbar container-->
        	<div id="kt_app_toolbar_container" class="app-container  container-xxl d-flex flex-stack ">
				<!--begin::Page title-->
				<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3 ">
					<!--begin::Title-->
					<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Multipurpose</h1>
					<!--end::Title-->
					<!--begin::Breadcrumb-->
					<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
							<a href="/" class="text-muted text-hover-primary">
                                Accueil                            
							</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-500 w-5px h-2px"></span>
						</li>
                    	<!--end::Item--> 
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
							<a href="/projects" class="text-muted text-hover-primary">
                                Liste des projets                         
							</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">
                            Projet : {{ project.projectName }}                         
						</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="/project/{{ project.id }}/content" class="btn btn-digi-blue">
						<i class="fa-solid fa-tag" style="color: #fff;"></i>&nbsp;Gérer ce projet
					</a>
                    <a href="/projects/delete/{{ project.id }}" class="btn btn-digi-red">
						<i class="fa-solid fa-trash" style="color: #fff;"></i>&nbsp;Supprimer ce projet
					</a>
					<a href="/projects/edit/{{ project.id }}" class="btn btn-digi">
						<i class="fa-regular fa-pen-to-square"></i>&nbsp;Editer le projet
					</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" >
                            <div class="block-title">Détails du projet</div>
                            <div class="block-title">Projet en développement</div>
                        </div-->
                        <!--begin::Actions-->
                        <div class="digi-card-action">
                            <nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
                                <a class="navbar-brand" href="/">
                                    <img src="/uploads/projects/{{ project.projectLogo }}" height=48>
                                </a>
                                <ul class="nav nav-pills">
                                    <li class="nav-item">
                                        <a class="nav-link" href="#projectBrief">Brief</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#projectDetails">Détails</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#projectComments">Remarques</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <div style="background-color: {{ project.projectStatus.color }}; color: {{ project.projectStatus.textColor }}; padding-left: 30px; padding-right: 30px; padding-left: 20px; padding-right: 20px; border-radius: 20px;">{{ project.projectStatus.statusName }}</div>
                        <!--end::Actions-->
                    </div>
                    <div class="card-body pt-0">
                        <div style="height: 400px; overflow-y: scroll;" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
                            
                            <h4 id="projectBrief">Brief projet</h4>
                            <p>{{ project.projectBrief | raw }}</p>
                            
                            <h4 id="projectDetails">Details du projet</h4>
                            <p>{{ project.projectDescription| raw }}</p>
                            
                            <h4 id="projectComments">Remarques</h4>
                            <p>{{ project.projectComments| raw }}</p>
                        </div>
			        </div>
		        </div>
                <br>
                <!-- Bloc des ressources -->
                <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>RESSOURCES PROJET</center></h3></h1></div>
                        <!--begin::Actions-->
                        <div class="digi-card-action" id="digi-card-action-add-user" data-bs-toggle="modal" data-bs-target="#userSelectionPopup">
                            <a class="btn btn-digi" style="color: #ffffff;">
                                <i class="fa-solid fa-user" style="color: #ffffff;"></i>                          
                                <!--begin::Indicator label-->
                                <span class="indicator-label">Ajouter une ressource</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="projectUsersTable" class="dataTable hover striped" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>Identifiant</th>
                                            <th>Photo</th>
                                            <th>Nom</th>
                                            <th>Prénom</th>
                                            <th>Fonction</th>
                                            <th>Poste</th>
                                            <th>Mail</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
			        </div>
		        </div>
                <br>
                <!-- Bloc des tickets -->
                <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 ASSOCIES</center></h3></h1></div>
                        <!--begin::Actions-->
                        <div class="digi-card-action">
                            <a id="btn-link-ticket" class="btn btn-digi-green" style="color: #ffffff;" data-bs-toggle="modal" data-bs-target="#ticketSelectionPopup">
                                <i class="fa-solid fa-ticket-simple" style="color: #ffffff;"></i>                          
                                <!--begin::Indicator label-->
                                <span class="indicator-label">Associer un ticket</span>
                                <!--end::Indicator label-->
                            </a>
                            <a href="/tickets-part1/0/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</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="projectTicketsTable" class="dataTable hover striped" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Type de demande</th>
                                            <th>Titre</th>
                                            <th>Assigné à</th>
                                            <th>Statut</th>
                                            <th>Estimation</th>
                                            <th>Consommé</th>
                                            <th>Avancement</th>
                                            <th>RAF</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</center></h3></h1></div>
                        <!--begin::Actions-->
                        <div class="digi-card-action">
                            <a href="/tasks/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>
                <!-- 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</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>
	        </div>
        </div>
    </div>
</div>
{% endblock %}