{% 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="javascript:void(0);"
                       data-registro="{{ { proveedor: { id: proveedor.id, nombre: proveedor.razonSocial } } | json_encode }}"
                       class="btn btn-rounded-circle py-1 btn-outline-danger ml-2 marcar-pagados"
                       title="Marcar como completamente pagados">
                        <i class="mdi mdi-minus mdi-18px"></i>
                    </a>
                    <a href="javascript:void(0);"
                       data-registro="{{ { proveedor: { id: proveedor.id, nombre: proveedor.razonSocial } } | json_encode }}"
                       class="btn btn-rounded-circle py-1 btn-outline-success ml-2 nuevo-registro"
                       title="Registrar pago">
                        <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="col-md-4 m-b-30">
                <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-success">
                                    <i class="mdi mdi-account-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 class="d-none d-md-inline-block col-md-4 m-b-30">
                <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_f | number_format(2) }}</h1>
                                <p class="text-muted fw-600">Saldo F</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-none d-md-inline-block col-md-4 m-b-30">
                <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-info">
                                    <i class="mdi mdi-cash-multiple h1 m-0"></i>
                                </div>
                            </div>
                            <div class="text-center">
                                <h1 class="fw-600 p-t-20">${{ total_nf | number_format(2) }}</h1>
                                <p class="text-muted fw-600">Saldo N/F</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 filtros">
                            {{ form_row(filtro.filtroFecha) }}
                            {# {{ form_row(filtro.descripcion) }} #}
                            <div class="form-group form-inline col-2">
                                <label class="cstm-switch">
                                    <input type="checkbox" name="filtroF_f" {% if filtroF['f'] is null or filtroF['f'] %}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>
                                <label class="cstm-switch">
                                    <input type="checkbox" name="filtroF_nf" {% if filtroF['nf'] %}checked="checked"{% endif %} class="cstm-switch-input">
                                    <span class="cstm-switch-description text-uppercase px-2">N/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 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 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 id="DateTables_Detalles" class="table nowrap table-striped table-sm" style="width:100%">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th style="width: 90px;">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>
                                {% set total = 0 %}
                                {% for h in historial %}
                                    <tr>
                                        <td>
                                            <div style="padding: 10px; position: absolute;"></div>
                                            <label>
                                                {% if h.remito and h.debeCorregido > 0 %}
                                                    <input type="checkbox"
                                                           data-object="{{ {
                                                               id: h.id,
                                                               debe: h.debe,
                                                               haber: h.haber,
                                                               codremito: h.remito.codremito,
                                                               pagado: h.pagado ? h.pagado : 0,
                                                               ordenPagoProveedorIds: h.ordenPagoProveedor|column('id')|join(',')
                                                           } | json_encode }}"
                                                           name="selectable_{{ h.id }}" class="selectable">
                                                {% endif %}
                                            </label>
                                        </td>
                                        <td style="padding-top: 1rem; padding-bottom: 1rem">
                                            {{ h.fecha | date('d-m-Y') }}
                                            <p style="margin: 0; width: 100%;">
                                                <small>({{ h.hora | date('H:i:s') }})</small>
                                            </p>
                                        </td>
                                        <td style="max-width: 300px; word-wrap: break-word; white-space: normal;">
                                            {% if h.remito %}
                                                <div class="d-block {% if h.debeCorregido == 0 %}text-secondary{% else %}text-primary{% endif %}">
                                                    <a href="{{ path('remito_ver', {'id': h.remito.codremito }) }}" class="not_me_link">
                                                        REMITO N. {{ h.remito.codremito }} F. {{ h.remito.puntoFactura }} - {{ h.remito.numeroFactura }}
                                                    </a>
                                                    {% if (h.debe - h.pagado) > 0 %}
                                                        <span class="text-danger">
                                                                <br>TOTAL: ${{ h.debe | abs | number_format(2) }}
                                                                <br>PAGADO: ${{ h.pagado | abs | number_format(2) }}
                                                            </span>
                                                    {% endif %}
                                                </div>
                                            {% elseif h.descripcion %}
                                                <div class="d-block">
                                                    {{ h.descripcion }}
                                                </div>
                                            {% elseif h.ordenPagoProveedor|length > 0 %}
                                                <div class="d-block text-puntoFactura">
                                                    Órdenes de pago:
                                                    {% for op in h.ordenPagoProveedor %}
                                                        {{ op.getOrdenPagoProveedorIds()|join(', ') }}{% if not loop.last %}, {% endif %}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </td>
                                        <td class="text-center">
                                            {% if h.f %}F{% else %}N/F{% endif %}
                                        </td>
                                        <td class="td-debe text-right {% if h.debe < 0 %}text-danger{% endif %}">
                                            {% if h.debe != 0 %}
                                                {% if (h.debe - h.pagado) > 0 %}
                                                    {{ (h.debe - h.pagado) | abs | number_format(2) }}
                                                {% else %}
                                                    {% if h.debe < 0 %}-{% endif %}{{ h.debe | abs | number_format(2) }}
                                                {% endif %}
                                            {% endif %}
                                        </td>
                                        <td class="td-haber text-right {% if h.haber < 0 %}text-danger{% endif %}">
                                            {% if h.haber != 0 %}
                                                {% if h.haber < 0 %}-{% endif %}${{ h.haber | abs | number_format(2) }}
                                            {% endif %}
                                        </td>
                                        {% set total = total + h.debe - h.haber %}
                                        <td class="text-right {% if h.saldo < 0 %}text-danger{% endif %}">
                                            {% if h.saldo < 0 %}-{% endif %}${{ h.saldo | abs | number_format(2) }}
                                        </td>
                                        <td class="text-right">
                                            {% if is_granted('ROLE_ADMIN') %}
                                                {% if h.ordenPagoProveedor|length > 0 %}
                                                    {% for op in h.ordenPagoProveedor %}
                                                        <a href="javascript:void(0)" data-id="{{ op.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>
                                                    {% endfor %}
                                                    {# <div class="btn btn-sm py-0 editar-registro" data-toggle="tooltip" style="padding:0" data-placement="top" title="Ya se encuentra en una orden de pago">
                                                        <a href="javascript:void(0);" class="btn btn-sm m-b-15 ml-1 bg-light text-muted py-0 editar-registro disabled">
                                                            <i class="mdi mdi-pencil mdi-18px"></i>
                                                        </a>
                                                    </div> #}
                                                {% else %}
                                                    {# <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:i:s'),
                                                           registro: 'REMITO N. ' ~ (h.remito ? h.remito.codremito : '') ~ ' F. ' ~ (h.remito ? h.remito.puntoFactura : '') ~ ' - ' ~ (h.remito ? h.remito.numeroFactura : '')
                                                       } | json_encode }}"
                                                       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>

    {# MODAL - 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-auto">Debe</label>
                                    <div class="input-group col-2 mb-auto">
                                        <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-auto">Haber</label>
                                    <div class="col-2 mb-3">
                                        <div class="input-group">
                                            <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>
                                        <div class="text-right"><b class="haber-remanente">$0.00</b></div>
                                    </div>
                                    <div class="division_pagos row">
                                        <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">Nuevo Cheque</option>
                                                <option value="cheque_registrado">Cheque Registrado</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>
                                        <div class="col-12 py-3 offset-2">
                                            <div id="forma_pago_cheque" class="row m-0 p-0" style="display: none">
                                                <div class="col-8 offset-2 p-0 m-0">
                                                    {% include 'facturacion/templates/cheque.html.twig' with {
                                                        id: 'cheque',
                                                        form_prefix: 'cheque',
                                                        cliente: '',
                                                        mostrarImporte: true,
                                                        ocultarCliente: true
                                                    } %}
                                                </div>
                                            </div>
                                            <div id="forma_pago_cheque_registrado" class="row m-0 p-0" style="display: none">
                                                <label class="col-2 text-right px-2 mb-3">Número de cheque:</label>
                                                <div class="col-6 p-0 m-0">
                                                    <select class="form-control js-select2 select-numero-cheque" multiple name="registro[chequeID][]">
                                                        {% for c in cheques %}
                                                            <option value="{{ c.idCheque }}" data-ui-saldo="{{ c.saldo }}">
                                                                {{ c.nroCheque }} (${{ c.saldo }})
                                                            </option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                            </div>
                                            <div id="forma_pago_otros" class="row m-0 p-0" style="display: none">
                                                <label class="col-2 text-right px-2 mb-3">Detalle Pago</label>
                                                <div class="input-group col-6 mb-3 px-0">
                                                    <textarea rows="6" type="text" class="form-control detallePago" aria-describedby="prepend-3" name="registro[detallePago]"></textarea>
                                                </div>
                                            </div>
                                        </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>
                                    <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_'}) }}',
            marcarPagados: '{{ path('proveedor_debe_haber_marcar_pagados', { id: proveedor.id }) }}'
        };
    </script>
    <script src="{{ base_url }}vendor/jquery.PrintArea.js?v=1" type="text/javascript"></script>
    {{ encore_entry_script_tags('proveedor_debe_haber') }}
{% endblock %}