<?php

$title = "administracion";
$MODULO = $title;
require_once "../../config/init.php";

?>
<!DOCTYPE html>
<html lang="es">
<head>
    <?php include "head.php"; ?>
    <title><?= $title ?></title>
    <?php include "styles.php"; ?>
</head>
<body>

<?php include("navbar.php"); ?>
<div class="container">

    <!-- Loader -->
    <div id="loader-overlay">
        <div class="loader-content">
            <img src="../../public/img/loading_moderno.gif" alt="Cargando...">
            <p class="text-muted mt-2">Cargando datos...</p>
        </div>
    </div>

    <!-- ══ ENCABEZADO ══ 
    <div class="page-header">
        <div class="page-header-icon">
            <i class="fas fa-user-tie"></i>
        </div>
        <div>
            <h5>Ventas por Vendedor</h5>
            <small>Consulta el rendimiento individual de cada vendedor</small>
        </div>
    </div>-->

    <!-- ══ FILTROS ══ -->
    <div class="card shadow-sm filtro-card mb-4">
        <div class="card-body py-3 px-3">
            <div class="row g-2 align-items-end">

                <!-- Tienda -->
                <div class="col-12 col-md-3">
                    <label class="filtro-label">Tienda</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fa-solid fa-shop"></i></span>
                        <select name="tienda_ip" class="form-control" required onchange="setNombreTienda(this)">
                            <option value="">Seleccione tienda</option>
                            <?php foreach ($tiendas as $t): ?>
                                <option
                                    value="<?= htmlspecialchars($t['ip_enc'], ENT_QUOTES, 'UTF-8') ?>"
                                    data-name="<?= htmlspecialchars($t['nombre'], ENT_QUOTES, 'UTF-8') ?>"
                                    <?= ($ip_enc === $t['ip_enc']) ? 'selected' : '' ?>>
                                    <?= htmlspecialchars($t['nombre'], ENT_QUOTES, 'UTF-8') ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                        <input type="hidden" id="tienda_nombre">
                    </div>
                </div>

                <!-- Vendedor -->
                <div class="col-12 col-md-3">
                    <label class="filtro-label">Vendedor</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fa-solid fa-person"></i></span>
                        <select id="vendedor" name="vendedor" required class="form-control">
                        </select>
                        <input type="hidden" id="vendedor_nombre">
                    </div>
                </div>

                <!-- Desde -->
                <div class="col-6 col-md-2">
                    <label class="filtro-label">Fecha consulta</label>
                    <input type="date" id="fechaInicio" class="form-control filtro-input">
                </div>

                <!-- Hasta -->
                <div class="col-6 col-md-2" hidden>
                    <label class="filtro-label">Hasta</label>
                    <input type="date" id="fechaFin" class="form-control filtro-input">
                </div>

                <!-- Botón -->
                <div class="col-12 col-md-2">
                    <button class="btn btn-primary w-100" id="btnConsultar">
                        <i class="fa-solid fa-magnifying-glass me-1"></i> Buscar
                    </button>
                </div>

            </div>
        </div>
    </div>

    <!-- ══ TARJETAS KPI ══ -->
    <div class="row g-3 mb-4">
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card shadow-sm h-100">
                
                <div class="card-body text-center">
                    <h3><i class="fas fa-user"></i></h3>
                    <h5 id="tarjeta_vendedor" class="text-primary">-</h3>
                    <br>
                    <h6 class="text-success">📊 Total Ventas mes anterior:</h6>
                    <h5 id="total_mes_anterior">S/ 0.00</h5>
                    <br>
                    <h6>🏆 Promedio diario, mes anterior:</h6>
                        <h3 id="promedio_mes_anterior" class="text-primary">S/ 0.00</h3>
                    </div>
            </div>
        </div>
 
        <!-- Venta hoy + Diferencia -->
        <div class="col-12 col-md-3 d-flex flex-column gap-3">

            <div class="card kpi-card kpi-hoy flex-fill" id="card_venta_total">
                <div class="card-body">
                    <h6 class="text-success"><i class="fas fa-coins"> </i> Total ventas, hoy:</h6>
                    <div class="kpi-value" id="venta_total">—</div>
                </div>
            </div>

            <div class="card kpi-card kpi-diferencia flex-fill" id="card_diferencia">
                <div class="card-body">
                    <h6 class="text-secondary"><i class="fas fa-smile"> </i> Diferencia:</h6>
                    <div class="kpi-value" id="diferencia_valor">—</div>
                    <small id="diferencia_mensaje" class="d-block mt-1"></small>
                </div>
            </div>

        </div>


        <!-- Donut, tipo de ventas -->
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card shadow-sm h-100">
                 <div class="card-body text-center">
                    <h6 class="fw-bold mb-1" style="font-size:13px;"> 📊 ventas por tipos de precios</h6>
                    <div style="height: 350px;">
                        <canvas id="graficoVentasHoy"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div><!-- /container -->
    <script src="../../public/assets/js/chart.js"></script>
    <script src="../../public/assets/js/jquery-3.6.0.min.js"></script>
    <script src="../../public/assets/js/chartjs-plugin-datalabels.js"></script>
    <script src="../views/scripts/administracion.js?v=<?php echo filemtime('../views/scripts/administracion.js'); ?>"></script>
    <script src="../views/scripts/constante.js"></script>

</body>
</html>
 