<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Categories - {{ 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;
            transition: transform 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .category-card {
            border-left: 4px solid var(--primary-green);
        }
        
        .item-count-badge {
            background: var(--light-green);
            color: var(--dark-green);
            font-weight: 600;
        }
        
        .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-active {
            background-color: #d4edda;
            color: #155724;
        }
        
        .status-inactive {
            background-color: #f8d7da;
            color: #721c24;
        }
    </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-tags me-2"></i>Menu Categories
                    </h1>
                    <p class="mb-0 opacity-75">Manage your menu categories and items</p>
                </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-categories.create') }}" class="btn btn-light me-2">
                        <i class="fas fa-plus me-1"></i> Add Category
                    </a>
                    <a href="{{ route('menu-items.create') }}" class="btn btn-outline-light me-2">
                        <i class="fas fa-utensils me-1"></i> Add Menu Item
                    </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">{{ $categories->count() }}</h3>
                        <p class="mb-0 text-muted">Total Categories</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <h3 class="text-success">{{ $categories->where('is_active', true)->count() }}</h3>
                        <p class="mb-0 text-muted">Active Categories</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        @php
                            $totalItems = 0;
                            foreach($categories as $category) {
                                $totalItems += $category->menuItems->count();
                            }
                        @endphp
                        <h3 class="text-info">{{ $totalItems }}</h3>
                        <p class="mb-0 text-muted">Total Menu Items</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        @php
                            $availableItems = 0;
                            foreach($categories as $category) {
                                $availableItems += $category->menuItems->where('is_available', true)->count();
                            }
                        @endphp
                        <h3 class="text-warning">{{ $availableItems }}</h3>
                        <p class="mb-0 text-muted">Available Items</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Categories Grid -->
        <div class="row">
            @forelse($categories as $category)
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="card category-card h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div>
                                    <h5 class="card-title mb-1">
                                        <i class="{{ $category->icon ?? 'fas fa-folder' }} me-2 text-primary"></i>
                                        {{ $category->name }}
                                    </h5>
                                    <span class="status-badge {{ $category->is_active ? 'status-active' : 'status-inactive' }}">
                                        {{ $category->is_active ? 'Active' : 'Inactive' }}
                                    </span>
                                </div>
                                <span class="item-count-badge badge">
                                    {{ $category->menuItems->count() }} items
                                </span>
                            </div>
                            
                            @if($category->description)
                                <p class="card-text text-muted small mb-3">{{ $category->description }}</p>
                            @endif

                            <!-- Menu Items List -->
                            @if($category->menuItems->count() > 0)
                                <div class="menu-items-list">
                                    <h6 class="small text-uppercase text-muted mb-2">Menu Items:</h6>
                                    <div class="list-group list-group-flush">
                                        @foreach($category->menuItems->take(3) as $item)
                                            <div class="list-group-item px-0 py-2 border-0">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div>
                                                        <span class="fw-semibold">{{ $item->name }}</span>
                                                        <br>
                                                        <small class="text-muted">UGX {{ number_format($item->price, 2) }}</small>
                                                    </div>
                                                    <span class="badge {{ $item->is_available ? 'bg-success' : 'bg-secondary' }}">
                                                        {{ $item->is_available ? 'Available' : 'Unavailable' }}
                                                    </span>
                                                </div>
                                            </div>
                                        @endforeach
                                        
                                        @if($category->menuItems->count() > 3)
                                            <div class="list-group-item px-0 py-2 border-0">
                                                <small class="text-muted">
                                                    +{{ $category->menuItems->count() - 3 }} more items...
                                                </small>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @else
                                <div class="text-center py-3">
                                    <i class="fas fa-utensils fa-2x text-muted mb-2"></i>
                                    <p class="text-muted small mb-0">No menu items yet</p>
                                </div>
                            @endif
                        </div>
                        <div class="card-footer bg-transparent border-0 pt-0">
                            <div class="d-flex gap-2">
                                <a href="{{ route('menu-categories.edit', $category->id) }}" class="btn btn-sm btn-outline-primary flex-fill">
                                    <i class="fas fa-edit me-1"></i> Edit
                                </a>
                                <a href="{{ route('menu-items.index') }}?category={{ $category->id }}" class="btn btn-sm btn-outline-success flex-fill">
                                    <i class="fas fa-eye me-1"></i> View Items
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <!-- Empty State -->
                <div class="col-12">
                    <div class="text-center py-5">
                        <i class="fas fa-tags fa-4x text-muted mb-3"></i>
                        <h3 class="text-muted">No Categories Found</h3>
                        <p class="text-muted mb-4">Get started by creating your first menu category</p>
                        <a href="{{ route('menu-categories.create') }}" class="btn btn-primary btn-lg">
                            <i class="fas fa-plus me-2"></i> Create First Category
                        </a>
                    </div>
                </div>
            @endforelse
        </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>

