@extends('layouts.bistro')

@section('title', 'Admin - Jelovnik - ' . config('app.name'))

@section('content')

<!-- Page Header -->
<section id="page_header" style="background-image: url('{{ asset('images/konoba/konoba-enterijer-stolovi-jelovnici.jpg') }}');">
    <div class="page_title">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="title">Admin - Jelovnik</h2>
                    <p>Upravljanje kategorijama i stavkama jelovnika</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Menu Management Section -->
<section class="padding">
    <div class="container">
        
        <!-- Flash Messages -->
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <strong>Uspjeh!</strong> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <!-- Add New Category Button -->
        <div class="row" style="margin-bottom: 20px;">
            <div class="col-md-12">
                <button type="button" class="btn btn-common" data-bs-toggle="modal" data-bs-target="#addCategoryModal">
                    <i class="fa fa-plus"></i> Dodaj kategoriju
                </button>
            </div>
        </div>

        <!-- Categories and Items -->
        @foreach($categories as $category)
        <div class="row" style="margin-bottom: 30px;">
            <div class="col-md-12">
                <div style="background: #f8f9fa; padding: 20px; border-radius: 4px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                        <div>
                            <h3 style="margin: 0;">{{ $category->name }}</h3>
                            <small class="text-muted">
                                Redoslijed: {{ $category->order }} | Slug: {{ $category->slug }} | 
                                Status: <span class="badge" style="background: {{ $category->is_active ? '#28a745' : '#dc3545' }}; color: #fff; padding: 3px 8px;">
                                    {{ $category->is_active ? 'Aktivno' : 'Neaktivno' }}
                                </span>
                            </small>
                        </div>
                        <div>
                            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#editCategoryModal{{ $category->id }}">
                                <i class="fa fa-edit"></i> Uredi
                            </button>
                            <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addItemModal{{ $category->id }}">
                                <i class="fa fa-plus"></i> Dodaj stavku
                            </button>
                            <form method="POST" action="{{ route('admin.menu.category.destroy', $category->id) }}" style="display: inline-block; margin-left: 5px;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger" title="Obriši kategoriju"
                                        onclick="return confirm('Jeste li sigurni da želite obrisati ovu kategoriju? Sve stavke će također biti obrisane.')">
                                    <i class="fa fa-trash"></i> Obriši
                                </button>
                            </form>
                        </div>
                    </div>

                    <!-- Items Table -->
                    @if($category->items->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-striped" style="background: #fff;">
                            <thead>
                                <tr>
                                    <th>Naziv</th>
                                    <th>Opis</th>
                                    <th>Cijena</th>
                                    <th>Redoslijed</th>
                                    <th>Status</th>
                                    <th>Slika</th>
                                    <th>Istaknuto</th>
                                    <th>Akcije</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($category->items->sortBy('order') as $item)
                                <tr>
                                    <td><strong>{{ $item->name }}</strong></td>
                                    <td>{{ Str::limit($item->description, 40) }}</td>
                                    <td>{{ number_format($item->price, 2) }} €</td>
                                    <td>{{ $item->order }}</td>
                                    <td>
                                        <span class="badge" style="background: {{ $item->is_available ? '#28a745' : '#dc3545' }}; color: #fff; padding: 3px 8px;">
                                            {{ $item->is_available ? 'Dostupno' : 'Nedostupno' }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($item->image)
                                            <i class="fa fa-check" style="color: #28a745;"></i>
                                        @else
                                            <span style="color: #999;">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($item->is_featured)
                                            <i class="fa fa-star" style="color: #ffc107;"></i>
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#editItemModal{{ $item->id }}">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <form method="POST" action="{{ route('admin.menu.item.destroy', $item->id) }}" style="display: inline-block; margin-left: 5px;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger" 
                                                    onclick="return confirm('Jeste li sigurni da želite obrisati ovu stavku?')">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                    <p class="text-muted">Nema stavki u ovoj kategoriji.</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Edit Category Modal -->
        <div class="modal fade" id="editCategoryModal{{ $category->id }}" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form method="POST" action="{{ route('admin.menu.category.update', $category->id) }}">
                        @csrf
                        <div class="modal-header">
                            <h4 class="modal-title">Uredi kategoriju</h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="edit_cat_name{{ $category->id }}">Naziv *</label>
                                <input type="text" class="form-control" id="edit_cat_name{{ $category->id }}" name="name" value="{{ $category->name }}" required>
                            </div>
                            <div class="form-group">
                                <label for="edit_cat_order{{ $category->id }}">Redoslijed</label>
                                <input type="number" class="form-control" id="edit_cat_order{{ $category->id }}" name="order" value="{{ $category->order }}" min="0">
                            </div>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="edit_cat_active{{ $category->id }}" name="is_active" value="1" {{ $category->is_active ? 'checked' : '' }}>
                                <label class="form-check-label" for="edit_cat_active{{ $category->id }}">Aktivno</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Odustani</button>
                            <button type="submit" class="btn btn-common">Spremi</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Add Item Modal -->
        <div class="modal fade" id="addItemModal{{ $category->id }}" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form method="POST" action="{{ route('admin.menu.item.store') }}" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="menu_category_id" value="{{ $category->id }}">
                        <div class="modal-header">
                            <h4 class="modal-title">Dodaj stavku u "{{ $category->name }}"</h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="item_name{{ $category->id }}">Naziv *</label>
                                <input type="text" class="form-control" id="item_name{{ $category->id }}" name="name" required>
                            </div>
                            <div class="form-group">
                                <label for="item_description{{ $category->id }}">Opis</label>
                                <textarea class="form-control" id="item_description{{ $category->id }}" name="description" rows="2"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="item_price{{ $category->id }}">Cijena (€) *</label>
                                <input type="number" class="form-control" id="item_price{{ $category->id }}" name="price" step="0.01" min="0" required>
                            </div>
                            <div class="form-group">
                                <label for="item_image{{ $category->id }}">Slika</label>
                                <input type="file" class="form-control" id="item_image{{ $category->id }}" name="image" accept="image/*">
                                <small class="text-muted">Format: JPG, PNG, WEBP (max 2MB)</small>
                            </div>
                            <div class="form-group">
                                <label for="item_order{{ $category->id }}">Redoslijed</label>
                                <input type="number" class="form-control" id="item_order{{ $category->id }}" name="order" value="0" min="0">
                            </div>
                            <div class="form-check" style="margin-bottom: 10px;">
                                <input type="checkbox" class="form-check-input" id="item_available{{ $category->id }}" name="is_available" value="1" checked>
                                <label class="form-check-label" for="item_available{{ $category->id }}">Dostupno</label>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="item_featured{{ $category->id }}" name="is_featured" value="1">
                                <label class="form-check-label" for="item_featured{{ $category->id }}">Istaknuto</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Odustani</button>
                            <button type="submit" class="btn btn-common">Dodaj</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Edit Item Modals -->
        @foreach($category->items as $item)
        <div class="modal fade" id="editItemModal{{ $item->id }}" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form method="POST" action="{{ route('admin.menu.item.update', $item->id) }}" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="menu_category_id" value="{{ $item->menu_category_id }}">
                        <div class="modal-header">
                            <h4 class="modal-title">Uredi stavku "{{ $item->name }}"</h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="edit_item_name{{ $item->id }}">Naziv *</label>
                                <input type="text" class="form-control" id="edit_item_name{{ $item->id }}" name="name" value="{{ $item->name }}" required>
                            </div>
                            <div class="form-group">
                                <label for="edit_item_description{{ $item->id }}">Opis</label>
                                <textarea class="form-control" id="edit_item_description{{ $item->id }}" name="description" rows="2">{{ $item->description }}</textarea>
                            </div>
                            <div class="form-group">
                                <label for="edit_item_price{{ $item->id }}">Cijena (€) *</label>
                                <input type="number" class="form-control" id="edit_item_price{{ $item->id }}" name="price" step="0.01" min="0" value="{{ $item->price }}" required>
                            </div>
                            <div class="form-group">
                                <label for="edit_item_image{{ $item->id }}">Slika</label>
                                @if($item->image)
                                    <div style="margin-bottom: 10px;">
                                        <img src="{{ asset('storage/' . $item->image) }}" alt="{{ $item->name }}" style="max-width: 150px; max-height: 150px;">
                                    </div>
                                @endif
                                <input type="file" class="form-control" id="edit_item_image{{ $item->id }}" name="image" accept="image/*">
                                <small class="text-muted">Format: JPG, PNG, WEBP (max 2MB)</small>
                            </div>
                            <div class="form-group">
                                <label for="edit_item_order{{ $item->id }}">Redoslijed</label>
                                <input type="number" class="form-control" id="edit_item_order{{ $item->id }}" name="order" value="{{ $item->order }}" min="0">
                            </div>
                            <div class="form-check" style="margin-bottom: 10px;">
                                <input type="checkbox" class="form-check-input" id="edit_item_available{{ $item->id }}" name="is_available" value="1" {{ $item->is_available ? 'checked' : '' }}>
                                <label class="form-check-label" for="edit_item_available{{ $item->id }}">Dostupno</label>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="edit_item_featured{{ $item->id }}" name="is_featured" value="1" {{ $item->is_featured ? 'checked' : '' }}>
                                <label class="form-check-label" for="edit_item_featured{{ $item->id }}">Istaknuto</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Odustani</button>
                            <button type="submit" class="btn btn-common">Spremi</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @endforeach
        @endforeach

        @if($categories->count() == 0)
        <div class="alert alert-info">
            <strong>Nema kategorija.</strong> Dodajte prvu kategoriju za jelovnik.
        </div>
        @endif
    </div>
</section>

<!-- Add Category Modal -->
<div class="modal fade" id="addCategoryModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form method="POST" action="{{ route('admin.menu.category.store') }}">
                @csrf
                <div class="modal-header">
                    <h4 class="modal-title">Dodaj novu kategoriju</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="cat_name">Naziv *</label>
                        <input type="text" class="form-control" id="cat_name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="cat_order">Redoslijed</label>
                        <input type="number" class="form-control" id="cat_order" name="order" value="0" min="0">
                    </div>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="cat_active" name="is_active" value="1" checked>
                        <label class="form-check-label" for="cat_active">Aktivno</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Odustani</button>
                    <button type="submit" class="btn btn-common">Dodaj</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection