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

{% block title %}
    Movimientos Extra
{% endblock %}

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

{% block content %}

    {# TITULO #}
    <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-bank-transfer" style="font-size: 5rem"></i>
                        </div>
                    </div>
                    <h1 id="page-offset">Movmientos diarios: {{ app.user.nombre }}</h1>
                </div>

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

    {# BOTONERA PRINCIPAL #}
    <div class="container pull-up pb-5 mb-5">

        <div class="row">

            <div class="col-3 col-xl-2 m-b-30 offset-xl-2">
                <button class="btn-card-clickable" data-ui="btn-ingreso-egreso">
                    <div class="card" style="cursor: pointer">
                        <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-plus-minus-box h1 m-0"></i>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <p class="text-muted fw-600">Ingreso/Egreso</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </button>
            </div>

            <div class="col-3  col-xl-2 m-b-30">
                <button class="btn-card-clickable" data-ui="btn-pase">
                    <div class="card" style="cursor: pointer">
                        <div class="card-body">
                            <div class="text-center p-t-20">
                                <div class="avatar-lg avatar">
                                    <div class="avatar-title rounded-circle badge-soft-warning">
                                        <i class="mdi mdi-card h1 m-0"></i>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <p class="text-muted fw-600">Extración de Caja</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </button>
            </div>

{#            <div class="col-3  col-xl-2 m-b-30" data-ui="btn-vale" id="vale_de_caja">#}
{#                <button class="btn-card-clickable">#}
{#                    <div class="card" style="cursor: pointer">#}
{#                        <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-account h1 m-0"></i>#}
{#                                    </div>#}
{#                                </div>#}
{#                                <div class="text-center">#}
{#                                    <p class="text-muted fw-600">Vale</p>#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                </button>#}
{#            </div>#}

{#            <div class="col-3  col-xl-2 m-b-30" data-ui="btn-recibopago" id="recibo_de_pago">#}
{#                <button class="btn-card-clickable">#}
{#                    <div class="card" style="cursor: pointer">#}
{#                        <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-ticket-percent"></i>#}
{#                                    </div>#}
{#                                </div>#}
{#                                <div class="text-center">#}
{#                                    <p class="text-muted fw-600">Recibos de Pago</p>#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                </button>#}
{#            </div>#}

            <div class="col-3  col-xl-2 m-b-30" data-ui="btn-cierre" id="cierre_de_caja">
                <button class="btn-card-clickable">
                    <div class="card" style="cursor: pointer">
                        <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-close-box-outline h1 m-0"></i>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <p class="text-muted fw-600">Cierre de Caja</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </button>
            </div>

        </div>

    </div>

    {# CONTENIDO PRINCIPAL #}
    <div class="container-fluid pull-up pb-5 mb-5">

        <div class="row">

            {# FORMULARIO #}
            <div class="col-xl-6">
                <div class="card">

                    <div class="card-body">
                        <form name="movimiento" method="post" action="{{ path('caja_movimiento_extra_index') }}" autocomplete="off">
                            <div class="row">

                                <input type="hidden" name="tipoMovimiento">

                                {% if error is defined and error %}
                                    <div class="col-12">
                                        <div class="alert alert-danger text-center" style="margin-left: auto; margin-right: auto">
                                            <b>No se pudo guardar el movimiento</b>: {{ error }}
                                        </div>
                                    </div>
                                {% endif %}

                                {% if mensaje is defined and mensaje %}
                                    <div class="col-12">
                                        <div class="alert alert-success text-center" style="margin-left: auto; margin-right: auto">
                                            <b>{{ mensaje }}</b>
                                        </div>
                                    </div>
                                {% endif %}

                                <div class="form-row px-3 w-100">

                                    <div class="col-8 px-5 py-2 offset-4">

                                        <label class="cstm-switch px-3" data-ui="radio-entrada">
                                            <input type="radio" name="tipo" value="E" {{ tipo == "E" ? 'checked' : '' }}
                                                   class="cstm-switch-input">
                                            <span class="cstm-switch-indicator bg-success"></span>
                                            <span class="cstm-switch-description text-uppercase">Entrada</span>
                                        </label>

                                        <label class="cstm-switch px-3" data-ui="radio-salida">
                                            <input type="radio" name="tipo" value="S" {{ tipo == "S" ? 'checked' : '' }}
                                                   class="cstm-switch-input">
                                            <span class="cstm-switch-indicator bg-danger"></span>
                                            <span class="cstm-switch-description text-uppercase">Salida</span>
                                        </label>

                                    </div>

                                    <div class="form-group form-inline col-12" style="display: none">
                                        <label class="col-4" for="empleado">
                                            Empleado <span class="text-danger m-l-3">*</span></label>
                                        <div class="col-8 px-0">
                                            <select class="form-control js-select2" name="empleado" id="empleado">
                                                <option value="">Seleccione una empleado</option>
                                                {% for empleado in empleados %}
                                                    <option value="{{ empleado.id }}">{{ empleado.nombre }}</option>
                                                {% endfor %}
                                            </select>
                                            <p class="invalid-feedback m-0">Campo requerido</p>
                                        </div>
                                    </div>

                                    <div class="form-group form-inline col-12 ">
                                        <label class="col-4" for="detalle">Detalle</label>
                                        <textarea type="text" id="detalle" name="detalle" rows="6" required="required"
                                                 class="form-control col-8">{{ detalle }}</textarea>
                                    </div>

                                    <div class="form-group form-inline col-12 pt-3">
                                        <label class="col-4 text-secondary p-0" for="monto">
                                            <span class="w-100 text-right">Monto</span>
                                        </label>
                                        <div class="input-group col-8">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="prepend-2">$</span>
                                            </div>
                                            <input type="text" class="form-control" id="monto"  name="monto" required="required"
                                                   aria-describedby="prepend-2" value="{{ monto }}">
                                        </div>
                                    </div>

                                    <div class="col-12 pt-4 text-right">
                                        <button type="button" class="btn btn-info" id="aceptar">ACEPTAR</button>
                                    </div>

                                </div>

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

            {# RESUMEN DE FACTURACION DEL DIA #}
            <div class="col-6 d-none d-xl-block">
                <div class="card">
                    <div class="card-body">
                        {% include 'facturacion/templates/resumen.html.twig'
                            with { facturas: facturas, movimientos: movimientos, rango: fecha } %}
                    </div>
                </div>
            </div>

            {# RESULTADO DE FILTRO (DEFAULT FACTURAS DEL DIA) #}
            <div class="col-12 mt-4">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive p-t-10" data-ui="table_result">
                            <!-- Content obtained by ajax -->
                            {% include 'caja/templates/table_movimiento.html.twig' with { movimientos: movimientos,
                                soloLectura: 0 } %}
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

{% endblock %}

{% block javascripts %}
    <script>

      // CONTAINER DE URLS A USAR EN JAVASCRIPT
      const urlContainer = {
        autorizar: '{{ path("usuario_autorizacion" ) }}'
      };

      const paramContainer = {
        user: '{{ app.user.nombre }}'
      };

    </script>
    {{ encore_entry_script_tags('caja_movimiento') }}
{% endblock %}