<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><?= isset($title) ? $title : 'Ghana Anaesthesiologists Society' ?></title>
    <link href="<?= $baseUrl ?>/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <link href="<?= $baseUrl ?>/css/sb-admin-2.min.css" rel="stylesheet">
    <link href="<?= $baseUrl ?>/css/glass.css" rel="stylesheet">
    <link href="<?= $baseUrl ?>/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" rel="stylesheet">
    <style>
        .alert-fixed { position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px; }
        .table-actions { white-space: nowrap; }
        .table-actions .btn { padding: 0.25rem 0.5rem; }
        .cursor-pointer { cursor: pointer; }
        .sidebar-brand-icon i { font-size: 1.5rem; }
        .page-item.active .page-link { background: linear-gradient(135deg, #4e73df, #224abe) !important; border-color: transparent !important; }
        .btn { border-radius: 10px !important; padding: 0.5rem 1.25rem !important; font-weight: 600 !important; transition: all 0.3s ease !important; }
        .btn-sm { padding: 0.25rem 0.75rem !important; font-size: 0.8rem !important; }
        .btn-lg { padding: 0.75rem 1.5rem !important; }
        .form-control, .custom-select { border-radius: 10px !important; padding: 0.6rem 1rem !important; }
        .card { border-radius: 16px !important; overflow: hidden; }
        .card-header { font-weight: 700; }
        .table th { font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; }
        .modal-content { border-radius: 16px !important; }
        .page-wrapper { min-height: 100vh; }
        .content-wrapper { background: transparent !important; }
        #wrapper #content-wrapper { background: transparent !important; }
        #content { background: transparent !important; }
        body, html { background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%) fixed; }
        footer.sticky-footer { margin-top: auto; }
    </style>
</head>

<body id="page-top">
    <div id="wrapper">
        <?php require __DIR__ . '/sidebar.php'; ?>
        <div id="content-wrapper" class="d-flex flex-column">
            <div id="content">
                <?php require __DIR__ . '/header.php'; ?>
                <div class="container-fluid">
                    <?php if (isset($_SESSION['success'])): ?>
                        <div class="alert alert-success alert-dismissible fade show glass-alert" role="alert">
                            <i class="fas fa-check-circle mr-2"></i><?= $_SESSION['success']; unset($_SESSION['success']); ?>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                    <?php endif; ?>
                    <?php if (isset($_SESSION['error'])): ?>
                        <div class="alert alert-danger alert-dismissible fade show glass-alert" role="alert">
                            <i class="fas fa-exclamation-circle mr-2"></i><?= $_SESSION['error']; unset($_SESSION['error']); ?>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                    <?php endif; ?>
                    <?php if (isset($_SESSION['warning'])): ?>
                        <div class="alert alert-warning alert-dismissible fade show glass-alert" role="alert">
                            <i class="fas fa-exclamation-triangle mr-2"></i><?= $_SESSION['warning']; unset($_SESSION['warning']); ?>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                    <?php endif; ?>
                    <?= isset($content) ? $content : '' ?>
                </div>
            </div>
            <?php require __DIR__ . '/footer.php'; ?>
        </div>
    </div>
    <a class="scroll-to-top rounded" href="#page-top"><i class="fas fa-angle-up"></i></a>
    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content glass-modal-content">
                <div class="modal-header"><h5 class="modal-title">Ready to Leave?</h5><button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>
                <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                    <a class="btn btn-primary" href="<?= $baseUrl ?>/logout">Logout</a>
                </div>
            </div>
        </div>
    </div>
    <script src="<?= $baseUrl ?>/vendor/jquery/jquery.min.js"></script>
    <script src="<?= $baseUrl ?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="<?= $baseUrl ?>/vendor/jquery-easing/jquery.easing.min.js"></script>
    <script src="<?= $baseUrl ?>/js/sb-admin-2.min.js"></script>
    <script src="<?= $baseUrl ?>/vendor/chart.js/Chart.min.js"></script>
    <script src="<?= $baseUrl ?>/vendor/datatables/jquery.dataTables.min.js"></script>
    <script src="<?= $baseUrl ?>/vendor/datatables/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
    <?= isset($extraScripts) ? $extraScripts : '' ?>
    <script>
    // Initialize sidebar accordion collapse
    $(document).ready(function() {
        $('#accordionSidebar .nav-link[data-toggle="collapse"]').on('click', function(e) {
            e.preventDefault();
            var target = $(this).data('target');
            $(target).collapse('toggle');
        });
    });
    </script>
</body>
</html>
