{% form_theme searchForm 'bootstrap_3_layout.html.twig' %}
<div class="panel panel-white">
    <div class="panel-heading collapsed" data-toggle="collapse" href="#searcher">
        <h6 class="text-color3">
            <h6 class="" style="margin-bottom: 0px; cursor: pointer" id="toogleLoadSearchForm">BUSCADOR DE PEDIDOS <i class="icon-arrow-down15"></i></h6>
            <div id="criteriaSearchOrder"></div>
            <div>
                <small>(*) Sin criterios de búsqueda, se mostrarán los últimos 50 pedidos.</small>
            </div>
        </h6>

    </div>

    <div id="searcher" class="panel-collapse collapse">
        {{ form_start(searchForm, {'action' : path('orders'),'method':'GET'}) }}
        <div class="panel-body">

            <div class="row">
                <div class="col-md-3">
                    <div class="row" style="background-color: lightgrey">
                        <div class="col-md-6">
                            {{ form_row(searchForm.minDate) }}
                        </div>
                        <div class="col-md-6">
                            {{ form_row(searchForm.maxDate) }}
                        </div>
                    </div>
                    {{ form_row(searchForm.alias) }}
                    {{ form_row(searchForm.dealer) }}
                    {{ form_row(searchForm.numOfOrder) }}
                </div>

                <div class="col-md-3">
                    {{ form_row(searchForm.company) }}
                    {{ form_row(searchForm.shop) }}
                    {{ form_row(searchForm.season) }}

                </div>

                <div class="col-md-3">
                    {{ form_row(searchForm.section) }}
                    {{ form_row(searchForm.category) }}
                    {{ form_row(searchForm.subcategory) }}
                    {{ form_row(searchForm.typeStatusOrder) }}

                </div>

                <div class="col-md-3">
                    {{ form_row(searchForm.typeOrder) }}
                    {{ form_row(searchForm.brands) }}
                    {{ form_row(searchForm.articleModel) }}
                    {{ form_row(searchForm.article) }}
                </div>
            </div>

            <div class="text-right">
                <a href="{{ path('clear_order_search') }}" id="clear" class="btn bg-color7 btn-rounded">Limpiar<i class="glyphicon glyphicon-remove position-right"></i></a>
                <button type="submit" class="btn bg-color3 btn-rounded">Buscar<i class="icon-search4 position-right"></i></button>
            </div>

        </div>
        {{ form_end(searchForm) }}
    </div>
</div>

<script type="text/javascript" src="{{ asset('assets/js/core.order-search.js') }}?v={{ "now"|date("d-m-Y") }}"></script>

<script>
    $(document).ready(function(){
        core_order_search_criteria.getCriteria();
    });


    $('#toogleLoadSearchForm').click(function(){
        if( $('#searchOrderForm_articleModel').has('option').length === 0 ) {
            var route = Routing.generate('_ajax_load_article_model');
            $.ajax({
                type: "GET",
                async: false,
                cache: false,
                timeout: 30000,
                url: route,
                data: null,
                success: function (result) {
                    for (i = 0; i < result.length; ++i) {
                        optionText = result[i]["description"];
                        optionValue = result[i]["id"];

                        $('#searchOrderForm_articleModel').append(`<option value="${optionValue}">
                                               ${optionText}
                                          </option>`);
                    }
                    $('#searchOrderForm_articleModel').select2();
                    core_order_search_criteria.getCriteria();
                },
                error: function (err) {
                    console.log(err);
                }
            });
        }
    });

</script>