{% 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>
:root {
  --numDays: 5;
  --numHours: 10;
  --timeHeight: 60px;
  --calBgColor: #fff1f8;
  --eventBorderColor: #f2d3d8;
  --eventColor1: #ffd6d1;
  --eventColor2: #fafaa3;
  --eventColor3: #e2f8ff;
  --eventColor4: #d1ffe6;
}

.calendar {
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr;
  margin: 2rem;
}

.timeline {
  display: grid;
  grid-template-rows: repeat(var(--numHours), var(--timeHeight));
}

.days {
  display: grid;
  grid-column: 2;
  gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.events {
  display: grid;
  grid-template-rows: repeat(var(--numHours), var(--timeHeight));
  border-radius: 5px;
  background: var(--calBgColor);
}

// Place on Timeline
.start-10 {
  grid-row-start: 2;
}

.start-11 {
  grid-row-start: 3;
}

.start-12 {
  grid-row-start: 4;
}

.start-13 {
  grid-row-start: 5;
}

.start-14 {
  grid-row-start: 6;
}

.start-15 {
  grid-row-start: 7;
}

.start-16 {
  grid-row-start: 8;
}

.start-17 {
  grid-row-start: 9;
}

.end-9 {
  grid-row-end: 1;
}

.end-10 {
  grid-row-end: 2;
}

.end-11 {
  grid-row-end: 3;
}

.end-12 {
  grid-row-end: 4;
}

.end-13 {
  grid-row-end: 5;
}

.end-14 {
  grid-row-end: 6;
}

.end-15 {
  grid-row-end: 7;
}

.end-16 {
  grid-row-end: 8;
}

.end-17 {
  grid-row-end: 9;
}

// Event

.title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.event {
  border: 1px solid var(--eventBorderColor);
  border-radius: 5px;
  padding: 0.5rem;
  margin: 0 0.5rem;
  background: white;
}

.space,
.date {
  height: 60px
}

// Global / Etc

body {
  font-family: system-ui, sans-serif;
}

.corp-fi {
  background: var(--eventColor1);
}

.ent-law {
  background: var(--eventColor2);
}

.writing {
  background: var(--eventColor3);
}

.securities {
  background: var(--eventColor4);
}

.date {
  display: flex;
  gap: 1em;
}

.date-num {
  font-size: 3rem;
  font-weight: 600;
  display: inline;
}

.date-day {
  display: inline;
  font-size: 3rem;
  font-weight: 100;
}
</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-glossy',
        
            /*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',
                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>
<div class="container-homepage">
    <h1>Mon emploi du temps</h1>
    <br>
    <div class="calendar">
    <div class="timeline">
        <div class="spacer"></div>
        <div class="time-marker">9:00</div>
        <div class="time-marker">10:00</div>
        <div class="time-marker">11:00</div>
        <div class="time-marker">12:00</div>
        <div class="time-marker">13:00</div>
        <div class="time-marker">14:00</div>
        <div class="time-marker">15:00</div>
        <div class="time-marker">16:00</div>
        <div class="time-marker">17:00</div>
        <div class="time-marker">18:00</div>
    </div>
    <div class="days">
        <div class="day mon">
        <div class="date">
            <p class="date-day">LUN.</p>
            <p class="date-num">9</p>
        </div>
        <div class="events">
            <div class="event start-14 end-17 securities">
            <p class="title">Securities Regulation</p>
            <p class="time">2 PM - 5 PM</p>
            </div>
        </div>
        </div>
        <div class="day tues">
        <div class="date">
            <p class="date-day">MAR.</p>
            <p class="date-num">10</p>
        </div>
        <div class="events">
            <div class="event start-10 end-12 corp-fi">
            <p class="title">Corporate Finance</p>
            <p class="time">10 AM - 12 PM</p>
            </div>
            <div class="event start-13 end-16 ent-law">
            <p class="title">Entertainment Law</p>
            <p class="time">1PM - 4PM</p>
            </div>
        </div>
        </div>
        <div class="day wed">
        <div class="date">
            <p class="date-day">MER.</p>
            <p class="date-num">11</p>
        </div>
        <div class="events">
            <div class="event start-12 end-13 writing">
            <p class="title">Writing Seminar</p>
            <p class="time">11 AM - 12 PM</p>
            </div>
            <div class="event start-14 end-17 securities">
            <p class="title">Securities Regulation</p>
            <p class="time">2 PM - 5 PM</p>
            </div>
        </div>
        </div>
        <div class="day thurs">
        <div class="date">
            <p class="date-day">JEU.</p>
            <p class="date-num">12</p>
        </div>
        <div class="events">
            <div class="event start-10 end-12 corp-fi">
            <p class="title">Corporate Finance</p>
            <p class="time">10 AM - 12 PM</p>
            </div>
            <div class="event start-13 end-16 ent-law">
            <p class="title">Entertainment Law</p>
            <p class="time">1PM - 4PM</p>
            </div>
        </div>
        </div>
        <div class="day fri">
        <div class="date">
            <p class="date-day">VEN.</p>
            <p class="date-num">13</p>
        </div>
        <div class="events">
        </div>
        </div>
    </div>
    </div>
    
</div>  
{% endblock %}