@extends('layouts.admin')

@section('title', 'X-Ray Cases')

@section('content')
    <x-ui.page-header title="X-Ray Cases" subtitle="{{ $cases->total() }} case(s) found">
        <x-slot:actions>
            @can(\App\Support\Permissions::CASES_CREATE)
                <a class="btn btn-sm btn-primary" href="{{ route('admin.xray-cases.create') }}">
                    <i class="bi bi-plus-lg"></i> New Case
                </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-3">
                <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 name or display name">
            </div>
            <div class="col-md-2">
                <label class="xrt-label" for="f-machine">Machine type</label>
                <select class="form-select form-select-sm" id="f-machine" name="machine_type">
                    <option value="">All machines</option>
                    @foreach (config('xrt.machine_types') as $machine)
                        <option value="{{ $machine }}" @selected(($filters['machine_type'] ?? '') === $machine)>{{ $machine }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="xrt-label" for="f-area">Area</label>
                <select class="form-select form-select-sm" id="f-area" name="area">
                    <option value="">All areas</option>
                    @foreach (config('xrt.areas') as $area)
                        <option value="{{ $area }}" @selected(($filters['area'] ?? '') === $area)>{{ $area }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="xrt-label" for="f-complexity">Complexity</label>
                <select class="form-select form-select-sm" id="f-complexity" name="complexity">
                    <option value="">All levels</option>
                    @foreach (\App\Enums\Complexity::options() as $value => $label)
                        <option value="{{ $value }}" @selected(($filters['complexity'] ?? '') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="xrt-label" for="f-status">Status</label>
                <select class="form-select form-select-sm" id="f-status" name="status">
                    <option value="">All statuses</option>
                    @foreach (\App\Enums\ContentStatus::options() as $value => $label)
                        <option value="{{ $value }}" @selected(($filters['status'] ?? '') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="xrt-label" for="f-library">Library</label>
                <select class="form-select form-select-sm" id="f-library" name="library_id">
                    <option value="">All libraries</option>
                    @foreach ($libraries as $library)
                        <option value="{{ $library->id }}" @selected((string) ($filters['library_id'] ?? '') === (string) $library->id)>{{ $library->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-6 d-flex gap-2">
                <button class="btn btn-sm btn-primary" type="submit"><i class="bi bi-funnel"></i> Apply Filters</button>
                <button class="btn btn-sm btn-outline-secondary" type="button" data-filter-reset><i class="bi bi-x-circle"></i> Reset Filters</button>
            </div>
        </div>

        <input type="hidden" name="sort" value="{{ $sort }}">
        <input type="hidden" name="direction" value="{{ $direction }}">
    </form>

    <div class="d-flex flex-wrap gap-3 align-items-center mb-2 xrt-meta">
        <span>Sort by:</span>
        <x-ui.sort-link column="name" label="Name" :sort="$sort" :direction="$direction" />
        <x-ui.sort-link column="complexity" label="Complexity" :sort="$sort" :direction="$direction" />
        <x-ui.sort-link column="status" label="Status" :sort="$sort" :direction="$direction" />
        <x-ui.sort-link column="created_at" label="Created" :sort="$sort" :direction="$direction" />
        <x-ui.sort-link column="updated_at" label="Updated" :sort="$sort" :direction="$direction" />
    </div>

    @forelse ($cases as $case)
        @php $primary = $case->views->first(); @endphp
        <div class="xrt-list-row">
            @if ($primary)
                <img class="xrt-thumb" src="{{ $primary->imageUrl() }}" alt="{{ $case->name }}">
            @else
                <div class="xrt-thumb xrt-thumb-placeholder"><i class="bi bi-image"></i></div>
            @endif

            <div class="flex-grow-1">
                <div class="d-flex flex-wrap align-items-center gap-2">
                    <a class="fw-semibold text-decoration-none" href="{{ route('admin.xray-cases.show', $case) }}">{{ $case->name }}</a>
                    <x-ui.status-badge :value="$case->status" />
                    <span class="badge {{ $case->complexity->badgeClass() }}">{{ $case->complexity->value }}</span>
                </div>
                <div class="xrt-meta mb-2">{{ $case->display_name }}</div>

                <div class="row g-2 small">
                    <div class="col-6 col-md-2"><span class="xrt-label d-block">Machine</span>{{ $case->machine_type ?? '—' }}</div>
                    <div class="col-6 col-md-2"><span class="xrt-label d-block">Area</span>{{ $case->area ?? '—' }}</div>
                    <div class="col-6 col-md-1"><span class="xrt-label d-block">Version</span>{{ $case->version }}</div>
                    <div class="col-6 col-md-1"><span class="xrt-label d-block">Views</span>{{ $case->views_count }}</div>
                    <div class="col-6 col-md-2"><span class="xrt-label d-block">Libraries</span>{{ $case->libraries->pluck('name')->join(', ') ?: '—' }}</div>
                    <div class="col-6 col-md-2"><span class="xrt-label d-block">Created</span>{{ $case->created_at?->format('d M Y') }}</div>
                    <div class="col-6 col-md-2"><span class="xrt-label d-block">Updated</span>{{ $case->updated_at?->format('d M Y H:i') }}</div>
                </div>
            </div>

            <div class="d-flex flex-column gap-1">
                <a class="btn btn-sm btn-outline-primary" href="{{ route('admin.xray-cases.show', $case) }}"><i class="bi bi-eye"></i> View</a>
                <a class="btn btn-sm btn-outline-secondary" href="{{ route('admin.xray-cases.preview', $case) }}"><i class="bi bi-display"></i> Preview</a>
                @can('update', $case)
                    <a class="btn btn-sm btn-outline-secondary" href="{{ route('admin.xray-cases.edit', $case) }}"><i class="bi bi-pencil"></i> Edit</a>
                @endcan
                @can('delete', $case)
                    <x-ui.delete-button :action="route('admin.xray-cases.destroy', $case)" label="Delete"
                        confirm="Delete case {{ $case->name }} with all of its views and images? This cannot be undone." />
                @endcan
            </div>
        </div>
    @empty
        <div class="xrt-card">
            <div class="xrt-card-body">
                <x-ui.empty-state icon="bi-images" title="No x-ray cases found"
                    message="Adjust the filters, or create your first case.">
                    @can(\App\Support\Permissions::CASES_CREATE)
                        <a class="btn btn-sm btn-primary" href="{{ route('admin.xray-cases.create') }}">New Case</a>
                    @endcan
                </x-ui.empty-state>
            </div>
        </div>
    @endforelse

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