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

{% block title %}
Facturación
{% endblock %}

{% block stylesheets %}
    {{ encore_entry_link_tags('facturacion_index') }}
{% 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-ticket-account" style="font-size: 5rem"></i>
                        </div>
                    </div>
                    <h1 id="page-offset">Facturas
                        <a href="javascript:void(0);"
                           data-toggle="modal" data-target="#mdlNuevaFactura"
                           class="btn btn-rounded-circle py-1 btn-outline-primary ml-2">
                            <i class="mdi mdi-plus mdi-18px"></i>
                        </a>
                    </h1>
                </div>

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

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

        <div class="row">

            <div class="col-4 col-xl-2 m-b-30 offset-xl-3">
                <button class="btn-card-clickable initial-tab"
                        data-focus-click-target="#_factura_nuevo_cliente_nombre"
                        data-toggle="modal" data-target="#mdlNuevaFactura">
                    <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 h1 m-0"></i>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <p class="text-muted fw-600">Nueva Factura</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </button>
            </div>

            <div class="col-4  col-xl-2 m-b-30">
                <a class="btn-card-clickable" data-ui="btn-recuperar" href="{{ path('facturacion_recuperadas_index') }}">
                    <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-backup-restore h1 m-0"></i>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <p class="text-muted fw-600">Facturas Pendientes</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-4  col-xl-2 m-b-30">
                <button class="btn-card-clickable" onclick="alert('Nothing to do!')">
                    <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-primary">
                                        <i class="mdi mdi-soccer h1 m-0"></i>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <p class="text-muted fw-600">Productos</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </button>
            </div>

        </div>

    </div>

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

        <div class="row">

            {# FILTRO DE FACTURA #}
            <div class="col-xl-6">
                <div class="card">

                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 pt-4"> 

                            {{ form_start(filtro, { attr: { action: path('facturacion_table_filter'), autocomplete: "off" } }) }}
                                <div class="form-row">
                                    {{ form_row(filtro.filtroCliente) }}
                                    {% if is_granted("ROLE_ADMIN") or  is_granted("CAJERO")  %}
                                        {{ form_row(filtro.filtroVendedor) }}
                                    {% else %}
                                        <div class="d-none">{{ form_row(filtro.filtroVendedor) }}</div>
                                    {% endif %}
{#                                    {{ form_row(filtro.filtroDniCliente) }}#}
                                    {{ form_row(filtro.codfactura) }}
                                    {{ form_row(filtro.filtroFecha) }}

                                    {# RESUMEN FACTURACION FECHA DEL FILTRO #}
                                    <div class="col-12 text-right pb-4">
                                        {% if is_granted("ROLE_ADMIN") %}

                                        <div class="dropdown">

                                            <a href="javascript:void(0);" id="dropdownMenuButton"
                                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <span>Resumen Totales</span>
                                                <span class="mdi mdi-subdirectory-arrow-left" style="font-size: 1.5rem"></span>
                                            </a>

                                            <div class="dropdown-menu px-3" aria-labelledby="dropdownMenuButton"  data-ui="resumen_result">
                                                {% include 'facturacion/templates/resumen.html.twig'
                                                    with { facturas: resumen['facturas'], movimientos: resumen["movimientos"], rango: 'now' | date('d-m-Y') } %}
                                            </div>
                                        </div>
                                        {% endif %}

                                    </div>

                                    {# TOTAL FACTUACION DEL FILTRO #}
                                    <div class="col-6 text-left" data-ui="total-filtro"></div>

                                    <div class="col-6 text-right">
                                        <button type="button" class="btn btn-info" data-ui="submit-filter">BUSCAR</button>
                                    </div>
                                </div>
                            {{ form_end(filtro) }}
                            </div>
                        </div>
                    </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: resumen['facturas'], movimientos: resumen["movimientos"], rango: 'now' | date('d-m-Y') } %}
                    </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 'facturacion/templates/table_result.html.twig' with { facturas: facturas } %}
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    {# MODAL PARA SELECCIONAR CLIENTE DE NUEVA FACTURA #}

    <form name="factura_nuevo" method="post" action="{{ path('facturacion_nueva') }}" autocomplete="off">
        <div class="modal fade" id="mdlNuevaFactura" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalCenterTitle">Nueva Factura</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">

                        <h5><small class="text-muted">Asignacion:</small> {{ app.user.nombre }}</h5>

                        <h5 class="pt-5 text-muted">Cliente</h5>


                        <div class="form-row">

                                <div class="form-group form-inline col-12">
                                    <label class="col-4" for="factura_nuevo_cliente_cuenta">DNI</label>
                                    <input type="text" id="factura_nuevo_cliente_cuenta" name="cliente[cuenta]"
                                           class="form-control col-8 input-autocompletable"
                                           data-entity="Cliente" data-search-field="dni" data-min-text="2" autocomplete="off">
                                </div>

                                <div class="form-group form-inline col-12">
                                    <label class="col-4" for="factura_nuevo_cliente_nombre">Nombre</label>
                                    <input type="text" id="factura_nuevo_cliente_nombre" name="cliente[nombre]"
                                           class="form-control col-8 input-autocompletable"
                                           data-entity="Cliente" data-search-field="apenom" data-min-text="2" autocomplete="off">
                                </div>

                            </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="submit_nuevo">Aceptar</button>
                    </div>

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

{% endblock %}

{% block javascripts %}
    <script>

        // CONTAINER DE URLS A USAR EN JAVASCRIPT
        const urlContainer = {
          resumen: "{{ path('facturacion_resumen') }}", // PARA OBTENER EL RESUMEN PARA LA FECHA DEL FILTRO
          buscarCliente: "{{ path('buscar_cliente_json') }}",
          edicionCliente: "{{ path('cliente_edit', { cuenta: '_cuenta_' }) }}",
          actualizarVendedor: "{{ path('facturacion_vendedor_actualizar', { id: '_codigo_', vendedorId: '_vendedor_' }) }}",
            {#buscarDeposito: "{{ path('buscar_deposito_json') }}",#}
        };

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