{% extends '@EasyAdmin/default/layout.html.twig' %}

{% block header_container %}
    <div class="row p-t-b-10">
        <div class="col-12" style="padding-left: 40px;">
            <h3 class="font-weight-bold">
                {# <span class="s-24 icon-shopping_cart"> #}
                </span>{% trans %}orderByProducto.title{% endtrans %}</span>
            </h3>
        </div>
    </div>
{% endblock %}

{% block wrapper %}
    <div class="card r-0 shadow my-3">
        <section class="content-header mb-4">
            <div class="d-flex flex-row justify-content-between align-content-center w-100">
                <div class="content-header-title">
                    <div class='row'>
                        <div class='col'>
                            <h1 class="title">   </h1>
                            <h3>{% trans %}Order data{% endtrans %}</h3>
                        </div>

                        <div class='col text-right'>
                            <a href="#" role="button" aria-expanded="false" onclick="hanldeOpenViewProduct()" class="btn fab-top btn-primary shadow1 mr-3">
                                {% trans %}Products{% endtrans %}
                            </a>

                            <a href="#" role="button" aria-expanded="false" onclick="hanldeOpenViewClient()" class="btn fab-top btn-primary shadow1">
                                {% trans %}Clients{% endtrans %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-8">
                    <div class="form-group field-text p-0 mb-0">  
                        <label style="text-align: inherit;flex: auto;">{{'orderByProducto.search_client_product'|trans()}}</label>                      
                        <input type="text" id="bs_client_product" name="bs_client_product" class="form-control" placeholder="{{'Search'|trans()}} {{'Client'|trans()}}">
                    </div>
                </div>
                <div class="col-12 mt-3">
                    <div class="table-responsive">
                        <table class="table datagrid table-bordered">
                            <thead>
                                <tr>
                                    <th scope="col"><a>{{ 'product_ea.list.image'|trans }}</a></th>
                                    <th scope="col"><a>{{ 'product_ea.form.sku'|trans }}</a></th>
                                    <th scope="col" style='max-width:300px;'><a>{{ 'product name'|trans|capitalize }}</a></th>
                                    <th scope="col"><a>{{ 'product_ea.list.presentation'|trans|capitalize }}</a></th>
                                    <th scope="col"><a>{{ 'providerprofile.total'|trans|capitalize }}</a></th>
                                    <th scope="col">
                                        <a href='#' class="rol-user btn-list-actions text-center" id='expande_all' onclick='handleExpandeAll()' style="width: 70px;">{{'orderByProducto.expande_all'| trans}} </a>
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="list_products_select">
                                <tr><td colspan='6'><p class='text-center mb-0'>{{'orderByProducto.selected_product'|trans}}</p></td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class='mb-3'>
                <label for="">{{'order_cliente_ea.show.state'|trans}}</label>
                <select name="new_state" id="new_state" data-widget="select2">
                    {% if is_granted('ROLE_ADMIN') %}
                        {% set states = order_states_roles['ROLE_ADMIN'] %}
                    {% elseif is_granted('ROLE_PROVIDER') %}
                        {% set states = order_states_roles['ROLE_PROVIDER'] %}
                    {% elseif is_granted('ROLE_SUB_PROVIDER') %}
                        {% set states = order_states_roles['ROLE_PROVIDER'] %}
                    {% elseif is_granted('ROLE_CARRIER')%}
                        {% set states = order_states_roles['ROLE_CARRIER'] %}
                    {% elseif is_granted('ROLE_OPERATION')%}
                        {% set states = order_states_roles['ROLE_OPERATION'] %}
                    {% elseif is_granted('ROLE_SELLER')%}
                        {% set states = order_states_roles['ROLE_OPERATION'] %}
                    {% elseif is_granted('ROLE_CLIENT_USER')%}
                        {% set states = order_states_roles['ROLE_CLIENT_USER'] %}
                    {% endif %}
                    {% for key,state in states%}
                        <option value={{state}}>{{key|trans}}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="">
                <div class="piola-form-check">
                    <div class="form-check pl-0">
                        <input type="checkbox" id="group_order" class="group_order" value="1" checked="checked">
                        <label for="group_order" class="bg-success"></label>
                    </div>
                    <label for="group_order">{{'orderByProducto.group_orders_automatic'|trans}}</label>
                </div>
            </div>
            <div class="">
                <button type="button" class="btn btn-primary mr-2" id="add_produc" onclick="handleLastPastCreateOrders()">
                    {{'orderByProducto.place_orders'|trans()}}
                </button>
                <button type="button" class="btn btn-primary mr-2" id="add_produc" onclick="handlePreview()">
                    {{'orderByProducto.preview'|trans()}}
                </button>
            </div>
        </section>
    </div>

    <div class="modal fade" id="modalAlert" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="background: rgb(0 0 0 / 41%);">
        <div class="modal-dialog" role="document" style="margin-top: 9rem;">
            <div class="modal-content">
                <div class="modal-body">
                    <h5 class="mb-2">{{'Alert'|trans}}</h5>
                    <div class="cont-modal" id="cont_modal"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{'Calendar.Cancel'|trans()}}</button>
                </div>
            </div>
        </div>
    </div>

    {% include "/admin/orders/create/createOrder_css.html.twig" %} 
    {% include "/admin/catalogue/catalogo_css.html.twig" %} 
    {% include "/admin/orders/byProduct/createOrder_css.html.twig" %} 
    <style>
        .hiddenRow {
            padding: 0 !important;
        }
        .table td{
            border: 1px solid #e1e8ee !important;
        }
        .btn-aumentar {
            height: 26px;
            margin-top: -2px;
            padding: 0 0.375rem;
        }
    </style>
{% endblock %}

{% block body_javascript %}
    <script src="{{ asset('js/lottie.min.js') }}"></script>
    {% include "/admin/orders/byProduct/createOrderProduct_js.html.twig" %}
    {% include "/admin/orders/byProduct/clients_js.html.twig" %}
    {{parent()}}
{% endblock %}