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

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

{% block title %}
    {{ parent() }}
    Recherche un article pour gérer la maintenance et la réparation
{% endblock %}

{% block stylesheets %}

    {{ parent() }}


    <style>
        tr.group,
        tr.group:hover {
            background-color: #f0f2f5 !important;
            font-weight: 900
        }
        div.dataTables_wrapper div.dataTables_filter input {
            width: 220px;
            height: 40px;
        }
        .modal-dialog .form-group {
            margin-bottom: 5px;
        }
        .modal-dialog .block-header {
            padding-top: 2px;
            padding-bottom: 2px;
        }
        .modal-dialog .block-content {
            padding-top: 5px;
        }

        .modal-dialog .form-control, .input-group-text {
            height: 30px;
        }
        .modal-dialog .btn-clear {
            height: 30px;
        }
        .modal-footer {
            display: block;
        }

        .nav-link.bl {
            background-color: aliceblue;
        }

        .modal-dialog input[type=radio] {
            width: 30px;
            -ms-transform: scale(2);
            -webkit-transform: scale(2);
            transform: scale(2);
        }
        .table-title {
            text-align: right;
        }
        .table-data {
            font-weight: 700;
            text-align: left;
        }
        @media (max-width: 770px) {
            .datepicker.datepicker-dropdown.dropdown-menu {
                top:65px!important;
                left:10px!important;
                width: 90%!important;
            }
        }
    </style>
{% endblock %}

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

    <style>
        .input-form-douchette {
            width: 155px!important;
            padding-left: 4px;
            padding-right: 4px;
        }
        input[readonly] {
            cursor: pointer !important;
            background-color: white !important;
        }
        h4 {
            text-align: center;
        }
        @media screen and (min-width: 771px) {
            .display-desktop {
                display: inline;
            }
            .display-mobile {
                display: none;
            }
        }
        @media (max-width: 770px) {
            h4 {
                margin-bottom: 5px;
            }
            .display-desktop {
                display: none;
            }
            .display-mobile {
                display: inline;
            }
            .datepicker-inline {
                width: 100%;
            }

            .datepicker table {
                width: 100%;
            }
        }
    </style>
    <!-- Dynamic Table Full -->
    <div class="block">
        <div class="block-content block-content-full" style="padding: 5px">

            {{ form_start(form, {'attr' : {'id' : 'articleForm', 'class' : 'spinner_form form-inline'}}) }}

            <a type="button" name="menu" class="btn" href="{{ path('douchette_menu') }}"  style="padding: 2px;">
                <span style="vertical-align: -webkit-baseline-middle;">Menu</span>
            </a>

            {{ form_widget(form.codebar) }}

            <button type="submit" name="search" class="btn spinner_button" id="search-btn" style="padding: 2px;width: 70px;">
                <span>Valider</span>
            </button>

            {{ form_end(form) }}


        </div>



        {% if articles %}
            <div>
                <h4>{{ articles|length }} article{% if articles|length > 1 %}s{% endif %} trouvé{% if articles|length > 1 %}s{% endif %}</h4>
                <div id="accordion" role="tablist" aria-multiselectable="true">
                    {% for article in articles %}
                        <div class="block block-bordered block-rounded mb-2">
                            <div class="block-header" role="tab" id="accordion_h{{ loop.index }}" style="padding-top: 4px;padding-bottom: 4px;height: 60px;">
                                <a class="font-w600 collapsed" data-toggle="collapse" data-parent="#accordion" href="#accordion_q{{ loop.index }}" aria-expanded="false" aria-controls="accordion_q1" style="width: 100%">
                                    {{ article.id }} {% if article.maintenance %}<i class="fa fa-cogs" title="Article en maintenance" style="margin-left: 5px"></i>{% elseif article.reparation %}<i class="fa fa-wrench" title="Article en réparation" style="margin-left: 5px"></i>{% endif %}
                                    <br>
                                    {{ article.name }}
                                </a>
                            </div>
                            <div id="accordion_q{{ loop.index }}" class="collapse {% if articles|length == 1 %}show{% endif %}" role="tabpanel" aria-labelledby="accordion_h{{ loop.index }}" data-parent="#accordion">
                                <div class="block-content" style="padding-bottom: 20px;padding-top: 5px;">
                                    <div class="row">
                                        <div class="col-12">
                                            <div style="margin-bottom: 5px ;color:black">
                                                <table style="border: none">
                                                    <tr>
                                                        <td class="table-title">Famille :</td>
                                                        <td class="table-data">{{ article.familyName }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="table-title">Sous-Famille :</td>
                                                        <td class="table-data">{{ article.subFamilyName }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="table-title">Codebarre :</td>
                                                        <td class="table-data">{{ article.codebar }}</td>
                                                    </tr>
                                                    {% if article.maintenance %}
                                                        <tr>
                                                            <td class="table-title">Article en maintenance :</td>
                                                            <td class="table-data">OUI</td>
                                                        </tr>
                                                    {% endif %}
                                                    {% if article.reparation %}
                                                        <tr>
                                                            <td class="table-title">Article en réparation :</td>
                                                            <td class="table-data">OUI</td>
                                                        </tr>
                                                    {% endif %}

                                                </table>
                                            </div>
                                        </div>

                                            <div class="col-12" style="text-align: center">
                                                {% if article.maintenance or article.reparation %}
                                                    <a type="button" class="btn btn-secondary spinner_reception" style="padding: 15px;height: 50px;margin-top: 15px" href="{{ path('douchette_article_maintenance_reparation_update') }}?article={{ article.id }}&maintenance=0&reparation=0&searchString={{ searchString }}"><i class="fa fa-arrow-down"></i> RETOUR</a>
                                                {% else %}
                                                    <a type="button" class="btn btn-secondary spinner_reception" style="padding: 15px;height: 50px;margin-top: 15px;margin-left: 10px" href="{{ path('douchette_article_maintenance_reparation_update') }}?article={{ article.id }}&maintenance=1&reparation=0&searchString={{ searchString }}"><i class="fa fa-arrow-up"></i> DÉPART DE MAINTENANCE <i class="fa fa-cogs" style="margin-left: 5px"></i></a>
                                                    <a type="button" class="btn btn-secondary spinner_reception" style="padding: 15px;height: 50px;margin-top: 15px;margin-left: 10px" href="{{ path('douchette_article_maintenance_reparation_update') }}?article={{ article.id }}&maintenance=0&reparation=1&searchString={{ searchString }}"><i class="fa fa-arrow-up"></i> DÉPART EN RÉPARATION <i class="fa fa-wrench"  style="margin-left: 5px"></i></a>
                                                {% endif %}
                                            </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}

    </div>

{% endblock %}


{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">

        $('#article_search_codebar').focus();
        $('#article_search_codebar').select();

        // detect enter keypress
        $('#article_search_codebar').click(function(e) {
            $('#article_search_codebar').select();
        });

        $('.spinner_form').submit(function() {
            $(this).find('.spinner_button').append('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i>');
            $(this).find('.spinner_button').css('pointer-events', 'none');
            $(this).find('.spinner_button').css('opacity', '0.5');
        });

        $('.spinner_reception').click(function() {
            $(this).append('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i>');
            $(this).css('pointer-events', 'none');
            $(this).css('opacity', '0.5');
        });

    </script>

{% endblock %}