{% extends 'layouts/panel_layout.html.twig' %}

{% block title %}
    Cuenta Corriente
{% endblock %}


{% block stylesheets %}
    {{ encore_entry_link_tags('cuenta_corriente_index') }}
{% endblock %}

{% block content %}

    <div class="bg-dark m-b-30">
        <div class="container">
            <div class="row p-b-60 p-t-60">

                <div class="col-md-10 mx-auto text-center text-white p-b-30">
                    <div class="m-b-20">
                        <div class="avatar avatar-xl my-auto">
                            <i class="icon-placeholder mdi mdi-account-card-details" style="font-size: 5rem"></i>
                        </div>
                    </div>
                    <h2>Resumen Debe Haber</h2>
                    <h1 class="text-secondary">{{ proveedor.razonSocial }}</h1>

                    <a href="#modal-edit" data-toggle="modal"
                       data-registro="{{  {  proveedor: { id: proveedor.id, nombre: proveedor.razonSocial }  } | json_encode }}"
                       class="btn btn-rounded-circle py-1 btn-outline-primary ml-2 nuevo-registro">
                        <i class="mdi mdi-plus mdi-18px"></i>
                    </a>

                </div>

            </div>
        </div>
    </div>

    <div class="container pull-up pb-5 mb-5">

        <div class="row">

            <div class="d-none d-md-inline-block col-md-4 m-b-30 offset-md-4">
                <div class="card card-hover">
                    <div class="card-body">
                        <div class="text-center p-t-20">
                            <div class="avatar-lg avatar">
                                <div class="avatar-title rounded-circle badge-soft-danger">
                                    <i class="mdi mdi-cash-multiple h1 m-0"></i>
                                </div>
                            </div>
                            <div class="text-center">
                                <h1 class="fw-600 p-t-20">${{ total | number_format(2) }}</h1>
                                <p class="text-muted fw-600">Total</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <div class="container-fluid pull-up pb-5">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body pt-5 pb-4">
                        <form action="{{ path('proveedor_debe_haber_detalle', { id: proveedor.id } ) }}" method="post" class="form-row">

                                {{ form_row(filtro.filtroFecha) }}
                                {{ form_row(filtro.descripcion) }}

                                <div class="form-group form-inline col-2">

                                    <label class="cstm-switch">
                                        <input type="checkbox" name="{{ filtro.f.vars.full_name }}"
                                               {% if filtro.f.vars.data %}checked="checked"{% endif %} class="cstm-switch-input">
                                        <span class="cstm-switch-description text-uppercase px-2">F</span>
                                        <span class="cstm-switch-indicator"></span>
                                    </label>

                                </div>

                                <div class="col-6 py-4 text-left">
                                    <a href="{{ path('proveedor_debe_haber_index') }}" class="btn btn-lg btn-secondary">Volver</a>
                                    <button type="button" id="print_tabla" class="btn btn-lg btn-secondary">IMPRIMIR</button>
                                </div>

                                <div class="col-6 py-4 text-right">
                                    <button type="submit" class="btn btn-lg btn-secondary" >Filtrar</button>
                                </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid pb-5 mb-5">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body pt-3">
                        <div id="tabla_entradas" class="table-responsive p-t-10">
                            <div class="d-none">
                                <div class="" style="width: 45%;display: inline-block;padding-bottom: 3rem">
                                    <h3 style="margin-bottom: 0.1rem; margin-top: 0.1rem">TOTAL: $<span class="text-primary">23423432.24</span></h3>
                                    <p class="text-secondary" style="margin: 0"><small>{{ filtro.filtroFecha.vars.value }}</small></p>
                                </div>
                                <div class="" style="width: 45%;display: inline-block;text-align: right;float: right;padding-bottom: 4rem;">
                                    <h3 style="margin-bottom: 0.1rem; margin-top: 0.1rem">{{ proveedor.razonSocial }}</h3>
                                    <h5 style="margin-bottom: 0.1rem; margin-top: 0.1rem">Resumen de cuenta</h5>
                                    <h5 style="margin-bottom: 0.1rem; margin-top: 0.1rem">Fecha: <span>{{ 'now' | date('d-m-Y') }}</span></h5>
                                </div>
                            </div>
                            <table class="table nowrap table-striped table-sm" style="width:100%">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th>Fecha</th>
                                    <th>Descripción</th>
                                    <th class="text-center">Facturado</th>
                                    <th class="text-right">Debe</th>
                                    <th class="text-right">Haber</th>
                                    <th class="text-right">Saldo</th>
                                    <th class="text-right">Operación</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td class="bg-gray-400"></td>
                                    <td class="bg-gray-400" colspan="3"><b>Totales</b></td>
                                    <td class="text-right bg-gray-400"><b>{{ totalDebe  | number_format(2) }}</b></td>
                                    <td class="text-right bg-gray-400"><b>{{ totalHaber | number_format(2) }}</b></td>
                                    <td class="bg-gray-400"></td>
                                    <td class="bg-gray-400"></td>
                                </tr>
                                {% set total = 0 %}
                                {%  for h in historial %}
                                    <tr>
                                        <td>
                                            <label>
                                                {% if h.remito and not h.referenciaDe %}
                                                <input type="checkbox"
                                                       data-object="{{ { id : h.id, debe: h.debe, haber:h.haber, codremito: h.remito.codremito } | json_encode }}"
                                                       name="selectable_{{ h.id }}" class="selectable">
                                                {% endif %}
                                                {% if h.descripcion =='Pago por adelantado.' %}
                                                    <input type="checkbox"
                                                           data-object="{{ { id : h.id, debe: h.debe, haber:h.haber } | json_encode }}"
                                                           name="selectable_{{ h.id }}" class="selectable">
                                                {% endif %}

                                            </label>
                                        </td>
                                        <td style="padding-top: 1rem; padding-bottom: 1rem">
                                            {{ h.fecha | date('m-d-Y')  }}
                                            <p style="margin: 0; width: 100%;"><small>({{ h.hora | date('H:m:s') }})</small></p>
                                        </td>
                                        <td>
                                            {% if h.remito %}

                                                <!-- TODO: Falta la relación con el numero de factura n remitos -->
                                                {% if (h.remito.f==1) %}
                                                <div class="d-block {% if h.referenciaDe %}text-secondary{% else %}text-primary{% endif %}">
                                                    <a href="{{ path('remito_ver', {'id':h.remito.codremito }) }}" class="not_me_link">
                                                        MOVIMIENTO ({{ h.remito.codremito }}) {{h.remito.numeroFactura  }} ({{ h.remito.puntoFactura }})</a>
                                                </div>
                                                {% endif %}

                                                {% if (h.remito.f==0) %}
                                                        <div class="d-block text-primary">
                                                            <a href="{{ path('remito_ver', {'id':h.remito.codremito }) }}" class="not_me_link">
                                                                Movimiento generado por REMITO Nº {{ h.remito.codremito }}</a>
                                                        </div>
                                                {% endif %}

                                            {% elseif h.ordenPago and (h.ordenPago.referencias | length > 0) %}
                                                {% set numFactArr = [] %}
                                                {% for ref in h.ordenPago.referencias %}
                                                    {% if ref.remito %}
                                                        {% set  numFactArr = numFactArr | merge( [ [ [ ref.remito.numeroFactura, ref.remito.puntoFactura ] | join('-'), ' (', ref.remito.codremito , ')' ] | join ] )%}
                                                    {% endif %}
                                                {% endfor %}
                                                <div class="d-block text-puntoFactura">
                                                    ORP. Nº {{ h.ordenPago.id }} por comprobantes: {{ numFactArr| join(', ') }}
                                                </div>
                                            {% else %}
                                                <div class="d-block">
                                                    {{ h.descripcion }}
                                                </div>
                                            {% endif %}
                                        </td>
                                        <td class="text-center">{% if h.f %}F{% else %}N/F{% endif %}</td>
                                        <td class="text-right {% if h.debe < 0 %}text-danger{% endif %}">{% if h.debe < 0 %}-{% endif %}${{ h.debe  | abs | number_format(2) }}</td>
                                        <td class="text-right {% if h.haber < 0 %}text-danger{% endif %}">{% if h.haber < 0 %}-{% endif %}${{ h.haber | abs | number_format(2) }}</td>
                                        {% set total = total + h.debe - h.haber %}
                                        <td class="text-right {% if total < 0 %}text-danger{% endif %}">
                                            {% if total < 0 %}-{% endif %}${{ total | abs | number_format(2)}}
                                        </td>
                                        <td class="text-right">
                                        {% if is_granted('ROLE_ADMIN') %}

                                            {% if h.ordenPago %}
                                            <a href="javascript:void(0)" data-id="{{ h.ordenPago.id }}"
                                               class="btn btn-sm m-b-15 ml-1 btn-info py-0 imprimir-lista">
                                                <i class="mdi mdi-printer mdi-18px"></i>
                                            </a>
                                            {% endif %}

                                            {% if not h.ordenPago and not h.referenciaDe %}
                                            <a href="#modal-edit"
                                               data-registro="{{ { id: h.id, descripcion: h.descripcion, proveedor: { id: proveedor.id, nombre: proveedor.razonSocial }, f: h.f, debe: h.debe, haber: h.haber, fecha: h.fecha | date('d-m-Y'), hora: h.hora | date('H:m:s') } | json_encode }}"
                                               data-toggle="modal"
                                               class="btn btn-sm m-b-15 ml-1 btn-primary py-0 editar-registro">
                                                <i class="mdi mdi-pencil mdi-18px"></i>
                                            </a>
                                            {% endif %}

                                            <a href="javascript:void(0)"
                                               data-url="{{ path('proveedor_debe_haber_borrar', { id: h.id }) }}"
                                               data-nombre="{{ h.descripcion ? ['"', h.descripcion, '"' ] | join('') : '' }} del {{ h.fecha | date('m-d-Y') }}"
                                               class="btn btn-sm m-b-15 ml-1 btn-outline-danger py-0 action-delete">
                                                <i class="mdi mdi-trash-can mdi-18px"></i>
                                            </a>

                                        {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# MODALES - EDITAR CUENTA CORRIENTE #}
    <div id="modal-edit" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"
         data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 66vw">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <div class="card pt-3">
                        <div class="card-header">
                            <h4 class="m-b-0 text-center titulo text-muted"></h4>
                            <h2 class="m-b-0 text-center pb-4 subtitulo text-primary"></h2>
                            <h5 class="text-center text-muted total_container">
                                Total: $<span class="remito_total"></span>
                            </h5>
                        </div>

                        <div class="card-body" id="ver_detalle">

                            <form method="post" class="form" autocomplete="off">
                            <div class="form-row align-items-center">

                                <input type="hidden" class="referencias" name="registro[referencias]">

                                <label class="col-2 offset-2 text-right px-2 mb-3">Fecha</label>
                                <input type="text" class="form-control col-2 fecha mb-3" readonly>

                                <label class="col-2 text-right px-2 mb-3">Hora</label>
                                <input type="text" class="form-control col-2 hora mb-3" readonly>

                                <label class="col-2 offset-2 text-right px-2 mb-3">Descripción</label>
                                <input type="text" class="form-control col-6 descripcion mb-3" maxlength="200" name="registro[descripcion]">


                                <label class="col-2 offset-2 text-right px-2 mb-3">Debe</label>
                                <div class="input-group col-2 mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="prepend-2">$</span>
                                    </div>
                                    <input type="text" class="form-control debe" aria-describedby="prepend-2" name="registro[debe]">
                                </div>

                                <label class="col-2 text-right px-2 mb-3">Haber</label>
                                <div class="input-group col-2 mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="prepend-3">$</span>
                                    </div>
                                    <input type="text" class="form-control haber" aria-describedby="prepend-3" name="registro[haber]">
                                </div>

                                <label class="col-2 offset-2 text-right px-2 mb-3">Bonificacion</label>
                                <div class="input-group col-2 mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="prepend-2">%</span>
                                    </div>
                                    <input type="text" class="form-control bonificacion_porc" aria-describedby="prepend-2" name="registro[bonificacion_porc]">
                                </div>


                                <label class="col-2 text-right px-2 mb-3">Bonificacion</label>
                                <div class="input-group col-2 mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="prepend-2">$</span>
                                    </div>
                                    <input type="text" class="form-control bonificacion" aria-describedby="prepend-2" name="registro[bonificacion]">
                                </div>

                                <label class="col-2 offset-2 text-right px-2 mb-3">Retención <br/> Ingresos bruto</label>
                                <div class="input-group col-2 mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="prepend-4">$</span>
                                    </div>
                                    <input type="text" class="form-control retencion_ingreso" aria-describedby="prepend-4" name="registro[retencionIngreso]">
                                </div>

                                <label class="col-2 text-right px-2 mb-3">Retención Ganancia</label>
                                <div class="input-group col-2 mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="prepend-3">$</span>
                                    </div>
                                    <input type="text" class="form-control retencion_ganancia"
                                           aria-describedby="prepend-3" name="registro[retencionGanancia]">
                                </div>

                                <label class="col-2 offset-2 text-right px-2 mb-3">Forma de Pago</label>
                                <div class="col-2 p-0 m-0">
                                    <select class="form-control js-select2 forma_pago" name="registro[formaPago]">
                                        <option value="efectivo" selected>Efectivo</option>
                                        <option value="transferencia">Transferencia</option>
                                        <option value="cheque">Cheque</option>
                                        <option value="deposito">Deposito en Banco</option>
                                        <option value="otros">Otros</option>
                                    </select>
                                </div>

                                <label class="col-2 text-right px-2 mb-3">TOTAL</label>
                                <div class="input-group col-2 mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="prepend-3">$</span>
                                    </div>
                                    <input type="text" class="form-control total"
                                           aria-describedby="prepend-3" name="registro[total]" readonly>
                                </div>

                                <label class="col-2 text-right px-2 mb-3 offset-2">Detalle Pago</label>
                                <div class="input-group col-6 mb-3">
                                     <textarea rows="6" type="text" class="form-control detallePago"
                                              aria-describedby="prepend-3" name="registro[detallePago]"></textarea>
                                </div>

                                <label class="col-2 text-right px-2 mb-3 offset-2">Observaciones</label>
                                <div class="input-group col-6 mb-3">
                                    <textarea type="text" class="form-control Observaciones" aria-describedby="prepend-4" name="registro[Observaciones]"></textarea>
                                </div>



                                <div class="form-group form-inline col-8 offset-2 justify-content-end">

                                    <label class="cstm-switch">
                                        <input type="checkbox" class="cstm-switch-input f" name="registro[f]">
                                        <span class="cstm-switch-description text-uppercase px-2">F</span>
                                        <span class="cstm-switch-indicator"></span>
                                    </label>

                                </div>

                            </div>

                            </form>

                        </div>

                        <div class="card-footer text-right">
                            <button class="btn btn-outline-secondary" data-dismiss="modal">CANCELAR</button>
                            <button class="btn btn-outline-primary guardar">GUARDAR</button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="box_imprimir d-none" style="height: 200vh">
    </div>

{% endblock %}

{% block javascripts %}
    <script>

      // CONTAINER DE URLS A USAR EN JAVASCRIPT DESDE PATH IN SYMFONY
      const urlContainer = {
        actualizar: '{{ path('proveedor_debe_haber_actualizar', { id: '_id_'}) }}',
        nuevo: '{{ path('proveedor_debe_haber_nuevo', { id: proveedor.id }) }}',
        imprimirOrden: '{{ path('orden_pago_imprimir', { id: '_id_'}) }}'
      };

    </script>
    <script src="{{ base_url }}vendor/jquery.PrintArea.js?v=1" type="text/javascript"></script>
    {{ encore_entry_script_tags('proveedor_debe_haber') }}
{% endblock %}