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

{% import 'macros/macro.html.twig' as macro %}

{% block title %}
    {{ parent() }}
    Statistiques des articles en location BE
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('salsa/SalsaCalendar.min.css') }}" media="all" />
    <style>
        tr.group,
        tr.group:hover {
            background-color: #f0f2f5 !important;
            font-weight: 900
        }
        div.dataTables_wrapper div.dataTables_filter input {
            width: 220px;
        }
    </style>
{% endblock %}

{% block body %}
    {{ parent() }}

    <!-- Dynamic Table Full -->
    <div class="block">
        <div class="block-header block-header-default bg-gray">
            <h4 class="font-w700" style="display: -webkit-box">Statistiques de CA sur les articles en location du BE</h4>
        </div>
        <div class="block-content block-content-full">
            <!-- DataTables functionality is initialized with .js-dataTable-full class in js/pages/be_tables_datatables.min.js which was auto compiled from _es6/pages/be_tables_datatables.js -->
            <table class="table table-bordered table-vcenter js-dataTable-full">
                <thead>
                <tr>
                    <th class="text-center"  style="width: 50px">Famille</th>
                    <th class="text-center"  style="width: 200px">Article</th>
                    <th class="text-center"  style="width: 50px">Date création</th>
                    <th>Qté total</th>
                    <th>CA HT total</th>
                    <th>Qté en {{ yearCurrent }}</th>
                    <th>CA HT en {{ yearCurrent }}</th>
                    <th>Prix achat</th>
                    <th style="width: 40px">Frais</th>
                    <th class="text-center" style="width: 30px"></th>
                </tr>
                </thead>
                <tbody>

                {% for article in articles %}


                    <tr>
                        <td class="d-none d-sm-table-cell">{{ article.subFamilyName }}</td>
                        <td class="d-none d-sm-table-cell">
                            <div style="margin-top: 4px; font-weight: 900">
                                {{ article.id}}
                            </div>
                        </td>
                        <td class="d-none d-sm-table-cell">{{ article.createdAt|date('d/m/Y') }}</td>
                        <td class="d-none d-sm-table-cell">{{ article.quantityTotal }}</td>
                        <td class="d-none d-sm-table-cell">{{ article.caTotal|number_format(2, ',', ' ') }} €</td>
                        <td class="d-none d-sm-table-cell">{{ article.quantityPeriod }}</td>
                        <td class="d-none d-sm-table-cell">
                            {% if article.caTotalPeriod != 0 %}
                                {{ article.caTotalPeriod|number_format(2, ',', ' ') }} €
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell">{{ article.purchasePrice|number_format(2, ',', ' ') }} €</td>
                        <td class="text-center">
                            {% if article.frais %}
                                {{ article.frais }} €
                            {% endif %}
                        </td>
                        <td class="text-center">
                                <button type="button" class="btn btn-sm btn-primary" data-toggle="tooltip" title="" onclick="openPopipMaj('{{ article.id }}', '{{ article.frais }}')">
                                    Editer
                                </button>
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
    <!-- END Dynamic Table Full -->

    <button type="button" id="btn-modal-maj" class="btn" data-toggle="modal" data-target="#modal-large" style="display: none"></button>

{% endblock %}

{% block modal %}
    <div class="modal" id="modal-large" tabindex="-1" role="dialog" aria-labelledby="modal-large" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form action="be_forms_elements_bootstrap.html" method="post" onsubmit="return false;">
                    <div class="block block-themed block-transparent mb-0">
                        <div class="block-header">
                            <h3 class="block-title">Mettre à jour les frais pour un article</h3>
                            <div class="block-options">
                                <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                                    <i class="si si-close"></i>
                                </button>
                            </div>
                        </div>
                        <div class="block-content">
                            <input type="text" id="article-id" style="display: none">
                            <input type="text" id="update-article-url" value="{{ path('stat_loc_update_article') }}" style="display: none">
                            <input type="text" id="update-article-redirect" value="{{ path('stat_be_loc') }}" style="display: none">
                            <div class="form-group row">
                                <label class="col-12" for="example-text-input-valid">Code article :</label>
                                <div class="col-6" style="display: inline-flex">
                                    <span id="article-id-label"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12" for="example-text-input-valid">Frais en euros :</label>
                                <div class="col-6" style="display: inline-flex">
                                    <input type="text"
                                           id="article-frais"
                                           class="form-control"
                                           value="" style="width: 350px;margin-right:15px">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button type="button" class="btn btn-primary" onclick="updateArticle()" id="btn-update-article">
                            <i class="fa fa-check"></i> Mettre à jour
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock  %}
{% block javascripts %}
    {{ parent() }}

    <script src="{{ asset('assets/js/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            var tableArticle = $(".js-dataTable-full");
            tableArticle.DataTable({
                fixedHeaders: true,
                "paging": false,
                "order": [[ 0, "asc" ], [ 1, "asc" ]],
                columnDefs:[
                    {orderable:false,targets:[6]}
                ],
                responsive: true,
                "info": false,
                "language": {
                    "search": "Recherche",
                    "zeroRecords": "La recherche ne donne aucun résultat"
                }
            });

            $('#DataTables_Table_0_filter input').focus();

            // detect enter keypress
            $('#DataTables_Table_0_filter input').keypress(function(e) {
                var keycode = (e.keyCode ? e.keyCode : e.which);
                if (keycode == '13') {
                    $('#DataTables_Table_0_filter input').select();
                }
            });
        });

        function openPopipMaj(id, f) {

            $('#article-id').val(id);
            $('#article-id-label').html(id);
            $('#article-frais').val(f);

            $('#btn-modal-maj').click();
        }

        function updateArticle() {

            $('#btn-update-article').css('pointer-events', 'none');
            $('#btn-update-article').css('opacity', '0.5');
            $('#btn-update-article').html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i> Mise à jour');

            var url = $('#update-article-url').val();
            var redirect = $('#update-article-redirect').val();
            var articleId = $('#article-id').val();
            var articleFrais = $('#article-frais').val();

            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    'articleId': articleId,
                    'articleFrais': articleFrais
                },
                success: function(data){
                    window.location.href = redirect;
                }
            });
        }
    </script>
{% endblock %}