{% 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">
                {% if orderId is defined %}
                    <li class="breadcrumb-item"><a href="{{ path('shipment_index') }}">Order shipment</a></li>
                {% else %}
                    <li class="breadcrumb-item"><a href="{{ path('import_index') }}">Import orders</a></li>
                {% endif %}
                <li class="breadcrumb-item active">{{ title }}</li>
            </ul>
        </div>
    </div>
    <br/>
    <div class="container-fluid">
        <div id="alert-forms-success" class="alert alert-success" role="alert" style="display: none;"></div>
        <div id="alert-forms-error" class="alert alert-danger" role="alert" style="display: none;"></div>
        {% for message in app.flashes('notice') %}
            <div class="alert alert-success" role="alert">
                {{ message }}
            </div>
        {% endfor %}
        {% for message in app.flashes('warning') %}
            <div class="alert alert-warning" role="alert">
                {{ message }}
            </div>
        {% endfor %}
        {% for message in app.flashes('error') %}
            <div class="alert alert-danger" role="alert">
                {{ message }}
            </div>
        {% endfor %}
        <div class="card">
            <div class="card-header d-flex align-items-center">
                <h4>{{ title }}</h4>
            </div>
            <div class="card-body">
                {{ form_start(form, {'attr':{novalidate:'novalidate'}}) }}
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.seller) }}
                            {{ form_widget(form.seller) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.orderId) }}
                            {{ form_widget(form.orderId) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.status) }}
                            {{ form_widget(form.status) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.company) }}
                            {{ form_widget(form.company) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.firstName) }}
                            {{ form_widget(form.firstName) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.lastName) }}
                            {{ form_widget(form.lastName) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.nipNif) }}
                            {{ form_widget(form.nipNif) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.country) }}
                            {{ form_widget(form.country) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.state) }}
                            {{ form_widget(form.state) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.city) }}
                            {{ form_widget(form.city) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.addressOne) }}
                            {{ form_widget(form.addressOne) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.addressTwo) }}
                            {{ form_widget(form.addressTwo) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.postCode) }}
                            {{ form_widget(form.postCode) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.billingCountry) }}
                            {{ form_widget(form.billingCountry) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.billingState) }}
                            {{ form_widget(form.billingState) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.billingCity) }}
                            {{ form_widget(form.billingCity) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.billingFirstName) }}
                            {{ form_widget(form.billingFirstName) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.billingLastName) }}
                            {{ form_widget(form.billingLastName) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.billingAddressOne) }}
                            {{ form_widget(form.billingAddressOne) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.billingAddressTwo) }}
                            {{ form_widget(form.billingAddressTwo) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.billingPostCode) }}
                            {{ form_widget(form.billingPostCode) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form_label(form.billingEmail) }}
                            {{ form_widget(form.billingEmail) }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form_label(form.billingPhone) }}
                            {{ form_widget(form.billingPhone) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.shippingMethod) }}
                            {{ form_widget(form.shippingMethod) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.shippingCost) }}
                            {{ form_widget(form.shippingCost) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.paymentMethod) }}
                            {{ form_widget(form.paymentMethod) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.serviceCode) }}
                            {{ form_widget(form.serviceCode) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group">
                            {{ form_label(form.orderTotal) }}
                            {{ form_widget(form.orderTotal) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            {{ form_label(form.nSkus) }}
                            {{ form_widget(form.nSkus) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            {{ form_label(form.nItems) }}
                            {{ form_widget(form.nItems) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            {{ form_label(form.nItems1kg) }}
                            {{ form_widget(form.nItems1kg) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            {{ form_label(form.fTotalVolume) }}
                            {{ form_widget(form.fTotalVolume) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            {{ form_label(form.fTotalWeight) }}
                            {{ form_widget(form.fTotalWeight) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-1">
                        <div class="form-group">
                            {{ form_label(form.shippingTotal) }}
                            {{ form_widget(form.shippingTotal) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            {{ form_label(form.cod) }}
                            {{ form_widget(form.cod) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.soldTogether) }}
                            {{ form_widget(form.soldTogether) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.invoiceNumber) }}
                            {{ form_widget(form.invoiceNumber) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.fnSku) }}
                            {{ form_widget(form.fnSku) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.shippedDate) }}
                            <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                                {{ form_widget(form.shippedDate) }}
                                <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.tracking) }}
                            {{ form_widget(form.tracking) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.trackingSent) }}
                            <div class="input-group date" id="datetimepicker2" data-target-input="nearest">
                                {{ form_widget(form.trackingSent) }}
                                <div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.trackingCode) }}
                            {{ form_widget(form.trackingCode) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.refundDeliveryNumber) }}
                            {{ form_widget(form.refundDeliveryNumber) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.refundTracking) }}
                            {{ form_widget(form.refundTracking) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.refundDate) }}
                            {{ form_widget(form.refundDate) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.refundRangeHour) }}
                            {{ form_widget(form.refundRangeHour) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.samCourier) }}
                            {{ form_widget(form.samCourier) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.samService) }}
                            {{ form_widget(form.samService) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.samShipCost) }}
                            {{ form_widget(form.samShipCost) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.samShipPrice) }}
                            {{ form_widget(form.samShipPrice) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.shipeuCourier) }}
                            {{ form_widget(form.shipeuCourier) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.shipeuService) }}
                            {{ form_widget(form.shipeuService) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.courierServiceId) }}
                            {{ form_widget(form.courierServiceId) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.courierAccount) }}
                            {{ form_widget(form.courierAccount) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    {% if form.clonedAt is defined %}
                    <div class="col-md-6">
                        {{ form_label(form.clonedAt) }}
                        <div class="input-group date" id="datetimepicker3" data-target-input="nearest">
                            {{ form_widget(form.clonedAt) }}
                            <div class="input-group-append" data-target="#datetimepicker3" data-toggle="datetimepicker">
                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    {% if form.cloned is defined %}
                    <div class="col-md-6">
                        <br>
                        {{ form_label(form.cloned) }}
                        {{ form_widget(form.cloned) }}
                    </div>
                    {% endif %}
                </div>
                <div class="row">
                    {% if form.clonedAt is defined %}
                    <div class="col-md-12">
                        <br>
                        {{ form_label(form.clonedDescription) }}
                        {{ form_widget(form.clonedDescription) }}
                    </div>
                    {% endif %}
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <br>
                        {{ form_label(form.remark) }}
                        {{ form_widget(form.remark) }}
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-12">
                        {{ form_label(form.insuredOrder) }}
                        {{ form_widget(form.insuredOrder) }}
                    </div>
                </div>
                {% if form.skuByLine is defined %}
                    <br>
                <div class="row">
                    <div class="col-md-12">
                        {{ form_label(form.skuByLine) }}
                        {{ form_widget(form.skuByLine) }}
                    </div>
                </div>
                {% endif %}
                <br/>
                <input type="submit" class="btn btn-primary" value="Save shipment"/>
                {% if orderId is defined %}
                    <a href="{{ path('shipment_index') }}" class="btn btn-secondary">Cancel</a>
                {% else %}
                    <a href="{{ path('import_index') }}" class="btn btn-secondary">Cancel</a>
                {% endif %}
                {{ form_end(form) }}
            </div>
        </div>
        {% if orderId is defined %}
            <div class="card">
                <div class="card-header d-flex align-items-center">
                    <h4>Lines of the order shipment <button class="btn btn-primary btn-sm open-form"
                                                            data-toggle="tooltip" data-placement="top" title="New line"
                                                            data-modal-title="New line"
                                                            data-form-route="{{ path('shipment_line_new', {orderId: orderId}) }}"><span class="fa fa-plus fa-sm"></span></button></h4>
                </div>
                <div class="card-body load-data" id="linesContainer">
                </div>
            </div>
        {% endif %}
    </div>

    <div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="formModalLabel">{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" id="formDataContainer">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary submit">Save</button>
                </div>
            </div>
        </div>
    </div>

    {% if orderId is defined %}
        <div class="js-routes" data-lines-list-route="{{ path('lines_list_ajax', {id: orderId}) }}">

        </div>
    {% endif %}
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/app/order_shipment/index-v3.js') }}"></script>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker1, #datetimepicker2').datetimepicker({
                icons: {
                    time: "fa fa-clock",
                    date: "fa fa-calendar",
                    up: "fa fa-arrow-up",
                    down: "fa fa-arrow-down"
                },
                format: 'YYYY-MM-DD HH:mm',
                useCurrent: false
            });
        });
    </script>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        });
    </script>
{% endblock javascripts %}