@extends('layouts.app')
@section('title','Categories')
@section('content')
<div class="d-flex align-items-center justify-content-between mb-4">
    <h1 class="h4 fw-semibold mb-0"><i class="ti ti-tag me-2 text-primary"></i>Categories</h1>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal"><i class="ti ti-plus me-1"></i>New Category</button>
</div>
@include('partials._alerts')
<div class="card border-0 shadow-sm">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light"><tr><th>Name</th><th>Slug</th><th>Description</th><th class="text-center">Items</th><th class="text-center">Status</th><th class="text-center">Actions</th></tr></thead>
            <tbody>
            @forelse($categories as $cat)
            <tr>
                <td class="fw-medium">{{ $cat->name }}</td>
                <td class="text-muted small font-monospace">{{ $cat->slug }}</td>
                <td class="text-muted small">{{ Str::limit($cat->description,60,'…') ?: '—' }}</td>
                <td class="text-center"><span class="badge bg-light text-secondary border">{{ $cat->inventory_items_count }}</span></td>
                <td class="text-center"><span class="badge {{ $cat->is_active?'bg-success':'bg-secondary' }}">{{ $cat->is_active?'Active':'Inactive' }}</span></td>
                <td class="text-center">
                    <button class="btn btn-sm btn-light" data-bs-toggle="modal" data-bs-target="#editModal{{ $cat->id }}"><i class="ti ti-pencil"></i></button>
                    <form method="POST" action="{{ route('categories.destroy',$cat) }}" class="d-inline" onsubmit="return confirm('Delete category?')">@csrf @method('DELETE')<button class="btn btn-sm btn-light"><i class="ti ti-trash text-danger"></i></button></form>
                </td>
            </tr>
            {{-- Edit Modal --}}
            <div class="modal fade" id="editModal{{ $cat->id }}" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content border-0 shadow">
                <div class="modal-header border-0"><h5 class="modal-title fw-semibold">Edit Category</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
                <form method="POST" action="{{ route('categories.update',$cat) }}">@csrf @method('PUT')
                <div class="modal-body">
                    <div class="mb-3"><label class="form-label fw-medium">Name</label><input type="text" name="name" class="form-control" value="{{ $cat->name }}" required></div>
                    <div class="mb-3"><label class="form-label fw-medium">Description</label><textarea name="description" class="form-control" rows="2">{{ $cat->description }}</textarea></div>
                </div>
                <div class="modal-footer border-0"><button class="btn btn-light" data-bs-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary">Save</button></div>
                </form>
            </div></div></div>
            @empty
            <tr><td colspan="6" class="text-center py-4 text-muted">No categories yet.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    <div class="card-footer bg-transparent">{{ $categories->links() }}</div>
</div>

<div class="modal fade" id="createModal" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content border-0 shadow">
    <div class="modal-header border-0"><h5 class="modal-title fw-semibold">New Category</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
    <form method="POST" action="{{ route('categories.store') }}">@csrf
    <div class="modal-body">
        <div class="mb-3"><label class="form-label fw-medium">Name <span class="text-danger">*</span></label><input type="text" name="name" class="form-control" required placeholder="e.g. Injectables"></div>
        <div class="mb-3"><label class="form-label fw-medium">Description</label><textarea name="description" class="form-control" rows="2" placeholder="Optional description"></textarea></div>
    </div>
    <div class="modal-footer border-0"><button class="btn btn-light" data-bs-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary">Create</button></div>
    </form>
</div></div></div>
@endsection