<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?= csrf_token() ?>">
    <title><?= e($title ?? APP_NAME) ?> - <?= APP_NAME ?></title>
    <link rel="icon" type="image/x-icon" href="<?= asset('images/favicon.ico') ?>">
    <link rel="stylesheet" href="<?= asset('css/bootstrap.min.css') ?>">
    <link rel="stylesheet" href="<?= asset('css/vendor/all.min.css') ?>">
    <link rel="stylesheet" href="<?= asset('css/theme.css') ?>">
    <link rel="stylesheet" href="<?= asset('css/components.css') ?>">
    <link rel="stylesheet" href="<?= asset('css/animations.css') ?>">
    <link rel="stylesheet" href="<?= asset('css/style.css') ?>">
    <link rel="stylesheet" href="<?= asset('css/responsive.css') ?>">
</head>
<body>
    <!-- Loading Overlay -->
    <div id="loading-overlay" class="loading-overlay" style="display:none;">
        <div class="spinner">
            <div class="spinner-ring"></div>
            <div class="spinner-text">Loading...</div>
        </div>
    </div>

    <!-- Sidebar -->
    <?php \core\View::partial('sidebar'); ?>

    <!-- Main Content Area -->
    <div class="main-wrapper">
        <!-- Top Navigation -->
        <?php \core\View::partial('header'); ?>

        <!-- Page Content -->
        <div class="page-content">
            <!-- Breadcrumb -->
            <?php if (isset($breadcrumb)): ?>
                <?php \core\View::partial('breadcrumb', ['breadcrumb' => $breadcrumb]); ?>
            <?php endif; ?>

            <!-- Alerts -->
            <?php \core\View::partial('alerts'); ?>

            <!-- Main Content -->
            <div class="container-fluid py-3">
                <?= $viewContent ?? '' ?>
            </div>
        </div>

        <!-- Footer -->
        <?php \core\View::partial('footer'); ?>
    </div>

    <!-- Modals Container -->
    <div id="modal-container"></div>

    <!-- Scripts -->
    <script src="<?= asset('js/jquery-3.7.1.min.js') ?>"></script>
    <script src="<?= asset('js/bootstrap.bundle.min.js') ?>"></script>
    <script src="<?= asset('js/vendor/chart.min.js') ?>"></script>
    <script src="<?= asset('js/vendor/select2.min.js') ?>"></script>
    <script src="<?= asset('js/vendor/fullcalendar.min.js') ?>"></script>
    <script src="<?= asset('js/main.js') ?>"></script>
    <script src="<?= asset('js/app.js') ?>"></script>
    <script src="<?= asset('js/validation.js') ?>"></script>
    <script src="<?= asset('js/animations.js') ?>"></script>
    <?= $scripts ?? '' ?>
    <script>
        $(function() {
            <?= $inlineScripts ?? '' ?>
        });
    </script>
</body>
</html>
