# BS3 → BS5 Migracijski plan

## Kontekst i zatečeno stanje

### Verzije biblioteka (verificirano console.log dijagnostikom)
- **Bootstrap CSS**: v3.3.6 — `/public/bistro/css/bootstrap.min.css`
- **Bootstrap JS**: v3.3.6 — `/public/bistro/js/bootstrap.min.js`
- **jQuery**: v2.2.3 — `/public/bistro/js/jquery-2.2.3.js`
- **Owl Carousel**: učitan
- **Revolution Slider**: učitan
- **FancyBox**: v2.1.5

### npm / Vite (resources/)
- `package.json` ima `bootstrap: ^5.2.3` (BS5) i `@popperjs/core` kao devDependency
- `resources/sass/app.scss` importa `bootstrap/scss/bootstrap` — ali taj CSS **ne koristi bistro layout** (koristi ga samo `layouts/app.blade.php`)
- `resources/js/app.js` → `resources/js/bootstrap.js` — importa BS5 + axios
- Bistro layout (`layouts/bistro.blade.php`) **ne koristi Vite build** — servira statičke datoteke iz `/public/bistro/`

### Ključna arhitekturalna napomena
Bistro tema ima vlastiti grid `zerogrid.css` (`.col-1-2`, `.col-1-3` itd.) ali **ne koristi se u blade fileovima** — sve koristi BS3 grid (`col-md-*`, `col-sm-*`).  
BS3 i BS5 dijele iste nazive za grid: `col-md-*`, `col-sm-*`, `col-lg-*`, `container`, `row` — **te klase ne treba mijenjati**.

### CSS koji se ne dira
Sve klase u sljedećim fileovima su custom theme klase — ne ovise o BS verziji i **ne mijenjaju se**:
- `style.css`: `.bg_bistro`, `.padding`, `.feature`, `.grid_layout`, `.page_header`, `.heading_space`, `#facts`, itd.
- `navigation.css`: Revolution Slider navigacija (`.ares`, `.tparrows`) — ne sadrži BS navbar selektore
- `zerogrid.css`, `animate.min.css`, `loader.css`, `bistro-icons.css`, `font-awesome.min.css`

`style.css` ima selektore koji targetiraju BS3 navbar klase (`.navbar-default`, `.navbar-toggle`, `.icon-bar`, `#navigation.affix`) — te selektore **ne mijenjamo jer navbar zadržava te klase** (vidi Fazu 3).

---

## Kompletni inventar izmjena po kategorijama

### A. JS data atributi (BS3 → BS5)
| BS3 | BS5 | Datoteka | Linija |
|---|---|---|---|
| `data-spy="affix"` | ukloniti, zamijeniti JS scroll listenerom | `partials/bistro/header.blade.php` | 21 |
| `data-offset-top="20"` | ukloniti (dio affix-a) | `partials/bistro/header.blade.php` | 21 |
| `data-toggle="collapse"` | `data-bs-toggle="collapse"` | `partials/bistro/header.blade.php` | 27 |
| `data-target="#fixed-collapse-navbar"` | `data-bs-target="#fixed-collapse-navbar"` | `partials/bistro/header.blade.php` | 27 |
| `data-toggle="dropdown"` | `data-bs-toggle="dropdown"` | `partials/bistro/header.blade.php` | 68 |
| `data-dismiss="alert"` | `data-bs-dismiss="alert"` | `home.blade.php` | 28 |
| `data-dismiss="alert"` | `data-bs-dismiss="alert"` | `admin/reservations/index.blade.php` | 29, 38, 47 |
| `data-dismiss="alert"` | `data-bs-dismiss="alert"` | `admin/menu/index.blade.php` | 29, 38 |
| `data-dismiss="alert"` | `data-bs-dismiss="alert"` | `admin/daily-menu/index.blade.php` | 29, 38 |
| `data-dismiss="alert"` | `data-bs-dismiss="alert"` | `livewire/admin/slider-manager.blade.php` | 5 |
| `data-toggle="modal"` | `data-bs-toggle="modal"` | `admin/menu/index.blade.php` | 47, 69, 72, 121 |
| `data-target="#addCategoryModal"` itd. | `data-bs-target="..."` | `admin/menu/index.blade.php` | 47, 69, 72, 121 |
| `data-dismiss="modal"` | `data-bs-dismiss="modal"` | `admin/menu/index.blade.php` | 153, 170, 187, 221, 239, 278, 304, 321 |
| `data-toggle="modal"` | `data-bs-toggle="modal"` | `admin/daily-menu/index.blade.php` | 74, 100, 103, 136 |
| `data-target="..."` | `data-bs-target="..."` | `admin/daily-menu/index.blade.php` | 74, 100, 103, 136 |
| `data-dismiss="modal"` | `data-bs-dismiss="modal"` | `admin/daily-menu/index.blade.php` | 168, 185, 202, 219, 237, 254, 284, 301 |

