<div>
    <x-title>{{ $category->name }}</x-title>
    <div class="container">

        {{-- Breadcrumb --}}
        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a wire:navigate href="{{ route('workboard.index') }}">Workboard</a>
                </li>
                <li class="breadcrumb-item active">{{ $category->name }}</li>
            </ol>
        </nav>

        {{-- Header --}}
        <div class="d-flex align-items-center justify-content-between mb-4">
            <div>
                <h4 class="fw-bold mb-0">{{ $category->name }}</h4>
                @if($category->description)
                    <p class="text-muted small mb-0 mt-1">{{ $category->description }}</p>
                @endif
            </div>

            @can('workboard.manage')
                <button wire:click="$set('showAddForm', true)"
                        class="btn btn-primary"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#addItemOffcanvas">
                    <i class="mdi mdi-plus me-1"></i>Add Item
                </button>
            @endcan
        </div>

        {{-- Item list --}}
        @if($this->items->isEmpty())
            <div class="text-center py-5 text-muted border rounded">
                <i class="mdi mdi-check-circle-outline display-4 d-block mb-3 opacity-25"></i>
                <p class="mb-0 fw-semibold">Queue is empty</p>
                <p class="small mb-0">No items available to pick up right now.</p>
            </div>
        @else
            <div class="list-group shadow-sm">
                @foreach($this->items as $item)
                    @include('components.workboard.workboard-item-row', ['item' => $item])
                @endforeach
            </div>
        @endif

    </div>

    {{-- Add Item Offcanvas --}}
    @can('workboard.manage')
    <div class="offcanvas offcanvas-end" tabindex="-1" id="addItemOffcanvas" aria-labelledby="addItemOffcanvasLabel">
        <div class="offcanvas-header border-bottom">
            <h5 class="offcanvas-title fw-bold" id="addItemOffcanvasLabel">
                <i class="mdi mdi-plus-circle-outline me-2"></i>Add Item to {{ $category->name }}
            </h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <form wire:submit.prevent="addItem">

                <div class="mb-3">
                    <label class="form-label fw-semibold">Title <span class="text-danger">*</span></label>
                    <input type="text" wire:model="title" class="form-control" placeholder="Describe the work item...">
                    @error('title') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Description <span class="text-muted fw-normal">(optional)</span></label>
                    <textarea wire:model="description" rows="3" class="form-control" placeholder="Additional context..."></textarea>
                    @error('description') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Due Date <span class="text-muted fw-normal">(optional)</span></label>
                    <input type="datetime-local" wire:model="due_at" class="form-control">
                    @error('due_at') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Linked Record <span class="text-muted fw-normal">(optional)</span></label>
                    <select wire:model.live="ownerType" class="form-select mb-2">
                        <option value="">— None —</option>
                        <option value="App\Models\Dsar\Dsar">DSAR</option>
                        <option value="App\Models\Client">Client</option>
                        <option value="App\Models\Claim">Claim</option>
                    </select>
                    @if($ownerType)
                        <input type="number" wire:model="ownerId" class="form-control" placeholder="Record ID">
                        @error('ownerId') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                    @endif
                </div>

                <div class="d-flex gap-2 mt-4">
                    <button type="submit" class="btn btn-primary flex-grow-1"
                            wire:loading.attr="disabled" wire:target="addItem">
                        <span wire:loading.remove wire:target="addItem">Add to Queue</span>
                        <span wire:loading wire:target="addItem">
                            <span class="spinner-border spinner-border-sm me-1"></span>Adding...
                        </span>
                    </button>
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">Cancel</button>
                </div>

            </form>
        </div>
    </div>
    @endcan
</div>
