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

{% block header_container %}
    <div class="row p-t-b-10">
        <div class="col-12" style="padding-left: 40px;">
            <h3 class="font-weight-bold">
                <i class="fa fa-balance-scale" aria-hidden="true"></i>
                </span>{% trans %}salesClient.balance.balance_client{% endtrans %}</span>
            </h3>
        </div>
    </div>
    <div class="row nav-action-tab nav-product-detail" id="nav-tab" role="tablist">
        <ul class="nav nav-material nav-material-white responsive-tab" id="v-pills-tab" role="tablist">
            <div class="global-actions"></div>
            <li>
                <a class="nav-link nav-item pointer" title="{{ 'salesClient.view_stock'| trans }}" href='{{path('easyadmin',{'action':'list', 'entity':'ClientProductStock'}) }}'>
                    <span class="link-new">
                        {{ 'salesClient.view_stock'| trans }}        
                    </span>
                </a>
            </li>    
            {% if not is_granted('ROLE_CLIENT_USER_SELLER') %}
                <li>
                    <a class="nav-link nav-item pointer" title="{{ 'salesClient.view_stock'| trans }}" href='{{path('easyadmin',{'action':'list', 'entity':'OrderReturnClientClient'}) }}'>
                        <span class="link-new">
                            {{ 'orderReturns.title'| trans }}        
                        </span>
                    </a>
                </li>    
            {% endif %}
            <li>
                <a class="nav-link nav-item pointer" title="{{ 'salesClient.make_sale'| trans }}" href='{{path('easyadmin',{'action':'list', 'entity':'ClientSale'}) }}'>
                    <span class="link-new">
                        {{ 'Sales'| trans }}        
                    </span>
                </a>
            </li>      
            <li>
                <a class="nav-link nav-item pointer" title="{{ 'Clients'| trans }}" href='{{path('easyadmin',{'action':'list', 'entity':'ClientSaleBuyer'}) }}'>
                    <span class="link-new">
                        {{ 'Clients'| trans }}        
                    </span>
                </a>
            </li>       
        </ul>
    </div>
{% endblock %}

