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

{% block title %}
    {{ parent() }} - Accueil
{% endblock %}

{% block stylesheets %}	
    <link rel="stylesheet" href="{{ asset('lib/datatables-1.11.3/css/jquery.dataTables.min.css') }}">   
    <link rel="stylesheet" href="{{ asset('lib/datatables-1.11.3/css/dataTables.bootstrap4.min.css') }}">
{% endblock %}

{% block megamenu %}
    <div class="d-flex align-items-center border-left border-right pl-3 pr-2">
        <!-- Mega menu -->
        <div class="dropdown mega-menu d-none d-md-block">
            <a href="#" class="btn btn-secondary mr-2 btn-actions-header" id="dropdownMegaMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ ligneDeFabrication.code }}</a>
            <div class="dropdown-menu text-left" aria-labelledby="dropdownMenuButton">
                <div class="row m-0">
                    <div class="col-md-4 p-4">
                        <p class="text-primary text--cap border-bottom-primary d-inline-block">Postes de charge</p>
                        <div class="menu-icon-grid w-auto p-0">
                            {% for ligne in lignes %}
                                <a href="{{ path('viewList', {'codeLigne': ligne.code}) }}"><i class="i-Gears"></i> {{ ligne.nom }}</a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block headerbar %}
{% endblock %}

{% block rightbar %}
{% endblock %}

{% block page %}

    <div class="row mt-1">
        <div class="col-12">
            <div class="table-responsive">
              <table id="order-listing" class="table" data-page-length="20">
                  <thead>
                      <tr>
                        <th>OF</th>
                        <th>Ope</th>
                        <th>Article</th>
                        <th>Désignation</th>
                        <th>Début</th>
                        <th>Fin</th>
                        <th>Qté lancée</th>
                        <th>Qté produite</th>
                      </tr>
                  </thead>
                  <tbody>
                      {% for operation in operations %}
                      <tr>
                          <td class="font-weight-bold">{{ operation.ordreFabrication.code }}<span class="carre-couleur-liste" style="background:{{ operation.ordreFabrication.couleur }};"></span></td>
                          <td>{{ operation.numero }}</td>
                          <td>{{ operation.ordreFabrication.article }}</td>
                          <td>{{ operation.ordreFabrication.designationArticle }}</td>
                          <td>{{ operation.dateDebut|date('d/m/y H:i') }}</td>
                          <td>{{ operation.dateFin|date('d/m/y H:i') }}</td>
                          <td class="text-right">{{ operation.ordreFabrication.quantiteLancee }}</td>
                          <td class="text-right">{{ operation.ordreFabrication.quantiteProduite }}</td>
                      </tr>
                      {% endfor %}
                      
                      {% for maintenance in maintenances %}
                      <tr>
                          <td class="font-weight-bold">{{ maintenance.numero }}<span class="carre-couleur-liste" style="background:{{ maintenance.couleur }};"></span></td>
                          <td></td>
                          <td>Maintenance</td>
                          <td>{{ maintenance.libelle }}</td>
                          <td>{{ maintenance.dateDebut|date('d/m/y H:i') }}</td>
                          <td>{{ maintenance.dateFin|date('d/m/y H:i') }}</td>
                          <td class="text-right">0</td>
                          <td class="text-right">0</td>
                      </tr>
                      {% endfor %}
                  </tbody>
              </table>
            </div>
        </div>
    </div>
    
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    
    <script src="{{ asset('lib/datatables-1.11.3/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('lib/datatables-1.11.3/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('lib/datatables-1.11.3/js/moment.js') }}"></script>
    <script src="{{ asset('lib/datatables-1.11.3/js/datetime-moment.js') }}"></script>
    <script src="{{ asset('js/liste-operations/data-table.js') }}"></script>
    
    <script>
        
        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
        
    </script>
    
{% endblock %}