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

{% block body %}

<div class = "line_text_brands">
<div class = "display_ok2"><i style = "color:red;"class="fa fa-phone-square" aria-hidden="true"></i>&nbsp; +1 905-282-9699 &nbsp;&nbsp; </div>
<div class = "display_ok"><i style = "color:red;" class="fa fa-map-marker" aria-hidden="true"></i>&nbsp; 5935 Ambler Drive Mississauga, ON, L4W 2K2, Canada &nbsp;&nbsp;</div>
<div class = "display_ok1"><i style = "color:red;" class="fa fa-envelope-o" aria-hidden="true"></i>&nbsp; barteximport@gmail.com</div> 
<div style = "float: right; text-align: right;"><a href = "{{ path('order_list') }}"><button type = "submit" class = "login_submit_brands"> <i class='fa fa-sign-out' id = "rt_brands" aria-hidden='true'></i>   &nbsp;&nbsp; <span class = "log_in_brands">Orders </span></button></a></div>
</div>

<a href="{{ path('order_list') }}">
    <img src = "{{ asset('build/images/logo.png') }}" class = "logo_size">
</a>

    {% if order and order.status == 2 %}
        <div class="re_kalkulat121 re_kalkulat1212 re_kalkulat1213" id="order_add_product_button">Add products</div>
        <div style="clear: both"></div>
    {% endif %}

    <div class = "grid_search1" style="{% if order and order.status != 2 %}display: none{% else %}visibility: hidden{% endif %}">
      <div class = "search_title">Search</div>
        <div class="input-group">
          <div class="form-outline">
             <input id="search-focus" type="search" id="form1" placeholder="product" class="form-control" />
        </div>
           <button type="button" class="btn btn-primary"><i class="fa fa-search" id = "qwa" aria-hidden="true"></i></button>
      </div>
   </div>

    <div id="order_brand_block" {% if order %}style="display: none"{% endif %}>
        <div class = "title">Choose brand</div>

        <div class = "grid_filters">
            <div class = "add_contractors211"  id = "filter_1" data-id="1" data-status = "0">A - D</div>
            <div class = "add_contractors211"  id = "filter_2" data-id="2" data-status = "0">E - H</div>
            <div class = "add_contractors211"  id = "filter_3" data-id="3" data-status = "0">I - L</div>
            <div class = "add_contractors211"  id = "filter_4" data-id="4" data-status = "0">M - P</div>
            <div class = "add_contractors211"  id = "filter_5" data-id="5" data-status = "0">Q - U</div>
            <div class = "add_contractors211"  id = "filter_6" data-id="6" data-status = "0">V - Z</div>
            <div class = "add_contractors211"  id = "filter_7" data-id="7" data-status = "1" style="background: #F0053E">ALL</div>
        </div>
        <div class = "grid_search1"></div>

        <div class = "margin_block" id="order_brand_area">
            {% for brand in brands %}
                <div class = "brend_block13" id = "brend_klik_{{ loop.index }}" data-id="{{ loop.index }}" data-status="0" data-id-brand="{{ brand.id }}">
                    <img src = "{{ vich_uploader_asset(brand, 'imageFile') | imagine_filter('brand') }}" class = "opacity_image" id = "opa_{{ loop.index }}">
                    <div class =  "text_brend" id = "text_klik_{{ loop.index }}">{{ brand.name }}</div>
                </div>
            {% else %}
                <div class="select_range">Select range.</div>
            {% endfor %}
        </div>
        <div style = "clear:both;"></div>
    </div>
</div>

<div id="order_product_block" {% if order %}style="display: none"{% endif %}>
    <div class = "okno okno2" style = "margin-top:30px; padding-bottom:120px; padding-left: 25px; display: table;">
        <div class = "title" id = "title_choose">Choose products</div>
        <div style = "margin-top:0px;"></div>

        <div class = "grid_search1" style="margin: 0; padding: 0">
            <div class = "search_title">Search</div>
            <div class="input-group">
                <div class="form-outline">
                    <input id="search-focus" type="search" class="input-search-product form-control" placeholder="product" />
                </div>
                <button type="button" class="btn btn-primary search-product-button"><i class="fa fa-search" id = "qwa" aria-hidden="true"></i></button>
            </div>
        </div>

        <div style = "text-align: center; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; ">

        <div id="order_product_list">
            <div class="select_product">Select Brands</div>
        </div>

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


