@extends('layouts.admin')

@section('title', 'Items of Interest')

@section('content')
    <x-ui.page-header title="Items of Interest" subtitle="{{ $items->total() }} item(s) found">
        <x-slot:actions>
            @can(\App\Support\Permissions::ITEMS_CREATE)
                <a class="btn btn-sm btn-primary" href="{{ route('admin.items.create') }}">
                    <i class="bi bi-plus-lg"></i> New Item
                </a>
            @endcan
        </x-slot:actions>
    </x-ui.page-header>

    <form method="GET" class="xrt-filter-bar mb-3">
        <div class="row g-2 align-items-end">
            <div class="col-md-4">
                <label class="xrt-label" for="f-name">Name</label>
                <input class="form-control form-control-sm" id="f-name" name="name" value="{{ $filters['name'] ?? '' }}" placeholder="Search by name">
            </div>
            <div class="col-md-3">
                <label class="xrt-label" for="f-category">Category</label>
                <select class="form-select form-select-sm" id="f-category" name="category">
                    <option value="">All categories</option>
                    @foreach (config('xrt.item_categories') as $category)
                        <option value="{{ $category }}" @selected(($filters['category'] ?? '') === $category)>{{ $category }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="xrt-label" for="f-case">X-ray case</label>
                <select class="form-select form-select-sm" id="f-case" name="xray_case_id">
                    <option value="">All cases</option>
                    @foreach ($cases as $case)
                        <option value="{{ $case->id }}" @selected((string) ($filters['xray_case_id'] ?? '') === (string) $case->id)>{{ $case->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2 d-flex gap-2">
                <button class="btn btn-sm btn-primary" type="submit"><i class="bi bi-funnel"></i> Apply</button>
                <button class="btn btn-sm btn-outline-secondary" type="button" data-filter-reset><i class="bi bi-x-circle"></i> Reset</button>
            </div>
        </div>
    </form>

    <div class="xrt-card">
        <div class="xrt-card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th><x-ui.sort-link column="name" label="Item" :sort="$sort" :direction="$direction" /></th>
                            <th><x-ui.sort-link column="category" label="Category" :sort="$sort" :direction="$direction" /></th>
                            <th>X-Ray Case</th>
                            <th>View</th>
                            <th><x-ui.sort-link column="updated_at" label="Updated" :sort="$sort" :direction="$direction" /></th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($items as $item)
                            <tr>
                                <td>
                                    <a class="fw-semibold text-decoration-none" href="{{ route('admin.items.show', $item) }}">{{ $item->name }}</a>
                                </td>
                                <td>{{ $item->category ?? '—' }}</td>
                                <td>
                                    <a class="text-decoration-none" href="{{ route('admin.xray-cases.show', $item->xray_case_id) }}">
                                        {{ $item->xrayCase?->name }}
                                    </a>
                                </td>
                                <td>{{ $item->xrayView?->label() ?? 'Whole case' }}</td>
                                <td class="xrt-meta">{{ $item->updated_at?->format('d M Y H:i') }}</td>
                                <td class="text-end">
                                    <a class="btn btn-sm btn-outline-primary" href="{{ route('admin.items.show', $item) }}"><i class="bi bi-eye"></i></a>
                                    @can('update', $item)
                                        <a class="btn btn-sm btn-outline-secondary" href="{{ route('admin.items.edit', $item) }}"><i class="bi bi-pencil"></i></a>
                                    @endcan
                                    @can('delete', $item)
                                        <x-ui.delete-button :action="route('admin.items.destroy', $item)"
                                            confirm="Delete item {{ $item->name }}?" />
                                    @endcan
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6">
                                    <x-ui.empty-state icon="bi-crosshair" title="No items of interest found"
                                        message="Items describe the objects a trainee has to detect in a case." />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="mt-3">{{ $items->links() }}</div>
@endsection