@extends('layouts.admin')

@section('title', 'Annotate '.$case->name)

@php
    $viewIndex = $case->views->search(fn ($v) => $v->id === $view->id);
    $config = [
        'case' => ['id' => $case->id, 'name' => $case->name],
        'view' => $view->toViewerArray(),
        'views' => $case->views->map->toViewerArray()->values(),
        'items' => $items->map(fn ($item) => ['id' => $item->id, 'name' => $item->name])->values(),
        'annotations' => $annotations,
        'abilities' => $abilities,
        'csrf' => csrf_token(),
        'urls' => [
            'editor' => route('admin.xray-annotations.editor', [$case, '__VIEW__']),
            'data' => route('admin.xray-annotations.index', [$case, '__VIEW__']),
            'store' => route('admin.xray-annotations.store', [$case, '__VIEW__']),
            'update' => route('admin.xray-annotations.update', [$case, '__VIEW__', '__ID__']),
            'destroy' => route('admin.xray-annotations.destroy', [$case, '__VIEW__', '__ID__']),
            'createItem' => route('admin.items.create', ['xray_case_id' => $case->id, 'xray_view_id' => '__VIEW__', 'return_to' => route('admin.xray-annotations.editor', [$case, '__VIEW__'])]),
        ],
    ];
@endphp

@section('content')
    <x-ui.page-header title="Mark Target Locations" :back="route('admin.xray-cases.show', $case)">
        <x-slot:subtitle>
            X-Ray Case <strong>{{ $case->name }}</strong> &middot; <span id="current-view-label">{{ $view->label() }}</span>
            &middot; {{ $case->views->count() }} view(s) &middot; {{ $items->count() }} item(s) of interest
        </x-slot:subtitle>
        <x-slot:actions>
            <span id="mode-badge" class="badge text-bg-secondary align-self-center">Select</span>
            <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-preview"><i class="bi bi-eye"></i> Preview Target</button>
            <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-blink"><i class="bi bi-lightning"></i> Test Blink</button>
            <a class="btn btn-sm btn-outline-secondary" href="{{ route('admin.xray-cases.preview', $case) }}"><i class="bi bi-display"></i> Case Preview</a>
        </x-slot:actions>
    </x-ui.page-header>

    <script type="application/json" id="annotation-editor-config">@json($config)</script>

    <div class="row g-3">
        <div class="col-lg-8">
            <x-xray-viewer :views="$case->views" id="annotation-viewer" height="600px" :initial="$viewIndex" />
            <p class="xrt-meta mt-2 mb-0">
                Coordinates are stored as percentages of the original image, so targets stay aligned while zooming,
                panning, resizing or in full screen. Press Esc to cancel drawing or editing.
            </p>
        </div>

        <div class="col-lg-4">
            <div class="xrt-annotation-panel">
                @include('admin.xray-annotations._panel')
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="@xrtAsset('js/xray-annotation-layer.js')"></script>
    <script src="@xrtAsset('js/xray-annotation-editor.js')"></script>
@endpush