@extends('layouts.app')

@section('title', 'Categories')

@section('content')
<div class="row mb-5">
    <div class="col-12 d-flex justify-content-between align-items-end">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-2">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}" class="text-decoration-none">Dashboard</a></li>
                    <li class="breadcrumb-item active">Categories</li>
                </ol>
            </nav>
            <h2 class="fw-bold mb-0">Category Management</h2>
        </div>
        <a href="{{ route('admin.applications.index') }}" class="btn btn-outline-primary rounded-pill px-4">
            <i class="bi bi-box-seam me-2"></i> Back to Inventory
        </a>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-5">
        <div class="glass-card p-4 rounded-4 border-0 shadow-sm">
            <h5 class="fw-bold mb-3">Create New Category</h5>
            <form method="POST" action="{{ route('admin.categories.store') }}">
                @csrf
                <div class="mb-3">
                    <label class="form-label small fw-600">Category Name</label>
                    <input type="text" name="name" class="form-control bg-light border-0 py-2" placeholder="e.g. Productivity" required>
                </div>
                <button class="btn btn-primary w-100 py-2 shadow-sm">
                    <i class="bi bi-plus-lg me-1"></i> Add Category
                </button>
            </form>
        </div>
    </div>
    <div class="col-lg-7">
        <div class="glass-card p-4 rounded-4 border-0 shadow-sm">
            <h5 class="fw-bold mb-3">Existing Categories</h5>
            <div class="list-group list-group-flush bg-transparent">
                @foreach($categories as $category)
                    <div class="list-group-item bg-transparent px-0 py-3 border-0 border-bottom d-flex justify-content-between align-items-center">
                        <div>
                            <div class="fw-bold text-main">{{ $category->name }}</div>
                            <div class="text-muted small fw-600">{{ $category->applications()->count() }} linked applications</div>
                        </div>
                        <form method="POST" action="{{ route('admin.categories.destroy', $category) }}">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-outline-danger rounded-pill px-3 transition" onclick="return confirm('Delete this category and all its apps?')">
                                <i class="bi bi-trash3"></i>
                            </button>
                        </form>
                    </div>
                @endforeach

                @if($categories->isEmpty())
                    <div class="text-center py-4">
                        <p class="text-muted mb-0">No categories found.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<style>
    .text-main { color: var(--text-main); }
    [data-theme="dark"] .bg-light { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--text-main); }
    [data-theme="dark"] .list-group-item { border-color: var(--border-color) !important; }
    .transition { transition: all 0.3s ease; }
</style>
@endsection