<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
include "config/db.php";
include "includes/header.php";

// Get all categories (exclude Accessories and Kids Wear)
$categories = mysqli_query($conn, "SELECT * FROM categories WHERE category_name NOT IN ('Accessories','Kids Wear') ORDER BY category_name");
?>

<style>
    :root {
        --primary-color: #2c3e50;
        --secondary-color: #ff6b35;
        --accent-color: #3498db;
        --light-bg: #f8f9fa;
        --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        --hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    
    .category-page {
        background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
        min-height: 100vh;
    }
    
    .breadcrumb-nav {
        background: transparent;
        padding: 15px 0;
        margin: 0;
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .breadcrumb-nav .breadcrumb {
        background: transparent;
        padding: 0;
        margin: 0;
    }
    
    .breadcrumb-item a {
        color: var(--secondary-color);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s;
    }
    
    .breadcrumb-item a:hover {
        color: #e55a2b;
    }
    
    .breadcrumb-item.active {
        color: #6c757d;
    }

    
    /* Quick Filter Styles */
    .quick-filter-section {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        margin-bottom: 3rem;
        box-shadow: var(--card-shadow);
        border: 1px solid #e9ecef;
    }
    
    .filter-title {
        color: var(--primary-color);
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .filter-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .filter-btn {
        background: white;
        border: 2px solid #e9ecef;
        color: var(--primary-color);
        padding: 0.6rem 1.2rem;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        white-space: nowrap;
    }
    
    .filter-btn:hover {
        background: var(--secondary-color);
        border-color: var(--secondary-color);
        color: white;
        transform: translateY(-2px);
    }
    
    .filter-btn.active {
        background: var(--secondary-color);
        border-color: var(--secondary-color);
        color: white;
    }
    
    /* Categories Grid */
    .categories-grid {
        margin: 3rem 0;
    }
    
    .category-card {
        background: white;
        border-radius: 15px;
        overflow: hidden;
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .category-card:hover {
        transform: translateY(-10px);
        box-shadow: var(--hover-shadow);
        border-color: var(--secondary-color);
    }
    
    .category-icon {
        padding: 2rem 2rem 1rem;
        text-align: center;
    }
    
    .icon-circle {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        transition: all 0.3s ease;
    }
    
    .category-card:hover .icon-circle {
        transform: scale(1.1);
    }
    
    .category-icon i {
        font-size: 2.5rem;
        color: white;
    }
    
    .category-content {
        padding: 0 2rem 2rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    
    .category-title {
        color: var(--primary-color);
        font-size: 1.4rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
        text-align: center;
    }
    
    .category-description {
        color: #6c757d;
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
        text-align: center;
        line-height: 1.5;
    }
    
    .category-stats {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding: 1rem 0;
        border-top: 1px solid #e9ecef;
        border-bottom: 1px solid #e9ecef;
    }
    
    .outfit-count {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        color: var(--primary-color);
    }
    
    .price-tag {
        color: #28a745;
        font-weight: 600;
        font-size: 0.95rem;
    }

        
        .browse-btn {
            background: var(--secondary-color);
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 25px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
            text-align: center;
        }
        
        .browse-btn:hover {
            background: #e55a2b;
            color: white;
            transform: translateY(-2px);
        }
        
        /* Why Rent Section */
        .why-rent-section {
            background: linear-gradient(135deg, var(--primary-color) 0%, #1a252f 100%);
            border-radius: 20px;
            padding: 3rem;
            margin: 4rem 0;
            color: white;
        }
        
        .why-rent-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
        }
        
        .why-rent-subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 2rem;
        }
        
        .benefit-card {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .benefit-icon {
            font-size: 1.5rem;
        }
        
        .benefit-text h5 {
            margin: 0;
            font-weight: 600;
        }
        
        .benefit-text small {
            opacity: 0.8;
        }
        
        .cost-comparison {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            color: var(--primary-color);
            box-shadow: var(--card-shadow);
        }
        
        .cost-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            text-align: center;
        }
        
        .price-section {
            margin-bottom: 1.5rem;
        }
        
        .price-section h3 {
            font-weight: 700;
            margin: 0.5rem 0;
        }
        
        .savings-badge {
            background: var(--secondary-color);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            display: inline-block;
        }
        
        /* How It Works */
        .how-it-works {
            margin: 4rem 0;
        }
        
        .section-title {
            text-align: center;
            color: var(--primary-color);
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        
        .section-subtitle {
            text-align: center;
            color: #6c757d;
            margin-bottom: 3rem;
            font-size: 1.1rem;
        }
        
        .step-card {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            text-align: center;
            border: 1px solid #e9ecef;
            height: 100%;
            transition: all 0.3s ease;
        }
        
        .step-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--hover-shadow);
        }
        
        .step-number {
            width: 50px;
            height: 50px;
            background: var(--secondary-color);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 700;
            margin: 0 auto 1.5rem;
        }
        
        .step-icon {
            font-size: 2.5rem;
            color: var(--secondary-color);
            margin-bottom: 1rem;
        }
        
        .step-title {
            color: var(--primary-color);
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        
        .step-description {
            color: #6c757d;
            line-height: 1.5;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .page-header h1 {
                font-size: 2rem;
            }
            
            .page-header p {
                font-size: 1rem;
            }
            
            .quick-filter-section {
                padding: 1.5rem;
            }
            
            .filter-buttons {
                gap: 0.5rem;
            }
            
            .filter-btn {
                padding: 0.5rem 1rem;
                font-size: 0.9rem;
            }
            
            .why-rent-section {
                padding: 2rem;
            }
            
            .step-card {
                margin-bottom: 1.5rem;
            }
        }
    </style>
</head>
<body class="category-page">
    <div class="container">
        <!-- Breadcrumb Navigation -->
        <nav class="breadcrumb-nav">
            <ol class="breadcrumb">
                <!-- <li class="breadcrumb-item"><a href="index.php">Home</a></li>
                <li class="breadcrumb-item active">Categories</li> -->
            </ol>
        </nav>

        <!-- Page Header -->
        <div class="page-header">
            <h1>Browse Categories</h1>
            <p>Find the perfect outfit for every occasion</p>
        </div>

        <!-- Quick Filter -->
        <div class="quick-filter-section">
            <div class="filter-title">
                <i class="fas fa-filter"></i>
                <span>Quick Filter</span>
            </div>
            <div class="filter-buttons">
                <a href="products.php" class="filter-btn">
                    <i class="fas fa-th"></i>
                    <span>All Products</span>
                </a>
                <?php mysqli_data_seek($categories, 0); ?>
                <?php while($cat = mysqli_fetch_assoc($categories)): ?>
                <a href="products.php?cat=<?php echo $cat['id']; ?>" class="filter-btn">
                    <i class="fas fa-tshirt"></i>
                    <span><?php echo htmlspecialchars($cat['category_name']); ?></span>
                </a>
                <?php endwhile; ?>
            </div>
        </div>

        <!-- Categories Grid -->
        <div class="row categories-grid">
            <?php mysqli_data_seek($categories, 0); ?>
            <?php while($category = mysqli_fetch_assoc($categories)): 
                // Get product count for this category
                $cat_id = $category['id'];
                $product_count = mysqli_fetch_assoc(mysqli_query($conn, 
                    "SELECT COUNT(*) as count FROM products WHERE category_id = '$cat_id' AND stock > 0 AND (is_deleted = 0 OR is_deleted IS NULL)"
                ))['count'];
                
                // Set category-specific colors and icons
                $colors = [
                    'traditional wear' => ['color' => '#e74c3c', 'icon' => 'fa-hands-praying'],
                    'western wear' => ['color' => '#3498db', 'icon' => 'fa-shirt'],
                    'party wear' => ['color' => '#9b59b6', 'icon' => 'fa-champagne-glasses'],
                    'wedding wear' => ['color' => '#f1c40f', 'icon' => 'fa-ring'],
                    'casual wear' => ['color' => '#2ecc71', 'icon' => 'fa-user-tie'],
                    'designer wear' => ['color' => '#ff6b35', 'icon' => 'fa-crown']
                ];
                
                $cat_name_lower = strtolower($category['category_name']);
                $cat_color = isset($colors[$cat_name_lower]) ? $colors[$cat_name_lower]['color'] : '#ff6b35';
                $cat_icon = isset($colors[$cat_name_lower]) ? $colors[$cat_name_lower]['icon'] : 'fa-tshirt';
            ?>
            <div class="col-md-4 col-sm-6 mb-4">
                <div class="category-card">
                    <div class="category-icon">
                        <div class="icon-circle" style="background: <?php echo $cat_color; ?>;">
                            <i class="fas <?php echo $cat_icon; ?>"></i>
                        </div>
                    </div>
                    <div class="category-content">
                        <h3 class="category-title"><?php echo htmlspecialchars($category['category_name']); ?></h3>
                        <p class="category-description"><?php echo htmlspecialchars($category['description']); ?></p>
                        
                        <div class="category-stats">
                            <div class="outfit-count">
                                <i class="fas fa-tshirt"></i>
                                <span><?php echo $product_count; ?> outfits</span>
                            </div>
                            <div class="price-tag">
                                <i class="fas fa-rupee-sign"></i>
                                <span>From ₹299/day</span>
                            </div>
                        </div>
                        
                        <a href="products.php?cat=<?php echo $category['id']; ?>" class="browse-btn">
                            <i class="fas fa-eye"></i>
                            <span>Browse Collection</span>
                        </a>
                    </div>
                </div>
            </div>
            <?php endwhile; ?>
        </div>

        <!-- Why Rent Section -->
        <div class="why-rent-section">
            <div class="row align-items-center">
                <div class="col-lg-8 mb-4 mb-lg-0">
                    <h2 class="why-rent-title">
                        <i class="fas fa-percentage me-3"></i>Why Rent Instead of Buy?
                    </h2>
                    <p class="why-rent-subtitle">
                        Save up to 90% on designer outfits. Wear different styles for every occasion without the cost of buying.
                    </p>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="benefit-card">
                                <div class="benefit-icon" style="color: #2ecc71;">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                                <div class="benefit-text">
                                    <h5>90% Savings</h5>
                                    <small>Compared to buying</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="benefit-card">
                                <div class="benefit-icon" style="color: #3498db;">
                                    <i class="fas fa-truck"></i>
                                </div>
                                <div class="benefit-text">
                                    <h5>Free Delivery</h5>
                                    <small>Doorstep service</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="benefit-card">
                                <div class="benefit-icon" style="color: #9b59b6;">
                                    <i class="fas fa-spray-can-sparkles"></i>
                                </div>
                                <div class="benefit-text">
                                    <h5>Professional Cleaning</h5>
                                    <small>Included in rental</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <div class="cost-comparison">
                        <h4 class="cost-title">Cost Comparison</h4>
                        
                        <div class="price-section">
                            <small class="text-muted d-block">Buy Price</small>
                            <h3 class="text-danger"><del>₹15,000</del></h3>
                        </div>
                        
                        <div class="price-section">
                            <small class="text-muted d-block">Rent for 3 days</small>
                            <h3 class="text-success">₹1,500</h3>
                        </div>
                        
                        <div class="text-center mt-4">
                            <span class="savings-badge">90% Savings</span>
                        </div>
                        
                        <a href="products.php" class="btn btn-warning w-100 mt-4" style="background: var(--secondary-color); border: none; color: white; padding: 0.8rem; border-radius: 25px; font-weight: 600;">
                            <i class="fas fa-tshirt me-2"></i>Start Renting
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- How It Works -->
        <div class="how-it-works">
            <h2 class="section-title">How ShopNest Works</h2>
            <p class="section-subtitle">Rent designer clothes in 3 simple steps</p>
            
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="step-card">
                        <div class="step-number">1</div>
                        <div class="step-icon">
                            <i class="fas fa-search"></i>
                        </div>
                        <h3 class="step-title">Browse & Select</h3>
                        <p class="step-description">Choose from our curated collection of designer outfits</p>
                    </div>
                </div>
                
                <div class="col-md-4 mb-4">
                    <div class="step-card">
                        <div class="step-number">2</div>
                        <div class="step-icon">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                        <h3 class="step-title">Choose Dates</h3>
                        <p class="step-description">Select your rental period (3-14 days)</p>
                    </div>
                </div>
                
                <div class="col-md-4 mb-4">
                    <div class="step-card">
                        <div class="step-number">3</div>
                        <div class="step-icon">
                            <i class="fas fa-truck"></i>
                        </div>
                        <h3 class="step-title">Wear & Return</h3>
                        <p class="step-description">Free delivery, wear it, and we'll pick it up</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <?php include "includes/footer.php"; ?>