<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="assets/images/favicon.png">
    <title><?= isset($page_title) ? $page_title . ' - ' : '' ?>rentidium - Rental Marketplace</title>
    <link href="assets/plugins/aos/aos.min.css" rel="stylesheet">
    <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/plugins/fontawesome/css/all.min.css" rel="stylesheet">
    <link href="assets/plugins/OwlCarousel2/css/owl.carousel.min.css" rel="stylesheet">
    <link href="assets/plugins/OwlCarousel2/css/owl.theme.default.min.css" rel="stylesheet">
    <link href="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/fancy_fileupload.css" rel="stylesheet">
    <link href="assets/plugins/ion.rangeSlider/ion.rangeSlider.min.css" rel="stylesheet">
    <link href="assets/plugins/magnific-popup/magnific-popup.css" rel="stylesheet">
    <link href="assets/plugins/select2/select2.min.css" rel="stylesheet">
    <link href="assets/plugins/select2-bootstrap-5/select2-bootstrap-5-theme.min.css" rel="stylesheet">
    <!-- Custom style for this template -->
    <link href="assets/css/style.css" rel="stylesheet">
    
    <?php if (isset($additional_css)): ?>
        <?php foreach ($additional_css as $css): ?>
            <link href="<?= $css ?>" rel="stylesheet">
        <?php endforeach; ?>
    <?php endif; ?>
</head>

<body <?= isset($body_class) ? 'class="' . $body_class . '"' : '' ?>>
    <?php include __DIR__ . '/navbar.php'; ?>


<!-- LOGIN NOTIFICATION -->
 <?php if (isset($_SESSION['login_success']) && $_SESSION['login_success'] === true): ?>
    <?php unset($_SESSION['login_success']); ?>
    
    <div id="loginSuccessToast" style="position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px;">
        <div class="alert alert-success alert-dismissible fade show shadow-lg" role="alert" style="border-left: 4px solid #28a745; animation: slideInRight 0.3s ease-out;">
            <div class="d-flex align-items-center">
                <i class="fas fa-check-circle fa-lg me-3" style="color: #28a745;"></i>
                <div>
                    <strong>Welcome back!</strong>
                    <div class="small">You are successfully logged in</div>
                </div>
            </div>
        </div>
    </div>
    
    <style>
        @keyframes slideInRight {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        @keyframes slideOutRight {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(100%); opacity: 0; }
        }
        .toast-fadeout { animation: slideOutRight 0.3s ease-out forwards; }
    </style>
    
    <script>
        setTimeout(function() {
            const toast = document.getElementById('loginSuccessToast');
            if (toast) {
                toast.querySelector('.alert').classList.add('toast-fadeout');
                setTimeout(() => toast.remove(), 500);
            }
        }, 3000);
    </script>
<?php endif; ?>
<!-- LOGIN NOTIFICATION -->