@extends('layouts.admin')

@section('title', 'Category Management')

@section('content')
<div style="margin-bottom: 24px;">
    <h1 class="serif" style="font-size: 26px; margin: 0; color: #0f172a;">Store Category Management</h1>
    <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">Organize skincare products into collections and categories.</p>
</div>

<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 24px;">
    <!-- Create Category Form -->
    <div class="admin-card">
        <h2 class="serif" style="font-size: 18px; margin: 0 0 16px 0; color: #0f172a;">Add New Category</h2>
        <form action="{{ route('admin.categories.store') }}" method="POST">
            @csrf
            <div style="margin-bottom: 16px;">
                <label style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-muted);">Category Name *</label>
                <input type="text" name="name" class="form-control" required placeholder="e.g. Body Lotions">
            </div>

            <div style="margin-bottom: 16px;">
                <label style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-muted);">Description</label>
                <textarea name="description" rows="3" class="form-control" placeholder="Short description of this product line..."></textarea>
            </div>

            <div style="margin-bottom: 20px;">
                <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; color: #334155;">
                    <input type="checkbox" name="is_active" value="1" checked> Active on Storefront
                </label>
            </div>

            <button type="submit" class="btn-admin btn-primary" style="width: 100%; justify-content: center;">Create Category</button>
        </form>
    </div>

    <!-- Category List Table -->
    <div class="admin-card">
        <h2 class="serif" style="font-size: 18px; margin: 0 0 16px 0; color: #0f172a;">All Categories</h2>
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Category Name</th>
                    <th>Slug</th>
                    <th>Product Count</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($categories as $cat)
                    <tr>
                        <td>
                            <strong style="color: #0f172a;">{{ $cat->name }}</strong>
                            @if($cat->description)
                                <div style="font-size: 11px; color: var(--text-muted);">{{ Str::limit($cat->description, 40) }}</div>
                            @endif
                        </td>
                        <td><code>{{ $cat->slug }}</code></td>
                        <td><strong>{{ $cat->products_count }}</strong> products</td>
                        <td>
                            <span class="badge {{ $cat->is_active ? 'badge-active' : 'badge-inactive' }}">
                                {{ $cat->is_active ? 'Active' : 'Disabled' }}
                            </span>
                        </td>
                        <td>
                            <div style="display: flex; gap: 8px;">
                                <a href="{{ route('admin.categories.edit', $cat) }}" class="btn-admin btn-secondary" style="padding: 6px 10px; font-size: 12px;">
                                    <i data-lucide="edit-3" style="width: 14px;"></i> Edit
                                </a>
                                <form action="{{ route('admin.categories.destroy', $cat) }}" method="POST" onsubmit="return confirm('Delete category?')" style="margin: 0;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-admin btn-danger" style="padding: 6px 10px; font-size: 12px;">
                                        <i data-lucide="trash-2" style="width: 14px;"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection