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

{% block title %}Projectiles - Mon tableau de bord{% endblock %}
{% block body %}
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.colVis.min.js"></script>


<style>
.section_our_solution .row {
  align-items: center;
}
.solution_card img {
  opacity: 50%;
  border-radius: 20px;
}
.our_solution_category {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.our_solution_category .solution_cards_box {
  display: flex;
  flex-direction: row;
  /*justify-content: center;*/
}
.solution_cards_box .solution_card {
  /*flex: 0 50%;*/
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2),
    0 5px 15px 0 rgba(37, 44, 97, 0.15);
  border-radius: 15px;
  margin: 8px;
  padding: 10px 15px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 265px;
  transition: 0.7s;
  width: 30%;
}

.solution_cards_box .solution_card:hover {
  background: #309df0;
  color: #fff;
  transform: scale(1.1);
  z-index: 9;
}

.solution_cards_box .solution_card:hover::before {
  background: rgb(85 108 214 / 10%);
}

.solution_cards_box .solution_card:hover .solu_title h3,
.solution_cards_box .solution_card:hover .solu_description p {
  color: #fff;
}

.solution_cards_box .solution_card:before {
  content: "";
  position: absolute;
  background: rgb(85 108 214 / 5%);
  width: 170px;
  height: 400px;
  z-index: -1;
  transform: rotate(42deg);
  right: -56px;
  top: -23px;
  border-radius: 35px;
}

.solution_cards_box .solution_card:hover .solu_description button {
  background: #fff !important;
  color: #309df0;
}

.solution_card .so_top_icon {
}

.solution_card .solu_title h3 {
  color: #212121;
  font-size: 1.3rem;
  margin-top: 13px;
  margin-bottom: 13px;
}

.solution_card .solu_description p {
  font-size: 15px;
  margin-bottom: 15px;
}

.solution_card .solu_description button {
  border: 0;
  border-radius: 15px;
  background: linear-gradient(
    140deg,
    #42c3ca 0%,
    #42c3ca 50%,
    #42c3cac7 75%
  ) !important;
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  padding: 5px 16px;
}

.our_solution_content h1 {
  text-transform: capitalize;
  margin-bottom: 1rem;
  font-size: 2.5rem;
}
.our_solution_content p {
}

.hover_color_bubble {
  position: absolute;
  background: rgb(54 81 207 / 15%);
  width: 100rem;
  height: 100rem;
  left: 0;
  right: 0;
  z-index: -1;
  top: 16rem;
  border-radius: 50%;
  transform: rotate(-36deg);
  left: -18rem;
  transition: 0.7s;
}

.solution_cards_box .solution_card:hover .hover_color_bubble {
  top: 0rem;
}

.solution_cards_box .solution_card .so_top_icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 20px;
  left: 30px;
  position: absolute;
}

.solution_cards_box .solution_card .so_top_icon img {
  width: 40px;
  height: 50px;
  object-fit: contain;
}

/*start media query*/
@media screen and (min-width: 320px) {
  .sol_card_top_3 {
    position: relative;
    top: 0;
  }

  .our_solution_category {
    width: 100%;
    margin: 0 auto;
  }

  .our_solution_category .solution_cards_box {
    flex: auto;
  }
}
@media only screen and (min-width: 768px) {
  .our_solution_category .solution_cards_box {
    flex: 1;
  }
}
@media only screen and (min-width: 1024px) {
  .sol_card_top_3 {
    position: relative;
    top: 0rem;
  }
  .our_solution_category {
    width: 90%;
    margin: 0 auto;
  }
}

</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script>
  var app_stop_ticket = "{{ url('app_stop_ticket') }}";
