<?php
session_start();
require_once ("config/db.php");
require_once ("config/conexion.php");
?>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

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

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

<div class="container-fluid">
    <div class="panel panel-info" style="border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
        <div class="panel-heading" style="background-color: #31708f; color: white; border-radius: 8px 8px 0 0;">
            <h4 class="panel-title"><i class='glyphicon glyphicon-heart'></i> Reporte de Donaciones</h4>
        </div>
        
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-12 col-md-4" style="margin-bottom: 10px;">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input type="text" class="form-control" placeholder="Nombre del Cliente" id="bs-prod" onkeyup="load(1)"/>
                    </div>
                </div>
                <div class="col-xs-6 col-md-3" style="margin-bottom: 10px;">
                    <input class="form-control" type="date" id="bd-desde" onchange='load(1);' title="Desde">
                </div>
                <div class="col-xs-6 col-md-3" style="margin-bottom: 10px;">
                    <input class="form-control" type="date" id="bd-hasta" onchange='load(1);' title="Hasta">
                </div>
                <div class="col-xs-12 col-md-2 text-center">
                    <div id="loader" style="display:none; padding-top: 5px;">
                        <img src="./img/ajax-loader.gif" width="20"> <small>Cargando...</small>
                    </div>
                </div>
            </div>

            <hr style="margin-top: 10px; margin-bottom: 20px;">

            <div id="agrega-registros"></div>
        </div>
    </div>
</div>