<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// Get cart count for all pages
$cart_count = isset($_SESSION['cart']) ? count($_SESSION['cart']) : 0;

// Get user verification status if logged in
$user_verified = false;

// Check if user is logged in and include db connection
if (isset($_SESSION['user_id'])) {
    // Determine correct path to db.php
    if (file_exists(__DIR__ . '/../config/db.php')) {
        include_once __DIR__ . '/../config/db.php';
    } else if (file_exists(__DIR__ . '/../../config/db.php')) {
        include_once __DIR__ . '/../../config/db.php';
    }
    
    if (isset($conn)) {
        $user_id = $_SESSION['user_id'];
        $verification_query = mysqli_query($conn, 
            "SELECT id_verified FROM users WHERE id = $user_id"
        );
        if ($verification_query && mysqli_num_rows($verification_query) > 0) {
            $user_data = mysqli_fetch_assoc($verification_query);
            $user_verified = $user_data['id_verified'] == 1;
        }
    }
}

// Set page title if not defined
if (!isset($page_title)) {
    $page_title = 'ShopNest - Rent Designer Clothes';
}
// Base path (used so links work from admin/ or user/ subfolders)
$base = (strpos($_SERVER['PHP_SELF'], '/admin/') !== false || strpos($_SERVER['PHP_SELF'], '/user/') !== false) ? '../' : '';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $page_title; ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="<?php echo $base; ?>assets/css/style.css" rel="stylesheet">
    <style>
        :root {
            --primary-orange: #ff6b35;
            --secondary-orange: #ff8e53;
            --primary-blue: #3498db;
            --dark-blue: #2c3e50;
            --light-gray: #f8f9fa;
        }
        
        .btn-orange {
            background: linear-gradient(45deg, var(--primary-orange), var(--secondary-orange));
            border: none;
            color: white;
            padding: 10px 25px;
            border-radius: 25px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-orange:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
            color: white;
        }
        
        .navbar {
            background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
            padding: 8px 0;
            margin: 0;
            width: 100%;
        }
        
        .navbar .container {
            padding-left: 15px;
            padding-right: 15px;
            max-width: 100%;
            margin: 0 auto;
        }
        
        .navbar-brand {
            font-weight: 700;
            font-size: 1.6rem;
            color: #ff6b35 !important;
        }
        
        .navbar-nav .nav-link {
            color: white !important;
            padding: 8px 12px;
            transition: all 0.3s;
        }
        
        .navbar-nav .nav-link:hover {
            color: var(--primary-orange) !important;
            transform: translateY(-2px);
        }
        
        .verification-badge {
            font-size: 0.7rem;
            padding: 2px 8px;
            margin-left: 5px;
        }
        
        /* Hero Section with Video Styles (video confined to hero section)
           Video sits absolutely inside the hero and spans 100% width. */
        .hero-section {
            position: relative;
            padding: 0; /* video will cover entire hero area */
            margin: 0; /* start below the header (body padding-top reserves navbar space) */
            color: white;
            text-align: center;
            overflow: hidden;
            min-height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hero-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -2;
            pointer-events: none;
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(44, 62, 80, 0.55), rgba(44, 62, 80, 0.55));
            z-index: -1;
            pointer-events: none;
        }

        .hero-content {
            position: relative;
            z-index: 1;
            width: 100%;
            padding: 40px 15px 30px; /* space inside hero so content doesn't touch edges */
        }
        
        /* Dashboard and Card Styles */
        .dashboard-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: all 0.3s;
            text-align: center;
            border-top: 4px solid var(--primary-orange);
        }
        
        .dashboard-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        
        .how-step {
            background: white;
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            height: 100%;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f9f9f9;
            padding-top: 65px; /* Space for fixed navbar */
        }
        
        .main-container {
            min-height: calc(100vh - 180px);
            padding: 0;
            max-width: 100%;
            margin: 0;
        }
        
        /* Ensure all sections have consistent width and padding */
        * {
            margin: 0;
            padding: 0;
        }
        
        html, body {
            width: 100%;
            overflow-x: hidden;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            body {
                padding-top: 55px;
            }
            
            .navbar {
                padding: 10px 0;
            }
            
            .navbar-brand {
                font-size: 1.4rem;
            }
            
            .navbar-nav .nav-link {
                padding: 8px 10px;
                font-size: 0.9rem;
            }
            
            .hero-section {
                min-height: 400px;
            }
            
            .hero-content {
                padding: 40px 15px 30px;
            }
            
            .hero-section h1 {
                font-size: 2rem;
            }
            
            .hero-section .lead {
                font-size: 1rem;
            }
            
            .dashboard-card {
                padding: 20px;
                margin-bottom: 15px;
            }
            
            .dashboard-card h2 {
                font-size: 1.8rem;
            }
            
            .how-step {
                padding: 20px;
                margin-bottom: 15px;
            }
            
            .verification-badge {
                font-size: 0.6rem;
                padding: 2px 6px;
            }
            
            .dropdown-menu {
                min-width: 200px;
            }
        }
        
        @media (max-width: 480px) {
            .navbar-brand {
                font-size: 1.2rem;
            }
            
            .navbar-nav .nav-link {
                padding: 6px 8px;
                font-size: 0.85rem;
            }
            
            .hero-section {
                min-height: 350px;
            }
            
            .hero-section h1 {
                font-size: 1.5rem;
            }
            
            .hero-section .lead {
                font-size: 0.95rem;
            }
            
            .container {
                padding-left: 10px;
                padding-right: 10px;
            }
            
            .btn-sm {
                padding: 0.3rem 0.6rem;
                font-size: 0.75rem;
            }
            
            .card {
                border-radius: 10px;
            }
            
            .card-body {
                padding: 12px;
            }
            
            h1, h2, h3, h4, h5, h6 {
                font-size: calc(1rem + 0.5vw);
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top shadow">
        <div class="container-fluid px-4">
            <a class="navbar-brand" href="<?php echo $base; ?>index.php">
                <i class="fas fa-tshirt me-2"></i>ShopNest
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-center">
                    <li class="nav-item">
                        <a class="nav-link" href="<?php echo $base; ?>index.php">
                            <i class="fas fa-home me-1"></i>Home
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="<?php echo $base; ?>products.php">
                            <i class="fas fa-tshirt me-1"></i>Rent Clothes
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="<?php echo $base; ?>categories.php">
                            <i class="fas fa-tags me-1"></i>Categories
                        </a>
                    </li>
                    
                    <!-- Cart Icon -->
                    <li class="nav-item">
                        <a class="nav-link position-relative" href="<?php echo $base; ?>cart.php">
                            <i class="fas fa-shopping-cart me-1"></i>Cart
                            <?php if($cart_count > 0): ?>
                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                    <?php echo $cart_count; ?>
                                </span>
                            <?php endif; ?>
                        </a>
                    </li>

                    <?php if(isset($_SESSION['user_id'])): ?>
                        <!-- User Dropdown -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle text-white" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-user me-1"></i><?php echo htmlspecialchars($_SESSION['user_name']); ?>
                                <?php if($user_verified): ?>
                                    <span class="badge bg-success verification-badge">
                                        <i class="fas fa-check-circle"></i> Verified
                                    </span>
                                <?php else: ?>
                                    <span class="badge bg-warning verification-badge">
                                        <i class="fas fa-clock"></i> Unverified
                                    </span>
                                <?php endif; ?>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                                <!-- Verification summary (always visible) -->
                                <li class="px-3 py-2">
                                    <div class="d-flex align-items-center">
                                        <?php if($user_verified): ?>
                                            <span class="badge bg-success verification-badge me-2"><i class="fas fa-check-circle"></i> Verified</span>
                                        <?php else: ?>
                                            <span class="badge bg-warning verification-badge me-2"><i class="fas fa-clock"></i> Unverified</span>
                                        <?php endif; ?>
                                        <div class="ms-2">
                                            <small class="text-muted">ID Verification</small><br>
                                            <a href="<?php echo $base; ?>user/id-verification.php" class="text-decoration-none small">Manage verification</a>
                                        </div>
                                    </div>
                                </li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="<?php echo $base; ?>user/profile.php"><i class="fas fa-user-cog me-2"></i>Profile</a></li>
                                <li><a class="dropdown-item" href="<?php echo $base; ?>user/my-rentals.php"><i class="fas fa-box me-2"></i>My Rentals</a></li>
                                <li><a class="dropdown-item" href="<?php echo $base; ?>user/wishlist.php"><i class="fas fa-heart me-2"></i>Wishlist</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <?php if(!$user_verified): ?>
                                <li><a class="dropdown-item text-warning" href="<?php echo $base; ?>user/id-verification.php">
                                    <i class="fas fa-id-card me-2"></i>Start Verification
                                </a></li>
                                <?php endif; ?>
                                <li><a class="dropdown-item text-danger" href="<?php echo $base; ?>logout.php"><i class="fas fa-sign-out-alt me-2"></i>Logout</a></li>
                            </ul>
                        </li>
                    <?php else: ?>
                        <!-- Login/Register Buttons -->
                        <li class="nav-item ms-2">
                            <a class="nav-link" href="<?php echo $base; ?>user/login.php">
                                <i class="fas fa-sign-in-alt me-1"></i>Login
                            </a>
                        </li>
                        <li class="nav-item ms-2">
                            <a class="btn btn-orange" href="<?php echo $base; ?>user/register.php">
                                <i class="fas fa-user-plus me-1"></i>Sign Up Free
                            </a>
                        </li>
                    <?php endif; ?>
                </ul>
            </div>
        </div>
    </nav>
