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

function load(page){
    var desde = $("#bd-desde").val();
    var hasta = $("#bd-hasta").val();
    var url = 'php/busca_producto_resumen.php';
    $("#loader").fadeIn('slow');
    $.ajax({
        type: 'POST',
        url: url,
        data: 'desde='+desde+'&hasta='+hasta+'&page='+page,
        success: function(datos){
            $('#agrega-registros').html(datos);
            $("#loader").fadeOut('slow');
        }
    })
}
</script>

<?php
session_start();
require_once ("config/db.php");
require_once ("config/conexion.php");
?>

<div class="panel panel-info" style="border-top: 3px solid #f39c12;">
    <div class="panel-heading" style="background: #fff; color: #444;">
        <h4><i class='glyphicon glyphicon-stats'></i> Resumen Consolidado de Compras</h4>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-12">
                <table class="table table-bordered">
                    <tr class="info">
                        <td class="text-right" style="vertical-align:middle; font-weight:bold;">Desde</td>
                        <td><input class="form-control" type="date" name="desde" id="bd-desde" onchange='load(1);'/></td>
                        <td class="text-right" style="vertical-align:middle; font-weight:bold;">Hasta</td>
                        <td><input class="form-control" type="date" name="hasta" id="bd-hasta" onchange='load(1);'/></td>
                    </tr>
                </table>
            </div>
        </div>
        
        <div id="loader" style="display:none; text-align:center;">
            <img src="./img/ajax-loader.gif"> Cargando consolidado...
        </div>

        <div class="registros" id="agrega-registros"></div>
        
        <center>
            <ul class="pagination" id="pagination"></ul>
        </center>
    </div>
</div>