{{-- Shared by add view and edit view. --}}
@csrf

<div class="row">
    <div class="col-md-8 mb-3">
        <label class="form-label" for="image">
            {{ $view->exists ? 'Replacement image' : 'X-ray image' }}
            @unless ($view->exists)<span class="text-danger">*</span>@endunless
        </label>
        <input class="form-control form-control-sm @error('image') is-invalid @enderror"
               type="file" id="image" name="image"
               accept="{{ collect(config('xrt.uploads.mime_types'))->join(',') }}"
               @unless ($view->exists) required @endunless>
        @error('image')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
        <div class="form-text">
            {{ collect(config('xrt.uploads.mimes'))->map(fn ($m) => strtoupper($m))->join(', ') }}
            up to {{ number_format(config('xrt.uploads.max_kilobytes') / 1024, 0) }} MB.
            @if ($view->exists)
                Leave empty to keep the current image; the existing file is only removed once the new one is stored.
            @endif
        </div>
    </div>

    <div class="col-md-4 mb-3 {{ $view->exists ? '' : 'd-none' }}" data-image-preview>
        <div class="xrt-label mb-1" data-preview-label>{{ $view->exists ? 'Current image' : 'Selected image' }}</div>
        <img class="xrt-thumb w-100" style="height:110px" data-preview-img
             src="{{ $view->imageUrl() }}" alt="{{ $view->exists ? $view->label() : '' }}">
        <div class="xrt-meta" data-preview-meta>
            @if ($view->exists){{ $view->image_width }} × {{ $view->image_height }} px @endif
        </div>
    </div>

    <x-form.input name="view_number" label="View Number" type="number" min="0"
        :value="$view->view_number" col="col-md-4"
        help="Shown as “View 0”, “View 1”, … and unique within the case." />

    <x-form.input name="sort_order" label="Display Order" type="number" min="0"
        :value="$view->sort_order" col="col-md-4"
        help="Leave empty to append at the end. Order can also be changed by dragging." />

    <x-form.select name="status" label="Status" col="col-md-4" :placeholder="null"
        :options="\App\Enums\ContentStatus::options()"
        :selected="$view->status?->value ?? \App\Enums\ContentStatus::default()->value" />
</div>

<div class="d-flex gap-2 pt-2 border-top">
    <button class="btn btn-sm btn-primary" type="submit"><i class="bi bi-check-lg"></i> {{ $submitLabel }}</button>
    <a class="btn btn-sm btn-outline-secondary" href="{{ route('admin.xray-cases.show', $case) }}">Cancel</a>
</div>

@push('scripts')
<script>
    // Local preview of the chosen file before it is uploaded. Clearing the
    // selection restores the current image (or hides the preview when adding).
    (function () {
        var input = document.getElementById('image');
        var box = document.querySelector('[data-image-preview]');
        if (!input || !box) return;

        var img = box.querySelector('[data-preview-img]');
        var label = box.querySelector('[data-preview-label]');
        var meta = box.querySelector('[data-preview-meta]');
        var original = { src: img.getAttribute('src'), label: label.textContent, meta: meta.textContent, hidden: box.classList.contains('d-none') };
        var maxBytes = {{ (int) config('xrt.uploads.max_kilobytes') }} * 1024;
        var objectUrl = null;

        input.addEventListener('change', function () {
            if (objectUrl) { URL.revokeObjectURL(objectUrl); objectUrl = null; }

            img.onload = img.onerror = null;

            var file = input.files && input.files[0];
            if (!file) {
                img.setAttribute('src', original.src || '');
                label.textContent = original.label;
                meta.textContent = original.meta;
                box.classList.toggle('d-none', original.hidden);
                return;
            }

            var tooLarge = file.size > maxBytes ? ' · exceeds ' + Math.round(maxBytes / 1048576) + ' MB limit' : '';
            objectUrl = URL.createObjectURL(file);
            label.textContent = 'Selected image (not saved yet)';
            meta.textContent = (file.size / 1048576).toFixed(1) + ' MB' + tooLarge;
            box.classList.remove('d-none');

            img.onload = function () {
                meta.textContent = img.naturalWidth + ' × ' + img.naturalHeight + ' px · ' + meta.textContent;
            };
            img.onerror = function () {
                meta.textContent = 'This file cannot be previewed as an image' + tooLarge;
            };
            img.src = objectUrl;
        });
    })();
</script>
@endpush