<?php
    session_start();
    if (!isset($_SESSION['user_login_status']) AND $_SESSION['user_login_status'] != 1) {
        header("location: login.php");
        exit;
    }

    require_once ("config/db.php");
    require_once ("config/conexion.php");
    
    $active_registros="active"; 
    $title="Nomina de personal | Niño Burger";
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <?php include("head.php");?>
    <style>
        .panel-info { border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .panel-heading { padding: 15px 20px !important; border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; }
        .table thead th { background-color: #f8f9fa; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; }
        .btn-round { border-radius: 20px; padding-left: 20px; padding-right: 20px; }
        @media (max-width: 768px) { .btn-group.pull-right { float: none !important; width: 100%; margin-bottom: 15px; } .btn-block-xs { width: 100%; } }
    </style>
</head>
<body>
    <?php 
    include("navbar.php"); 
    ?>
    <!-- Dentro de tu historial.php -->
<div class="container-fluid">
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="btn-group pull-right">
                <!-- Botón adaptativo -->
                <button type='button' class="btn btn-info" onclick="load(1)">
                    <span class="glyphicon glyphicon-search" ></span> <span class="hidden-xs">Buscar</span>
                </button>
            </div>
            <h4><i class='glyphicon glyphicon-list-alt'></i> Historial de Nóminas</h4>
        </div>
        
        <div class="panel-body">
            <!-- Formulario de Filtros Responsive -->
            <form class="form-horizontal" role="form" id="datos_cotizacion">
                <div class="form-group row">
                    <label class="col-xs-12 col-sm-2 control-label">Desde:</label>
                    <div class="col-xs-12 col-sm-3">
                        <input type="date" class="form-control" id="desde" onchange="load(1)">
                    </div>
                    
                    <label class="col-xs-12 col-sm-2 control-label">Hasta:</label>
                    <div class="col-xs-12 col-sm-3">
                        <input type="date" class="form-control" id="hasta" onchange="load(1)">
                    </div>
                </div>
            </form>

            <!-- CONTENEDOR DE RESULTADOS -->
            <div id="resultados"></div><!-- Carga mensajes de éxito/error -->
            <div class='outer_div'></div><!-- AQUÍ SE CARGA LA TABLA AJAX -->
            
        </div>
    </div>
</div>
<hr>
<div class="row">
    <div class="col-xs-12">
    <div style="position: relative; height:40vh; width:100%">
        <canvas id="graficoTiendas"></canvas>
    </div>
</div>
</div>

        </div>
    </div>
</div>
</div>
</div>
</div>
    <?php include("footer.php");?>
    <!-- LIBRERÍA DE CHART.JS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    </body>
</html>

<script>
$(document).ready(function(){
    load(1);
});

function load(page){
    var desde = $("#desde").val();
    var hasta = $("#hasta").val();
    $("#loader").fadeIn('slow');
    $.ajax({
        url:'./ajax/buscar_historial.php?action=ajax&page='+page+'&desde='+desde+'&hasta='+hasta,
        beforeSend: function(objeto){
            $('#loader').html('<img src="./img/ajax-loader.gif"> Cargando...');
        },
        success:function(data){
            $(".outer_div").html(data).fadeIn('slow');
            $('#loader').html('');
        }
    })
}
function ver_detalle(id_pago) {
    $.ajax({
        url: 'ajax/ver_detalle_pago.php?id_pago=' + id_pago,
        beforeSend: function(objeto) {
            $(".outer_div").html("Cargando detalle...");
        },
        success: function(datos) {
            $(".outer_div").html(datos);
        }
    });
}
</script>