### B. Affix plugin (uklonjen u BS4+)
`data-spy="affix"` na `#navigation` zamjenjuje se malim inline scroll listenerom u layoutu.  
`style.css` vec ima `#navigation.affix { position: fixed; background-color: rgba(0,0,0,0.73); }` — CSS ostaje netaknut, samo se klasa `.affix` dodaje JS-om:
```js
window.addEventListener('scroll', function () {
    var nav = document.getElementById('navigation');
    if (nav) {
        nav.classList.toggle('affix', window.scrollY > 20);
    }
});
```

### C. Navbar struktura — ZADRŽATI STARE KLASE
`style.css` direktno targetira `.navbar-default`, `.navbar-toggle`, `.icon-bar`, `#navigation.affix .navbar-toggle`.  
**Rješenje**: ne mijenjamo HTML klase na navbar-u, mijenjamo samo `data-*` atribute.  
`navbar-header` div (BS3 wrapper) ostaje — nije štetan u BS5, bez njega bi trebali mijenjati i CSS.

### D. Grid — BS3 klase identične u BS5 (ne mijenjaju se)
`col-md-*`, `col-sm-*`, `col-lg-*`, `container`, `row` — isti nazivi u obje verzije. **Nije potrebna izmjena.**

### E. Grid — što se mijenja
| BS3 | BS5 | Datoteka | Linija |
|---|---|---|---|
| `col-xs-12` | `col-12` | `pages/home.blade.php` | 425, 432, 439, 446 |
| `col-md-offset-2` | `offset-md-2` | `pages/home.blade.php` | 365, i komentar 547 |
| `col-md-offset-2` | `offset-md-2` | `pages/about.blade.php` | 123 |
| `col-md-offset-2` | `offset-md-2` | `pages/reservation-confirmation.blade.php` | 285 (u inline CSS stringu) |
| `col-md-offset-2` | `offset-md-2` | `errors/419,403,429,401,404,500,503.blade.php` | 25 (svaki) |
| `col-md-offset-3` | `offset-md-3` | `auth/login.blade.php` | 25 |

### F. Utility klase
| BS3 | BS5 | Datoteka | Linija |
|---|---|---|---|
| `pull-left` | `float-start` | `partials/bistro/header.blade.php` | 6 |
| `pull-right` | `float-end` | `partials/bistro/header.blade.php` | 7 |
| `hidden-xs` | `d-none d-sm-inline` | `partials/bistro/header.blade.php` | 6 (na `<p>` tagu) |
| `pull-right` | `float-end` (ili ostaviti kao je — `fa` ikona) | `pages/menu.blade.php` | 292 (na `<i>` tagu, stilizacija) |

**Napomena za `pull-right` u menu.blade.php ln 292**: radi se o Font Awesome ikoni za toggle jelovnika — provjeriti vizualno je li `float-end` ekvivalent ili koristiti custom inline stil.

### G. Navbar dropdown — struktura
| BS3 | BS5 | Datoteka | Linija |
|---|---|---|---|
| `<span class="caret"></span>` | ukloniti (BS5 crta caret automatski via CSS na `.dropdown-toggle`) | `partials/bistro/header.blade.php` | 69 |
| `<li role="separator" class="divider"></li>` | `<li><hr class="dropdown-divider"></li>` | `partials/bistro/header.blade.php` | 78 |

