@extends('../padre.padre')

@section('contenido') 
<div class="d-flex justify-content-center">
  <h1>Detalle de Facturas</h1>
</div>

<form action="facturasDetallle" method="GET" id="formFacturas">
    <div class="col-md-12">
      <label for="">Fecha Inical<input required type="date" name="fi" id="fechai" value="{{$fi}}" class="form-control"></label>
      <label for="">Fecha Final<input required type="date" name="ff" id="fechaf" value="{{$ff}}" class="form-control"></label>
      @include('../menu.bodegas')
      <label class="col-md-2" for=""> Cliente                            
        <input type="text" list="clientes" id="lclientes" name="clientes" @isset($cliente) value="{{$cliente}} "@endisset class="form-control ">
        <datalist id="clientes">
            <option value=""></option> 
        </datalist>
      </label> 

      <label class="col-md-1" for=""> Tipo_Pago                            
        <select id="tipoPago" name="tipoPago" class="form-control">
            <option @if($tipoPago=="Todos") selected @endif value="Todos">Todos</option> 
            <option @if($tipoPago=="Contado") selected @endif value="Contado">Contado</option> 
            <option @if($tipoPago=="Credito") selected @endif value="Credito">Credito</option> 
            <option @if($tipoPago=="Tarjetas") selected @endif value="Tarjetas">Tarjetas</option> 
            <option @if($tipoPago=="trasferencias") selected @endif value="trasferencias">trasferencias</option>                                                    
        </select>
      </label>

      <label class="col-md-1" for=""> Tipo_Atencion                           
        <select id="tipoAtencion" name="tipoAtencion" class="form-control">
            <option @if($tipoAtencion=="Todos") selected @endif value="Todos">Todos</option> 
            <option @if($tipoAtencion=="Mostrador") selected @endif value="Mostrador">Mostrador</option> 
            <option @if($tipoAtencion=="Domicilio") selected @endif value="Domicilio">Domicilio</option> 
            <option @if($tipoAtencion=="Convenios") selected @endif value="Convenios">Convenios</option>                                           
        </select>
      </label> 

      <button type="submit" id="" class="btn btn-warning">Consultar</button>
      <button type="submit" name="exportar" class="btn btn-success" value="1">Exportar</button>
      @include('menu.botonRegresar')
      
      <div class="mt-3">
            <div class="btn-group mb-2">
                <button type="submit" name="resumido" class="btn btn-info" value="1">Resumido X Tipo</button>
                <button type="submit" name="resumidoEX" class="btn btn-info" value="1">Exportar X Tipo</button>
            </div>
            <div class="btn-group mb-2 ml-2">
                <button type="submit" name="resumidoFac" class="btn btn-primary" value="1">Resumido X Factura</button>
                <button type="submit" name="resumidoEXFac" class="btn btn-primary" value="1">Exportar X Factura</button>
            </div>
            <div class="btn-group mb-2 ml-2">
                <button type="button" id="btnVentasHora" class="btn btn-dark">📊 Ventas por Hora</button>
            </div>
            <h4 class="mt-2">🎢 Registros: @isset($registros) {{$registros}} @endisset </h4>
      </div>
    </div>
</form>

@isset($resumido)
  @include('../menu/exportar.exportarFacturas_REsumidas')
@else
  @isset($resumidoFac)
    @include('../menu/exportar.exportarFacturas_REsumidas_Factur')
  @else
     @include('../menu/exportar.exportarFacturas')
  @endisset   
@endisset

<!-- Modal para Gráfica de Ventas por Hora -->
<div class="modal fade" id="modalVentasHora" tabindex="-1" role="dialog" aria-labelledby="modalVentasHoraLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content shadow-lg border-0">
      <div class="modal-header bg-dark text-white p-3">
        <h5 class="modal-title font-weight-bold" id="modalVentasHoraLabel">📈 Análisis de Ventas por Hora</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: white; opacity: 1;">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body p-4 bg-light">
        <div class="row mb-3">
            <div class="col-md-12 text-center">
                <h6 id="chartPeriodo" class="text-secondary font-italic"></h6>
            </div>
        </div>
        
        <!-- Tarjetas de Resumen -->
        <div class="row mb-4" id="rowTotalesHora" style="display:none;">
            <div class="col-md-3">
                <div class="card border-0 shadow-sm bg-success text-white">
                    <div class="card-body p-2 text-center">
                        <small class="d-block mb-1">Ventas Brutas</small>
                        <h6 class="mb-0 font-weight-bold" id="totalVentasH">$ 0</h6>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card border-0 shadow-sm bg-danger text-white">
                    <div class="card-body p-2 text-center">
                        <small class="d-block mb-1">Devoluciones</small>
                        <h6 class="mb-0 font-weight-bold" id="totalDevoH">$ 0</h6>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card border-0 shadow-sm bg-primary text-white">
                    <div class="card-body p-2 text-center">
                        <small class="d-block mb-1">Venta Neta</small>
                        <h6 class="mb-0 font-weight-bold" id="totalNetoH">$ 0</h6>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card border-0 shadow-sm bg-info text-white">
                    <div class="card-body p-2 text-center">
                        <small class="d-block mb-1">Cant. Facturas</small>
                        <h6 class="mb-0 font-weight-bold" id="totalCantH">0</h6>
                    </div>
                </div>
            </div>
        </div>

        <div class="chart-container" style="position: relative; height:60vh; width:100%">
            <canvas id="canvasVentasHora"></canvas>
        </div>
      </div>
      <div class="modal-footer bg-white border-0 py-2">
        <a id="btnExportarExcelH" href="#" class="btn btn-success px-4 font-weight-bold mr-auto d-none" target="_blank">
            <i class="fa fa-file-excel-o"></i> Exportar a Excel
        </a>
        <button type="button" class="btn btn-secondary px-4 font-weight-bold" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

