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

{% block title %}
Informes
{% endblock %}

{% block stylesheets %}
    {{ encore_entry_link_tags('informes_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-book-open-page-variant" style="font-size: 5rem"></i>
                        </div>
                    </div>
                    <h1 id="page-offset">Informes</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">
                <a class="btn-card-clickable" href="{{ path('informes_ventas_index', { tipo: 'contador' }) }}">
                    <div class="card" style="cursor: pointer">
                        <div class="card-body {{ tipo == 'contador' ? 'selected' : '' }}">
                            <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-finance h1 m-0"></i>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <p class="text-muted fw-600"><small>Ventas -</small> Contador</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-4  col-xl-2 m-b-30">
                <a class="btn-card-clickable" href="{{ path('informes_ventas_index', { tipo: 'logistica' }) }}">
                    <div class="card" style="cursor: pointer">
                        <div class="card-body  {{ tipo == 'logistica' ? 'selected' : '' }}">
                            <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-floor-plan h1 m-0"></i>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <p class="text-muted fw-600"><small>Ventas -</small> Logística</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-4  col-xl-2 m-b-30">
                <a class="btn-card-clickable" href="{{ path('informes_ventas_index', { tipo: 'varios' }) }}">
                    <div class="card" style="cursor: pointer">
                        <div class="card-body  {{ tipo == 'varios' ? 'selected' : '' }}">
                            <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-floor-plan h1 m-0"></i>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <p class="text-muted fw-600">Varios</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

        </div>

    </div>

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

        <div class="row">

            {# FILTRO DE FECHA #}
            {% if tipo != 'varios' %}
            <div class="col-12 col-xl-10 offset-xl-1 mb-3">

                <div class="card">
                    <div class="card-body">
                        <div class="row pb-2 pt-3">

                            <div class="{{ (tipo != 'contador') ? 'col-12  offset-xl-3' : 'col-9 offset-xl-2' }} col-xl-6">
                                <div class="form-group form-inline col-12">
                                    <label class="col-4" for="fecha" style="font-size: 1.4rem">Fecha:</label>
                                    <input type="text" name="fecha" id="fecha"  style="font-size: 1.2rem"
                                           value="{{ fecha | date('d-m-Y') }}"
                                           class="form-control col-8 daterange text-right">
                                </div>
                            </div>

                            {# if tipo == 'contador' %}
                            <label class="cstm-switch col-3 col-xl-2">
                                <input type="checkbox" id="id_excel" name="excel" value="1" disabled="disabled"
                                       class="cstm-switch-input">
                                <span class="cstm-switch-indicator"></span>
                                <label class="ml-2 text-secondary pt-2" for="id_excel">Excel</label>
                            </label>
                            {% endif #}

                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

            <div class="col-12">

                <div class="card">

                    <div class="card-body" style="min-height: 25vh">

                        {% if tipo == 'contador' %}
                        <div class="row">

                            <div class="col-6 col-xl-4 p-3">
                                <button class="btn-card-clickable" data-ui="informe" data-slug="iva_venta">
                                    <div class="card bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">LIBRO DE IVA</p>
                                                    <p class="text-dark fw-600">Ventas</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <button class="btn-card-clickable" data-ui="informe" data-slug="iva_venta_resumen">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">LIBRO DE IVA - RESUMEN</p>
                                                    <p class="text-dark fw-600">Ventas</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <button class="btn-card-clickable" data-ui="informe" data-slug="citi_venta">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">INFORME DE VENTAS</p>
                                                    <p class="text-dark fw-600">Citi Ventas</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <button class="btn-card-clickable" data-ui="informe" data-slug="citi_alicuotas">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">INFORME DE ALICUOTAS</p>
                                                    <p class="text-dark fw-600">Citi Ventas</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <button class="btn-card-clickable" data-ui="informe" data-slug="excel_contador_compras">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">EXCEL CONTADOR</p>
                                                    <p class="text-dark fw-600">Compras</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <button class="btn-card-clickable" data-ui="informe" data-slug="informe_compras_citi_compras">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">INFORME COMPRAS</p>
                                                    <p class="text-dark fw-600">Citi Compras</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <button class="btn-card-clickable" data-ui="informe" data-slug="informe_alicuotas_citi_compras">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">INFORME ALICUOTAS</p>
                                                    <p class="text-dark fw-600">Citi Compras</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <button class="btn-card-clickable" data-ui="informe" data-slug="informe_compras">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">INFORME COMPRAS</p>
                                                    <p class="text-dark fw-600">Compras</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <button class="btn-card-clickable" data-ui="informe" data-slug="informe_compras_resumen">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">INFORME COMPRAS RESUMEN</p>
                                                    <p class="text-dark fw-600">Compras</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <button class="btn-card-clickable" data-ui="informe" data-slug="informe_compras_ganancias">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">INFORME GANANCIAS RUBROS RESUMEN</p>
                                                    <p class="text-dark fw-600">Compras</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>
                            <div class="col-6 col-xl-4 p-3">
                                <button class="btn-card-clickable" data-ui="informe" data-slug="informe_detalles_ganancias_pdf">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">INFORME GANANCIAS RUBROS DETALLES PDF</p>
                                                    <p class="text-dark fw-600">Compras</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <button class="btn-card-clickable" data-ui="informe" data-slug="informe_detalles_ganancias">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">INFORME GANANCIAS RUBROS DETALLES EXCEL</p>
                                                    <p class="text-dark fw-600">Compras</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>

                        </div>
                        {% endif %}

                        {% if tipo == 'logistica' %}
                        <div class="row">

                            <div class="col-6 col-xl-4 p-3">
                                <a class="btn-card-clickable" data-toggle="modal" href="#modal_ventas_generales">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">VENTAS GENERALES</p>
                                                    <p class="text-dark fw-600"></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <a class="btn-card-clickable" data-toggle="modal" href="#modal_ventas_vendedores">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">VENTAS POR VENDEDORES</p>
                                                    <p class="text-dark fw-600"></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <a class="btn-card-clickable" data-ref="logistica_venta_producto"
                                   data-toggle="modal" href="#modal_productos_ventas_varios_todos">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">VENTAS POR PRODUCTOS</p>
                                                    <p class="text-dark fw-600"></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <button class="btn-card-clickable" data-ui="informe" data-slug="cobranza_cuenta_corriente">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">COBRANZAS POR CUENTA CORRIENTE</p>
                                                    <p class="text-dark fw-600"></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <a class="btn-card-clickable" data-toggle="modal" href="#modal_compras_generales">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">COMPRAS GENERALES</p>
                                                    <p class="text-dark fw-600"></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <button class="btn-card-clickable" data-ui="informe" data-slug="comisiones_vendedores">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">COMISIONES POR VENDEDORES</p>
                                                    <p class="text-dark fw-600"></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <button class="btn-card-clickable" data-ui="informe" data-slug="ranking_ventas_cliente">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">RANKING VENTAS POR CLIENTE</p>
                                                    <p class="text-dark fw-600"></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <a class="btn-card-clickable" href="#modal_factura_cc"data-toggle="modal" >
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">FACTURAS CUENTA CORRIENTE</p>
                                                    <p class="text-dark fw-600"></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <div class="col-6 col-xl-4 p-3">
                                <button class="btn-card-clickable" data-ui="informe" data-slug="facturas_al_contado">
                                    <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                        <div class="card-body border-success">
                                            <div class="text-center p-t-20">
                                                <div class="text-center">
                                                    <p class="text-dark fw-600">FACTURAS AL CONTADO</p>
                                                    <p class="text-dark fw-600"></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </button>
                            </div>

                        </div>
                        {% endif %}

                        {% if tipo == 'varios' %}
                            <div class="row">

                                <div class="col-6 col-xl-4 p-3">
                                    <a class="btn-card-clickable" data-toggle="modal" data-ref="varios_productos"
                                       href="#modal_productos_ventas_varios_todos">
                                        <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                            <div class="card-body border-success">
                                                <div class="text-center p-t-20">
                                                    <div class="text-center">
                                                        <p class="text-dark fw-600">PRODUCTOS</p>
                                                        <p class="text-dark fw-600">Inventario  Informacion Stock</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                <div class="col-6 col-xl-4 p-3">
                                    <a class="btn-card-clickable" data-toggle="modal" href="#modal_productos_solo_stock">
                                        <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                            <div class="card-body border-success">
                                                <div class="text-center p-t-20">
                                                    <div class="text-center">
                                                        <p class="text-dark fw-600">PRODUCTOS</p>
                                                        <p class="text-dark fw-600">Solo con stock</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                <div class="col-6 col-xl-4 p-3">
                                    <button class="btn-card-clickable" data-ui="informe" data-slug="informe_productos_stock_minimo">
                                        <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                            <div class="card-body border-success">
                                                <div class="text-center p-t-20">
                                                    <div class="text-center">
                                                        <p class="text-dark fw-600">PRODUCTOS</p>
                                                        <p class="text-dark fw-600">Stock Mínimo para alertar</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </button>
                                </div>

                                <div class="col-6 col-xl-4 p-3">
                                    <button class="btn-card-clickable" data-ui="modal" data-slug="informe_compras_proveedor">
                                        <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                            <div class="card-body border-success">
                                                <div class="text-center p-t-20">
                                                    <div class="text-center">
                                                        <p class="text-dark fw-600">TOTALES POR PROVEEDOR</p>
                                                        <p class="text-dark fw-600">Compras</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </button>
                                </div>

                                <div class="col-6 col-xl-4 p-3">
                                    <a class="btn-card-clickable" data-toggle="modal" href="#modal_informe_proveedor_saldos">
                                        <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                            <div class="card-body border-success">
                                                <div class="text-center p-t-20">
                                                    <div class="text-center">
                                                        <p class="text-dark fw-600">PROVEEDORES</p>
                                                        <p class="text-dark fw-600">Saldos</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                <div class="col-6 col-xl-4 p-3">
                                    <a class="btn-card-clickable" data-toggle="modal" href="#modal_informe_clientes">
                                        <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                            <div class="card-body border-success">
                                                <div class="text-center p-t-20">
                                                    <div class="text-center">
                                                        <p class="text-dark fw-600">CLIENTES</p>
                                                        <p class="text-dark fw-600">Todos</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                <div class="col-6 col-xl-4 p-3">
                                    <button class="btn-card-clickable" data-ui="informe" data-slug="informe_clientes_cumple">
                                        <div class="card  bg-soft-secondary border border-secondary" style="cursor: pointer">
                                            <div class="card-body border-success">
                                                <div class="text-center p-t-20">
                                                    <div class="text-center">
                                                        <p class="text-dark fw-600">CLIENTES</p>
                                                        <p class="text-dark fw-600">Cumpleaños</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </button>
                                </div>

                            </div>
                        {% endif %}

                    </div>

                </div>

            </div>

        </div>

    </div>

    {# MODALES #}

    {% if tipo == 'logistica' %}
    {# OPCIONES VENTAS GENERALES #}
    <div id="modal_ventas_generales" class="modal">

        <div class="modal-dialog modal-dialog-centered" role="document">

            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" >INFORME - VENTAS GENERALES</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="row  px-4">

                        <div class="col-6">
                            <div class="text-left">
                                <label class="cstm-switch" for="solo_factura">
                                    <input type="checkbox" id="solo_factura" name="factura" value="1"
                                           class="cstm-switch-input">
                                    <span class="cstm-switch-indicator bg-success"></span>
                                    <span class="cstm-switch-description">Factura</span>
                                </label>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="text-left">
                                <label class="cstm-switch" for="solo_presupuestos">
                                    <input type="checkbox" id="solo_presupuestos" name="presupuestos"
                                           class="cstm-switch-input">
                                    <span class="cstm-switch-indicator bg-success"></span>
                                    <span class="cstm-switch-description">Facturas N/F</span>
                                </label>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="text-left">
                                <label class="cstm-switch" for="solo_tarjetas">
                                    <input type="checkbox" id="solo_tarjetas" name="tarjetas" value="1"
                                           class="cstm-switch-input">
                                    <span class="cstm-switch-indicator bg-success"></span>
                                    <span class="cstm-switch-description">Tarjetas</span>
                                </label>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="text-left">
                                <label class="cstm-switch" for="solo_efectivo">
                                    <input type="checkbox" id="solo_efectivo" name="efectivo" value="1"
                                           class="cstm-switch-input">
                                    <span class="cstm-switch-indicator bg-success"></span>
                                    <span class="cstm-switch-description">Efectivo</span>
                                </label>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="text-left">
                                <label class="cstm-switch" for="solo_cc">
                                    <input type="checkbox" id="solo_cc" name="cc" value="1"
                                           class="cstm-switch-input">
                                    <span class="cstm-switch-indicator bg-success"></span>
                                    <span class="cstm-switch-description">Cuenta Corriente</span>
                                </label>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="text-left">
                                <label class="cstm-switch" for="solo_cheque">
                                    <input type="checkbox" id="solo_cheque" name="cheque" value="1"
                                           class="cstm-switch-input">
                                    <span class="cstm-switch-indicator bg-success"></span>
                                    <span class="cstm-switch-description">Cheque</span>
                                </label>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="text-left">
                                <label class="cstm-switch" for="solo_transferencia">
                                    <input type="checkbox" id="solo_transferencia" name="transferencia" value="1"
                                           class="cstm-switch-input">
                                    <span class="cstm-switch-indicator bg-success"></span>
                                    <span class="cstm-switch-description">Transferencia</span>
                                </label>
                            </div>
                        </div>

                        <div class="col-6"></div>

                        <div class="col-6 pt-2">
                            <label for="select-financiera">Financiera</label>
                        </div>

                        <div class="col-6 pt-2">
                            <select name="financiera" id="select-financiera" class="form-control js-select2-filter" multiple>
                                {% for financiera in financieras %}
                                    <option value="{{ financiera.id }}">
                                        {{ financiera.nombre }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-6 pt-2">
                            <label for="select-mutual">Mutuales</label>
                        </div>

                        <div class="col-6 pt-2">
                            <select name="mutual" id="select-mutual" class="form-control js-select2-filter" multiple>
                                {% for mutual in mutuales %}
                                    <option value="{{ mutual.id }}">
                                        {{ mutual.nombre }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-6 pt-2">
                            <label for="select-qr">QR</label>
                        </div>

                        <div class="col-6 pt-2">
                            <select name="qr" id="select-qr" class="form-control js-select2-filter" multiple>
                                {% for qr in qrs %}
                                    <option value="{{ qr.id }}">
                                        {{ qr.nombre }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>

                    </div>


                </div>

                <div class="modal-footer">
                    <button type="button" data-dismiss="modal"  class="btn btn-secondary mr-2">Cancelar</button>
                    <button type="button" data-ui="informe" data-slug="ventas_generales"
                            class="btn btn-primary">Aceptar</button>
                </div>

            </div>
        </div>

    </div>

    {# OPCIONES VENTAS POR VENDEDORES #}
    <div id="modal_ventas_vendedores" class="modal">

        <div class="modal-dialog modal-dialog-centered" role="document">

            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" >INFORME - VENTAS POR VENDEDORES</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="row px-4">

                        <div class="col-6 pt-2">
                            <label for="select-financiera">Vendedores</label>
                        </div>

                        <div class="col-12 pt-2">
                            <select name="vendedores" id="select-vendedores"
                                    class="form-control js-select2-vendedores" multiple>
                                {% for vendedor in vendedores %}
                                    <option value="{{ vendedor.id }}"
                                            data-role="{{ vendedor.role }}">{{ vendedor.nombre }}</option>
                                {% endfor %}
                            </select>
                        </div>

                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" data-dismiss="modal"  class="btn btn-secondary mr-2">Cancelar</button>
                    <button type="button" data-ui="informe" data-slug="ventas_por_vendedores"
                            class="btn btn-primary">Aceptar</button>
                </div>

            </div>
        </div>

    </div>

    {# OPCIONES COMPRA GENERAL #}
    <div id="modal_compras_generales" class="modal">

            <div class="modal-dialog modal-dialog-centered" role="document">

                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title" >INFORME - COMPRAS GENERALES</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">

                        <div class="row  px-4">

                            <div class="col-6">
                                <div class="text-left">
                                    <label class="cstm-switch" for="solo_factura_2">
                                        <input type="checkbox" id="solo_factura_2" name="solo_factura" value="1"
                                               class="cstm-switch-input">
                                        <span class="cstm-switch-indicator bg-success"></span>
                                        <span class="cstm-switch-description">Solo Factura</span>
                                    </label>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="text-left">
                                    <label class="cstm-switch" for="solo_presupuestos_2">
                                        <input type="checkbox" id="solo_presupuestos_2" name="solo_presupuestos" value="1"
                                               class="cstm-switch-input">
                                        <span class="cstm-switch-indicator bg-success"></span>
                                        <span class="cstm-switch-description">Facturas N/F</span>
                                    </label>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="text-left">
                                    <label class="cstm-switch" for="solo_tarjetas_2">
                                        <input type="checkbox" id="solo_tarjetas_2" name="solo_tarjetas" value="1"
                                               class="cstm-switch-input">
                                        <span class="cstm-switch-indicator bg-success"></span>
                                        <span class="cstm-switch-description">Solo Tarjetas</span>
                                    </label>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="text-left">
                                    <label class="cstm-switch" for="solo_efectivo_2">
                                        <input type="checkbox" id="solo_efectivo_2" name="solo_efectivo" value="1"
                                               class="cstm-switch-input">
                                        <span class="cstm-switch-indicator bg-success"></span>
                                        <span class="cstm-switch-description">Solo Efectivo</span>
                                    </label>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="text-left">
                                    <label class="cstm-switch" for="solo_cc_2">
                                        <input type="checkbox" id="solo_cc_2" name="solo_cc" value="1"
                                               class="cstm-switch-input">
                                        <span class="cstm-switch-indicator bg-success"></span>
                                        <span class="cstm-switch-description">Solo Cuenta Corriente</span>
                                    </label>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="text-left">
                                    <label class="cstm-switch" for="solo_cheque_2">
                                        <input type="checkbox" id="solo_cheque_2" name="solo_cheque" value="1"
                                               class="cstm-switch-input">
                                        <span class="cstm-switch-indicator bg-success"></span>
                                        <span class="cstm-switch-description">Solo Cheque</span>
                                    </label>
                                </div>
                            </div>

                            <div class="col-6 pt-2">
                                <label for="select-financiera_2">Financiera</label>
                            </div>

                            <div class="col-6 pt-2">
                                <select name="financiera" id="select-financiera_2" class="form-control js-select2">
                                    <option value="">Todas</option>
                                    {% for financiera in financieras %}
                                        <option value="{{ financiera.id }}">
                                            {{ financiera.nombre }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-6 pt-2">
                                <label for="select-mutual_2">Mutuales</label>
                            </div>

                            <div class="col-6 pt-2">
                                <select name="mutual" id="select-mutual_2" class="form-control js-select2">
                                    <option value="">Todos</option>
                                    {% for mutual in mutuales %}
                                        <option value="{{ mutual.id }}">
                                            {{ mutual.nombre }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                        </div>


                    </div>

                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal"  class="btn btn-secondary mr-2">Cancelar</button>
                        <button type="button" data-ui="informe" data-slug="ventas_generales"
                                class="btn btn-primary">Aceptar</button>
                    </div>

                </div>
            </div>

        </div>

    {# OPCIONES FACTURA CUENTA CORRIENTE #}
    <div id="modal_factura_cc" class="modal">

        <div class="modal-dialog modal-dialog-centered" role="document">

            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" >INFORME - FACTURA EN CTA CTE </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="row  px-4">

                        <div class="col-6">
                            <label for="select-vendedor">Vendedor</label>
                        </div>

                        <div class="col-6">

                            <select name="vendedor" id="select-vendedor" class="form-control js-select2">
                                {% for vendedor in vendedores %}
                                    <option value="{{ vendedor.id }}">
                                        {{ vendedor.nombre }}
                                        {% if vendedor.role == 'ROLE_ADMIN' %}
                                            (admin)
                                        {% elseif vendedor.role == 'ROLE_CAJERO' %}
                                            (cajero)
                                        {% elseif vendedor.role == 'ROLE_VENDEDOR' %}
                                            (vendedor)
                                        {% endif %}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>

                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" data-dismiss="modal"  class="btn btn-secondary mr-2">Cancelar</button>
                    <button type="button" data-ui="informe" data-slug="facturas_cuenta_corriente"
                            class="btn btn-primary">Aceptar</button>
                </div>

            </div>
        </div>

    </div>

    {% elseif tipo == 'varios' %}

        <div id="modal_productos_solo_stock" class="modal">

            <div class="modal-dialog modal-dialog-centered" role="document">

                <div class="modal-content">

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

                    <div class="modal-body">


                        <div class="row  px-4">

                            <div class="col-6 pt-2">
                                <label for="select-proveedor-2">Proveedor</label>
                            </div>

                            <div class="col-6 pt-2">
                                <select name="proveedor" id="select-proveedor-2" class="form-control js-select2">
                                    <option value="">Todos</option>
                                    {% for proveedor in proveedores %}
                                        <option value="{{ proveedor.id }}">
                                            {{ proveedor.nombre }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-6 pt-2">
                                <label for="select-grupo-2">Grupo</label>
                            </div>

                            <div class="col-6 pt-2">
                                <select name="grupo" id="select-grupo-2" class="form-control js-select2">
                                    <option value="">Todos</option>
                                    {% for grupo in grupos %}
                                        <option value="{{ grupo.id }}">
                                            {{ grupo.descripcion }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>


                            <div class="col-6 pt-2">
                                <label for="select-categoria-2">Categoría</label>
                            </div>

                            <div class="col-6 pt-2">
                                <select name="categoria" id="select-categoria-2" class="form-control js-select2">
                                    <option value="">Todos</option>
                                    {% for categoria in categorias %}
                                        <option value="{{ categoria.id }}" data-grupo="{{ categoria.grupo ? categoria.grupo.id : '0' }}" disabled>
                                            {{ categoria.nombre }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-6 pt-2">
                                <label for="select-tag-2">Tag</label>
                            </div>

                            <div class="col-6 pt-2">
                                <select name="tag" id="select-tag-2" class="form-control js-select2">
                                    <option value="">Todos</option>
                                    {% for tag in tags %}
                                        <option value="{{ tag.id }}">
                                            {{ tag.descripcion }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-6 pt-2">
                                <label for="fecha_ingreso_2">Fecha Ingreso</label>
                            </div>

                            <div class="col-6 pt-2">
                                <input type="text" name="fecha_ingreso" id="fecha_ingreso_2" value=""
                                       class="form-control daterange">
                            </div>

                            <div class="col-6 pt-2">
                                <label for="fecha_ingreso_remito_2">Fecha Ingreso Remito</label>
                            </div>

                            <div class="col-6 pt-2">
                                <input type="text" name="fecha_ingreso_remito"
                                       id="fecha_ingreso_remito_2" value="{{ fecha | date('d-m-Y') }}"
                                       class="form-control daterange">
                            </div>

                        </div>


                    </div>

                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal"  class="btn btn-secondary mr-2">Cancelar</button>
                        <button type="button" data-ui="informe" data-slug="informe_productos_solo_stock"
                                class="btn btn-primary">Aceptar</button>
                    </div>

                </div>
            </div>

        </div>

        <div id="modal_informe_proveedor_saldos" class="modal">

            <div class="modal-dialog modal-dialog-centered" role="document">

                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title" >INFORME - SALDO PROVEEDORES</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">

                        <div class="row  px-4">

                            <div class="col-12">
                                <div class="text-left">
                                    <label class="cstm-switch" for="saldo_no_nulo">
                                        <input type="checkbox" id="saldo_no_nulo" name="solo_no_nulo" value="1"
                                               class="cstm-switch-input">
                                        <span class="cstm-switch-indicator bg-success"></span>
                                        <span class="cstm-switch-description">Solo saldo distinto a 0 (cero)</span>
                                    </label>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal"  class="btn btn-secondary mr-2">Cancelar</button>
                        <button type="button" data-ui="informe" data-slug="informe_proveedor_saldos"
                                class="btn btn-primary">Aceptar</button>
                    </div>

                </div>
            </div>

        </div>

        <div id="modal_informe_clientes" class="modal">

            <div class="modal-dialog modal-dialog-centered" role="document">

                <div class="modal-content">

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

                    <div class="modal-body">
                        <div class="row  px-4">

                            <div class="col-6 pt-2">
                                <label for="select-provincia">Provincia</label>
                            </div>

                            <div class="col-6 pt-2">
                                <select name="provincia" id="select-provincia" class="form-control js-select2">
                                    <option value="">Todos</option>
                                    {% for provincia in provincias %}
                                        <option value="{{ provincia.id }}">
                                            {{ provincia.descripcionPro }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-6 pt-2">
                                <label for="select-localidad">Localidad</label>
                            </div>

                            <div class="col-6 pt-2">
                                <select name="localidad" id="select-localidad" class="form-control js-select2">
                                    <option value="">Todos</option>
                                    {% for localidad in localidades %}
                                        <option value="{{ localidad.id }}" disabled
                                                data-provincia="{{ localidad.provincia.id }}">
                                            {{ localidad.descripcionLoc }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-6 pt-2">
                                <label for="select-vendedor-3">Vendedor</label>
                            </div>

                            <div class="col-6 pt-2">
                                <select name="vendedor" id="select-vendedor-3" class="form-control js-select2">
                                    <option value="">Todos</option>
                                    {% for vendedor in vendedores %}
                                        <option value="{{ vendedor.id }}">
                                            {{ vendedor.nombre }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>


                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal"  class="btn btn-secondary mr-2">Cancelar</button>
                        <button type="button" data-ui="informe" data-slug="informe_clientes"
                                class="btn btn-primary">Aceptar</button>
                    </div>

                </div>
            </div>

        </div>

    {% endif %}

    {% if tipo == 'logistica' or tipo == 'varios' %}
        <div id="modal_productos_ventas_varios_todos" class="modal">

            <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 75vw">

                <div class="modal-content">

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

                    <div class="modal-body">

                        <div class="row  px-4">

                            <!-- RUBROS -->
                            <div class="col-4 pt-2">
                                <label for="select-rubros">Rubros</label>
                            </div>

                            <div class="col-8 pt-2">
                                <select name="filtro[rubros]" id="select-rubros" class="form-control js-select2-filter" multiple>
                                    {% for r in rubros %}
                                        <option value="{{ r.id }}">
                                            {{ r.descripcion }} [{{ r.id }}]
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <!-- GRUPOS -->
                            <div class="col-4 pt-2">
                                <label for="select-grupos">Grupos</label>
                            </div>

                            <div class="col-8 pt-2">
                                <select name="filtro[grupos]" id="select-grupos" class="form-control js-select2-filter" multiple>
                                    {% for grupo in grupos %}
                                        <option value="{{ grupo.id }}" data-parent="{% if grupo.rubro %}{{ grupo.rubro.id }}{% endif %}">
                                            {{ grupo.descripcion }} [{{ grupo.id }}][{% if grupo.rubro %}{{ grupo.rubro.id }}{% endif %}]
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <!-- CATEGORIAS -->
                            <div class="col-4 pt-2">
                                <label for="select-categorias">Categorías</label>
                            </div>

                            <div class="col-8 pt-2">
                                <select name="filtro[categorias]" id="select-categorias" class="form-control js-select2-filter" multiple>
                                    {% for categoria in categorias %}
                                        <option value="{{ categoria.id }}" data-parent="{% if categoria.grupo %}{{ categoria.grupo.id }}{% endif %}">
                                            {{ categoria.nombre }} [{{ categoria.id }}][{% if categoria.grupo %}{{ categoria.grupo.id }}{% endif %}]
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <!-- MARCAS -->
                            <div class="col-4 pt-2">
                                <label for="select-marcas">Marcas</label>
                            </div>

                            <div class="col-8 pt-2">
                                <select name="filtro[marcas]" id="select-marcas" class="form-control js-select2-filter" multiple>
                                    {% for item in marcas %}
                                        <option value="{{ item.id }}">
                                            {{ item.nombre }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <!-- DISCIPLINAS -->
                            <div class="col-4 pt-2">
                                <label for="select-disciplinas">Disciplinas</label>
                            </div>

                            <div class="col-8 pt-2">
                                <select name="filtro[disciplinas]" id="select-disciplinas" class="form-control js-select2-filter" multiple>
                                    {% for item in disciplinas %}
                                        <option value="{{ item.id }}">
                                            {{ item.nombre }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <!-- GENEROS -->
                            <div class="col-4 pt-2">
                                <label for="select-generos">Generos</label>
                            </div>

                            <div class="col-8 pt-2">
                                <select name="filtro[generos]" id="select-generos" class="form-control js-select2-filter" multiple>
                                    {% for key, genero in generos %}
                                        <option value="{{ key }}">
                                            {{ genero }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <!-- PROVEEDORES -->
                            <div class="col-4 pt-2">
                                <label for="select-proveedor-2">Proveedor</label>
                            </div>

                            <div class="col-8 pt-2">
                                <select name="filtro[proveedor]" id="select-proveedor-2" class="form-control js-select2-filter" multiple>
                                    {% for proveedor in proveedores %}
                                        <option value="{{ proveedor.id }}">
                                            {{ proveedor.razonSocial }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal"  class="btn btn-secondary mr-2">Cancelar</button>
                        <button type="button" data-ui="informe" data-slug="productos_ventas" style="display: none"
                                class="btn btn-primary">Aceptar</button>
                        <button type="button" data-ui="informe" data-slug="producto_todos" style="display: none"
                                class="btn btn-primary">Aceptar</button>
                    </div>

                </div>

            </div>

        </div>
    {% endif %}


{% endblock %}

{% block javascripts %}
    <script>
      // CONTAINER DE URLS A USAR EN JAVASCRIPT
      const urlContainer = {
        generar: "{{ path('generar_informe_venta', {tipo: tipo}) }}" // PARA OBTENER EL RESUMEN PARA LA FECHA DEL FILTRO
      };
    </script>
    {{ encore_entry_script_tags('informes_index') }}
{% endblock %}