{% 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;
}
.digi-project-card img {
  opacity: 50%;
  border-radius: 20px;
  width: 80%;
}
.our_solution_category {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.our_solution_category .digi-project-cards {
  display: flex;
  flex-direction: row;
  /*justify-content: center;*/
}

.digi-project-card:hover {
  background: #06668C;/*#309df0;*/
  color: #fff;
  transform: scale(1.1);
  z-index: 9;
}

.digi-project-card:hover span h3 {
  color: #fff;
}

.digi-project-card span h3 {
  color: #000;
  font-size: 1.5rem;
  margin-top: 10px;
}
.digi-project-card:hover i {
  color: #000;
}

.digi-project-cards {
  background: #309df0;
  color: #fff;
  z-index: 9;
}

.digi-project-card:hover::before {
  /*background: rgb(85 108 214 / 10%);*/
  background: #06668C;
}

.digi-project-cards {
  background: rgb(85 108 214 / 10%);
}

.digi-project-card .digi-project-card:hover .solu_title h3,
.digi-project-card .digi-project-card:hover, .digi-project-cards {
  color: #fff;
}

.digi-project-description p {
  color: blue;
}
.digi-project-card:hover p {
  color: #fff;
}

.digi-project-cards .digi-project-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;
}

.digi-project-cards .digi-project-card:hover .digi-project-description button {
  background: #fff !important;
  color: #309df0;
}

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

.digi-project-card .digi-project-description p {
  font-size: 12px;
  margin-bottom: 15px;
}

.digi-project-card .digi-project-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;
}

.digi-project-cards .digi-project-card:hover .hover_color_bubble {
  top: 0rem;
}

.digi-project-cards .digi-project-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;
}

.digi-project-cards .digi-project-card .so_top_icon img {
  width: 40px;
  height: 50px;
  object-fit: contain;
}

.digi-project-cards {
  /*flex: 0 50%;*/
    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;
    
    padding: 10px 15px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 265px;
    transition: 0.7s;

    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.digi-project-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;
    padding: 10px 15px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 265px;
    transition: 0.7s;
    margin: 2%;
  }

/*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 .digi-project-cards {
    flex: auto;
  }
}
@media only screen and (min-width: 768px) {
  .our_solution_category .digi-project-cards {
    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;
  }
}

@media (min-width: 1440px) {
  .digi-project-card {
    width: 25%;
    margin: 2%;
  }
}
@media (min-width: 763px) and (max-width: 1440px) {
  .digi-project-card {
    width: 45%;
    margin: 2%;
  }
}

@media (max-width: 762px) {
  .digi-project-card {
    width: 85%;
    margin: 2%;
  }
}

/* card progressbar */
.progress-container {
  /*margin-top: 20px;
  margin-bottom: 20px;*/
  width: 80%;
  text-align: center;
}
.project-progress, .budget-progress {
  padding: 6px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25),
    0 1px rgba(255, 255, 255, 0.08);
}
.progress-moved .progress-bar {
  background-color: lightgreen;
  animation: progressAnimation 6s;
}
.progress-bar {
  height: 12px;
  border-radius: 30px;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.05)
  );
  transition: 0.4s linear;
  transition-property: width, background-color;
}
.digi-conso-progress-title-label {
  font-size: 14px;
  font-weight: 400;
  color: blue;
  text-align: left;
}
.digi-conso-progress-value-label {
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: blue;
}

.digi-card-budget, .digi-card-conso {
  color: #000;
}

.digi-card-container {
  margin-left: 5%;
  margin-right: 5%;
}
/*@keyframes progressAnimation {
  0% {
    width: 0%;
    background-color: #f9bcca;
  }
  100% {
    width: 85%;
    background-color: #ef476f;
  }
}*/

