{% extends '@EasyAdmin/default/layout.html.twig' %}

{# {% block stylesheets %}
    {{parent()}}
    <style>
        .table-fixed{
            display: flex;
            flex-flow: column;
            width: 100%;
            background: red !important;
        }
    </style>
{% endblock %} #}

{% block header_container %}
    <div class="row p-t-b-10">
        <div class="col-12" style="padding-left: 40px;">
            <h3 class="font-weight-bold">
                {# <span class="s-24 icon-shopping_cart"> #}
                </span>{% trans %}Metricas Cliente{% endtrans %}</span>
            </h3>
        </div>
    </div>
{% endblock %}

{% block wrapper %}
    <div class="card r-0 shadow my-1">
        <section class="content-header ">
            <div class="d-flex flex-row justify-content-between align-content-center w-100">
                <div class="content-header-title">
                    <h1 class="title">   </h1>
                    <h3>{% trans %}Rango fecha{% endtrans %}</h3>
                </div>

            </div>

        </section>
        <section id="main" class="content-body">
            <div class="cont-form">
                <div class="row">
                    <div class="col-8">
                        <div class="input-group focused" style="padding-left: 1.3rem;">
                            <input type="text" class="form-control" id="sales_date_range" name="sales_date_range">
                            <span class="input-group-append">
                                <span class="input-group-text add-on white">
                                    <i class="icon-calendar"></i>
                                </span>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <form action="/admin/metrica/clientes" method="post">
                            <p class="d-none"><input type="date" name="start_date" id="start_date" /></p>
                            <p class="d-none"><input type="date" name="end_date" id="end_date" /></p>
                            <button type="submit" class="btn btn-primary action-save">
                                <span class="link-new">
                                    {{'Buscar'|trans}}
                                </span>
                                <i class="s-20 fa fa-fw fa-search"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            
        </section>

    </div>
    <div class="row">
        <div class="col-md-3 my-3">
            <div class="counter-box white box-dash">
                <div class="p-4">
                    <div class="float-right">
                        <div class="s-48 icon-shopping-cart shop-icon-dash">
                        </div>
                    </div>
                    <div class="counter-title" style="min-height: 42px;">
                        <strong class="subtitle-dash" >
                            {{'Total pedidos'| trans}}<br>
                            {{rango}}
                        </strong>    
                    </div>
            
                    <h1 class="number-dash" >
                        <div id="sales_text">
                            <span id="money-left"></span>
                            {% if totalPedidos %} {{totalPedidos|round(2, 'common') }} {% else %} 0{% endif %}                        
                            <span id="money-right"></span>
                        </div>
                    </h1>
                </div>
                
            </div>
        </div>
        <div class="col-md-3 my-3">
            <div class="counter-box white box-dash">
                <div class="p-4">
                    <div class="float-right">
                        <div class="s-48 icon-shopping-cart shop-icon-dash">
                        </div>
                    </div>
                    <div class="counter-title" style="min-height: 42px;">
                        <strong class="subtitle-dash" >
                            {{'Total pedidos mes'| trans}}<br>
                        </strong>    
                    </div>
            
                    <h1 class="number-dash" >
                        <div id="sales_text">
                            <span id="money-left"></span>
                            {% if pedidosEnElMes %} {{pedidosEnElMes|round(2, 'common') }} {% else %} 0{% endif %}                        
                            <span id="money-right"></span>
                        </div>
                    </h1>
                </div>
                
            </div>
        </div>
        <div class="col-md-3 my-3">
            <div class="counter-box white box-dash">
                <div class="p-4">
                    <div class="float-right">
                        <div class="s-48 icon-user-o user-icon-dash">
                        </div>
                    </div>
                    <div class="counter-title" style="min-height: 42px;">
                        <strong class="subtitle-dash" >
                            {{'Clientes_mayor_un_pedido'| trans}}
                        </strong>    
                    </div>
            
                    <h1 class="number-dash" >
                        <div id="sales_text">
                            <span id="money-left"></span>
                            {% if clienteConPedidos %} {{clienteConPedidos|round(2, 'common') }} {% else %} 0{% endif %}                        
                            <span id="money-right"></span>
                        </div>
                    </h1>
                </div>
                
            </div>
        </div>
        <div class="col-md-3 my-3">
            <div class="counter-box white box-dash">
                <div class="p-4">
                    <div class="float-right">
                        <div class="s-48 icon-user-o user-icon-dash">
                        </div>
                    </div>
                    <div class="counter-title" style="min-height: 42px;">
                        <strong class="subtitle-dash" >
                            {{'Clientes_sin_un_pedido'| trans}}
                        </strong>    
                    </div>
            
                    <h1 class="number-dash" >
                        <div id="sales_text">
                            <span id="money-left"></span>
                            {% if clienteSinPedidos %} {{clienteSinPedidos|round(2, 'common') }} {% else %} 0{% endif %}                        
                            <span id="money-right"></span>
                        </div>
                    </h1>
                </div>
                
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card mb-3">
                {# <div class="card-header back-white">
                     <table class="table table-hover" >
                            <thead>
                                <tr class="text-uppercase">
                                    <th>{{'provider_ea.list.companyName'| trans}}</th>
                                    <th>{{'Mobile'| trans}}</th>
                                    <th class="text-center">{{'provider_ea.list.pedidos_realizados'| trans}}</th>
                                    <th class="text-center">{{'Last Order'| trans}}</th>
                                </tr>
                            </thead>
                            </table>
                </div> #}
                {# <div class="slim-message" > #}
                <div class="" >
                    <div class="table-responsive">
                        <table class="table table-hover table-fixed" >
                            <thead>
                                <tr class="text-uppercase">
                                    <th style="width:40%;">{{'provider_ea.list.companyName'| trans}}</th>
                                    <th>{{'Mobile'| trans}}</th>
                                    <th class="text-center">{{'provider_ea.list.pedidos_realizados'| trans}}</th>
                                    <th class="text-center">{{'Last Order'| trans}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for cliente in listCliente %}
                                    <tr class="no-b message-dash">
                                        <td style="width:40%;">
                                            {{cliente.companyName}} <br>
                                            {{cliente.email}}
                                        </td>
                                        <td>
                                            {{cliente.mobile}}
                                        </td>
                                        <td class="text-center">
                                            {{cliente.pedidos_realizados}}
                                        </td>
                                        <td class="text-center">
                                            <a href="{{path('easyadmin',{'entity':'OrderClient' , 'action':'show', 'id':cliente.lastOrderId})}}">
                                                {{cliente.lastOrder}}
                                            </a>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer">
                    <label>{{'metricaNota_1'|trans|raw}} </label>
                </div>
            </div>
        </div> 
    </div>
    
    <style>
        .table-fixed{
            display: flex;
            flex-flow: column;
            width: 100%;
        }
        .table-fixed thead {
            flex: 0 0 auto;
        }

        .table-fixed tbody {
            flex: 1 1 auto;
            display: block;
            overflow-y: auto;
            overflow-x: hidden;
            max-height: 350px;
        }

        .table-fixed tr {
            width: 100%;
            display: table;
            table-layout: fixed;
        }
    </style>
{% endblock %}

{% block body_javascript %}
    <link rel="stylesheet" href="/css/Chart.min.css?v45">
    <script type="text/javascript" src="/js/Chart.min.js?v45"></script>
    <script type="text/javascript" src="/js/moment.min.js?v45"></script>
    <script type="text/javascript" src="/js/daterangepicker.min.js?v45"></script>
    <link rel="stylesheet" href="/css/daterangepicker.css?v45" />
    <script>
    
        var optionsLocale = {
            "format": "DD/MM/YYYY",
            "separator": " - ",
            "applyLabel": "{{'Calendar.Select' | trans}}",
            "cancelLabel": "{{'Calendar.Cancel' | trans}}",
            "fromLabel": "{{'Calendar.From' | trans}}",
            "toLabel": "{{'Calendar.To' | trans}}",
            "customRangeLabel": "Custom",
            "daysOfWeek": [
                "{{'Calendar.Days.Su' | trans}}",
                "{{'Calendar.Days.Mo' | trans}}",
                "{{'Calendar.Days.Tu' | trans}}",
                "{{'Calendar.Days.We' | trans}}",
                "{{'Calendar.Days.Th' | trans}}",
                "{{'Calendar.Days.Fr' | trans}}",
                "{{'Calendar.Days.Sa' | trans}}",
            ],
            "monthNames": [
                "{{'Calendar.Months.January' | trans}}",
                "{{'Calendar.Months.February' | trans}}",
                "{{'Calendar.Months.March' | trans}}",
                "{{'Calendar.Months.April' | trans}}",
                "{{'Calendar.Months.May' | trans}}",
                "{{'Calendar.Months.June' | trans}}",
                "{{'Calendar.Months.July' | trans}}",
                "{{'Calendar.Months.August' | trans}}",
                "{{'Calendar.Months.September' | trans}}",
                "{{'Calendar.Months.October' | trans}}",
                "{{'Calendar.Months.November' | trans}}",
                "{{'Calendar.Months.December' | trans}}",
            ],
            "firstDay": 1
        };

        $('#sales_date_range').daterangepicker({
            startDate: moment('{{start_date}}'),
            endDate: moment('{{end_date}}'),
            locale: optionsLocale
        });

        $('#sales_date_range').on('apply.daterangepicker', function(ev, picker) {
            var date_range = $('#sales_date_range').val();
            var dates = date_range.split(" - ");
            var sales_start_date = moment(dates[0],'DD/MM/YYYY').format('YYYY-MM-DD');
            var sales_end_date = moment(dates[1],'DD/MM/YYYY').format('YYYY-MM-DD');
            //console.log('que lo que',dates, sales_start_date, sales_end_date)

            $('#start_date').val(sales_start_date);
            $('#end_date').val(sales_end_date);
            //ventas()
        });

    </script>
    {{parent()}}
{% endblock %}