<?php include_once "encabezado1.php"; ?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reporte de Ventas</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"> <!-- Font Awesome -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            background-color: #f4f6f9;
            font-family: 'Roboto', sans-serif;
        }
        .container {
            max-width: 1200px;
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
            animation: fadeIn 1s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        h2 {
            color: #343a40;
            font-weight: 700;
            font-size: 24px;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .btn-custom {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            font-weight: 500;
            border-radius: 5px;
            transition: background-color 0.3s, transform 0.3s;
            margin-left: 10px;
        }
        .btn-custom:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }
        .table-container {
            overflow-x: auto;
            animation: slideIn 1s ease-in-out;
        }
        @keyframes slideIn {
            from { opacity: 0; transform: translateX(-20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .table-custom {
            border-collapse: collapse;
            width: 100%;
            font-size: 14px;
        }
        .table-custom thead {
            background-color: #007bff;
            color: #fff;
            font-weight: 500;
        }
        .table-custom th,
        .table-custom td {
            padding: 12px;
            text-align: center;
            border: 1px solid #dee2e6;
        }
        .table-custom tbody tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        .table-custom tbody tr:hover {
            background-color: #e9ecef;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .icon {
            color: #007bff;
        }
    </style>
</head>
<body>
<div class="container mt-5">
    <!-- Título alineado a la izquierda con icono -->
    <h2><i class="fas fa-chart-line icon"></i> Reporte de Ventas</h2>
    <div class="text-right mb-4">
        <!-- Botón para generar PDF con icono -->
        <form action="reportepdf.php" method="post" style="display: inline;">
            <button type="submit" class="btn btn-custom"><i class="fas fa-file-pdf"></i> Generar PDF</button>
        </form>
        <!-- Botón para generar Excel con icono -->
        <form action="exportar_excel.php" method="post" style="display: inline;">
            <button type="submit" class="btn btn-custom"><i class="fas fa-file-excel"></i> Generar Excel</button>
        </form>
    </div>

    <?php
    date_default_timezone_set("America/Lima"); 
    include 'conexion1.php';
    $conectar = mysqli_connect($servidor, $nombre, $clave, $base);
    $sql = "SELECT * from venta";
    $result = mysqli_query($conectar, $sql);
    ?>

    <!-- Contenedor con desplazamiento horizontal -->
    <div class="table-container">
        <table class="table table-custom shadow-sm">
            <thead>
                <tr>
                    <th><i class="fas fa-hashtag icon"></i> ID</th>
                    <th><i class="fas fa-calendar-alt icon"></i> Fecha Registro</th>
                    <th><i class="fas fa-clock icon"></i> Hora Registro</th>
                    <th><i class="fas fa-info-circle icon"></i> Estado</th>
                    <th><i class="fas fa-file-invoice icon"></i> Tipo Comprobante</th>
                    <th><i class="fas fa-file-alt icon"></i> Clave Acceso</th>
                    <th><i class="fas fa-file-alt icon"></i> Serie</th>
                    <th><i class="fas fa-sort-numeric-up icon"></i> Secuencial</th>
                    <th><i class="fas fa-id-card icon"></i> DNI</th>
                    <th><i class="fas fa-user icon"></i> Nombre</th>
                    <th><i class="fas fa-map-marker-alt icon"></i> Dirección</th>
                    <th><i class="fas fa-phone icon"></i> Celular</th>
                    <th><i class="fas fa-code icon"></i> Código Proserv</th>
                    <th><i class="fas fa-clipboard icon"></i> Descripción</th>
                    <th><i class="fas fa-calendar-check icon"></i> Correo</th>
                    <th><i class="fas fa-clock icon"></i> Hora Entrega</th>
                    <th><i class="fas fa-dollar-sign icon"></i> Precio Unitario</th>
                    <th><i class="fas fa-percentage icon"></i> IVA</th>
                    <th><i class="fas fa-calculator icon"></i> Sub Total</th>
                    <th><i class="fas fa-money-bill-wave icon"></i> Acuenta</th>
                    <th><i class="fas fa-money-check-alt icon"></i> Debe</th>
                    <th><i class="fas fa-user-tie icon"></i> Nombre Vendedor</th>
                </tr>
            </thead>
            <tbody>
                <?php while($mostrar = mysqli_fetch_array($result)) { ?>
                <tr>
                    <td><?php echo $mostrar["ID"]; ?></td>
                    <td><?php echo $mostrar["FECHA_REGISTRO"]; ?></td>
                    <td><?php echo $mostrar["HORA_REGISTRO"]; ?></td>
                    <td><?php echo $mostrar["ESTADO"]; ?></td>
                    <td><?php echo $mostrar["TIPO_COMPROBANTE"]; ?></td>
                    <td><?php echo $mostrar["CLAVEACCESO"]; ?></td>
                    <td><?php echo $mostrar["SERIE"]; ?></td>
                    <td><?php echo $mostrar["SECUENCIAL"]; ?></td>
                    <td><?php echo $mostrar["DNI"]; ?></td>
                    <td><?php echo $mostrar["NOMBRE"]; ?></td>
                    <td><?php echo $mostrar["DIRECCION"]; ?></td>
                    <td><?php echo $mostrar["CELULAR"]; ?></td>
                    <td><?php echo $mostrar["CODIGO_PROSERV"]; ?></td>
                    <td><?php echo $mostrar["DESCRIPCION"]; ?></td>
                    <td><?php echo $mostrar["CORREO"]; ?></td>
                    <td><?php echo $mostrar["HORA_ENTREGA"]; ?></td>
                    <td><?php echo $mostrar["PRECIO_UNITARIO"]; ?></td>
                    <td><?php echo $mostrar["IGV"]; ?></td>
                    <td><?php echo $mostrar["SUB_TOTAL"]; ?></td>
                    <td><?php echo $mostrar["ACUENTA"]; ?></td>
                    <td><?php echo $mostrar["DEBE"]; ?></td>
                    <td><?php echo $mostrar["NOMBRE_VENDEDOR"]; ?></td>
                </tr>
                <?php } ?>
            </tbody>
        </table>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>