<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title ?? 'Sistema de Ventas' ?></title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
    <meta name="csrf-token" content="<?= csrf_hash() ?>">
    <script>
        document.addEventListener('htmx:configRequest', function(e) {
            e.detail.headers['X-CSRF-TOKEN'] = document.querySelector('meta[name=csrf-token]').content;
        });
    </script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'] },
                    boxShadow: {
                        'soft': '0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)',
                        'soft-lg': '0 10px 40px -10px rgba(0,0,0,0.1)',
                    }
                }
            }
        }
    </script>
    <style>
        * { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
        *::-webkit-scrollbar { width: 6px; }
        *::-webkit-scrollbar-track { background: transparent; }
        *::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
        html { font-size: 130%; }
        body { scroll-behavior: smooth; }
        .page-enter { animation: fadeInUp 0.3s ease-out; }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .card-hover { transition: all 0.25s ease; }
        .card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 30px -8px rgba(0,0,0,0.12); }
    </style>
</head>
<body class="bg-white min-h-screen font-sans antialiased text-gray-800">
    <?= $this->include('layouts/header') ?>
    <div class="flex min-h-[calc(100vh-3.5rem)]">
        <?php
        $role = session()->get('role');
        echo $this->include('layouts/sidebar_' . ($role == 'admin' ? 'admin' : 'seller'));
        ?>
        <main class="flex-1 p-4 md:p-6 lg:p-8 overflow-auto min-h-[calc(100vh-3.5rem)]">
            <div class="max-w-7xl mx-auto page-enter">
                <?php if (session()->getFlashdata('success')): ?>
                    <div id="flash-success" data-message="<?= addslashes(session()->getFlashdata('success')) ?>"></div>
                <?php endif; ?>
                <?php if (session()->getFlashdata('error')): ?>
                    <div id="flash-error" data-message="<?= addslashes(session()->getFlashdata('error')) ?>"></div>
                <?php endif; ?>
                <?php if (session()->getFlashdata('warning')): ?>
                    <div id="flash-warning" data-message="<?= addslashes(session()->getFlashdata('warning')) ?>"></div>
                <?php endif; ?>
                <?php if (session()->getFlashdata('errors')): ?>
                    <div id="flash-errors" data-messages='<?= json_encode(session()->getFlashdata('errors')) ?>'></div>
                <?php endif; ?>
                <?= $this->renderSection('content') ?>
            </div>
        </main>
    </div>
    <script>
    <?php if (session()->getFlashdata('success')): ?>
    Swal.fire({ icon: 'success', title: 'Éxito', text: document.getElementById('flash-success').dataset.message, timer: 3000, showConfirmButton: false, toast: true, position: 'top-end' });
    <?php endif; ?>
    <?php if (session()->getFlashdata('error')): ?>
    Swal.fire({ icon: 'error', title: 'Error', text: document.getElementById('flash-error').dataset.message, timer: 5000, showConfirmButton: false, toast: true, position: 'top-end' });
    <?php endif; ?>
    <?php if (session()->getFlashdata('warning')): ?>
    Swal.fire({ icon: 'warning', title: 'Atención', text: document.getElementById('flash-warning').dataset.message, timer: 4000, showConfirmButton: false, toast: true, position: 'top-end' });
    <?php endif; ?>
    <?php if (session()->getFlashdata('errors')): ?>
    Swal.fire({ icon: 'error', title: 'Errores de validación', html: '<ul style="text-align:left">' + Object.values(JSON.parse(document.getElementById('flash-errors').dataset.messages)).map(function(m){ return '<li>' + m + '</li>' }).join('') + '</ul>' });
    <?php endif; ?>
    </script>
    <?= $this->include('layouts/footer') ?>
</body>
</html>
