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

{% block title %}
Facturas Recuperdas
{% endblock %}

{% block stylesheets %}
    <style>
        @media print {
            body * {
                visibility: hidden;
            }
            
            .print-area, .print-area * {
                visibility: visible;
            }
            
            .print-area {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                font-family: Arial, sans-serif;
            }
            
            .no-print {
                display: none !important;
            }
            
            .print-header {
                text-align: center;
                margin-bottom: 20px;
                border-bottom: 2px solid #000;
                padding-bottom: 15px;
            }
            
            .logo-container img {
                margin-bottom: 10px;
            }
            
            .print-header h2 {
                margin: 10px 0;
                font-size: 20px;
                font-weight: bold;
            }
            
            .print-header p {
                margin: 5px 0;
                font-size: 14px;
            }
            
            .print-table {
                width: 100%;
                border-collapse: collapse;
                margin-top: 20px;
                font-size: 12px;
            }
            
            .print-table th, .print-table td {
                border: 1px solid #000;
                padding: 8px;
                text-align: left;
            }
            
            .print-table th {
                background-color: #f0f0f0;
                font-weight: bold;
                text-align: center;
            }
            
            .print-table tfoot th {
                background-color: #e0e0e0;
                font-weight: bold;
            }
            
            .text-right {
                text-align: right;
            }
            
            @page {
                margin: 1cm;
            }
        }
    </style>
{% 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 Recuperadas</h1>
                    </p>
                </div>

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

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

        <div class="row">

            <div class="col-12 m-b-30">
                <div class="card card-hover" style="cursor: pointer">
                    <div class="card-body">

                        <div class="row py-2 px-2">

                            <div class="col-6 p-t-15">
                                <h5 class="text-uppercase">Facturas Recuperadas: <span class="text-danger pl-3">{{ facturas | length }}</span> </h5>
                                <h5 class="text-uppercase">Facturas Por facturar: <span class="text-success pl-3">{{ porFacturar }}</span> </h5>
                            </div>

                            <div class="col-6 my-auto">

                                <p class="text-right m-0">
                                    <a href="{{ path('facturacion_index') }}" class="btn btn-outline-dark">
                                        <i class="mdi mdi-restore mdi-18px m-r-5"></i> Volver
                                    </a>
                                </p>

                            </div>

                        </div>

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

    </div>

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

        <div class="row">

            {# 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">

                            <table class="table nowrap table-striped table-sm table-hover" style="width:100%">
                                <thead>
                                <tr>
                                    <th class="text-center">FECHA / HORA</th>
                                    <th class="text-center">VENDEDOR</th>
                                    <th class="text-center">CLIENTE</th>
                                    <th class="text-center">Nº Comprobante Temporal</th>
                                    <th class="text-right">Cantidad de artículos</th>
                                    <th class="text-right">Monto</th>
                                    <th class="text-right">Opciones</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for factura in facturas %}
                                    <tr>
                                        <td class="text-center pt-3">{{ factura.fechaOperacion | date('d-m-Y') }} / {{ factura.horaOperacion | date('h:m:s') }} </td>
                                        <td>{{factura.vendedor.nombre}}</td>
                                        <td class="text-center pt-3">{% if factura.cliente %}{{ factura.cliente.apenom | upper }}{% endif %}</td>
                                        <td class="text-center pt-3">{{ factura.codfacturaTmp }}</td>
                                        <td class="text-right pt-3">
                                            {% set cantidad = 0 %}
                                            {% for linea in factura.factuLinea %}
                                                {% set cantidad = cantidad + linea.cantidad %}
                                            {% endfor %}
                                            {{ cantidad }}
                                        </td>
                                        <td class="text-right pt-3">
                                            <span class="float-right pr-3"> <span class="pl-2">$</span> {{ factura.subTotalCalculated | number_format(2,",",".")  }}</span>
                                        </td>
                                        <td class="text-right d-flex align-items-center" style="gap: 0.125rem">

                                            <a class="btn btn-sm btn-info" href="{{ path('facturacion_editar', { id: factura.id}) }}">
                                                <span class="mdi mdi-magnify"></span>
                                            </a>

                                            <button class="btn btn-sm btn-secondary imprimir-pedido"
                                                    data-factura-id="{{ factura.id }}"
                                                    data-pedido="{{ factura.codfacturaTmp }}"
                                                    data-cliente="{% if factura.cliente %}{{ factura.cliente.apenom | upper }}{% endif %}"
                                                    data-vendedor="{{ factura.vendedor.nombre }}"
                                                    data-fecha="{{ factura.fechaOperacion | date('d/m/Y H:i') }}"
                                                    data-subtotal="{{ factura.subTotalCalculated | number_format(2,",",".") }}"
                                                    title="Imprimir Pedido">
                                                <span class="mdi mdi-printer"></span>
                                            </button>

                                            <button class="btn btn-sm btn-danger eliminar-factura"
                                                    data-numero="{{ factura.codfacturaTmp }}"
                                                    data-cliente="{% if factura.cliente %}{{ factura.cliente.apenom | upper }}{% endif %}"
                                                    data-url="{{ path('facturacion_temporal_borrar', { id: factura.id}) }}">
                                                <span class="mdi mdi-trash-can"></span>
                                            </button>

                                            {% if factura.estado != 1 %}
                                            <a class="btn btn-sm btn-warning"
                                                    href="{{ path('facturacion_cambiar_estado', { id: factura.id, estado: 1}) }}">
                                                Marcar como lista
                                            </a>
                                            {%  endif %}

                                            {% if factura.estado == 1 %}
                                            <a class="btn btn-sm btn-info" href="{{ path('facturacion_editar', { id: factura.id}) }}">
                                                Lista para facturar
                                            </a>
                                            <a class="btn btn-sm btn-warning"
                                               href="{{ path('facturacion_cambiar_estado', { id: factura.id, estado: 0}) }}">
                                                <span class="mdi mdi-reload"></span>
                                            </a>
                                            {%  endif %}

                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>

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

            </div>

        </div>

    </div>

    {# ÁREA DE IMPRESIÓN OCULTA #}
    <div class="print-area" style="display: none;">
        <div class="print-header">
            <div class="logo-container" style="text-align: center; margin-bottom: 15px;">
                <img src="{{ asset('images/logo.png') }}" alt="Logo" style="max-height: 80px; max-width: 200px;">
            </div>
            <h2>LISTA DE PRODUCTOS - PEDIDO TEMPORAL</h2>
            <p><strong>Pedido Nº:</strong> <span id="print-pedido"></span></p>
            <p><strong>Cliente:</strong> <span id="print-cliente"></span></p>
            <p><strong>Vendedor:</strong> <span id="print-vendedor"></span></p>
            <p><strong>Fecha:</strong> <span id="print-fecha"></span></p>
        </div>
        
        <table class="print-table">
            <thead>
                <tr>
                    <th>ITEM</th>
                    <th>CÓDIGO</th>
                    <th>DESCRIPCIÓN</th>
                    <th>CANTIDAD</th>
                    <th>P.UNITARIO</th>
                    <th>DESC/AUM</th>
                    <th class="text-right">IMPORTE</th>
                </tr>
            </thead>
            <tbody id="print-table-body">
                {# Contenido se llenará dinámicamente con JavaScript #}
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="6" class="text-right">SUBTOTAL:</th>
                    <th class="text-right" id="print-subtotal">$ 0.00</th>
                </tr>
            </tfoot>
        </table>
    </div>

{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('facturacion_index_recuperar') }}
{% endblock %}