# Sistem de Categorii cu Mega-Menu - Ghid de Instalare și Utilizare

## 📋 Cuprins
- [Introducere](#introducere)
- [Instalare Rapidă](#instalare-rapidă)
- [Structura Bazei de Date](#structura-bazei-de-date)
- [Utilizare](#utilizare)
- [Configurare și Personalizare](#configurare-și-personalizare)
- [Administrare Categorii](#administrare-categorii)
- [Întrebări Frecvente](#întrebări-frecvente)

---

## 🎯 Introducere

Acest sistem oferă un **mega-menu dinamic complet** pentru categorii de produse cu:

✅ **Ierarhie pe 3+ niveluri** - categorii root, subcategorii, items  
✅ **Mega-menu responsive** - generat automat din baza de date  
✅ **Carduri promoționale** - cu imagini, prețuri, badge-uri  
✅ **Comportament inteligent** - static pe homepage, dropdown pe alte pagini  
✅ **100% personalizabil** - iconițe, culori, layout, poziții  
✅ **SEO optimizat** - slug-uri unice, meta tags  
✅ **Backward compatible** - funcționează alături de sistemul vechi  

---

## 🚀 Instalare Rapidă

### Pas 1: Import Schema

Deschideți phpMyAdmin și:

1. Selectați baza de date `cartzilla_shop`
2. Click pe tab-ul **"Import"**
3. Click **"Choose File"** și selectați `migration_categories_system.sql`
4. Click **"Go"** (Execute)

**SAU** prin linie de comandă:
```bash
cd C:\xampp\htdocs
mysql -u root -p cartzilla_shop < database/migration_categories_system.sql
```

### Pas 2: Verificare

După import, veți avea:
- ✅ Tabelul `categories` cu ~50+ categorii preîncărcate
- ✅ Tabelul `category_promo_cards` cu 3 carduri promoționale
- ✅ Tabelul `category_settings` cu setări predefinite
- ✅ Mega-menu funcțional automat în site

### Pas 3: Testare

1. Deschideți `http://localhost/index.php` (homepage)
   - Veți vedea mega-menu **STATIC** (deschis permanent)
   
2. Deschideți orice altă pagină (ex: `http://localhost/shop-catalog-electronics.php`)
   - Veți vedea mega-menu **DROPDOWN** (se deschide la hover)

✨ **Gata! Sistemul este activ!**

---

## 📊 Structura Bazei de Date

### Tabelul `categories`

Conține ierarhia completă de categorii:

```sql
CREATE TABLE categories (
    id INT PRIMARY KEY AUTO_INCREMENT,
    parent_id INT NULL,                    -- NULL = categorie root
    name VARCHAR(255) NOT NULL,            -- Numele categoriei
    slug VARCHAR(255) NOT NULL UNIQUE,     -- URL-friendly (ex: laptops-tablets)
    description TEXT NULL,                 -- Descriere SEO
    icon VARCHAR(100) NULL,                -- Clasa CSS iconită (ex: ci-computer)
    image_url VARCHAR(500) NULL,           -- Imagine reprezentativă
    url VARCHAR(500) NULL,                 -- Link către pagina categoriei
    position INT DEFAULT 0,                -- Ordinea de afișare
    is_active TINYINT(1) DEFAULT 1,        -- Activ/Inactiv
    show_in_menu TINYINT(1) DEFAULT 1,     -- Vizibil în mega-menu
    has_megamenu TINYINT(1) DEFAULT 0,     -- Are submeniu extins
    megamenu_layout VARCHAR(50),           -- Layout: 2-col, 3-col, 4-col
    seo_title VARCHAR(255) NULL,
    seo_description TEXT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
```

**Ierarhie:**
- **Nivel 0** (parent_id = NULL): Categorii principale (ex: "Computers & Accessories")
- **Nivel 1**: Subcategorii/Grupuri (ex: "Computers", "Accessories")
- **Nivel 2**: Items finale (ex: "Laptops & Tablets")

### Tabelul `category_promo_cards`

Carduri promoționale afișate în mega-menu:

```sql
CREATE TABLE category_promo_cards (
    id INT PRIMARY KEY AUTO_INCREMENT,
    category_id INT NOT NULL,              -- Pentru ce categorie
    title VARCHAR(255) NOT NULL,           -- Titlu produs/ofertă
    subtitle TEXT NULL,                    -- "Deal of the week"
    badge_text VARCHAR(100) NULL,          -- "Save up to $400"
    badge_bg_color VARCHAR(50),            -- danger, success, warning
    price_original DECIMAL(10,2) NULL,     -- Preț original
    price_sale DECIMAL(10,2) NULL,         -- Preț reducere
    price_label VARCHAR(100) NULL,         -- "Starts from"
    image_url VARCHAR(500) NOT NULL,       -- Imagine produs
    image_alt VARCHAR(255) NULL,
    icon VARCHAR(100) NULL,                -- Icon brand (ci-apple, ci-google)
    button_text VARCHAR(100),              -- "Shop now"
    button_url VARCHAR(500) NOT NULL,
    bg_color VARCHAR(50),                  -- Fundal card
    position INT DEFAULT 0,
    is_active TINYINT(1) DEFAULT 1
);
```

### Tabelul `category_settings`

Setări globale pentru comportament:

| Setting Key | Default | Descriere |
|------------|---------|-----------|
| `homepage_static_menu` | 1 | Mega-menu static pe homepage (1=da, 0=nu) |
| `hover_trigger` | hover | Trigger deschidere: "hover" sau "click" |
| `hover_delay` | 200 | Delay hover în milisecunde |
| `max_megamenu_columns` | 3 | Nr maxim coloane în mega-menu |
| `show_mobile_all_categories` | 1 | Buton "All Categories" pe mobile |
| `min_menu_height` | 561.33 | Înălțime pentru 12 categorii nivel 0 (auto-calc pentru > 12) |

---

## 💻 Utilizare

### Afișare Mega-Menu în Template

Mega-menu-ul se afișează **automat** în `includes/header.php` prin funcția:

```php
<?php echo renderCategoryMegaMenu($isHomePage); ?>
```

### Detectare Automată Homepage

Sistemul detectează automat dacă utilizatorul este pe homepage:

```php
// În header.php (deja implementat)
$isHomePage = (strpos($currentPage, '/index.php') !== false || 
               strpos($currentPage, '/') === strlen($currentPage) - 1 || 
               $currentPage === '/' || 
               empty(parse_url($currentPage, PHP_URL_PATH)) || 
               parse_url($currentPage, PHP_URL_PATH) === '/');
```

### Folosire Manuală

```php
<?php
require_once 'includes/CategoryManager.php';

// Get instance
$categoryManager = CategoryManager::getInstance();

// Render menu (automatic homepage detection)
echo $categoryManager->renderCategoriesMenu($isHomePage);

// Get all root categories
$rootCategories = $categoryManager->getRootCategories();

// Get subcategories
$subcategories = $categoryManager->getSubcategories($categoryId);

// Get promo card
$promoCard = $categoryManager->getPromoCard($categoryId);

// Get category by slug
$category = $categoryManager->getCategoryBySlug('laptops-tablets');

// Get breadcrumbs
$breadcrumbs = $categoryManager->getCategoryBreadcrumbs($categoryId);
?>
```

---

## ⚙️ Configurare și Personalizare

### Modificare Setări Globale

```sql
-- Dezactivare mega-menu static pe homepage (devine dropdown)
UPDATE category_settings 
SET setting_value = '0' 
WHERE setting_key = 'homepage_static_menu';

-- Schimbare trigger de la hover la click
UPDATE category_settings 
SET setting_value = 'click' 
WHERE setting_key = 'hover_trigger';

-- Modificare delay hover
UPDATE category_settings 
SET setting_value = '300' 
WHERE setting_key = 'hover_delay';

-- Modificare înălțime minimă mega-menu (pentru mai multe/puține categorii)
UPDATE category_settings 
SET setting_value = '654.92' 
WHERE setting_key = 'min_menu_height';

-- NOTĂ IMPORTANTĂ:
-- Dacă aveți MAI MULT de 12 categorii nivel 0, înălțimea se calculează AUTOMAT:
-- Înălțime = nr_categorii × 46.78px
-- 
-- Această setare afectează DOAR cazurile cu <= 12 categorii.
-- Pentru > 12 categorii, sistemul calculează dinamic pentru a evita overflow-ul.
```

### Personalizare per Categorie

```sql
-- Dezactivare temporară categorie
UPDATE categories 
SET is_active = 0 
WHERE slug = 'video-games';

-- Ascundere din mega-menu (dar rămâne activă)
UPDATE categories 
SET show_in_menu = 0 
WHERE slug = 'powerbanks';

-- Schimbare iconită
UPDATE categories 
SET icon = 'ci-smart-home' 
WHERE slug = 'smart-home';

-- Schimbare poziție (ordinea de afișare)
UPDATE categories 
SET position = 1 
WHERE slug = 'smartphones-tablets';

-- Schimbare layout mega-menu
UPDATE categories 
SET megamenu_layout = '2-col' 
WHERE slug = 'cameras-photo-video';
```

### Iconițe Disponibile (Cartzilla Icons)

Exemple de iconițe pe care le puteți folosi:

| Icon Class | Descriere |
|-----------|-----------|
| `ci-computer` | Computer |
| `ci-smartphone-2` | Smartphone |
| `ci-camera-2` | Camera foto |
| `ci-headphones-2` | Căști |
| `ci-game` | Gaming |
| `ci-watch-2` | Smartwatch |
| `ci-home` | Smart Home |
| `ci-printer-2` | Imprimantă |
| `ci-battery-2` | Baterie |
| `ci-monitor-2` | Monitor/TV |
| `ci-speaker-2` | Boxe |
| `ci-hard-drive-2` | HDD/SSD |
| `ci-powerbank` | Powerbank |

[**Lista completă**](http://localhost/docs/icon-font.html)

---

## 🛠️ Administrare Categorii

### Adăugare Categorie Nouă (Root)

```sql
INSERT INTO categories 
(parent_id, name, slug, icon, url, position, has_megamenu, megamenu_layout) 
VALUES 
(NULL, 'Smart Home', 'smart-home', 'ci-home', '/shop-catalog-electronics.php', 13, 1, '3-col');

-- Obține ID-ul categoriei create
SET @cat_smart_home = LAST_INSERT_ID();
```

### Adăugare Subcategorie

```sql
-- Presupunem că categoria "Smart Home" are ID = 100
INSERT INTO categories 
(parent_id, name, slug, url, position) 
VALUES 
(100, 'Security Systems', 'security-systems', '/shop-catalog-electronics.php', 1),
(100, 'Smart Lighting', 'smart-lighting', '/shop-catalog-electronics.php', 2),
(100, 'Smart Speakers', 'smart-speakers', '/shop-catalog-electronics.php', 3);
```

### Adăugare Card Promoțional

```sql
INSERT INTO category_promo_cards 
(category_id, title, badge_text, price_sale, image_url, button_url) 
VALUES 
(100, 'Smart Home Bundle', 'Save 30%', 299.99, '/assets/img/mega-menu/smart-home.png', '/shop-catalog-electronics.php');
```

### Ștergere Categorie

```sql
-- ATENȚIE: Șterge categoria și TOATE subcategoriile (CASCADE)
DELETE FROM categories WHERE id = 100;
```

### Modificare Ordine Categorii

```sql
-- Ordinea se face după câmpul position (mai mic = mai sus)
UPDATE categories SET position = 1 WHERE slug = 'computers-accessories';
UPDATE categories SET position = 2 WHERE slug = 'smartphones-tablets';
UPDATE categories SET position = 3 WHERE slug = 'headphones';
```

---

## ❓ Întrebări Frecvente

### 1. Cum activez/dezactivez mega-menu-ul static pe homepage?

```sql
-- Activare (static)
UPDATE category_settings SET setting_value = '1' WHERE setting_key = 'homepage_static_menu';

-- Dezactivare (dropdown)
UPDATE category_settings SET setting_value = '0' WHERE setting_key = 'homepage_static_menu';
```

### 2. Cum schimb iconița unei categorii?

```sql
UPDATE categories SET icon = 'ci-smartphone-2' WHERE slug = 'mobile-phones';
```

Vezi lista completă de iconițe la: `http://localhost/docs/icon-font.html`

### 3. Cum reordonez categoriile în meniu?

```sql
-- Mai mic = mai sus în meniu
UPDATE categories SET position = 1 WHERE slug = 'prima-categorie';
UPDATE categories SET position = 2 WHERE slug = 'a-doua-categorie';
UPDATE categories SET position = 3 WHERE slug = 'a-treia-categorie';
```

### 4. Cum ascund o categorie temporar?

```sql
-- Ascunde complet (nu apare nicăieri)
UPDATE categories SET is_active = 0 WHERE slug = 'categoria-mea';

-- Ascunde doar din mega-menu (dar rămâne activă)
UPDATE categories SET show_in_menu = 0 WHERE slug = 'categoria-mea';
```

### 5. Cum adaug o imagine la cardul promoțional?

1. Încărcați imaginea în `/assets/img/mega-menu/electronics/`
2. Actualizați baza de date:

```sql
UPDATE category_promo_cards 
SET image_url = '/assets/img/mega-menu/electronics/my-product.png'
WHERE id = 1;
```

### 6. Pot avea mai mult de 3 niveluri?

**Da!** Structura suportă oricâte niveluri, dar pentru UX optim se recomandă maximum 3 niveluri în mega-menu.

### 7. Sistemul vechi (din products table) mai funcționează?

**Da!** Sistemul este backward compatible. Dacă tabelul `categories` nu există sau este gol, se va folosi automat sistemul vechi din `products`.

### 8. Cum creez un backup?

```bash
# Backup doar categorii
mysqldump -u root -p cartzilla_shop categories category_promo_cards category_settings > backup_categories.sql

# Restore
mysql -u root -p cartzilla_shop < backup_categories.sql
```

### 9. Cum resetez tot la starea inițială?

```sql
-- Șterge toate datele
DROP TABLE IF EXISTS category_promo_cards;
DROP TABLE IF EXISTS category_settings;
DROP TABLE IF EXISTS categories;

-- Reimportă migration
-- Apoi rulați din nou migration_categories_system.sql prin phpMyAdmin
```

### 10. Mega-menu-ul nu se deschide la hover

Verificați:
1. Bootstrap JavaScript este inclus în pagină
2. Categoria are `has_megamenu = 1`
3. Există subcategorii pentru categoria respectivă
4. Setting-ul `hover_trigger` este setat pe 'hover' în `category_settings`

---

## 📞 Suport

Pentru probleme sau întrebări:
1. Verificați acest README
2. Inspectați console-ul browser-ului pentru erori JavaScript
3. Verificați log-urile PHP în `C:\xampp\php\logs\php_error_log`

---

**Versiune:** 1.0  
**Data:** 2025-11-30  
**Compatibil cu:** PHP 7.4+, MySQL 5.7+, Bootstrap 5.3+

