# Krcma Petric Project Instructions

## Project Overview
Restaurant website using Laravel 12 + Livewire 3 + Bootstrap 5 with integrated Bistro HTML template (Envato Elements).

## Tech Stack Requirements
- **Backend:** Laravel 12, PHP 8.3
- **Frontend:** Bootstrap 5.2.3 (NOT Tailwind)
- **JavaScript:** Livewire 3 + jQuery 2.2.3
- **Template:** Bistro (located in `public/bistro/` and `docs/bistro_template/`)
- **Auth:** Laravel UI with Bootstrap scaffolding

## Critical Rules

### Layout System
- **ALWAYS use `layouts/bistro.blade.php`** for all public-facing pages
- **NEVER use `layouts/app.blade.php`** (reserved for Laravel UI auth only)
- All new pages MUST extend: `@extends('layouts.bistro')`

### Component Structure
When creating Livewire components:
1. Use Bistro layout: `@extends('layouts.bistro')`
2. Use Bootstrap 5 classes ONLY (no Tailwind)
3. Follow original template HTML structure from `docs/bistro_template/`
4. Include proper section: `@section('content')...@endsection`
5. Assets via: `{{ asset('bistro/...') }}`

### Page Headers
Use original template structure:
```blade
<section id="page_header">
<div class="page_title">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
         <h2 class="title">Page Title</h2>
         <p>Subtitle text</p>
      </div>
    </div>
  </div>
</div>  
</section>
```

### Bootstrap 5 Classes
- Grid: `container`, `row`, `col-md-*`, `col-sm-*`
- Spacing: `padding`, `padding-top`, `padding-bottom`, `mb-3`, `mt-4`
- Text: `text-center`, `heading`, `heading_space`
- Buttons: `btn-common`, `btn-white`, `btn-orange`

### Forms with Livewire
```blade
<form wire:submit="save">
    <div class="form-group">
        <input type="text" class="form-control" wire:model="name">
        @error('name') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
    <button type="submit" class="btn-common btn-orange">Submit</button>
</form>
```

### Assets Loading
- **Bistro assets:** Via `<link>` / `<script>` in layout (NOT Vite)
- **Laravel UI assets:** Via `@vite(['resources/sass/app.scss', 'resources/js/app.js'])`
- **Images:** `{{ asset('bistro/images/filename.jpg') }}`
- **CSS:** Already loaded in layout, no additional imports needed

## File Locations

### Views Structure
```
resources/views/
├── layouts/
│   ├── app.blade.php          # Laravel UI auth ONLY
│   └── bistro.blade.php       # Public pages (USE THIS)
├── partials/bistro/
│   ├── header.blade.php       # Navigation + Auth
│   └── footer.blade.php       # Footer
├── pages/
│   ├── home.blade.php         # Homepage example
│   ├── menu.blade.php         # Menu example
│   └── contact.blade.php      # Contact example
└── livewire/                  # Livewire components here
```

### Livewire Components
Create in `app/Livewire/` namespace:
```php
namespace App\Livewire;

use Livewire\Component;

class ReservationForm extends Component
{
    public function render()
    {
        return view('livewire.reservation-form')
            ->layout('layouts.bistro');  // IMPORTANT!
    }
}
```

### Routes
- Public pages: Routes in `routes/web.php` → return `view('pages.name')`
- Livewire: `Route::get('/reservations', ReservationForm::class)->name('reservations');`

## Authentication Integration
- Header shows user menu when authenticated (`@auth`)
- Topbar adapts: phone number for guests, user name for logged in
- Dashboard accessible via `/home` route
- Auth views use `layouts.app` (Laravel UI default)

## Data Handling
- Use PHP arrays for now (see `pages/menu.blade.php` for example)
- Plan for database migration:
  - Menu items → `menus` table
  - Reservations → `reservations` table
  - Contact messages → `contact_messages` table

## Testing Requirements
- Every change must have a test
- Use `php artisan test --compact --filter=TestName`
- Follow existing test structure in `tests/Feature/`

## Code Quality
- Run `vendor/bin/pint --format agent` before committing
- Follow Laravel conventions from AGENTS.md
- Check sibling files for existing patterns

## Common Mistakes to Avoid
❌ Using Tailwind classes (removed from project)
❌ Using `layouts.app` for public pages
❌ Creating custom CSS instead of using template classes
❌ Using Vite for Bistro assets
❌ Inline styles instead of Bootstrap classes

✅ Use Bootstrap 5 classes
✅ Use `layouts.bistro` for public pages
✅ Follow original template HTML structure
✅ Load assets via `{{ asset() }}`
✅ Keep Livewire components clean and focused

## Documentation
- Full integration details: `docs/layout.md`
- README: Project overview and setup
- Update docs when adding major features

## Next Phase Checklist
- [ ] Implement Livewire components (ReservationForm, NewsletterForm, ContactForm)
- [ ] Create database migrations for dynamic content
- [ ] Add admin panel for content management
- [ ] Replace fake data with Eloquent models
- [ ] Customize branding (logo, colors, contact info)

---
**Last Updated:** March 19, 2026