{% extends 'base_admin.html.twig' %}
{% form_theme form 'bootstrap_4_layout.html.twig' %}
{% block body %}
    <style>
        .checkitem > label{
            display: inline-block;

            width: calc(100% - 52px);
            vertical-align: middle;
        }

        /*.checkitem > input[type=checkbox]{*/
        /*    display: inline-block;*/
        /*    width: 40px;*/
        /*    height: 100%;*/
        /*    vertical-align: middle;*/
        /*}*/
    </style>
    <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">
        {% for message in app.flashes('info') %}
            <div class="alert alert-info" role="alert">
                {{ message|raw }}
            </div>
        {% endfor %}
        {% for message in app.flashes('notice') %}
            <div class="alert alert-success" role="alert">
                {{ message|raw }}
            </div>
        {% endfor %}
        {% for message in app.flashes('warning') %}
            <div class="alert alert-warning" role="alert">
                {{ message |raw}}
            </div>
        {% endfor %}
        {% for message in app.flashes('error') %}
            <div class="alert alert-danger" role="alert">
                {{ message |raw}}
            </div>
        {% endfor %}
        {% if form_errors(form) %}
            <div class="alert alert-danger" role="alert">
                {{ form_errors(form) }}
            </div>
        {% endif %}
        {% for downloadOrder in downloadingOrders %}
            <div class="row">
                <div class="col-md-12">
                    <label id="lblProgress{{ downloadOrder.id }}">Download progress of {{ downloadOrder.description }}</label>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" data-id="{{ downloadOrder.id }}" data-history-id="{{ downloadOrder.historyId }}" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width: 1%">1%</div>
                    </div>
                </div>
            </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', 'id': 'importForm'}}) }}
                {#{{ form_widget(form) }}#}
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form_label(form.seller) }}
                            {{ form_widget(form.seller) }}
                        </div>
                    </div>
                    <div class="col-md-3 mt-4">
                        <div class="form-group" id="">
                            {{ form_label(form.onlyEu) }}
                            {{ form_widget(form.onlyEu) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group" id="amazonCenter">
                            {{ form_label(form.amazonCenter) }}
                            {{ form_widget(form.amazonCenter) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.config) }}
                            {{ form_widget(form.config) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.state) }}
                            {{ form_widget(form.state) }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    {{ form_label(form.courier) }}
                                    {{ form_widget(form.courier) }}
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="form-group" id="inputFile">
                                    {{ form_label(form.file) }}
                                    {{ form_widget(form.file) }}
                                </div>
                            </div>

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

                <input type="submit" id="btnImportOrders" class="btn btn-primary load-screen" data-text-load-screen="Importing orders... Please wait..." value="Import"/>
                {{ form_end(form) }}
            </div>
        </div>
        <div class="card">
            <div class="card-header d-flex align-items-center">
                <h4>Import history</h4>
            </div>
            <div class="card-body" id="historyContainer">
            </div>
        </div>
        {#<div class="card">#}
        {#<div class="card-header d-flex align-items-center">#}
        {#<h4>Order shipment list</h4>#}
        {#</div>#}
        {#<div class="card-body" id="orderShipmentContainer">#}
        {#Please select one import#}
        {#</div>#}
        {#</div>#}
    </div>

    {#Modales para la aplicación. El primero es el modal que se muestra para las lineas de producto, el segundo para los logs#}
    <div class="modal fade" id="lineModal" tabindex="-1" role="dialog" aria-labelledby="lineModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="lineModalLabel">Order shipment line</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="orderShipmentLineContainer">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="logModal" tabindex="-1" role="dialog" aria-labelledby="logModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="lineModalLabel">Import log</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="logContainer" style="font-size: 12px;">
                </div>
                <div class="modal-footer">
                    <a href="{{ path('not_registered_product_index') }}" type="button" class="btn btn-warning" >Check not registered products</a>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="logTrackingModal" tabindex="-1" role="dialog" aria-labelledby="logTrackingModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="lineModalLabel">Tracking log</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="logTrackingContainer" style="font-size: 12px;">
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-success lockable btnSenTrackingsAgain">Send trackings again</a> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="trackingSummaryModal" tabindex="-1" role="dialog" aria-labelledby="trackingSummaryModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="lineModalLabel">Tracking summary</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="trackingSummaryContainer" style="font-size: 12px;">
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-success lockable btnSenTrackingsAgain">Send trackings again</a> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="selectCourierModal" tabindex="-1" role="dialog" aria-labelledby="selectCourierModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="lineModalLabel">Please select a courier</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="selectCourierContainer" style="font-size: 12px;">
                    <div class="form-group">
                        <select class="form-control form-control-sm" id="courier">
                            <option value="">Select a courier</option>
                            <option value="%">All</option>
                            {% for shipconfirmType in shipconfirmTypes %}
                                <option value="{{ shipconfirmType.description }}">{{ shipconfirmType.description }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div id="checkboxContainer" style="margin-bottom: 10px;" class="d-none">
                        <div class="form-check d-flex align-items-center">
                            <input class="form-check-input me-2" type="checkbox" id="packingListCheck" style="margin-top: 0;">
                            <label class="form-check-label mb-0" for="packingListCheck" style="line-height: 1;">
                                Order by location and products?
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalGenerateShippingGuide" tabindex="-1" role="dialog" aria-labelledby="modalGenerateShippingGuideLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="lineModalLabel">Please wait while the order guides are generated</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="generateShippingGuideContainer" >
                    <div class="row">
                    <div id="progressBarContent" class="col-sm-12 mt-3" style="display: none;">
                        <div class="progress float-left" style="width: 92%">
                            <div id="progressBarGenerateShippingGuide" class="progress-bar bg-success" role="progressbar"
                                 style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%
                            </div>
                        </div>
                        <div class="float-right text-gray" style="margin-top: -4px">
                            <i id="iconGenerateShippingGuide" class="fa fa-pause " onclick="controlGenerateShippingGuide(this.id)"></i>
                            <span id="updatedValues">0</span>/<span id="totalValues">0</span>
                        </div>
                    </div>
                    <div class="text-center col-md-12" style="color: red; padding: 2% 5%" id="exceptionContent">
                    </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalGeneratePackaging" tabindex="-1" role="dialog" aria-labelledby="modalGeneratePackagingLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document" style="max-width: 98%;margin: 0.5% 1%;">
            <div class="modal-content" style="height: 100vh;">
                <div class="modal-header">
                    <h5 class="modal-title" id="lineModalLabel">Generate Packaging</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="generatePackagingContainer">
                    <button type="button" class="btn btn-primary ml-auto" id="btnGeneratePackaging">Generar</button>
                    <div class="mt-4 px-2" >
                        <h2>Orders</h2>
                        <div class="list-group" style="max-height: 75vh; overflow-y: auto;" id="packagingData">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {#Fin de modales#}

    <form method="post" id="deleteForm" action="{{ path('import_delete') }}">
        <input type="hidden" name="id" id="id_import"/>
    </form>

    <div class="js-routes" data-history-list-route="{{ path('history_list') }}" data-shipment-list-route="{{ path('shipment_list') }}"
         data-shipment-line-list-route="{{ path('shipmentLine_list') }}" data-import-order-log-route="{{ path('import_order_log') }}"
         data-export-imported-route="{{ path('export_imported') }}" data-export-original-route="{{ path('export_original') }}"
         data-tracking-log-route="{{ path('tracking_log') }}" data-send-trackings-route="{{ path('send_trackings') }}"
         data-new-order-route="{{ path('new_order') }}" data-get-preferred-import-config-route="{{ path('preferred_import_config') }}"
         data-tracking-summary-route="{{ path("tracking_summary") }}" data-import-progress-route="{{ path("import_progress_bar") }}"
         data-process-amazon-mws-route="{{ path("process_amazon_mws") }}" data-process-amazon-csv-route="{{ path("process_amazon_csv") }}"
         data-get-seller-type-route="{{ path("get_seller_type") }}" data-commercial-invoice="{{ path("generate_commercial_invoice", {"orderId" : "valueId"}) }}" data-generate-packaging-route="{{ path("generate_packaging") }}" data-packaging-exist-route="{{ path("packaging_exist") }}"
         data-packaging-list-route="{{ path('import_packaging_option_list') }}" data-packaging-import-update-route="{{ path('packaging_import_update') }}"
    >

    </div>
{% endblock %}

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