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

{% block page_title %}Estadísticas de tarifas por países{% endblock %}

{% block page_content %}
    <style>
        .rate-details {
            display:none;
        }
        .toggle-details {
            font-size:15px;
            cursor: pointer;
        }
        .losses-rate {
            background: #fdbcbc;
            margin-bottom: 2px;
            border-radius: 5px;
            padding: 3px;
        }
        .no-losses-rate {
            background: #9eff9e;
            margin-bottom: 2px;
            border-radius: 5px;
            padding: 3px;
        }

        .country-balance-title {
            background: #ffeb00;
            padding: 10px;
        }

        .weight-range-balance-title {
            background: #b3eff9;
            padding: 10px;
        }
    </style>
    <div class="row">
        <div class="col-md-12">
            <div class="box box-solid">
                <div class="box-body ">
                    <div class="col-sm-12 text-right">
                        <p>
                            <a class="btn btn-primary" href="{{ path('excel_rate_stats_by_country', { 'carrierInvoiceDiffReportId' : carrierInvoiceDiffReportId}) }}">Excel</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#tab-summary" data-toggle="tab"
                           aria-expanded="true">RESUMEN</a>
                    </li>
                    <li>
                        <a href="#tab-shipping-ranges" data-toggle="tab"
                           aria-expanded="true">TARIFAS</a>
                    </li>
                    {% for iso_code,data in stats.country_reports %}
                        <li>
                            <a href="#tab-country-{{ iso_code }}" data-toggle="tab"
                               aria-expanded="true" {% if stats.country_sum_diff_price[iso_code] > 0 %}style="color:red"{% endif %}>{{ iso_code }} </a>
                        </li>
                    {% endfor %}
                </ul>
                <div class="tab-content">

                    {% include 'carrier_rate_report/_tab_shipping_ranges.html.twig' %}

                    {% include 'carrier_rate_report/_tab_summary.html.twig' %}

                    {% for iso_code,data in stats.country_reports %}
                        {% include 'carrier_rate_report/_tab_single_country.html.twig' %}
                    {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
        $('body').on('click', '.toggle-details', function(e) {
             $(this).siblings('table').toggle();
        });

         $('#table-shipping-ranges').dataTable({
          "pageLength": 20
        });
    </script>
{% endblock %}