</script>
<script>
    $(document).ready(function () {
        $(".page-title h1").text("Ma journée");
        $(".bandeau-img img").attr("src","/uploads/users/{{ user_image }}");
        $(".bandeau-img img").attr("height",84);

        /* Datatable de clients */
        $('#dayTasksTable').DataTable({
            "columnDefs": [
            ],
            "language": {
                "emptyTable": "Vous n'avez pas de taches prévues pour aujourd'hui.",
                "infoEmpty": "Vous verrez apparaître ici toutes les taches qui vous sont affectées pour aujourd'hui et toutes les taches en cours..."
            },
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/tasks/ajax-list-today',
                data: {
                    origin : 'task',
                },
                dataSrc: 'tasks',
                dataType: 'json',
            },
            ordering: true,
            paging: false,
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Rechercher", 
                emptyTable: "Vous n'avez pas de tache affectée pour aujourd'hui.",
                infoEmpty: "Vous verrez apparaître ici les taches en cours ou à terminer pour aujourd'hui."
            },
            fixedHeader: true,
            columns: [
                { data: 'taskID' },
                { data: 'ticket' },
                { data: 'taskName' },
                { data: 'taskStatus' },
                { data: 'taskDuration' },
                { data: 'taskPriority' },
                { data: 'taskDelay' },
                { data: 'taskStarted' },
                { data: 'actions' }
            ]
        });

        /* Datatable de clients */
        var ticketsTable = $('#dayTicketsTable').DataTable({
            "columnDefs": [
            ],
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/ajax-tickets/{{ user.id }}/tickets',
                dataSrc: 'data',
                dataType: 'json',
            },
            ordering: true,
            paging: false,
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Rechercher"
            },
            columns: [
                { data: 'parentID' },
                { data: 'refID' },
                { data: 'type' },
                { data: 'ticketTitle' },
                { data: 'ticketAssignation' },
                { data: 'ticketStatus' },
                { data: 'ticketEstimation' },
                { data: 'ticketSpent' },
                { data: 'ticketAvancement' },
                { data: 'ticketRAF' },
                { data: 'ticketComments' },
                { data: 'actions' }
            ]
        });

        /* Datatable des pointages de la journée */
        $('#todayPointageTable').DataTable({
            "columnDefs": [],
            "language": {
                    "emptyTable": "Aucun pointage n'a été réalisé sur ce ticket.",
                    "infoEmpty": "Cliquez sur 'Pointer une activité' pour les comptabiliser sur le ticket."
                },
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/today-pointage/ajax-list',
                dataSrc: 'pointage',
                dataType: 'json',
            },
            ordering: true,
            paging: false,
            fixedHeader: true,
            columns: [
                { data: 'id' },
                { data: 'typeActivity' },
                { data: 'activity' },
                { data: 'taskID' },
                { data: 'comments' },
                { data: 'pointage' },
                { data: 'createdBy' },
                { data: 'createdAt' }
            ]
        });

        
    })
</script>
<script>
  function stop_btn_clicked(id) {
    $('#ticketID').text(id);
    $('#status_statusName').val('dev_en_cours');
    $('#exampleModal').modal('show');
  }