{% block wrapper %}
    <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 fa fa-shopping-bag"></div>
                    </div>
                    <div class="counter-title" style="min-height: 42px;">
                        <strong class="subtitle-dash" >
                            {{'salesClient.balance.total_sold'| trans}}<br>
                        </strong>    
                    </div>
            
                    <h1 class="number-dash" >
                        <div id="sales_text">
                            <span id="money-left"></span>
                            {{total_sold}} €
                            <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 fa fa-eur"></div>
                    </div>
                    <div class="counter-title" style="min-height: 42px;">
                        <strong class="subtitle-dash" >
                            {{'salesClient.balance.total_paid'| trans}}<br>
                        </strong>    
                    </div>
            
                    <h1 class="number-dash" >
                        <div id="sales_text">
                            <span id="money-left"></span>
                            {{total_charged}} €
                            <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 fa fa-file-text-o"></div>
                    </div>
                    <div class="counter-title" style="min-height: 42px;">
                        <strong class="subtitle-dash" >
                            {{'salesClient.balance.pending_payment'| trans}}
                        </strong>    
                    </div>
            
                    <h1 class="number-dash" >
                        <div id="sales_text">
                            <span id="money-left"></span>
                            {{balance_to_receive}} €
                            <span id="money-right"></span>
                        </div>
                    </h1>

                    {% if total_commission < balance_to_receive %}
                        <i class="fa fa-exclamation-circle pointer float-right" style='font-size: 20px !important; color: #e9c70a;' aria-hidden="true"
                            data-toggle="tooltip" data-placement="top" title="{{'salesClient.balance.toltipSaldoCobrar'| trans}} {{balance_to_receive - total_commission}}"
                        ></i>
                    {% endif %}
                </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 fa fa-percent"></div>
                    </div>
                    <div class="counter-title" style="min-height: 42px;">
                        <strong class="subtitle-dash" >
                            {{'salesClient.balance.total_commission'| trans}}
                        </strong>    
                    </div>
            
                    <h1 class="number-dash" >
                        <div id="sales_text">
                            <span id="money-left"></span>
                            {{total_commission}} €
                            <span id="money-right"></span>
                        </div>
                    </h1>
                </div>
                
            </div>
        </div>
    </div>

    <div class="card r-0 shadow my-1">
        <section id="main" class="content-body pt-3">
            <div class="cont-form">
                <div class="row">
                    <div class="col-12 d-flex">
                        <a type="button" href="#!" id='filterAdvance' class="btn btn-outline-primary btn-send-invitation " style="height: 38px; margin-left: 1.3rem;">
                            Filtro  <i class="fa fa-filter fa-fw" style="margin-right: 0px !important;"></i>
                        </a>
                        <div class="form-group p-0" style="padding-left: 1.3rem !important;"> 
                            <select name="providers" id="providers" class="form-control select2">
                                {% for provider in providersArray %}
                                    <option value='{{provider.id}}'>{{provider.companyName}}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="input-group focused" style="padding-left: 1.3rem;">
                            <input type="text" class="form-control sales_date_range" id="sales_date_range" name="sales_date_range">
                            <span class="input-group-append" style="height: 38px;">
                                <span class="input-group-text add-on white">
                                    <i class="icon-calendar"></i>
                                </span>
                            </span>
                        </div>
                        <form action="/admin/saleClient/balance" method="post">
                            <p class="d-none"><input type="date" name="start_date" id="start_date" value='{{start_date}}' /></p>
                            <p class="d-none"><input type="date" name="end_date" id="end_date" value='{{end_date}}' /></p>
                            <p class="d-none"><input type="text" name="providerSelect" id="providerSelect" value='{{providerSelect}}' /></p>
                            <button type="submit" class="btn btn-outline-primary btn-lg btn-send-invitation action-filters-button action-save" style="height: 38px;">
                                {{'Buscar'|trans}}
                                <i class="s-20 fa fa-fw fa-search"></i>
                            </button>
                        </form>
                    </div>
                    <div class="col">
                        
                    </div>
                </div>
            </div>
            
        </section>

        <div class="row">
            <div class="col-12">
                <div class="card mb-3">
                    <div class="" >
                        <div class="table-responsive">
                            <table class="table table-hover table-fixed" >
                                <thead>
                                    <tr class="text-uppercase">
                                        <th>{{'Clients'| trans}}</th>
                                        <th>{{'invoiceorderclient_ea.list.createdAt'| trans}}</th>
                                        <th>{{'Product'| trans}}</th>
                                        <th>{{'sectors_list.editorial'| trans}}</th>
                                        <th>{{'product_ea.list.quantity'| trans}}</th>
                                        <th>{{'salesClient.balance.amount'| trans}}</th>
                                        <th>{{'salesClient.balance.commissionPercentage'| trans}}</th>
                                        <th>{{'salesClient.balance.commissionOnly'| trans}}</th>
                                        <th>{{'salesClient.balance.typeSale'| trans}}</th>
                                        <th>{{'stripeConect.paid'| trans}}</th>
                                        <th>{{'salesClient.balance.commission_charged'| trans}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% if productsSale|length > 0 %}
                                        {% for productSale in productsSale %}
                                            <tr class="no-b message-dash">
                                                <td>{{productSale.client}}</td>
                                                <td>{{productSale.createAt}}</td>
                                                <td>{{productSale.name}}</td>
                                                <td>{{productSale.category}}</td>
                                                <td>{{productSale.quantity}}</td>
                                                <td>{{productSale.price}}</td>
                                                <td>{{productSale.commissionPercentage}}</td>
                                                <td>{{productSale.commission}}</td>
                                                <td>
                                                    {% if productSale.typeSale == 1 %}
                                                        {{'salesClient.cash'|trans}}
                                                    {% elseif productSale.typeSale == 2 %}
                                                        {{'credit'|trans}}
                                                    {% elseif productSale.typeSale == 3 %}
                                                        {{'payment online'|trans}}
                                                    {% elseif productSale.typeSale == 4 %}
                                                        {{'payment posnet'|trans}}
                                                    {% endif %}
                                                </td>
                                                <td class='text-center'>
                                                    {% if productSale.productCharged %}
                                                        <i class="fa fa-check-square rol-user" style='font-size: 19px;' aria-hidden="true"></i>
                                                    {% else %}
                                                        <i class="fa fa-check-square" style='font-size: 19px; color: #a4aeb6' aria-hidden="true"></i>
                                                    {% endif %}
                                                </td>
                                                <td class='text-center'>
                                                    {% if productSale.commissionPaid ?? false %}
                                                        <i class="fa fa-check-square rol-user" style='font-size: 19px;' aria-hidden="true"></i>
                                                    {% else %}
                                                        <i class="fa fa-check-square" style='font-size: 19px; color: #a4aeb6' aria-hidden="true"></i>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    {% else %}
                                        <tr class="no-b message-dash text-center">
                                            <td colspan='10'>{{'salesClient.balance.balanceNota_3'|trans|raw}}</td>
                                        </tr>
                                    {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer">
                        <label>{{'salesClient.balance.balanceNota_1'|trans|raw}} </label>
                    </div>
                </div>
            </div> 
        </div>
    </div>

    <style>
        .content-body .select2-container .select2-selection--single{
            height: 38px !important;
            padding: 3px 25px 3px 12px !important;
        }
        .content-body .select2-container--default .select2-selection--single .select2-selection__arrow{
            top: 4px !important;
        }

        .content-body .select2-container--default .select2-selection--single{
            border: 1px solid #e1e8ee !important;
        }
        
        .content-body .select2-container--default .select2-selection--single .select2-selection__clear{
            display: none !important;
        }

        .bt-edit-phone{
            height: 43px;
            line-height: initial;
        }
    </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" />
    {% include "/admin/sales_client/balance_sales_client/balance_js.html.twig" %}

    
    {{parent()}}
{% endblock %}