@extends('layouts.admin')

@section('title', 'Download categories — '.config('app.name'))
@section('page_title', 'Download categories')

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.compatibility.index') }}">Sage compatibility</a></li>
    <li class="breadcrumb-item active">Categories</li>
@endsection

@section('content')
    <div class="mb-3">
        <a class="btn btn-outline-secondary" href="{{ route('admin.compatibility.index') }}">← Back to compatibility</a>
    </div>

    <section class="card mb-3">
        <div class="card-header">
            <h5 class="mb-0">Add category</h5>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('admin.compatibility.categories.store') }}" class="row g-2 align-items-end">
                @csrf
                <div class="col-md-6">
                    <label class="form-label" for="cat_name">Name</label>
                    <input id="cat_name" name="name" class="form-control" required maxlength="60" value="{{ old('name') }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label" for="cat_order">Sort order</label>
                    <input id="cat_order" name="sort_order" type="number" min="0" class="form-control" value="{{ old('sort_order') }}">
                </div>
                <div class="col-md-3">
                    <button class="btn btn-primary w-100" type="submit">Add</button>
                </div>
            </form>
        </div>
    </section>

    <section class="card">
        <div class="card-header">
            <h5 class="mb-0">Categories</h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table mb-0 align-middle">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Order</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($categories as $category)
                            <tr>
                                <td class="text-muted">#{{ $category->id }}</td>
                                <td colspan="3">
                                    <form method="POST" action="{{ route('admin.compatibility.categories.update', $category) }}" class="d-flex flex-wrap gap-2 align-items-center">
                                        @csrf
                                        @method('PUT')
                                        <input name="name" class="form-control form-control-sm" style="max-width:18rem" value="{{ $category->name }}" required>
                                        <input name="sort_order" type="number" min="0" class="form-control form-control-sm" style="max-width:6rem" value="{{ $category->sort_order }}">
                                        <button class="btn btn-sm btn-outline-primary" type="submit">Save</button>
                                        <button class="btn btn-sm btn-outline-danger" type="submit" form="del-cat-{{ $category->id }}" onclick="return confirm('Delete this category?')">Delete</button>
                                    </form>
                                    <form id="del-cat-{{ $category->id }}" method="POST" action="{{ route('admin.compatibility.categories.destroy', $category) }}" class="d-none">
                                        @csrf
                                        @method('DELETE')
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">
                                    No categories yet. Import with <code>systronics:import-legacy --only=compatibility</code>
                                    or add one above.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </section>
@endsection