<?php
require_once __DIR__ . '/../../includes/version.php';
require_once __DIR__ . '/../../includes/topbar.php';
// Aquí podrías agregar un guard similar si es necesario, por ejemplo:
// require_once __DIR__ . '/../../includes/admin_guard.php';
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Subir Incidencias Excel</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- SweetAlert2 CSS -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom CSS (con cache busting) -->
    <link href="<?= asset('/frontend/assets/css/dashboard/dashboard.css') ?>" rel="stylesheet">
    <link href="<?= asset('/frontend/assets/css/includes/topbar.css') ?>" rel="stylesheet">
    <link href="<?= asset('/frontend/assets/css/styles.css') ?>" rel="stylesheet">
</head>
<style>
    .topbar-navbar {
        width: 100vw !important;
        left: 0;
        position: relative;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        border-radius: 0 !important;
    }
</style>
</head>
<body class="d-flex flex-column min-vh-100">
    <?php /* El topbar ya está incluido arriba */ ?>
    <div class="container-fluid mt-4 flex-grow-1">
        <div class="row justify-content-center">
            <div class="col-md-10 col-lg-9">
                <div class="card shadow-lg border-0" style="max-width: 100%; min-width: 320px;">
                    <div class="card-body p-4">
                        <div class="text-center mb-4">
                            <i class="fa-solid fa-file-excel fa-3x text-success mb-2"></i>
                            <h3 class="mb-1">Subir archivo de Incidencias</h3>
                            <p class="text-muted">Carga el archivo Excel con la estructura de PreNominaIncidencias</p>
                        </div>
                        <form id="excelIncidenciasForm" action="../../../backend/api/incidencias_excel.php" method="POST" enctype="multipart/form-data">
                            <div class="mb-3">
                                <label for="excel_file" class="form-label">Selecciona el archivo Excel</label>
                                <input class="form-control w-100" type="file" id="excel_file" name="excel_file" accept=".xlsx,.xls" required>
                            </div>
                            <button type="submit" class="btn btn-success w-100">
                                <i class="fa-solid fa-file-arrow-up me-2"></i>Subir archivo
                            </button>
                        </form>
                        <div id="mensaje" class="mt-3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
    // Mensaje de éxito/error (puedes adaptar esto según la respuesta del backend)
    document.getElementById('excelIncidenciasForm').addEventListener('submit', function(e) {
        // Aquí podrías mostrar un loader o mensaje temporal
    });
    </script>
</body>
</html>
