{% 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_2{% endtrans %}</span>
            </h3>
        </div>
    </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_charged'| 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-balance-scale"></div>
                    </div>
                    <div class="counter-title" style="min-height: 42px;">
                        <strong class="subtitle-dash" >
                            {{'salesClient.balance.balance_to_receive'| 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-file-text-o"></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="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/provider" 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>
                            <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>
                        <button type="submit" class="btn btn-outline-primary btn-lg btn-send-invitation action-filters-button action-save " style="height: 38px;" onclick='handleOpenModalTodoPagado(true)'>
                            {{'salesClient.balance.marcar_all'|trans}}
                        </button>
                        <form action="/admin/saleClient/balance/provider?excel=1" 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>
                            <button type="submit" class="btn btn-outline-primary btn-lg btn-send-invitation action-filters-button action-save" style="height: 38px;">
                                {{'grouo_orders.download_excel'|trans}}
                            </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>{{'salesClient.balance.corresponsalia'| 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>{{'charged'| trans}}</th>
                                        <th>{{'salesClient.balance.commissionOnly'| trans}} {{'stripeConect.paid'| 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 %}
                                                        <input type="checkbox" class="form-batch-checkbox checkbox-product" value="{{productSale.saleId}},{{productSale.productSaleId}}">
                                                    {% 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 %}
                                                        <input type="checkbox" class="form-batch-checkbox checkbox-commission-paid" value="{{ productSale.saleId }},{{ productSale.productSaleId }}">
                                                    {% 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>

    <a href="#!" id='marcarCobrado' onclick='openModalCobrado()' class="d-none btn-fab fab-right fab-right-bottom-fixed shadow btn-icon-plus" style='color:#fff !important'>
        {{'salesClient.balance.charge'|trans|raw}}
    </a>

    <a href="#!" id='marcarPagado' onclick='openModalPagar()' class="d-none btn-fab fab-right fab-right-bottom-fixed shadow btn-icon-plus" style="color:#fff !important;bottom: 120px;">
        {{'salesClient.balance.pay'|trans|raw}}
    </a>

    {# <div class="input-group input-daterange">
        <input type="date" class="form-control" value="2012-04-05">
        <div class="input-group-addon">to</div>
        <input type="date" class="form-control" value="2012-04-19">
    </div> #}

<div class="modal" tabindex="-1" role="dialog" id="modalCharge">
    <div class="modal-dialog" role="document" style="margin-top: 9rem;">
        <div class="modal-content">
            <div class="modal-body" id='modalBodyError'>
                <h5 class="mb-2">
                    {{'salesClient.balance.modal_charged_header'|trans}}
                </h5>
                <p>{{'salesClient.balance.modal_charged_body'|trans}}</p>

                <div id='cont_alert_modal_delete'>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary text-capitalize" data-dismiss="modal">{{'Calendar.Cancel'|trans}}</button>
                <button type="button" class="btn btn-primary text-capitalize" onclick='handleMarcarCobrado()'>
                    {{'Accept'|trans}}
                    <div class="spinner-border d-none" id="spinner_delete_rate" role="status" >
                        <span class="sr-only">Loading...</span>
                    </div>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="modalPay">
    <div class="modal-dialog" role="document" style="margin-top: 9rem;">
        <div class="modal-content">
            <div class="modal-body" id='modalBodyError'>
                <h5 class="mb-2">
                    {{'salesClient.balance.modal_pagado_header'|trans}}
                </h5>
                <p>{{'salesClient.balance.modal_pagado_body'|trans}}</p>

                <div id='cont_alert_modal_delete'>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary text-capitalize" data-dismiss="modal">{{'Calendar.Cancel'|trans}}</button>
                <button type="button" class="btn btn-primary text-capitalize" onclick='handleMarcarPagado()'>
                    {{'Accept'|trans}}
                    <div class="spinner-border d-none" id="spinner_modalPay" role="status" >
                        <span class="sr-only">Loading...</span>
                    </div>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="modalAllPay">
    <div class="modal-dialog" role="document" style="margin-top: 9rem;">
        <div class="modal-content">
            <div class="modal-body" id='modalBodyError'>
                <h5 class="mb-2">
                    {{'salesClient.balance.marcar_all'|trans}}
                </h5>
                <p>{{'salesClient.balance.marcar_all_body'|trans}}</p>

                <div id='cont_alert_modal_all_pay'>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary text-capitalize" onclick='handleOpenModalTodoPagado(false)'>{{'Calendar.Cancel'|trans}}</button>
                <button type="button" class="btn btn-primary text-capitalize" onclick='handleMarcarTodoPagado()'>
                    {{'Accept'|trans}}
                    <div class="spinner-border d-none" id="spinner_modalAllPay" role="status" >
                        <span class="sr-only">Loading...</span>
                    </div>
                </button>
            </div>
        </div>
    </div>
</div>
{% 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_provider/balance_js.html.twig" %}

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