</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 text-muted">
              Ma journée                                 
						</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 ">
        <!--begin::digi card-->
        <div class="digi-card card-flush">
          <!--begin::digi card header-->
          <div class="digi-card-header align-items-center py-3 gap-1 gap-md-2" style="border-bottom: none !important;">
            <!--begin::digi card title-->
            
            <!--end::digi card title-->
            <!--begin::Actions-->
            <div class="digi-card-action">
              <!--begin::navbar-->
              <nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
                <ul class="nav nav-pills">
                  <li class="nav-item">
                    <a class="nav-link" href="#digi_task_today">Mes taches</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#digi_ticket_today">Mes tickets</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#digi_pointage_today">Mon pointage</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#digi_activity_today">Activités</a>
                  </li>
                </ul>
              </nav>
            </div>
            <!--end::Actions-->
          </div>
          <!--end::digi card header-->
          <div class="card-body pt-0">
            <div style="height: 1200px; 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">
              <!--begin::Tab Content-->
              <div class="tab-content">
                  <!--begin::Tab panel-->
                  <div id="digi_task_today" class="card-body p-0 tab-pane fade show active" role="tabpanel" aria-labelledby="kt_activity_today_tab">
                    <div class="digi-card-header align-items-center py-3 gap-1 gap-md-2">
                      <!--begin::digi card title-->
                      <div class="digi-card-title">
                        <div class="block-title">Taches de la journée</div>
                      </div>
                    </div>
                    <div class="card-body pt-0">
                        <!-- Tasks Datatable -->
                        <table id="dayTasksTable" class="dataTable hover striped">
                        <caption>Survoler la tache pour avoir un aperçu de la description.</caption>
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Ticket</th>
                                    <th>Tache</th>
                                    <th>Etat</th>
                                    <th>Durée</th>
                                    <th>Priorité</th>
                                    <th>Echéance</th>
                                    <th>Commencée le</th>   
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                  </div>
                  <!--end::Tab panel-->
                  <br>
                  <br>
                  <!--begin::Tab panel-->
                  <div id="digi_ticket_today" class="card-body p-0 tab-pane fade show active" role="tabpanel" aria-labelledby="kt_activity_today_tab">
                    <div class="digi-card-header align-items-center py-3 gap-1 gap-md-2">
                      <!--begin::digi card title-->
                      <div class="digi-card-title">
                        <div class="block-title">Tickets de la journée</div>
                      </div>
                    </div>
                    <div class="card-body pt-0">
                      <!-- Users Datatable -->
                      <table id="dayTicketsTable" class="dataTable hover striped">
                        <thead>
                          <tr>
                            <th>Ticket parent</th>
                            <th># Ticket</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>Reste à faire</th>
                            <th>Commentaires</th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <!--end::Tab panel-->
                  <br>
                  <br>
                  <!--begin::Tab panel-->
                  <div id="digi_pointage_today" class="card-body p-0 tab-pane fade show active" role="tabpanel" aria-labelledby="kt_activity_today_tab">
                    <div class="digi-card-header align-items-center py-3 gap-1 gap-md-2">
                      <!--begin::digi card title-->
                      <div class="digi-card-title">
                        <div class="block-title">Mon pointage</div>
                      </div>
                    </div>
                    <div class="card-body pt-0">
                      <!-- Datatable du temps passé -->
                      <table id="todayPointageTable" class="dataTable hover striped" style="width: 100%;">
                        <thead>
                          <tr>
                            <th>#</th>
                            <th>Type d'activité</th>
                            <th>Activité</th>
                            <th>Tache</th>
                            <th>Commentaire</th>
                            <th>Temps passé</th>
                            <th>par</th>
                            <th>Le</th>
                          </tr>
                        </thead>
                        <tbody>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <!--end::Tab panel-->
                  <br>
                  <br>
                  <!--begin::Tab panel-->
                  <div id="digi_activity_today" class="card-body p-0 tab-pane fade show active" role="tabpanel" aria-labelledby="digi_activity_today_tab">
                    <div class="digi-card-header align-items-center py-3 gap-1 gap-md-2">
                      <!--begin::digi card title-->
                      <div class="digi-card-title">
                        <div class="block-title">Activités de la journée</div>
                      </div>
                    </div>
                    <br>
                    <!--begin::Timeline-->
                    <div class="timeline timeline-border-dashed">
                      {% for history in histories %}
                      <!--begin::Timeline item-->
                      <div class="timeline-item">
                        <!--begin::Timeline line-->
                        <div class="timeline-line"></div>
                        <!--end::Timeline line-->
                        <!--begin::Timeline icon-->
                        <div class="timeline-icon">{{ history.image|raw }}</div>
                        <!--end::Timeline icon-->
                          <!--begin::Timeline content-->
                          <div class="timeline-content mb-10 mt-n1">
                            <!--begin::Timeline heading-->
                            <div class="pe-3 mb-5">
                              <!--begin::Title-->
                              <div class="fs-5 fw-semibold mb-2">{{ history.comments|raw }}</div>
                              <!--end::Title-->
                              <!--begin::Description-->
                              <div class="d-flex align-items-center mt-1 fs-6">
                                <!--begin::Info-->
                                <div class="text-muted me-2 fs-7">{{ history.time }}</div>
                                <!--end::Info-->
                                <!--begin::User-->
                                <div class="symbol symbol-circle symbol-25px" data-bs-toggle="tooltip" data-bs-boundary="window" data-bs-placement="top" aria-label="Nina Nilson" data-bs-original-title="Nina Nilson" data-kt-initialized="1">
                                  <img src="/uploads/users/{{ history.creatorPhoto }}" alt="img">
                                </div>  
                                <!--end::User--> 
                              </div>
                              <!--end::Description-->
                            </div>
                            <!--end::Timeline heading-->
                          </div>
                          <!--end::Timeline content-->    
                        </div>
                        <!--end::Timeline item-->
                        {% endfor %}
                      </div>
                      <!--end::Timeline-->
                    </div>
                    <!--end::Tab panel-->
                  </div>
                  <!--end::Tab Content-->
                </div>
            </div>
			    </div>
		    </div>
        <br>
      </div>
      <!--end::Content container-->
    </div>
    <!--end::Content-->
  </div>
  <!--end::Content wrapper-->
</div>
<!--end::Row-->  
{% endblock %}