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

 {% block stylesheets %}
     <link href="{{ asset('vendor/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css') }}" rel="stylesheet" />
 {% endblock stylesheets %}

{% 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 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 %}

        <!-- Actions -->
        <div class="row pb-2">
            <div class="col-sm-12">
                <a id="ratesForComparison" onclick="showReportRatesByComparison(this.id)" class="btn bg-dark float-right ml-1  text-white"
                   data-route-choose-services="{{ path('choose_rates_comparison') }}"
                   data-route-pdf="{{ path('pdf_rates_comparison', {'type': 'express', 'id1': -1, 'id2':-2, 'id3' : -3, 'margin': 0}) }}">
                    <i class="fa fa-file-pdf"></i> Rates for comparison
                </a>
                {#<a id="updateOtherDbs" class="btn bg-dark float-right ml-1  text-white" href="{{ path('pdf_rates_comparison', {'type': 'express', 'id1': 5, 'id2':10, 'id3' : 14}) }}">#}
                    {#<i class="fa fa-file-pdf"></i> Express - comparison#}
                {#</a>#}
                {#<a id="updateOtherDbs" class="btn bg-dark float-right ml-1  text-white" href="{{ path('pdf_rates_comparison', {'type': 'economy', 'id1': 3, 'id2':15, 'id3' : 28}) }}" >#}
                    {#<i class="fa fa-file-pdf"></i> Economy - comparison#}
                {#</a>#}
                <a id="updateOtherDbs" class="btn bg-success float-right  text-white" data-route-update-db="{{ path('u_shipping_rates_external_dbs') }}" onclick="updateOtherDatabases()">
                    <i class="fa fa-database"></i> Update other databases
                </a>
                {#<a id="" class="btn bg-success float-right  text-white" href="{{ path('pdf_rates_by_courier') }}">#}
                    {#<i class="fa fa-file-pdf-o"></i> Test PDF#}
                {#</a>#}
            </div>

        </div>
        <!---------------------------------->


        <div class="card">
            <div class="card-header d-flex align-items-center">
                <h4>Couriers
                    <button class="btn btn-sm btn-primary open-form" data-toggle="tooltip"
                            data-placement="top" title="New courier"
                            data-form-route="{{ path('new_courier') }}"
                            data-title-form="New courier" data-action="new"
                            data-entity="courier"><span class="fa fa-plus"> </span>
                    </button>
                </h4>
            </div>
            <div class="card-body load-data" id="couriersContainer">
            </div>
        </div>
        <div class="card">
            <div class="card-header d-flex align-items-center">
                <h4>Services
                    <button class="btn btn-sm btn-primary open-form" data-toggle="tooltip"
                                    data-placement="top" title="New service"
                                    data-form-route="{{ path('new_courier_service') }}"
                                    data-title-form="New service" data-action="new"
                                    data-entity="courierService" disabled><span class="fa fa-plus"> </span>
                    </button>
                </h4>
            </div>
            <div class="card-body load-data" id="servicesContainer">
                Please select a courier
            </div>
        </div>
        <div class="card">
            <div class="card-header d-flex align-items-center">
                <h4>Zones
                    <button class="btn btn-sm btn-primary open-form" data-toggle="tooltip"
                                 data-placement="top" title="New zone"
                                 data-form-route="{{ path('new_zone') }}"
                                 data-title-form="New zone" data-action="new"
                                 data-entity="zone" disabled><span class="fa fa-plus"> </span>
                    </button>
                    <button class="btn btn-sm btn-primary open-import-zones" data-toggle="tooltip"
                            data-placement="top" title="Upload zones and countries"
                            data-form-route="{{ path('import_zones') }}"
                            data-title-form="Import zones and countries" data-action="new"
                            data-entity="zone" disabled><span class="fa fa-file-upload"> </span>
                    </button>
                    <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#helpModal"><span data-toggle="tooltip"
                                                                                                              data-placement="top" title="Help"
                                                                                                              data-title-form="New zone" class="fa fa-question"> </span>
                    </button></h4>
            </div>
            <div class="card-body load-data" id="zonesContainer">
                Please select a service
            </div>
        </div>
        <div class="card">
            <div class="card-header d-flex align-items-center">
                <h4>Zone fees
                    <button class="btn btn-sm btn-primary open-form" data-toggle="tooltip"
                                     data-placement="top" title="New zone fee"
                                     data-form-route="{{ path('new_zone_fee') }}"
                                     data-title-form="New zone fee" data-action="new"
                                     data-entity="zoneFee" disabled><span class="fa fa-plus"> </span>
                    </button></h4>
            </div>
            <div class="card-body load-data" id="zoneFeesContainer">
                Please select a zone
            </div>
        </div>
    </div>

    {#Modales#}
    <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">{Titulo}</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>

    <div class="modal fade" id="countriesModal" tabindex="-1" role="dialog" aria-labelledby="countriesModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="countriesModalLabel">{Titulo}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div id="alert-forms-success-country" class="alert alert-success" role="alert" style="display: none;"></div>
                <div id="alert-forms-error-country" class="alert alert-danger" role="alert" style="display: none;"></div>
                <div class="modal-body" id="countriesDataContainer">
                </div>
                <div class="modal-body load-data" id="formDetails">
                </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="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="helpModalLabel">Import help</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <p>Every column of the file represents a zone, except the first column. This first column represents every kg available.</p>
                            <p>The first row of every column represents the list of countries for the zone. The countries must be given as the code of
                                the country in a comma separated format. E.g.: <b>ES,PO,AU...</b> The first row of the first column it's ignored.</p>
                            <p>The first row of the zones could take the next tags:
                            <ul>
                                <li><b>REST_AFRICA</b>: Add every country of Africa that is not already added in another zone</li>
                                <li><b>REST_ASIA</b>: Add every country of Asia that is not already added in another zone</li>
                                <li><b>REST_EUROPE</b>: Add every country of Europe that is not already added in another zone</li>
                                <li><b>REST_NORTH_AMERICA</b>: Add every country of North America that is not already added in another zone</li>
                                <li><b>REST_OCEANIA</b>: Add every country of Oceania that is not already added in another zone</li>
                                <li><b>REST_SOUTH_AMERICA</b>: Add every country of South America that is not already added in another zone</li>
                                <li><b>REST_WORLD</b>: Add every country of the world that is not already added in another zone</li>
                            </ul>
                            </p>
                            <p>A list with all the countries and his codes can be seen <a href="{{ path('country_index') }}" target="_blank">here</a> </p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    {#Fin de modales#}

    <div class="js-routes" data-courier-list-route="{{ path('courier_list_ajax') }}"
         data-service-list-route="{{ path('service_list_ajax') }}" data-new-courier-route="{{ path('new_courier') }}"
         data-update-courier-route="{{ path('update_courier') }}" data-zone-list-route="{{ path('zone_list_ajax') }}"
         data-zone-fee-list-route="{{ path('zone_fee_list_ajax') }}" data-zone-detail-route="{{ path('zone_country_list_ajax') }}">

    </div>

    <!-- Default Modal -->
    {% include 'shared/default_modal.html.twig' %}
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('vendor/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js') }}"></script>
    <script src="{{ asset('js/app/shipping_rate/index_v2.js') }}"></script>
    {#<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>#}
{% endblock javascripts %}