{% extends '@EasyAdmin/default/layout.html.twig' %}
{# 
{% block head_custom_stylesheets %}
    <style>
        .cont-form{
            padding: 18px 20px;
        }
    </style>

    {{ parent() }}
{% endblock %} #}

{% 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 %}CreateOrder{% endtrans %}</span>
            </h3>
        </div>
    </div>
{% endblock %}

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

                    <a href="#" onclick='addNewClient();' role="button" aria-expanded="false" class="btn absolute fab-top btn-primary shadow1">
                    {# <a href="{{path('easyadmin',{'entity':'Client', 'action':'new'}) }}" role="button" aria-expanded="false" class="btn absolute fab-top btn-primary shadow1"> #}
                        {% trans %}New Client{% endtrans %}
                        {# <i class="icon icon-plus"></i> #}
                    </a>
                </div>

            </div>
        </section>
        <div class="card-body">
            <div class="row info-client">
                <div class="col-md-4 pointer" data-toggle="tooltip" data-placement="bottom" title="{{'message_create_order_provider'|trans()}}">
                    {{'provider_ea.show.companyName'|trans()}} <i class="fa fa-exclamation-circle rol-user" aria-hidden="true"></i>
                    <br><br>
                    <select class="sales-provider form-control" required name="cliente" id="cliente" data-placeholder="{{'select an option' | trans}}">
                        <option></option>
                        {% for cliente in listCliente %}
                            <option value="{{cliente.id}}">{{cliente.companyName}}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-4">
                    CIF
                    <br><br>
                    <strong class="card-title label-black" id="cif"></strong>
                </div>
                <div class="col-md-4">
                    {{'provider_ea.show.billingAddress'|trans()}}
                    <br><br>
                    <img class="img-message-order" src="{{asset('img/logo-google-maps.png')}}" alt="">
                    <strong class="card-title label-black" id="billingAddress"></strong>
                </div>
            </div>
            <div class="row info-client">
                <div class="col-md-4">
                    {{'provider_ea.show.phone'|trans()}}
                    <br><br>
                    <strong class="card-title label-black" id="phone"></strong>
                </div>
                <div class="col-md-4">
                    {{'provider_ea.show.mobile'|trans()}}
                    <br><br>
                    <strong class="card-title label-black" id="mobile"></strong>
                </div>
                <div class="col-md-4">
                    {{'provider_ea.show.email'|trans()}}
                    <br><br>
                    <strong class="card-title label-black" id="email"></strong>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    {{'provider_ea.show.openHours'|trans()}}
                    <br><br>
                    {# {% for op in entity.client.openHours %}
                        {{ include('admin/open_hours.html.twig') }}
                    {% endfor %} #}
                </div>
                <div class="col-md-4">
                    {{'order_cliente_ea.show.address'|trans()}}
                    <br><br>
                    <strong class="card-title label-black" id="cont-addres">
                        <span></spab>
                    </strong>
                </div>
            </div>
        </div>
    </div>

    <div class="card r-0 shadow my-3">
        <section class="content-header ">
            <div class="d-flex flex-row justify-content-between align-content-center w-100">
                <div class="content-header-title">
                    <h1 class="title">   </h1>
                    <h3>{% trans %}Order data{% endtrans %}</h3>
                    {# <a href="#" role="button" aria-expanded="false" onclick="openModal(2)" class="btn absolute fab-top btn-primary shadow1">
                        {% trans %}Products{% endtrans %}
                    </a> #}
                    <a href="#" role="button" aria-expanded="false" onclick="hanldeOpenViewProduct()" class="btn absolute fab-top btn-primary shadow1">
                        {% trans %}Products{% endtrans %}
                        {# <i class="icon icon-plus"></i> #}
                    </a>
                </div>
            </div>
            <div>
                <br>
                <h3 class="card-title label-black">{{ 'product list'|trans }}</h3>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">{{ 'product_ea.form.sku'|trans }}</th>
                                <th scope="col">{{ 'product name'|trans|capitalize }}</th>
                                {% if app.user.typeSector == 1 %}
                                    <th scope="col">{{ 'product_ea.list.presentation'|trans|capitalize }}</th>
                                {% endif %}
                                <th scope="col">{{ 'price'|trans|capitalize }}</th>
                                <th scope="col" style="width: 120px;">{{ 'quantity'|trans|capitalize }}</th>
                                <th scope="col">{{ 'amount'|trans|capitalize }}</th>
                                <th scope="col"></th>
                            </tr>
                        </thead>
                        <tbody id="productsSelect">
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="mb-3" id="cont_paymentMethods">
            </div>
            <div>
                <label for="">{{'order_cliente_ea.show.state'|trans}}</label>
                <select name="new_state" id="new_state" data-widget="select2">
                    <option disabled selected value> -- {{'select an option'|trans}} -- </option>
                    {% if is_granted('ROLE_ADMIN') %}
                        {% set states = order_states_roles['ROLE_ADMIN'] %}
                    {% elseif is_granted('ROLE_PROVIDER') or 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%}
                        {% if (state != 6) %}
                            <option value={{state}}>{{key|trans}}</option>
                        {% endif %}
                    {% endfor %}
                </select>
            </div>

            <div class="mt-3">
                <div class="form-group field-text p-0">                        
                    <textarea id="nota_adicional" name="nota_adicional" class="form-control" placeholder="{{'order_cliente.pdf_detail.additionalNote'|trans()}}"></textarea>

                </div>
            </div>

            <div id="cont_alert"></div>

            <div class="my-3">
                <button type="button" class="btn btn-primary" id="create_order" onclick="realizarPedido()">
                    {{ order and order.id ? 'Modify order'|trans() : 'Make an order'|trans() }}
                    <div class="spinner-border d-none" id="spinner_create" role="status" >
                        <span class="sr-only">Loading...</span>
                    </div>
                </button>
            </div>
        </section>
    </div>

    <div class="modal fade bd-example-modal-lg" id="modalNewOrder" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="background: rgb(0 0 0 / 41%);">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {# <div class="row cont_search mb-3">
                        <div class="col-md-4">
                            <div class="form-group field-text p-0"> 
                                <label>{{'product_ea.list.productCategory'|trans}}</label>
                                <select name="category" id="category" class="form-control" data-widget="select2">
                                    <option selected value='0'> -- {{'dashboard_notification.view_all'|trans}} -- </option>
                                    {% for category in listCategory %}
                                        <option value={{category.id}}>{{category.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="form-group field-text p-0 mb-0">  
                                <label style="text-align: inherit;">{{'Search'|trans()}} {{'Product'|trans()}}</label>                      
                                <input type="text" id="bs_product" name="bs_product" class="form-control" placeholder="{{'Search'|trans()}} {{'Product'|trans()}}">
                            </div>
                            <span style="font-size: 13px!important;">{{'nota_seacrh'|trans()|raw}}</span>
                        </div>
                    </div> #}
                    <div class="cont-modal" id="cont_modal"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">{{'Calendar.Select'|trans()}}</button>
                    <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" %} 
    
{% endblock %}

{% block body_javascript %}
    
    {% include "security/country_json.html.twig" %}
    {% include "/admin/orders/create/createOrder_js.html.twig" %}
    {{parent()}}
{% endblock %}