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

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

{% block title %}
    {{ parent() }}
    Stock des articles de bien
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.css') }}">
    <style>
        tr.group,
        tr.group:hover {
            background-color: #f0f2f5 !important;
            font-weight: 900
        }
        div.dataTables_wrapper div.dataTables_filter input {
            width: 220px;
            height: 40px;
        }
        .group td {
            padding-top: 2px;
            padding-bottom: 2px;
        }
        thead,
        #DataTables_Table_0_paginate {
            display: none;
        }
        #DataTables_Table_0_wrapper .row .col-sm-12 {
            padding-left: 2px;
            padding-right: 2px;
        }
        .table.js-dataTable-full {
            width: 100%!important;
        }
        @media (max-width: 770px) {
            #DataTables_Table_0_length,
            #DataTables_Table_0_length label select,
            #DataTables_Table_0_filter label input {
                font-size: 11px;
            }
            #DataTables_Table_0_filter label input {
                width: 258px;
                margin-left: 0;
                margin-right: 0;
            }
            div.dataTables_wrapper div.dataTables_filter input {
                height: 30px;
            }
            .douchette-size-1 {
                font-size: 9px;
            }
            .douchette-size-2 {
                font-size: 11px;
            }
        }

        #DataTables_Table_0_length {
            margin-top: -28px;
            margin-left: 30%;
        }
        #DataTables_Table_0_filter {
            margin-top: 7px;
        }
        @media (min-width: 770px) {
            #DataTables_Table_0_length {
                margin-left: 100px;
            }
            #DataTables_Table_0_filter {
                margin-top: -28px;
                margin-right: 50%;
            }
        }
    </style>
{% endblock %}

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

    <!-- Dynamic Table Full -->
    <div class="block">
        <div class="block-content block-content-full" style="padding-top: 5px">
            <a type="button" name="menu" class="btn" href="{{ path('douchette_menu') }}e"  style="padding: 2px;">
                <span style="vertical-align: -webkit-baseline-middle;">Menu</span>
            </a>

            <!-- 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">Article</th>
                    <th class="d-none d-sm-table-cell">Sous-famille</th>
                </tr>
                </thead>
                <tbody>

                {% for article in articles %}

                    <tr>
                        <td class="font-w600" style="padding-top: 2px; padding-bottom: 2px">
                            <div class="douchette-size-2">{{ article.id }}</div>
                            <div class="douchette-size-1">{{ article.name }}</div>
                            <div class="douchette-size-2">{{ article.stock }} en stock{% if article.stock != article.stockVirtual != 0 %} ( {{ article.stockVirtual }} stock virtuel){% endif %}</div>
                        </td>
                        <td class="d-none d-sm-table-cell">{{ article.FamilyName }}</td>
                    </tr>
                {% endfor %}

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

{% 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">

        $('#main-container').css('filter', 'opacity(30%)');
        $('#main-container').css('-webkit-filter', 'opacity(30%)');
        $('#main-container').prepend('<i class="fa fa-spinner fa-pulse fa-5x fa-fw spinner-wait" style="position: absolute;margin-left: 40%;z-index: 9999;margin-top: 50px;"></i>');

        $(document).ready(function() {

            var tableArticle = $(".js-dataTable-full");
            var columnLabel = 0;
            var groupColumn = 1;
            tableArticle.DataTable({
                fixedHeaders: true,
                "paging": true,
                "bSort": false,
                "lengthMenu": [[50, 100, 500], [50, 100, 500]],
                "order": [[ groupColumn, "asc" ], [ 0, "asc" ]],
                columnDefs:[
                    {orderable:false,targets:[1]},
                    { "visible": false, "targets": [groupColumn] }
                ],
                responsive: true,
                "info": false,
                "language": {
                    "lengthMenu": "Voir _MENU_ articles",
                    "search": "",
                    "searchPlaceholder": "Recherche générale",
                    "zeroRecords": "Aucun article pour cette recherche"
                },
                "drawCallback": function ( settings ) {
                    var api = this.api();
                    var rows = api.rows( {page:'current'} ).nodes();
                    var last=null;

                    api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
                        if ( last !== group ) {
                            $(rows).eq( i ).before(
                                    '<tr class="group"><td colspan="2">'+group+'</td></tr>'
                            );

                            last = group;
                        }
                    } );
                }
            });

            $('#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();
                }
            });

            $('#main-container').css('filter', 'opacity(100%)');
            $('#main-container').css('-webkit-filter', 'opacity(100%)');
            $('.spinner-wait').css('display', 'none');

            //Pour tester le navigateur
            //alert(navigator.userAgent.toLowerCase());
            //Pour la douchette rechercher la string skorpio
        });



    </script>

{% endblock %}