<?php require __DIR__ . '/../../includes/navbar.php'; ?>

<div class="container mb-5 custom-margin-top">

    <h2 class="text-center mb-0 text-white title-presence">
        Panel Principal
    </h2>

    <p class="text-center text-white-50 mb-5">
        Bienvenido/a <?= $_SESSION['user']['nombre'] ?>. Gestiona el sistema desde aquí.
    </p>
    
    <div class="row g-4 justify-content-center">
        
        <!-- MÓDULOS DEL SISTEMA -->

        <div class="col-xl-3 col-lg-4 col-md-6">
            <div class="card action-card text-center h-100">
                <div class="card-body d-flex flex-column align-items-center justify-content-center">
                    
                    <div class="icon-box-soft bg-primary-soft text-primary mb-2">
                        <i class="fas fa-layer-group"></i>
                    </div>

                    <h5 class="card-title">Panel de Negocio</h5>
                    <p class="card-text text-muted">Administra todas las áreas del negocio desde un solo lugar.</p>
                    <a href="?opt=home_admin" class="stretched-link"></a>
                </div>
            </div>
        </div>

        <!-- INFORMES -->

        <div class="col-xl-3 col-lg-4 col-md-6">
            <div class="card action-card text-center h-100">
                <div class="card-body d-flex flex-column align-items-center justify-content-center">
                    
                    <div class="icon-box-soft bg-success-soft text-success mb-2">
                        <i class="fas fa-chart-line"></i>
                    </div>

                    <h5 class="card-title">Informes</h5>
                    <p class="card-text text-muted">Accede a reportes sobre el rendimiento de tu negocio.</p>
                    <a href="index.php?opt=informe" class="stretched-link"></a>
                </div>
            </div>
        </div>

        <!-- BACKUPS -->

        <div class="col-xl-3 col-lg-4 col-md-6">
            <div class="card action-card text-center h-100">
                <div class="card-body d-flex flex-column align-items-center justify-content-center">
                    
                    <div class="icon-box-soft bg-warning-soft text-warning mb-2">
                        <i class="fas fa-database"></i>
                    </div>

                    <h5 class="card-title">Copias de Seguridad</h5>
                    <p class="card-text text-muted">Respaldo y recuperación de información del sistema.</p>
                    <a href="?opt=backups" class="stretched-link"></a>
                </div>
            </div>
        </div>

        <!-- USUARIOS -->

        <div class="col-xl-3 col-lg-4 col-md-6">
            <div class="card action-card text-center h-100">
                <div class="card-body d-flex flex-column align-items-center justify-content-center">
                    
                    <div class="icon-box-soft bg-danger-soft text-danger mb-2">
                        <i class="fas fa-users-cog"></i>
                    </div>

                    <h5 class="card-title">Usuarios</h5>
                    <p class="card-text text-muted">Administra los datos de los usuarios y permisos asociado a cada uno.</p>
                    <a href="index.php?opt=usuarios" class="stretched-link"></a>
                </div>
            </div>
        </div>

        <!-- README -->

        <div class="col-xl-3 col-lg-4 col-md-6">
            <div class="card action-card text-center h-100">
                <div class="card-body d-flex flex-column align-items-center justify-content-center">
                    
                    <div class="icon-box-soft bg-info-soft text-info mb-2">
                        <i class="fas fa-book"></i>
                    </div>

                    <h5 class="card-title">Ayuda</h5>
                    <p class="card-text text-muted">Léelo en caso de tener dudas respecto al funcionamiento del sistema.</p>
                    <a href="?opt=readme" class="stretched-link"></a>
                </div>
            </div>
        </div>

        <!-- CONFIGURACIÓN -->

        <div class="col-xl-3 col-lg-4 col-md-6">
            <div class="card action-card text-center h-100">
                <div class="card-body d-flex flex-column align-items-center justify-content-center">
                    
                    <div class="icon-box-soft bg-secondary-soft text-secondary mb-2">
                        <i class="fa-solid fa-store"></i>
                    </div>

                    <h5 class="card-title">Datos del Negocio</h5>
                    <p class="card-text text-muted">Administra parámetros del sistema y datos de la empresa.</p>
                    <a href="?opt=configuracion" class="stretched-link"></a>
                </div>
            </div>
        </div>

        <!-- VERSIÓN -->

        <footer class="text-end text-white-50 position-fixed bottom-0 start-50 translate-middle-x mb-2">
            <a href="#" 
            class="text-white-50 text-decoration-none"
            data-bs-toggle="modal"
            data-bs-target="#modalAcerca"
            title="Acerca del sistema">
                Versión Beta 0.1.3
            </a>
        </footer>

        <!-- ERROR -->

        <script>
            const serverErrors = <?php 
                if (!empty($_SESSION['flash_error'])) {
                    $errorsArray = explode('<br>', $_SESSION['flash_error']);
                    unset($_SESSION['flash_error']);
                    echo json_encode($errorsArray);
                } else {
                    echo '[]';
                }
            ?>;
        </script>

        <!-- SUCCES -->

        <script>
            const serverSuccess = <?php
                if (!empty($_SESSION['flash_success'])) {
                    $successArray = explode('<br>', $_SESSION['flash_success']);
                    unset($_SESSION['flash_success']);
                    echo json_encode($successArray);
                } else {
                    echo '[]';
                }
            ?>;
        </script>

    </div>
</div>

<script src="js/login/logInValidator.js"></script>

<!-- Evita que Chrome use BFCache -->

<script>
    window.onpageshow = function(event) {
        if (event.persisted) {
            window.location.reload();
        }
    };
</script>

<!-- Modal Acerca De -->

<div class="modal fade" id="modalAcerca" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Acerca del Sistema</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body text-center">
        <h6 class="fw-bold">ByteCenter App</h6>
        <p class="mb-1">Versión Beta 0.1.3</p>
        <p class="text-muted small">
            Sistema de gestión interna para administración de ventas, servicios, stock y mucho más.
        </p>

        <hr>

        <p class="mb-1"><strong>Desarrollado por:</strong> Axel Axt</p>
        <p class="mb-1"><strong>Año:</strong> 2026</p>
      </div>

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