<div class = "container-fluid">
 <div class = "row">
 <div class = "col-md-12 scroll-mobile">   


<div id="order_area" {% if not order %}style="display: none"{% endif %}>
<div class = "grid_groop_add_order_qw">
    <div>BRAND</div>
    <div>PRODUCT ID</div>
    <div>PRODUCT</div>
    <div class = "status">STOCK</div>
    <div class = "status">IN CASE</div>
    <div class = "status" style = "margin-left: -21px;">PRICE CASE</div>
    <div class = "status" style = "margin-left: -21px;">FINAL PRICE</div>
    <div class = "status"  style = "margin-left: 23px;">CASE</div>
    {% if not order or (order and order.status == 2) %}
        <div style = "margin-left: 10px;">REMOVE</div>
    {% endif %}
</div>

<form method="post" id="order_form" action="{% if order %}{{ path('order_change', {'order': order.id}) }}{% else %}{{ path('order_add') }}{% endif %}">
    <div id="order_product_select_area">
        {% if order %}
            {% for product in products %}
                <div class = "grid_groop_content_add_qw order_selected_product" id="order_selected_product_{{ product.id }}" data-id="{{ product.id }}">
                    <div class = "grp">{{ product.brand.name }}</div>
                    <div class = "grp">{{ product.ident }}</div>
                    <div class = "grp">{{ product.name }}</div>
                    <div class = "grp order_stock" style = "margin-left: 48px;" data-stock="0" data-stock-prev="{{ product.stockProduct }}">{{ product.stockProduct }}</div>
                    <div class = "grp" style = "margin-left: 35px;">{{ product.caseProduct }} PCS</div>
                    <div class = "grp" id = "add_price" >$<span class="order-price-selected">{{ product.price }}</span></div>
                    <div class = "grp" id = "add_price">$<span class="final-price-selected">0</span></div>
                    <input type = "text" {% if order and (order.status == 1 or order.status == 3) %} disabled {% endif %} name = "products[{{ product.id }}]" class = "add_order_input" value="{{ product.orders[0].caseProduct }}" data-case="{{ product.orders[0].caseProduct }}">
                    {% if not order or (order and order.status == 2) %}
                        <div class = "remove order_remove_product" style = "margin-top:3px;" data-id="{{ product.id }}"><i class="fa fa-times" aria-hidden="true"></i></div>
                    {% endif %}
                </div>
            {% endfor %}
        {% endif %}
    </div>

    <input type="hidden" id="order_contractor_id" name="contractorId" value="{{ user.id }}" />

    {% if not order or (order and order.status == 2) %}
        <div class = "re_kalkulat2" id="order_recalculate"><i class="fa fa-refresh" id = "fa_fa2n" aria-hidden="true"></i>  Recalculate the order</div>
    {% endif %}

    <div class = "grid_red_add21"
        ><div>ORDER SUMMARY</div>
        <div>FINAL PRICE</div>
        <div>FINAL CASE</div>
    </div>

    <div class = "grid_red_add121">
        <div></div>
        <div>$<span id="order_final_price">{{ final_price }}</span></div>
        <div id="order_final_case">{{ final_case }}</div>
    </div>

    <div class="order_error" id="order_error" style="margin-right: 3%"></div>

    {% if not order or (order and order.status == 2) %}
        <div class = "re_kalkulat121" id="order_save">Save the order</div>

        <div class="note-area">
            <p>Note:</p>
            <textarea name="note" class="note">{% if order %}{{ order.note }}{% endif %}</textarea>
        </div>
    {% endif %}
</form>

</div>

<div style = "margin-top:180px;">&nbsp;</div>
<div></div>

{% endblock %}