<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Items - {{ hotelName() }} Management</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   
    @hotelSettings
  <style>
        :root {
            --primary-green: #1a936f;
            --secondary-green: #88d498;
            --light-green: #c6dabf;
            --dark-green: #114b5f;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
        }
        
        .page-header {
            background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
            color: white;
            padding: 30px 0;
            margin-bottom: 30px;
        }
        
        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            margin-bottom: 20px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
            border: none;
            border-radius: 8px;
            padding: 10px 20px;
            font-weight: 600;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, var(--dark-green) 0%, var(--primary-green) 100%);
            transform: translateY(-2px);
        }
        
        .status-badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: bold;
        }
        
        .status-available {
            background-color: #d4edda;
            color: #155724;
        }
        
        .status-unavailable {
            background-color: #f8d7da;
            color: #721c24;
        }
        
        .table th {
            border-top: none;
            font-weight: 600;
            color: var(--dark-green);
        }
        
        .item-image {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="page-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="h3 mb-0">
                        <i class="fas fa-utensils me-2"></i>Menu Items
                    </h1>
                    <p class="mb-0 opacity-75">Manage your menu items and pricing</p>
                    @if(request('category') && $category)
                        <small class="opacity-75">Filtered by: {{ $category->name }}</small>
                    @endif
                </div>
                <div class="col-md-6 text-end">
                    <a href="{{ route('dashboard') }}" class="btn btn-outline-light me-2">
                        <i class="fas fa-tachometer-alt me-1"></i> Dashboard
                    </a>
                    <a href="{{ route('menu-items.create') }}" class="btn btn-light me-2">
                        <i class="fas fa-plus me-1"></i> Add Menu Item
                    </a>
                    <a href="{{ route('menu-categories.index') }}" class="btn btn-outline-light me-2">
                        <i class="fas fa-tags me-1"></i> Categories
                    </a>
                    <a href="{{ route('pos.index') }}" class="btn btn-outline-light">
                        <i class="fas fa-arrow-left me-1"></i> Back to POS
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container">
        <!-- Stats Cards -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <h3 class="text-primary">{{ $menuItems->count() }}</h3>
                        <p class="mb-0 text-muted">Total Items</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <h3 class="text-success">{{ $menuItems->where('is_available', true)->count() }}</h3>
                        <p class="mb-0 text-muted">Available</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <h3 class="text-info">{{ $menuItems->where('is_featured', true)->count() }}</h3>
                        <p class="mb-0 text-muted">Featured</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <h3 class="text-warning">UGX {{ number_format($menuItems->sum('price'), 2) }}</h3>
                        <p class="mb-0 text-muted">Total Value</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="card mb-4">
            <div class="card-body">
                <form method="GET" class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Filter by Category</label>
                        <select name="category" class="form-select" onchange="this.form.submit()">
                            <option value="">All Categories</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>
                                    {{ $cat->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Filter by Status</label>
                        <select name="status" class="form-select" onchange="this.form.submit()">
                            <option value="">All Status</option>
                            <option value="available" {{ request('status') == 'available' ? 'selected' : '' }}>Available</option>
                            <option value="unavailable" {{ request('status') == 'unavailable' ? 'selected' : '' }}>Unavailable</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Search</label>
                        <div class="input-group">
                            <input type="text" name="search" class="form-control" placeholder="Search items..." value="{{ request('search') }}">
                            <button class="btn btn-primary" type="submit">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Menu Items Table -->
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Image</th>
                                <th>Name</th>
                                <th>Category</th>
                                <th>Price</th>
                                <th>Cost</th>
                                <th>Prep Time</th>
                                <th>Status</th>
                                <th>Featured</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($menuItems as $item)
                                <tr>
                                    <td>
                                        @if($item->image)
                                            <img src="{{ Storage::url($item->image) }}" alt="{{ $item->name }}" class="item-image">
                                        @else
                                            <div class="bg-light rounded d-flex align-items-center justify-content-center item-image">
                                                <i class="fas fa-utensils text-muted"></i>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <strong>{{ $item->name }}</strong>
                                        @if($item->description)
                                            <br>
                                            <small class="text-muted">{{ Str::limit($item->description, 50) }}</small>
                                        @endif
                                    </td>
                                    <td>
                                        @if($item->category)
                                            <span class="badge bg-light text-dark">
                                                <i class="{{ $item->category->icon ?? 'fas fa-folder' }} me-1"></i>
                                                {{ $item->category->name }}
                                            </span>
                                        @else
                                            <span class="text-muted">No Category</span>
                                        @endif
                                    </td>
                                    <td>
                                        <strong class="text-success">UGX {{ number_format($item->price, 2) }}</strong>
                                    </td>
                                    <td>
                                        @if($item->cost_price)
                                            <span class="text-muted">UGX {{ number_format($item->cost_price, 2) }}</span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="text-muted">{{ $item->preparation_time }} min</span>
                                    </td>
                                    <td>
                                        <span class="status-badge {{ $item->is_available ? 'status-available' : 'status-unavailable' }}">
                                            {{ $item->is_available ? 'Available' : 'Unavailable' }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($item->is_featured)
                                            <i class="fas fa-star text-warning" title="Featured"></i>
                                        @else
                                            <i class="far fa-star text-muted" title="Not Featured"></i>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <a href="{{ route('menu-items.edit', $item->id) }}" class="btn btn-outline-primary">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <a href="{{ route('menu-items.show', $item->id) }}" class="btn btn-outline-info">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <form action="{{ route('menu-items.destroy', $item->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-outline-danger" onclick="return confirm('Are you sure?')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="text-center py-4">
                                        <i class="fas fa-utensils fa-3x text-muted mb-3"></i>
                                        <h4 class="text-muted">No Menu Items Found</h4>
                                        <p class="text-muted">Get started by creating your first menu item</p>
                                        <a href="{{ route('menu-items.create') }}" class="btn btn-primary">
                                            <i class="fas fa-plus me-2"></i> Create First Item
                                        </a>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                @if($menuItems->hasPages())
                    <div class="d-flex justify-content-center mt-4">
                        {{ $menuItems->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ asset('js/theme-applier.js') }}"></script>
</body>
</html>