### H. Close button (BS3: `.close` + `&times;`, BS5: `.btn-close`)
| BS3 | BS5 | Datoteka |
|---|---|---|
| `class="close" data-dismiss="alert"` + `<span>&times;</span>` | `class="btn-close" data-bs-dismiss="alert"` (bez span) | `home.blade.php` |
| `class="close" data-dismiss="alert"` + `<span>&times;</span>` | `class="btn-close" data-bs-dismiss="alert"` | `admin/reservations/index.blade.php` (3×) |
| `class="close" data-dismiss="alert"` + `<span>&times;</span>` | `class="btn-close" data-bs-dismiss="alert"` | `admin/menu/index.blade.php` (2× alert) |
| `class="close" data-dismiss="modal"` + `&times;` | `class="btn-close" data-bs-dismiss="modal"` (bez teksta) | `admin/menu/index.blade.php` (4× modal) |
| `class="close" data-dismiss="alert"` + `<span>&times;</span>` | `class="btn-close" data-bs-dismiss="alert"` | `admin/daily-menu/index.blade.php` (2× alert) |
| `class="close" data-dismiss="modal"` + `&times;` | `class="btn-close" data-bs-dismiss="modal"` | `admin/daily-menu/index.blade.php` (4× modal) |
| `class="close" data-dismiss="alert"` + `<span>&times;</span>` | `class="btn-close" data-bs-dismiss="alert"` | `livewire/admin/slider-manager.blade.php` |
| `class="close" @click="show = false"` + `<span>&times;</span>` | `class="btn-close" @click="show = false"` | `livewire/admin/promo-popup-manager.blade.php` |
| `class="close" @click="show = false"` + `<span>&times;</span>` | `class="btn-close" @click="show = false"` | `livewire/admin/tjedni-meni-manager.blade.php` |

**Napomena**: BS5 `.btn-close` koristi `background-image` SVG — nema unutarnjeg teksta ni `<span>`. Inline CSS u `bistro.blade.php` targetira `.modal-header .close` → treba dodati `.modal-header .btn-close` u isti ruleset.

### I. Form-inline (uklonjen u BS5)
| BS3 | BS5 | Datoteka | Linija |
|---|---|---|---|
| `class="form-inline"` | `class="d-flex flex-wrap gap-2 align-items-center"` | `admin/reservations/index.blade.php` | 57 |
| `class="form-inline"` | `class="d-flex flex-wrap gap-2 align-items-center"` | `admin/daily-menu/index.blade.php` | 48 |

Inline `<style>` unutar tih fileova targetira `.form-inline .form-group` i `.form-inline .form-control` — te selektore treba updatati ili ukloniti.

### J. layouts/bistro.blade.php — inline CSS cleanup
- `btn-default` custom ruleset ostaje (tema ga nema, koristimo ga za admin gumbe "Odustani")
- `.modal-header .close` → dodati `.modal-header .btn-close` u isti ruleset
- Dropdown z-index, navigation z-index rulesetovi — ostaju

---

## FAZE

### FAZA 1 — Bootstrap i jQuery datoteke (zamjena u `/public/bistro/`)
**Što**: Preuzeti BS5 minificirani CSS i JS te jQuery 3.x. Zamijeniti stare datoteke.  
**Zašto jQuery 3.x**: Revolution Slider, Owl Carousel, FancyBox, Parallax, MixItUp, CountTo, Appear — svi ovise o jQuery. BS5 ne zahtijeva jQuery za sebe, ali pluginovi ga trebaju.  
**Koraci**:
1. Preuzeti `bootstrap.min.css` (BS5 latest stable) → zamijeniti `/public/bistro/css/bootstrap.min.css`
2. Preuzeti `bootstrap.bundle.min.js` (BS5 — bundle uključuje Popper2) → zamijeniti `/public/bistro/js/bootstrap.min.js`
3. Preuzeti `jquery-3.7.1.min.js` → zamijeniti `/public/bistro/js/jquery-2.2.3.js` (i ažurirati referencu u layoutu)
4. Ažurirati `<script src="...jquery-2.2.3.js">` na novi naziv u `layouts/bistro.blade.php`

**Napomena**: Odmah po zamjeni — stranica vizualno može izgledati različito dok se ne završe ostale faze. Predlaže se raditi na staging/dev okolini.

---

### FAZA 2 — Affix fix u layoutu
**Što**: Ukloniti `data-spy="affix" data-offset-top="20"` iz `header.blade.php`, dodati scroll listener u `bistro.blade.php`.  
**Datoteke**: `partials/bistro/header.blade.php`, `layouts/bistro.blade.php`  
**Detalji**:
- Ukloniti atribute s `<div id="navigation">`
- Dodati inline `<script>` u layout (ispred `@livewireScripts`) koji dodaje/uklanja klasu `.affix` na `#navigation` kad `scrollY > 20`
- `style.css` ostaje netaknut — već ima sve potrebne stilove za `.affix`

---

### FAZA 3 — Navigacija: data atributi + navbar dropdown
**Datoteka**: `partials/bistro/header.blade.php`  
**Što se mijenja**:
- `data-toggle="collapse"` → `data-bs-toggle="collapse"`
- `data-target="#fixed-collapse-navbar"` → `data-bs-target="#fixed-collapse-navbar"`
- `data-toggle="dropdown"` → `data-bs-toggle="dropdown"`
- `<span class="caret"></span>` → ukloniti
- `<li role="separator" class="divider"></li>` → `<li><hr class="dropdown-divider"></li>`
- `pull-left` → `float-start`
- `pull-right` → `float-end`
- `hidden-xs` → `d-none d-sm-inline`

**Što se NE mijenja**:
- `class="navbar navbar-default"` — ostaje (style.css ga targetira)
- `class="navbar-header"` — ostaje (neštetan, izbjegava CSS promjene)
- `class="navbar-toggle collapsed"` — ostaje (style.css animira hamburger kroz te klase)
- `class="icon-bar"` na spanovima unutar toggle gumba — ostaje
- `class="navbar-collapse collapse navbar-right"` — ostaje (style.css ga targetira)
- `class="nav navbar-nav"` — ostaje

---

### FAZA 4 — Grid: col-xs i offset klase
**Datoteke i izmjene**:
- `pages/home.blade.php` ln 425, 432, 439, 446: `col-sm-3 col-xs-12` → `col-sm-3 col-12`
- `pages/home.blade.php` ln 365: `col-md-8 col-md-offset-2` → `col-md-8 offset-md-2`
- `pages/about.blade.php` ln 123: `col-md-8 col-md-offset-2` → `col-md-8 offset-md-2`
- `pages/reservation-confirmation.blade.php` ln 285: u inline CSS stringu `.col-md-8.col-md-offset-2` → `.col-md-8.offset-md-2`
- `errors/419,403,429,401,404,500,503.blade.php` ln 25 (svaki): `col-md-8 col-md-offset-2` → `col-md-8 offset-md-2`
- `auth/login.blade.php` ln 25: `col-md-6 col-md-offset-3` → `col-md-6 offset-md-3`

---

### FAZA 5 — Utility klase (pull-*, hidden-*)
Faza 3 pokriva `partials/bistro/header.blade.php`.  
- `pages/menu.blade.php` ln 292: `pull-right` na Font Awesome ikoni → `float-end` (vizualno provjeriti)

---

### FAZA 6 — Close button (BS3 `.close` → BS5 `.btn-close`)
**Sve datoteke** iz inventara H (gore).  
BS5 `.btn-close`: nema unutarnjeg teksta/spana, koristi SVG background-image. Ukloniti `<span aria-hidden="true">&times;</span>`.  
**Ažurirati i inline CSS** u `layouts/bistro.blade.php`:
- Dodati `.modal-header .btn-close` uz `.modal-header .close` ruleset

Livewire admin komponente (`promo-popup-manager`, `tjedni-meni-manager`) koriste `@click="show = false"` (Alpine.js) umjesto `data-dismiss` — mijenjati samo klasu, ne logiku.

---

### FAZA 7 — data-dismiss/data-toggle/data-target u admin i livewire views
**Datoteke**: sve iz inventara A (gore).  
Globalna zamjena po datoteci:
- `data-toggle="modal"` → `data-bs-toggle="modal"`
- `data-target="..."` → `data-bs-target="..."`
- `data-dismiss="modal"` → `data-bs-dismiss="modal"`
- `data-dismiss="alert"` → `data-bs-dismiss="alert"`

---