@endsection

@section('pie')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    let myChart = null;
    let chartFullData = null;

    const formatter = new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP', maximumFractionDigits: 0 });

    $('#btnVentasHora').click(function() {
        const fi = $('#fechai').val();
        const ff = $('#fechaf').val();
        const bodega = $('select[name="bodega"]').val();

        if (!fi || !ff) {
            alert('Por favor selecciona un rango de fechas.');
            return;
        }

        $('#chartPeriodo').html('<i class="fa fa-spinner fa-spin"></i> Cargando datos...');
        $('#rowTotalesHora').hide();
        $('#btnExportarExcelH').addClass('d-none');
        $('#modalVentasHora').modal('show');

        fetch(`facturasPorHora?fi=${fi}&ff=${ff}&bodega=${bodega}`)
            .then(response => {
                if (!response.ok) throw new Error('Error en la respuesta del servidor');
                return response.json();
            })
            .then(data => {
                if (data.error) {
                    throw new Error(data.error);
                }
                chartFullData = data;
                $('#chartPeriodo').text(`Desde: ${fi} Hasta: ${ff}`);
                
                // Actualizar Totales
                $('#totalVentasH').text(formatter.format(data.totales.ventas));
                $('#totalDevoH').text(formatter.format(data.totales.devoluciones));
                $('#totalNetoH').text(formatter.format(data.totales.neto));
                $('#totalCantH').text(data.totales.cantidad_facturas);
                $('#rowTotalesHora').fadeIn();

                // Actualizar Link Excel
                $('#btnExportarExcelH').attr('href', `facturasPorHora?fi=${fi}&ff=${ff}&bodega=${bodega}&exportar=1`).removeClass('d-none');

                if ($('#modalVentasHora').hasClass('show')) {
                    renderChart(chartFullData.hoja);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                $('#chartPeriodo').text('Error al cargar datos.');
                alert('Ocurrió un error: ' + error.message);
            });
    });

    // Asegurar que el gráfico se renderice cuando el modal esté listo (evita problemas de tamaño del canvas)
    $('#modalVentasHora').on('shown.bs.modal', function () {
        if (chartFullData) {
            renderChart(chartFullData.hoja);
        }
    });

    // Forzar el cierre del modal (algunas configuraciones de BS pueden fallar con data-dismiss)
    document.querySelectorAll('#modalVentasHora [data-dismiss="modal"], #modalVentasHora [data-bs-dismiss="modal"]').forEach(btn => {
        btn.addEventListener('click', function() {
            $('#modalVentasHora').modal('hide');
        });
    });

    function renderChart(hoja) {
        const labels = hoja.map(item => item.hora);
        const ventas = hoja.map(item => item.ventas);
        const devoluciones = hoja.map(item => item.devoluciones);
        const neto = hoja.map(item => item.neto);
        const cantidades = hoja.map(item => item.cantidad_facturas);

        const ctx = document.getElementById('canvasVentasHora').getContext('2d');
        
        if (myChart) {
            myChart.destroy();
        }

        myChart = new Chart(ctx, {
            data: {
                labels: labels,
                datasets: [
                    {
                        type: 'line',
                        label: 'Ventas Brutas',
                        data: ventas,
                        borderColor: '#28a745',
                        backgroundColor: 'rgba(40, 167, 69, 0.1)',
                        fill: false,
                        tension: 0.3,
                        pointRadius: 4,
                        borderWidth: 2,
                        yAxisID: 'y'
                    },
                    {
                        type: 'line',
                        label: 'Devoluciones',
                        data: devoluciones,
                        borderColor: '#dc3545',
                        backgroundColor: 'rgba(220, 53, 69, 0.1)',
                        fill: false,
                        tension: 0.3,
                        pointRadius: 4,
                        borderWidth: 2,
                        yAxisID: 'y'
                    },
                    {
                        type: 'line',
                        label: 'Venta Neta',
                        data: neto,
                        borderColor: '#007bff',
                        backgroundColor: 'rgba(0, 123, 255, 0.3)',
                        fill: true,
                        tension: 0.3,
                        pointRadius: 6,
                        borderWidth: 3,
                        yAxisID: 'y'
                    },
                    {
                        type: 'bar',
                        label: 'Cant. Facturas',
                        data: cantidades,
                        backgroundColor: 'rgba(23, 162, 184, 0.4)',
                        borderColor: '#17a2b8',
                        borderWidth: 1,
                        yAxisID: 'y1',
                        borderRadius: 4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    mode: 'index',
                    intersect: false,
                },
                plugins: {
                    legend: {
                        position: 'top',
                        labels: { font: { weight: 'bold' } }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) label += ': ';
                                if (context.dataset.yAxisID === 'y') {
                                    label += formatter.format(context.parsed.y);
                                } else {
                                    label += context.parsed.y;
                                }
                                return label;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        beginAtZero: true,
                        title: { display: true, text: 'Valor ($)', font: { weight: 'bold' } },
                        ticks: {
                            callback: function(value) {
                                return new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP', maximumFractionDigits: 0, compactDisplay: 'short' }).format(value);
                            }
                        }
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        beginAtZero: true,
                        title: { display: true, text: 'Cantidad Facturas', font: { weight: 'bold' } },
                        grid: { drawOnChartArea: false },
                    }
                }
            }
        });
    }
});
</script>
@endsection