{% extends 'base.html.twig' %}

{% block title %}Caja{% endblock %}

{% block body %}
    <h1>Caja N°: {{ caja.id }}</h1>


    <div class="row">

    <table class="table table-sm table-border table-hover col-6 table-responsive">
        <tbody>
            <tr>
                <th>Fecha Apertura</th>
                <td>{{ caja.fecha ? caja.fecha|date('d/m/Y H:i') : '' }}</td>
                <th>Monto Inicial</th>
                <td> {{ caja.efectivoInicio }}</td>
                <th>Abrió Usuario</th>
                <td>{{ caja.usuarioabre }}</td>
            </tr>
            <tr>
                <th>Fecha Cierre</th>
                <td>{{ caja.fechacierre ? caja.fechacierre|date('d/m/Y H:i') : '' }}</td>
                <th>Monto Cierrre</th>
                <td>{{ caja.efectivoCierre }}</td>
            </tr>
            <tr>
                <th>Usuario Cierra</th>
                <td>{{ caja.usuariocierra }}</td>
            </tr>
        </tbody>
    </table>

    <div class="col-3 pull-right">
        <table class="table table-border table-hover table-sm ">
            <thead class="thead-dark">
                <tr>
                    <th>Medio Pago</th>
                    <th style="text-align: center">Monto</th>
                </tr>
            </thead>
            <tbody>
                {% for mediopago in saldosXmedioDePago %}
                    <tr>
                        <td>{{ mediopago.nombre }}</td>
                        {% if mediopago.monto < 0 %}
                            <td style="color: red; font-weight: bold; text-align: right">
                        {% else %}
                            <td style="color: green; font-weight: bold; text-align: right">
                        {% endif %}
                        {{ mediopago.monto|number_format(2, ',', '.') }}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if is_granted('ROLE_ADMIN')  %}
        <div class="col-3 pull-right">
            <table class="table table-border table-hover table-sm " style="padding-left: 5px">
                <thead class="thead-dark">
                    <tr>
                        <th>CUENTA</th>
                        <th style="text-align: center">SALDO</th>
                    </tr>
                </thead>
                <tbody>
                    {% for cuenta in cuentas %}
                        <tr>
                            <td>{{ cuenta.banco }}</td>
                            {% if cuenta.saldo < 0 %}
                                <td style="color: red; font-weight: bold; text-align: right">
                            {% else %}
                                <td style="color: green; font-weight: bold; text-align: right">
                            {% endif %}
                            {{ cuenta.saldo|number_format(2, ',', '.') }}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {%  endif %}
    </div>

    <div class="row">
        <div class="col-6" >
        {% if caja.fechacierre is null  %}
            <div class="btn-group" role="group">
                <a class="btn btn-primary" role="button" href="{{ path('caja_movimiento_new', {'caja_id': caja.id}) }}"><span class="fas fa-plus-square"></span>&nbspmovimiento</a>
            </div>
            <div class="btn-group" >
            <a class="btn btn-success" role="button" href="{{ path('caja_cerrar', {'id': caja.id}) }}"><span class="fas fa-lock"></span>&nbspcerrar</a>
            </div>
        {% endif %}
            <div class="btn-group" role="group">
            <a class="btn btn-secondary" role="button" href="{{ path('caja_index') }}"><span class="fa fa-arrow-circle-left"></span>&nbspListado de Cajas</a>
            </div>
        </div>
        {{ include('filters.html.twig') }}
    </div>

    <h3>Movimientos de Caja</h3>
    <h3><span class="badge badge-info">Total Movimientos {{ cantMovimientos }}</span></h3>
    <table class="table table-border table-hover table-sm">
        <thead class="thead-dark">
            <tr>
                <th>Acciones</th>
                <th>Id</th>
                <th>Fecha</th>
                <th style="text-align: center">Monto</th>
                <th>Medio de Pago</th>
                <th>Tipo Movimiento</th>
                <th>Descripción</th>
                <th>Un. Negocio</th>
                <th>Usuario</th>
            </tr>
        </thead>
        <tbody>
            {% for movimiento in cajaMovimientos %}
                <tr class="movRow">

                    <td>
                        {# aca pregunto si el medio de pago es CHEQUE y no esta cargado el cheque
                        y el movimiento no es de corrección de caja, entonces muestro el boton para cargar los datos del cheque #}
                        {% if ((movimiento.cheque is null) and (movimiento.MedioPago == "CHEQUE"))  %}
                            {% if movimiento.tipoMovimiento.codigo != constant('App\\Entity\\TipoMovimiento::COBRO_CHEQUE')
                               and not (
                                        movimiento.tipoMovimiento.codigo == constant('App\\Entity\\TipoMovimiento::ASIENTO_AJUSTE_POSITIVO')
                                        or movimiento.tipoMovimiento.codigo == constant('App\\Entity\\TipoMovimiento::ASIENTO_AJUSTE_NEGATIVO')
                                       )
                            %}
                                {% if movimiento.tipoMovimiento.rubroMovimiento.tipoOperacion == 1 %}
                                    <a class="btn btn-sm btn-primary" href="{{ path('cheque_tercero_new', {'cajamovimiento': movimiento.id}) }}"><span class="fas fa-plus-square"></span>&nbspCheque</a>
                                {% else %}
                                    <a class="btn btn-sm btn-primary" href="{{ path('cheque_propio_new', {'cajamovimiento': movimiento.id}) }}"><span class="fas fa-plus-square"></span>&nbspCheque</a>
                                {% endif %}
                            {% endif %}
                        {% elseif  (movimiento.cheque is not null) and (movimiento.MedioPago == "CHEQUE")%}
                            <a class="btn btn-sm btn-info" href="{{ path('cheque_show', {'id': movimiento.cheque.id}) }}"><span class="fas fa-info-circle"></span>&nbspCheque</a>
                        {% endif %}
                        <button idMovimiento="{{ movimiento.id }}" class="btn btn-sm btn-danger anularBtn"><span class="fas fa-times-circle"></span>&nbspAnular </button>
                        {% if is_granted('ROLE_ADMIN')  %}
                            <a class="btn btn-sm btn-primary editarBtn"
                                 href="{{ path('caja_movimiento_edit', {'id': movimiento.id}) }}">
                                <span class="fas fa-edit"></span> Editar </a>
                        {% endif %}
                    </td>
                    <td>
                        {{ movimiento.id }} <br>
                        <span style="font-size: smaller"> Caja: {{ movimiento.caja.id }}</span>
                    </td>
                    <td>{{ movimiento.fecha | date('d/m/Y') }}</td>
                    {% if movimiento.tipoMovimiento.rubroMovimiento.tipoOperacion == -1 %}
                    <td style="color: red; font-weight: bold; text-align: right">
                    {% else %}
                    <td style="color: green; font-weight: bold; text-align: right">
                    {% endif %}
                       <span id="monto"> {{ movimiento.monto|number_format(2, ',', '.') }} </span>
                    </td>
                    <td>{{ movimiento.medioPago }} <br/>
                        {{ movimiento.tipoComprobante }} - {{ movimiento.nroComprobante }}
                    </td>
                    <td> {{ movimiento.tipoMovimiento }} </td>
                    <td>
                        {{ movimiento.descripcionLarga }}
                        {% if movimiento.caso is not null %}
                            {% if movimiento.caso.anuladoFecha is null %}
                                <a class="btn btn-sm btn-info" href="{{ path('caso_edit', {'id': movimiento.caso.id }) }}">
                                <span class="fas fa-edit"></span>&nbspCaso N° {{ movimiento.caso.numero }}</a>
                            {% else %}
                            <a class="btn btn-sm btn-secondary" href="{{ path('caso_show_anulado', {'id': movimiento.caso.id }) }}">
                                <span class="fas fa-info-circle"></span>&nbspCaso N° {{ movimiento.caso.numero }} (ANULADO)</a>
                            {% endif %}
                        {% endif %}
                    </td>
                    <td>{{ movimiento.unidadNegocio }}</td>
                    <td>
                        <span class="badge badge-info" style="background-color: #{{stringToHexa(movimiento.createdBy.__toString)}}">
                            {{ movimiento.createdBy | upper }}
                        </span>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <a class="btn btn-secondary "href="{{ path('caja_index') }}"><span class="fa fa-arrow-circle-left"></span>&nbspvolver</a>
    {% if caja.fechacierre is null  %}
        <a class="btn btn-success" href="{{ path('caja_cerrar', {'id': caja.id}) }}"><span class="fas fa-lock"></span>&nbspcerrar</a>
        <a class="btn btn-primary" href="{{ path('caja_movimiento_new', {'caja_id': caja.id}) }}"><span class="fas fa-plus-square"></span>&nbspmovimiento</a>
    {% endif %}

{% endblock %}
{% block javascripts %}

    {{ parent() }}
    <script type="text/javascript">
        $(".anularBtn").click(function(e) {
            var monto = $(this).parents('.movRow').find('#monto').text();
            var idMovimiento = $(this).attr('idMovimiento');
            console.log('idMovimiento Caja: '+idMovimiento);
            e.preventDefault();

                bootbox.confirm({
                    title: "CONFIRMA ANULACIÓN DEL MOVIMIENTO?",
                    message: '<h5>Se anulará el movimiento de $'+monto+ '</h5>',
                    buttons: {
                        confirm: {
                            label: 'Aceptar',
                            className: 'btn-success'
                        },
                        cancel: {
                            label: 'Cancelar',
                            className: 'btn-danger'
                        }
                    },
                    callback: function (result) {
                        if(result === true) {

                            if (idMovimiento) {
                                var url = '{{ path('caja_movimiento_anular', {'id': 'movIdReplace' }) }}';
                                var url = url.replace('movIdReplace', idMovimiento);
                                $.ajax({
                                    method: "POST",
                                    url: url,
                                    data: {'id': idMovimiento }
                                })
                                .done(function( data ) {
                                    showFlashNotification('Movimiento Anulado Correctamente.', 'success', 'Anulado Correctamente.');

                                    $('[name=CajaMovimientoFilterType]').submit();

                                })
                                .fail(function( data ) {

                                    showFlashNotification(data.responseJSON.msg, 'error');
                                });
                            }
                        };
                    }
                });
        });
    </script>
{% endblock %}