### FAZA 8 — form-inline u admin views
**Datoteke**: `admin/reservations/index.blade.php`, `admin/daily-menu/index.blade.php`  
- `class="form-inline"` → `class="d-flex flex-wrap gap-2 align-items-center"`
- Ažurirati inline `<style>` blokove koji targetiraju `.form-inline .form-group` i `.form-inline .form-control` → prilagoditi selektore novim klasama ili ukloniti ako više nisu potrebni

---

### FAZA 9 — Vite build: bistro JS/CSS integracija
**Kontekst**:
- `package.json` već ima BS5 i `@popperjs/core`
- `resources/sass/app.scss` i `resources/js/app.js` postoje ali ih **bistro layout ne koristi**
- `layouts/app.blade.php` (auth/admin vanilla Laravel layout) koristi `@vite([...])`
- `layouts/bistro.blade.php` servira statičke fileove iz `/public/bistro/`

**Cilj ove faze**: premjestiti bistro JS/CSS iz statičkih fileova u Vite pipeline  
**Koraci**:
1. Dodati bistro SCSS entry u `resources/sass/` (importati BS5 + custom bistro SCSS umjesto statičkog CSS-a)
2. Dodati bistro JS entry u `resources/js/` (importati BS5 bundle + inicijalizacija pluginova)
3. Ažurirati `vite.config.js` da include-a bistro entry pointove
4. Zamijeniti sve `<link>` i `<script>` tagove u `layouts/bistro.blade.php` s `@vite([...])`
5. Pokrenuti `npm run build`
6. Livewire 4 dolazi s Alpine.js bundleom — `@livewireScripts` ga uključuje automatski, nema ručne potrebe za Alpine importom

**Napomena**: Treći party pluginovi koji nemaju npm pakete (Revolution Slider, stari FancyBox, Owl Carousel, Parallax, MixItUp, CountTo, Appear) mogu se ili:
  - (a) ostaviti kao statički fileovi u `/public/bistro/js/` i loadati odvojeno
  - (b) zamijeniti modernim npm alternativama (Swiper, GLightbox, itd.) — **samo ako korisnik to eksplicitno zatraži**  
  Preporuka: Opcija (a) za sada — migracija CSS/JS arhitekture, ne zamjena pluginova.

---

## Redoslijed i sigurnost

| Faza | Rizik | Reverzibilno |
|---|---|---|
| 1 — zamjena datoteka | ⚠️ Visok (vizualne promjene odmah vidljive) | Da (kopija starih datoteka) |
| 2 — affix JS | Nizak | Da |
| 3 — navbar data atributi + dropdown | Srednji (hamburger menu) | Da |
| 4 — grid offset/xs | Nizak | Da |
| 5 — utility klase | Nizak | Da |
| 6 — close button | Nizak | Da |
| 7 — admin data atributi | Nizak | Da |
| 8 — form-inline | Nizak | Da |
| 9 — Vite build | ⚠️ Visok (arhitekturalna promjena) | Da (git) |

**Preporuka**: Faze 2-8 izvesti na BS3 datotekama, zatim Faza 1 (zamjena datoteka), zatim vizualna provjera, zatim Faza 9 (Vite).

---

## Što se sigurno NE mijenja

- `public/bistro/css/style.css` — custom tema CSS (navbar selektori ostaju jer navbar zadržava BS3 klase)
- `public/bistro/css/navigation.css` — Revolution Slider navigacija
- `public/bistro/css/zerogrid.css`, `animate.min.css`, `loader.css` — custom, bez BS ovisnosti
- `public/bistro/css/bistro-icons.css`, `font-awesome.min.css` — icon fontovi
- Svi pluginovi u `/public/bistro/js/` (Revolution, Owl, FancyBox, Parallax, MixItUp) — dok se ne odluči opcija (b) u Fazi 9
- Sve `.blade.php` klase koje su custom tema klase (`feature`, `padding`, `bg_bistro`, `grid_layout`, `page_header`, `heading_space`, `wrap-content`, `item-container`, itd.)
- Sve BS klase identične u BS3 i BS5: `col-md-*`, `col-sm-*`, `col-lg-*`, `container`, `row`, `table`, `form-control`, `btn`, `alert`, `dropdown`, `navbar`, `navbar-nav`, `navbar-brand`, `collapse`, `text-center`, itd.