</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("Mon tableau de bord");
        $(".bandeau-img img").attr("src","/uploads/users/{{ user_image }}");
        $(".bandeau-img img").attr("height",84);

        $.fn.dataTable.ext.buttons.alert = {
            className: 'btn-digi',
        
            /*action: function ( e, dt, node, config ) {
                alert( this.text() );
            }*/
        };

        /* Datatable de clients */
        $('#TicketsTable').DataTable({
            "columnDefs": [
                { "width": "8%", "targets": 0 }
            ],
            dom: 'Bfrtip',
            buttons: [
                'copy', 'excel', 'pdf'
            ],
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/ajax-tickets/{{ user.id }}/home'
            },
            ordering: true,
            paging: false,
            fixedColumns: {
                heightMatch: 'none'
            },
            columns: [
                { data: 'refID' },
                { data: 'type' },
                { data: 'ticketTitle' },
                { data: 'ticketExcerpt' },
                { data: 'ticketAssignation' },
                { data: 'ticketStatus' },
                { data: 'ticketEstimation' },
                { data: 'ticketSpent' },
                { data: 'ticketAvancement' },
                { data: 'ticketRAF' },
                { data: 'ticketComments' },
                { data: 'actions' }
            ]
        });
        /* Récupération des taches dans la page d'accueil */
        $('#TasksTable').DataTable({
            "columnDefs": [
                { "width": "8%", "targets": 0 }
            ],
            dom: 'Bfrtip',
            buttons: [
                'copy', 'excel', 'pdf'
            ],
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/tasks/ajax-list',
                data: {
                  origin : 'home',
                },
                dataSrc: "tasks"
            },
            ordering: true,
            paging: false,
            fixedColumns: {
                heightMatch: 'none'
            },
            columns: [
                { data: 'taskID' },
                { data: 'taskName' },
                { data: 'taskDescription' },
                { data: 'taskStatus' },
                { data: 'taskDuration' },
                { data: 'taskStarted' },
                { data: 'actions' }
            ]
        });

        $.ajax({
            url: '/status/ajax-list',
            method: "post",
            dataType: "json",
            async:      true, 
            success: function(data, status) {  
                var elements = data.data;
                console.log(elements);
                for (var index = 0; index <= elements.length -1; index++) {
                  $('#status_statusName').append('<option value="' + elements[index].statusValues + '">' + elements[index].statusNames + '</option>');
                }
            },  
        }).done(function (response) {
        }).fail(function (response) {
        });

        $('#btnSaveStopTicket').click(function() {

          var id = $('#ticketID').text();
          var status = $('#status_statusName').val();
          var comment = $('#status_statusComments').val();
          var percent = $('#ticket_avancement').val();
          var isArchived = $('#archivedSwitch').prop('checked');

          var comments = "[ Statut = " + status + " ]\n" + "[ Avancement : " + percent + "% ]\n" + "[ Commentaire : " + comment + " ]\n";

          //alert("id = " + id + ", status = " + status + ", comment = " + comment + ", percent = " + percent + ", archived = " + isArchived);
          $.ajax({
            url: '/ticket-stop',
            method: "get",
            dataType: "json",
            data: {
              id: id,
              status: status, 
              comment: comments, 
              percent: percent,
              isArchived: isArchived
            }
          }).done(function (response) {
            console.log('Les données ont bien été mises à jour.');
            //$("#categorizeSelectionModal").modal('hide');
            $('#exampleModal').modal('hide');
          }).fail(function (jqXHR, textStatus, errorThrown) {
            alert("error = " + errorThrown + ', textStatus = ' + textStatus);
            //$("#categorizeSelectionModal").modal('hide');
            $('#exampleModal').modal('hide');
          });
        })
    })
</script>
<script>
  function stop_btn_clicked(id) {
    $('#ticketID').text(id);
    $('#status_statusName').val('dev_en_cours');
    $('#exampleModal').modal('show');
  }
</script>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Mise à jour du ticket <span id="ticketID"></span></h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label for="status_statusName" class="form-label">Nom du statut</label>
          <select class="form-select" aria-label="Default select example" id="status_statusName">
            <option></option>
          </select>
        </div>
        <br>
        <div class="mb-3">
          <label for="ticket_avancement" class="form-label">Avancement</label>
          <select class="form-select" aria-label="Default select example" id="ticket_avancement">
            <option value="0">0%</option>
            <option value="10">10%</option>
            <option value="20">20%</option>
            <option value="30">30%</option>
            <option value="40">40%</option>
            <option value="50">50%</option>
            <option value="60">60%</option>
            <option value="70">70%</option>
            <option value="80">80%</option>
            <option value="90">90%</option>
            <option value="100">100%</option>
          </select>
        </div>
        <br>
        <!--div class="form-check form-switch"-->
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="archivedSwitch">
          <label class="form-check-label" for="defaultCheck1">
            Archiver le ticket après mise à jour
          </label>
        </div>
        <br>
        <div class="mb-3">
          <label for="status_statusComments" class="form-label">Commentaires</label>
          <textarea id="status_statusComments" class="form-control" name="status_statusComments" placeholder="Commenter le statut" rows="7" cols="20"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" id="btnSaveArchiveStopTicket" class="btn btn-success">Mettre à jour et archiver</button>
        <button type="button" id="btnSaveStopTicket" class="btn btn-primary">Mettre à jour</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Quitter sans sauvegarder</button>
      </div>
    </div>
  </div>
