<?php
/**
 * Frontend Header Template
 * File: templates/layouts/frontend/header.php
 * Description: Main header navigation for public pages (homepage, about, contact, etc.)
 */
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="<?= asset('assets/images/favicon.png') ?>">
    <title><?= $page_title ?? 'rentidium' ?> - Nigeria's Premier Rental Marketplace</title>
    
    <!-- Meta Tags -->
    <meta name="description" content="<?= $meta_description ?? 'Rent anything, anytime in Nigeria. From electronics to vehicles, party equipment to tools.' ?>">
    <meta name="keywords" content="<?= $meta_keywords ?? 'rent, rental, Nigeria, Lagos, equipment rental, party rental, car rental' ?>">
    
    <!-- CSS Files -->
    <link href="assets/css/style.css" rel="stylesheet">
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- Start Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light sticky-top">
        <div class="container">
            <!-- Logo -->
            <a class="navbar-brand m-0" href="<?= url('/public/index.php') ?>">
                <img class="logo-white" src="<?= asset('assets/images/logo-white.png') ?>" alt="rentidium">
                <img class="logo-dark" src="<?= asset('assets/images/logo.png') ?>" alt="rentidium">
            </a>
            
            <div class="d-flex order-lg-2">
                <?php if (Auth::check()): ?>
                    <!-- Logged In User -->
                    <a href="<?= url('/' . Auth::userType() . '/index.php') ?>" 
                       class="d-flex align-items-center justify-content-center p-0 btn-user" 
                       data-bs-toggle="tooltip" 
                       data-bs-placement="bottom" 
                       data-bs-title="Dashboard">
                        <i class="fa-solid fa-gauge"></i>
                    </a>
                <?php else: ?>
                    <!-- Guest User -->
                    <a href="<?= url('/auth/login.php') ?>" 
                       class="d-flex align-items-center justify-content-center p-0 btn-user" 
                       data-bs-toggle="tooltip" 
                       data-bs-placement="bottom" 
                       data-bs-title="Sign In">
                        <i class="fa-solid fa-user-plus"></i>
                    </a>
                <?php endif; ?>
                
                <!-- Theme Toggle -->
                <button type="button" id="themeToggleBtn" class="align-items-center bg-transparent border-0 btn-user d-flex justify-content-center p-0">
                    <i class="fa-solid fa-moon"></i>
                </button>
                
                <!-- Add Listing Button -->
                <a href="<?= url('/auth/register.php') ?>?type=vendor" class="btn btn-primary d-none d-sm-flex fw-medium gap-2 hstack rounded-5">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                        <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
                    </svg>
                    <div class="vr d-none d-sm-inline-block"></div>
                    <span class="d-none d-sm-inline-block">List Your Item</span>
                </a>
                
                <!-- Mobile Toggle -->
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span id="nav-icon">
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                </button>
            </div>
            
            <!-- Navigation Menu -->
            <div class="collapse navbar-collapse" id="navbarContent">
                <ul class="navbar-nav m-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link <?= is_active_page('index') ?>" href="<?= url('/public/index.php') ?>">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?= is_active_page('browse') ?>" href="<?= url('/customer/browse.php') ?>">Browse Items</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Categories
                        </a>
                        <ul class="dropdown-menu">
                            <?php
                            $categories = get_main_categories();
                            foreach ($categories as $category):
                            ?>
                                <li>
                                    <a class="dropdown-item" href="<?= url('/customer/browse.php?category=' . $category['slug']) ?>">
                                        <i class="<?= $category['icon'] ?> me-2"></i><?= esc($category['name']) ?>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="<?= url('/public/about.php') ?>">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="<?= url('/public/contact.php') ?>">Contact</a>
                    </li>
                </ul>
                
                <div class="d-sm-none mt-3">
                    <a href="<?= url('/auth/register.php') ?>?type=vendor" class="btn btn-primary d-flex gap-2 hstack justify-content-center rounded-3 w-100">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
                        </svg>
                        <span>List Your Item</span>
                    </a>
                </div>
            </div>
        </div>
    </nav>
    <!-- End Navbar -->
    
    <?php
    // Display flash messages if any
    $flash_success = flash('success');
    if ($flash_success): 
        $success_message = is_array($flash_success) ? ($flash_success['message'] ?? $flash_success) : $flash_success;
    ?>
        <div class="container mt-3">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fa-solid fa-check-circle me-2"></i>
                <?php 
                    if (is_array($success_message)) {
                        echo implode('<br>', $success_message);
                    } else {
                        echo $success_message;
                    }
                ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    <?php endif; ?>
    
    <?php 
    $flash_error = flash('error');
    if ($flash_error): 
        $error_message = is_array($flash_error) ? ($flash_error['message'] ?? $flash_error) : $flash_error;
    ?>
        <div class="container mt-3">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fa-solid fa-exclamation-circle me-2"></i>
                <?php 
                    if (is_array($error_message)) {
                        echo implode('<br>', $error_message);
                    } else {
                        echo $error_message;
                    }
                ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    <?php endif; ?>
    
    <?php 
    $flash_warning = flash('warning');
    if ($flash_warning): 
        $warning_message = is_array($flash_warning) ? ($flash_warning['message'] ?? $flash_warning) : $flash_warning;
    ?>
        <div class="container mt-3">
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <i class="fa-solid fa-exclamation-triangle me-2"></i>
                <?php 
                    if (is_array($warning_message)) {
                        echo implode('<br>', $warning_message);
                    } else {
                        echo $warning_message;
                    }
                ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    <?php endif; ?>
    
    <?php 
    // Handle generic 'message' flash with type
    $flash_message = flash('message');
    if ($flash_message && is_array($flash_message) && isset($flash_message['type'], $flash_message['message'])): 
        $msg_type = $flash_message['type'];
        $msg_content = $flash_message['message'];
        
        $icon_map = [
            'success' => 'check-circle',
            'error' => 'exclamation-circle',
            'danger' => 'exclamation-circle',
            'warning' => 'exclamation-triangle',
            'info' => 'info-circle'
        ];
        $icon = $icon_map[$msg_type] ?? 'info-circle';
    ?>
        <div class="container mt-3">
            <div class="alert alert-<?= $msg_type ?> alert-dismissible fade show" role="alert">
                <i class="fa-solid fa-<?= $icon ?> me-2"></i>
                <?php 
                    if (is_array($msg_content)) {
                        echo implode('<br>', $msg_content);
                    } else {
                        echo $msg_content;
                    }
                ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    <?php endif; ?>
    
    <!-- Main Content Starts Here -->