@php
    /** @var \Illuminate\Database\Eloquent\Model $asset */
    $existingImages = collect();
    if ($asset->exists) {
        $existingImages = $asset->relationLoaded('images')
            ? collect($asset->images)
            : $asset->images()->get();
    }

    $removeSelection = collect(old('remove_image_ids', []))
        ->map(fn ($id) => (int) $id)
        ->all();
    $fieldId = 'asset_images_'.uniqid();
@endphp

<div class="md:col-span-2 space-y-3" data-image-upload-field>
    <div>
        <x-input-label :for="$fieldId" :value="__('messages.asset_images')" />

        <div class="mt-2 flex flex-wrap items-center gap-3">
            <label for="{{ $fieldId }}" class="theme-btn-outline text-sm cursor-pointer">
                {{ __('messages.add_images') }}
            </label>
            <p class="text-xs theme-inline-muted">
                {{ __('messages.image_upload_hint') }}
            </p>
        </div>

        <input id="{{ $fieldId }}" type="file" name="images[]" accept="image/*" multiple class="sr-only" data-images-input>
        <x-input-error class="mt-2" :messages="$errors->get('images')" />
        <x-input-error class="mt-2" :messages="$errors->get('images.*')" />
    </div>

    <div>
        <p class="text-sm font-medium text-[var(--theme-text)]">{{ __('messages.new_images_preview') }}</p>
        <div class="mt-2 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3" data-images-preview></div>
    </div>

    @if ($existingImages->isNotEmpty())
        <div>
            <p class="text-sm font-medium text-[var(--theme-text)]">{{ __('messages.current_images') }}</p>
            <div class="mt-2 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
                @foreach ($existingImages as $image)
                    @php $imageUrl = '/storage/'.ltrim((string) $image->path, '/'); @endphp
                    <div class="rounded-xl border border-[var(--theme-border)] overflow-hidden bg-[var(--theme-bg)]">
                        <img
                            src="{{ $imageUrl }}"
                            alt="{{ __('messages.asset_images') }}"
                            class="h-24 w-full object-cover"
                            loading="lazy"
                        >
                        <label class="flex items-center gap-2 p-2 text-xs">
                            <input
                                type="checkbox"
                                name="remove_image_ids[]"
                                value="{{ $image->id }}"
                                class="rounded border-[var(--theme-border)] text-[var(--theme-primary)]"
                                @checked(in_array((int) $image->id, $removeSelection, true))
                            >
                            <span>{{ __('messages.remove_selected') }}</span>
                        </label>
                    </div>
                @endforeach
            </div>
            <x-input-error class="mt-2" :messages="$errors->get('remove_image_ids')" />
            <x-input-error class="mt-2" :messages="$errors->get('remove_image_ids.*')" />
        </div>
    @endif

    <script>
        (() => {
            const wrapper = document.currentScript.closest('[data-image-upload-field]');
            if (!wrapper) return;

            const input = wrapper.querySelector('[data-images-input]');
            const preview = wrapper.querySelector('[data-images-preview]');
            if (!input || !preview) return;

            input.addEventListener('change', () => {
                preview.innerHTML = '';
                const files = Array.from(input.files || []);
                files.forEach((file) => {
                    if (!file.type.startsWith('image/')) return;

                    const card = document.createElement('div');
                    card.className = 'rounded-xl border border-[var(--theme-border)] overflow-hidden bg-[var(--theme-bg)]';

                    const img = document.createElement('img');
                    img.className = 'h-24 w-full object-cover';
                    img.loading = 'lazy';
                    img.alt = file.name;
                    img.src = URL.createObjectURL(file);

                    const caption = document.createElement('p');
                    caption.className = 'p-2 text-[11px] theme-inline-muted truncate';
                    caption.textContent = file.name;

                    card.appendChild(img);
                    card.appendChild(caption);
                    preview.appendChild(card);
                });
            });
        })();
    </script>
</div>