</div>
<!--begin::Main-->
<div class="app-main flex-column flex-row-fluid " id="kt_app_main">
	<!--begin::Content wrapper-->
	<div class="d-flex flex-column flex-column-fluid">       
		<!--begin::Toolbar-->
		<div id="kt_app_toolbar" class="app-toolbar  py-3 py-lg-6 ">
      <!--begin::Toolbar container-->
      <div id="kt_app_toolbar_container" class="app-container  container-xxl d-flex flex-stack ">
				<!--begin::Page title-->
				<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3 ">
					<!--begin::Title-->
					<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Multipurpose</h1>
					<!--end::Title-->
					<!--begin::Breadcrumb-->
					<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
            <!--begin::Item-->
            <li class="breadcrumb-item text-muted">
							<a href="/" class="text-muted text-hover-primary">Accueil</a>
            </li>
            <!--end::Item-->
            <!--begin::Item-->
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-500 w-5px h-2px"></span>
						</li>
            <!--end::Item--> 
            <!--begin::Item-->
            <li class="breadcrumb-item text-muted">Mes projets</li>
            <!--end::Item-->            
          </ul>
          <!--end::Breadcrumb-->
    		</div>
				<!--end::Page title-->
			</div>
		  <!--end::Toolbar container-->
		</div>
		<!--end::Toolbar-->                                                 
		<!--begin::Content-->
    <div class="digi-card-container">
      {% if projectInfos == null %}
        <div class="digi-no-data">
          <p>Vous n'avez pas encore de projets.</p>
          <a href="/projects/add" class="btn btn-digi" style="background-color: #06668C; color: #ffffff;">
            <i class="fa-solid fa-plus" style="color: #ffffff;" aria-hidden="true"></i>&nbsp;Créer un projet
          </a>
        </div>
      {% else %}
      <div class="digi-project-cards">
        {% for project in projectInfos %}
        <div class="digi-project-card">
          <img src="/assets/projects/project-2.jpg" class="digi-project-card-img-top" alt="...">
            <div class="hover_color_bubble"></div>
            <div class="so_top_icon">
            {% if project.companyLogo != null %}
              <div class="digi-project-card-company-logo"><img src="/uploads/companies/{{ project.companyLogo }}"></div>
            {% endif %}
            </div>
            <span>
              <h3>{{ project.projectName }}</h3>
            </span>
            <div class="digi-project-description">
              <p>{{ project.excerpt }}</p>
              <br>
              <div class="digi-project-card-status" style="background-color: {{ project.projectStatus.color }}; color: {{ project.projectStatus.textColor }}; border-radius: 20px; margin-left: 5px; margin-right: 5px; width: 200px; text-align: center; margin-bottom: 10px;">{{ project.projectStatus.statusName }}</div>
              <div class="progress-container">
                <div class="digi-conso-progress-title-label"><span>Budget consommé</span></div>
                <div class="budget-progress progress-moved">
                  <div class="progress-bar" style="width: {{ project.budgetConso }}%; animation-duration: 3s;"></div>
                </div>
                <div class="digi-conso-progress-value-label"><span>{{ project.budgetConso }}%</span></div>
              </div>
              <div class="progress-container">
                <div class="digi-conso-progress-title-label"><span>Avancement projet</span></div>
                <div class="project-progress progress-moved">
                  <div class="progress-bar" style="width: {{ project.avancement }}%;"></div>
                </div>
                <div class="digi-conso-progress-value-label"><span>{{ project.avancement }}%</span></div>
              </div>
              <br>
              <div class="">
                <div class="digi-card-budget">Estimation : <span>{{ project.estimation }} j</span></div>
                <div class="digi-card-conso">Consommé : <span>{{ project.consommation }} j</span></div>
              </div>
              <br>
              <a href="/projects/detail/{{ project.id }}"><button type="button" class="read_more_btn"><i class="fa-solid fa-angles-right" style="color: #fff; font-weight: bold;"></i>&nbsp;En savoir plus</button></a>
            </div>
          </div>
          {% endfor %}
        {% endif %}
        </div>
	    </div>
    </div>
<!--end::Row-->  
{% endblock %}