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

{% block title %}{% if app.request.get('id') %}{{'Edit order'|trans}}{% else %}{{'New order'|trans}}{% endif %}{% endblock %}
{% block page_title %}{% if app.request.get('id') %}{{'Edit order'|trans}}{% else %}{{'New order'|trans}}{% endif %}{% endblock %}
{% block breadcrumb %}
    <li class="breadcrumb-item"><a href="{{ path('orders') }}">{{'Commandes'|trans}}</a></li>
    <li class="breadcrumb-item active" aria-current="page">{% if app.request.get('id') %}{{'Edit order'|trans}}{% else %}{{'New order'|trans}}{% endif %}</li>
{% endblock %}
{% block body %}

    {{ form_start(form) }}

        <div class="FixedBottom">   
            <div class="col-md-offset-right-2 col-sm-offset-right-3 d-flex float-end px-5">     
                <a href="{{ path('orders') }}" class="btn btn-outline-secondary mt-2"><i class="bi bi-arrow-bar-left"></i>&nbsp;&nbsp;{{'Return'|trans}}</a> 
                <div class="d-flex" style="gap:.9375rem;">
                    {{ form_row(form.save) | raw}}   
                </div>
            </div>    
        </div>
    

        <div class="card bg-white border-0 rounded-3 mb-4">
            <div class="card-body p-4">

                {% if not form.vars.valid %}
                    <div class="alert alert-danger">
                        {{ form_errors(form) }}
                    </div>
                {% endif %}

                {% block alert %}
                    {% for label, messages in app.flashes %}
                        <div class="alert alert-{{ label }}">
                            {% for message in messages %}
                                <p>{{ message }}</p>
                            {% endfor %}
                        </div>
                    {% endfor %}
                {% endblock %}

                <div class="row">
                    <div class="col-lg-3 col-sm-6">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.reference) }}
                            {{ form_label(form.reference) }}            
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.status) }}
                            {{ form_label(form.status) }}            
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.date_add) }}
                            {{ form_label(form.date_add) }}            
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.date_due) }}
                            {{ form_label(form.date_due) }}            
                        </div>
                    </div>
                    <!--<div class="col-lg-6 col-md-6">
                        <div class="mb-0 border p-3 rounded-3 position-relative">
                            <p class="text-secondary fw-medium">From:</p>
                            <p class="mb-1 fw-medium text-secondary">Olivia John</p>
                            <p class="mb-1 text-body">olivia@trezo.com</p>
                            <p class="mb-1 text-body">4545 Seth Street Ballinger, TX 78965</p>
                            <p class="mb-0 text-body">+1 444 556 8899</p>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="mt-4 mt-md-0 border p-4 rounded-3 position-relative h-md-100">
                            <p class="mb-4 text-secondary fw-medium">To:</p>
                            
                            <button type="button" class="btn border-primary text-primary position-absolute hover-bg" style="right: 24px; top: 24px;">
                                <i class="ri-add-line"></i>
                                {{'Add'|trans}}
                            </button>
                        </div>
                    </div>-->
                </div>
                <br />
                <div class="default-table-area all-products">
                    <table class="table align-middle">
                        <thead>
                            <tr>
                                <th class="col col-md-6">{{'Product'|trans}}</th>
                                <th class="col col-md-1">{{'Quantity'|trans}}</th>
                                <th class="col col-md-1">{{'Price'|trans}}</th>
                                <th class="col col-md-1">{{'Total'|trans}}</th>
                                <th class="col col-md-1">{{'Discount'|trans}}</th>
                                <th class="col col-md-1">{{'Total line'|trans}}</th>
                                <th class="col col-md-1 text-right" scope="col">{{'Action'|trans}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr><td colspan="7" id="order_details" class="p-0">{{ form_widget(form.order_details) }}</td></tr>
                            <tr>
                                <td colspan="7" class="text-end">
                                    <button type="button" class="btn btn-sm btn-primary" id="add-order-detail">
                                        <i class="ri-add-line text-white"></i>
                                        {{'Add product'|trans}}
                                    </button>
                                </td>
                            </tr>
                            <!--<tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>
                                    <label class="text-secondary label">{{'Discount(%)'|trans}}</label>
                                    <input type="text" class="form-control h-55" placeholder="0.00">
                                </td>
                                <td>
                                    <label class="text-secondary label">{{'Tax(%)'|trans}}</label>
                                    <input type="text" class="form-control h-55" placeholder="0.00">
                                </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="text-body">{{'Sub total'|trans}}:</td>
                                <td class="text-body">$0.00</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="text-body">{{'Tax(%)'|trans}}</td>
                                <td class="text-body">$0.00</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="text-body">Discount (0%)</td>
                                <td class="text-body">- $0.00</td>
                                <td></td>
                            </tr>-->
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="fw-medium text-secondary">Total</td>
                                <td class="text-secondary"><div class="custom-input-wrapper">{{ form_widget(form.total) }}</div></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    
    {{ form_end(form) }}
    
{% endblock %}