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

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

{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('lib/ladda-button/ladda-themeless.min.css') }}">
{% endblock %}

{% block page %}

    <div class="row p-5">
        <div class="col-md-12">
            <div class="row">
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card card-icon-bg card-icon-bg-primary o-hidden mb-4">
                        <div class="card-body"><i class="i-File-Settings"></i>
                            <div class="content">
                                <p class="text-muted mt-2 mb-0">Ordres de fabrication</p>
                                <p class="text-primary text-24 line-height-1 mb-2">{{ nbOrdres }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card card-icon-bg card-icon-bg-primary o-hidden mb-4">
                        <div class="card-body"><i class="i-Loading-2"></i>
                            <div class="content">
                                <p class="text-muted mt-2 mb-0">Ordres en retard</p>
                                <p class="text-primary text-24 line-height-1 mb-2">{{ nbOrdresEnRetard }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card card-icon-bg card-icon-bg-primary o-hidden mb-4">
                        <div class="card-body"><i class="i-Gears"></i>
                            <div class="content">
                                <p class="text-muted mt-2 mb-0">Opérations plannifiées</p>
                                <p class="text-primary text-24 line-height-1 mb-2">{{ nbOperationsPlannifiees }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card card-icon-bg card-icon-bg-primary o-hidden mb-4">
                        <div class="card-body"><i class="i-Optimization"></i>
                            <div class="content">
                                <p class="text-muted mt-2 mb-0">Opérations non plannifiées</p>
                                <p class="text-primary text-24 line-height-1 mb-2">{{ nbOperationsNonPlannifiees }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% if is_granted("ROLE_GANTT") %}
            <div class="row mt-5 justify-content-center">
                <div class="col-lg-10 text-center">
                    <a class="btn btn-success btn-xl ladda-button basic-ladda-button" data-style="expand-left" href="{{ path('recuperation-of') }}">
                        <span class="ladda-label"><i class="fas fa-sync"></i> Synchro ERP</span><span class="ladda-spinner"></span><div class="ladda-progress" style="width: 0px;"></div>
                    </a>
                    <a class="btn btn-primary btn-xl ladda-button basic-ladda-button" data-style="expand-left" href="{{ path('publication-of') }}">
                        <span class="ladda-label"><i class="fas fa-sync"></i> Publier le planning</span><span class="ladda-spinner"></span><div class="ladda-progress" style="width: 0px;"></div>
                    </a>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
    
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    
    <script src="{{ asset('lib/ladda-button/spin.min.js') }}"></script>
    <script src="{{ asset('lib/ladda-button/ladda.min.js') }}"></script>
    
    <script>
        
        $(document).ready(function () {
            $('.basic-ladda-button').on('click', function (e) {
              var laddaBtn = e.currentTarget;
              var l = Ladda.create(laddaBtn);
              l.start();
              setTimeout(function () {
                l.stop();
              }, 600000);
            });
        });
        
    </script>
    
{% endblock %}