{% extends 'base_admin.html.twig' %}
{% form_theme form 'bootstrap_4_layout.html.twig' %}
{% block body %}
    <div class="breadcrumb-holder">
        <div class="container-fluid">
            <ul class="breadcrumb">
                <li class="breadcrumb-item active">{{ title }}</li>
            </ul>
        </div>
    </div>
    <br/>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                {% for message in app.flashes('notice') %}
                    <div class="alert alert-success" role="alert">
                        {{ message }}
                    </div>
                {% endfor %}
                {% for message in app.flashes('error') %}
                    <div class="alert alert-danger" role="alert">
                        {{ message }}
                    </div>
                {% endfor %}
                {% if form_errors(form) %}
                    <div class="alert alert-danger" role="alert">
                        {{ form_errors(form) }}
                    </div>
                {% endif %}
                <div id="alertSuccess" class="alert alert-success" role="alert" style="display: none"></div>
                <div id="alertDanger" class="alert alert-danger" role="alert" style="display: none"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        {% if form is not null %}
                           <div class="row">
                               <div class="col-md-3">
                                   <div class="form-group">
                                       {{ form_start(form, {'attr':{novalidate:'novalidate', id:'form'}}) }}
                                       {{ form_widget(form.seller) }}
                                       {{ form_end(form) }}
                                   </div>
                               </div>
                           </div>
                        {% endif %}
                        <div class="table-responsive">
                            <table class="table table-hover table-bordered">
                                <thead>
                                <tr>
                                    <th>Order id</th>
                                    <th>Seller</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Address one</th>
                                    <th>Address two</th>
                                    <th>Post code</th>
                                    <th>City</th>
                                    <th>State</th>
                                    <th>Country</th>
                                    <th>Confirm <input id="checkAll" type="checkbox" class="form-control"></th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for shipment in shipments %}
                                    <tr>
                                        <th scope="row">{{ shipment.orderId }}</th>
                                        <td>{{ shipment.company }}</td>
                                        <td>{{ shipment.firstName }}</td>
                                        <td>{{ shipment.lastName }}</td>
                                        <td>{{ shipment.addressOne }}</td>
                                        <td>{{ shipment.addressTwo }}</td>
                                        <td>{{ shipment.postCode }}</td>
                                        <td>{{ shipment.city }}</td>
                                        <td>{{ shipment.state }}</td>
                                        <td>{{ shipment.country }}</td>
                                        <td>
                                            <div class="form-group">
                                                <input data-id="{{ shipment.id }}" type="checkbox"
                                                       class="form-control check">
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <input type="button" class="btn btn-primary" value="Confirm shipments" id="btnSubmit">
                </div>
            </div>
        </div>
        <div class="js-routes" data-confirm-shipments-route="{{ path('confirm_shipments_checked') }}"
             data-not-confirmed-shipments-route="{{ path('not_confirmed_shipments') }}">
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/app/confirm_shipments/index.js') }}"></script>
{% endblock %}