@props([
    'title' => '',
    'images' => collect(),
    'uploadModel' => 'uploadedFiles',
    'uploadInputKey' => 0,
    'deleteMethod' => 'confirmDeleteImage',
    'selectionModel' => null,
    'bulkDeleteMethod' => null,
    'selectionCount' => 0,
    'uploadAccept' => 'image/*',
    'canUpload' => true,
    'allowDelete' => true,
    'emptyText' => 'لا توجد صور في هذا القسم',
    'helpText' => 'يمكن رفع صور بصيغ jpg, jpeg, png, webp',
    'hasMoreImages' => false,
    'loadMoreMethod' => null,
    'saveRotateMethod' => null,
    'canRotate' => true,
    'reorderMethod' => null,
    'reorderMax' => 0,
    'allowCategoryChange' => false,
    'categoryOptions' => [],
    'bulkCategoryMethod' => null,
    'singleCategoryMethod' => null,
    'pendingUploads' => [],
    'pendingDeleteMethod' => null,
    'pendingShowPreviewButton' => true,
    'showDeleteOnCard' => false,
    'showDeleteInPreview' => true,
    'gridClasses' => 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
])

<div
    class="rounded-xl border border-input bg-background/70 p-4"
    x-data="{
        previewOpen: false,
        previewSrc: '',
        previewImageId: null,
        previewRotation: 0,
        previewRotationDelta: 0,
        previewCategoryId: '',
        previewScale: 1,
        previewMinScale: 1,
        previewMaxScale: 5,
        previewZoomStep: 0.2,
        previewOffsetX: 0,
        previewOffsetY: 0,
        previewBaseWidth: 0,
        previewBaseHeight: 0,
        previewViewportWidth: 0,
        previewViewportHeight: 0,
        previewMaxOffsetX: 0,
        previewMaxOffsetY: 0,
        isPanning: false,
        panStartX: 0,
        panStartY: 0,
        pendingPanX: 0,
        pendingPanY: 0,
        panRafId: null,
        isUploading: false,
        progress: 0,
        categoryModalOpen: false,
        categoryTarget: 'bulk',
        categoryImageId: null,
        categorySelected: '',
        categoryOptions: @js($categoryOptions),
        openPreview(src, imageId = null, rotation = 0, categoryId = '') {
            this.previewSrc = src;
            this.previewImageId = imageId;
            this.previewRotation = rotation;
            this.previewRotationDelta = 0;
            this.previewCategoryId = String(categoryId ?? '');
            this.resetPreviewTransform();
            this.isPanning = false;
            this.previewOpen = true;
            this.$nextTick(() => {
                this.refreshPreviewBaseSize();
                this.clampOffsets();
                this.applyPreviewTransform();
            });
        },
        closePreview() {
            this.previewOpen = false;
            this.previewImageId = null;
            this.previewRotation = 0;
            this.previewRotationDelta = 0;
            this.previewCategoryId = '';
            this.resetPreviewTransform();
            this.isPanning = false;
            if (this.panRafId !== null) {
                cancelAnimationFrame(this.panRafId);
                this.panRafId = null;
            }
        },
        resetPreviewTransform() {
            this.previewScale = 1;
            this.previewOffsetX = 0;
            this.previewOffsetY = 0;
            this.previewMaxOffsetX = 0;
            this.previewMaxOffsetY = 0;
            this.applyPreviewTransform();
        },
        applyPreviewTransform() {
            const image = this.$refs.previewImage;
            if (! image) {
                return;
            }

             image.style.width = `${this.previewBaseWidth}px`;
             image.style.height = `${this.previewBaseHeight}px`;
             image.style.transform = `translate3d(${this.previewOffsetX}px, ${this.previewOffsetY}px, 0) rotate(${this.previewRotation}deg) scale(${this.previewScale})`;
             image.style.transformOrigin = 'center center';
        },
        clampOffsets() {
            this.previewOffsetX = Math.min(this.previewMaxOffsetX, Math.max(-this.previewMaxOffsetX, this.previewOffsetX));
            this.previewOffsetY = Math.min(this.previewMaxOffsetY, Math.max(-this.previewMaxOffsetY, this.previewOffsetY));
        },
        normalizeRotation(rotation) {
            return ((rotation % 360) + 360) % 360;
        },
        isSidewaysRotation(rotation) {
            return [90, 270].includes(this.normalizeRotation(rotation));
        },
        normalizedPreviewRotation() {
            return this.normalizeRotation(this.previewRotation);
        },
        isPreviewSideways() {
            return this.isSidewaysRotation(this.previewRotation);
        },
        syncThumbnailStyle(frameRefName, imageRefName, rotation = 0) {
            const frame = this.$refs[frameRefName];
            const image = this.$refs[imageRefName];
            if (! frame || ! image) {
                return;
            }

            const frameWidth = Math.max(1, frame.clientWidth);
            const frameHeight = Math.max(1, frame.clientHeight);
            const naturalWidth = image.naturalWidth || frameWidth;
            const naturalHeight = image.naturalHeight || frameHeight;
            const scale = this.isSidewaysRotation(rotation)
                ? Math.min(frameWidth / Math.max(1, naturalHeight), frameHeight / Math.max(1, naturalWidth))
                : Math.min(frameWidth / Math.max(1, naturalWidth), frameHeight / Math.max(1, naturalHeight));

            image.style.width = `${naturalWidth * scale}px`;
            image.style.height = `${naturalHeight * scale}px`;
            image.style.maxWidth = 'none';
            image.style.maxHeight = 'none';
            image.style.transform = `rotate(${rotation}deg)`;
            image.style.transformOrigin = 'center center';
        },
        updatePanBounds() {
            const viewport = this.$refs.previewViewport;
            if (! viewport) {
                this.previewViewportWidth = 0;
                this.previewViewportHeight = 0;
                this.previewMaxOffsetX = 0;
                this.previewMaxOffsetY = 0;

                return;
            }

            this.previewViewportWidth = viewport.clientWidth;
            this.previewViewportHeight = viewport.clientHeight;

            const baseWidth = this.previewBaseWidth || this.previewViewportWidth;
            const baseHeight = this.previewBaseHeight || this.previewViewportHeight;
            const displayedWidth = this.isPreviewSideways() ? baseHeight : baseWidth;
            const displayedHeight = this.isPreviewSideways() ? baseWidth : baseHeight;
            const scaledWidth = displayedWidth * this.previewScale;
            const scaledHeight = displayedHeight * this.previewScale;

            this.previewMaxOffsetX = Math.max(0, (scaledWidth - this.previewViewportWidth) / 2);
            this.previewMaxOffsetY = Math.max(0, (scaledHeight - this.previewViewportHeight) / 2);
        },
        refreshPreviewBaseSize() {
            const viewport = this.$refs.previewViewport;
            const image = this.$refs.previewImage;
            if (! viewport || ! image) {
                return;
            }

            const viewportWidth = viewport.clientWidth;
            const viewportHeight = viewport.clientHeight;
            const measuredWidth = image.clientWidth || image.naturalWidth || viewportWidth;
            const measuredHeight = image.clientHeight || image.naturalHeight || viewportHeight;
            const scale = this.isPreviewSideways()
                ? Math.min(viewportWidth / Math.max(1, measuredHeight), viewportHeight / Math.max(1, measuredWidth))
                : Math.min(viewportWidth / Math.max(1, measuredWidth), viewportHeight / Math.max(1, measuredHeight));

            this.previewBaseWidth = measuredWidth * scale;
            this.previewBaseHeight = measuredHeight * scale;

            this.updatePanBounds();
        },
        applyScale(nextScale, anchorClientX = null, anchorClientY = null) {
            const boundedScale = Math.min(this.previewMaxScale, Math.max(this.previewMinScale, Number(nextScale.toFixed(2))));
            if (boundedScale === this.previewScale) {
                return;
            }

            const viewport = this.$refs.previewViewport;
            if (! viewport) {
                this.previewScale = boundedScale;

                return;
            }

            const viewportRect = viewport.getBoundingClientRect();
            const anchorX = anchorClientX === null ? (viewportRect.left + (viewportRect.width / 2)) : anchorClientX;
            const anchorY = anchorClientY === null ? (viewportRect.top + (viewportRect.height / 2)) : anchorClientY;
            const localAnchorX = anchorX - viewportRect.left;
            const localAnchorY = anchorY - viewportRect.top;
            const scaleRatio = boundedScale / this.previewScale;

            this.previewOffsetX = localAnchorX - ((localAnchorX - this.previewOffsetX) * scaleRatio);
            this.previewOffsetY = localAnchorY - ((localAnchorY - this.previewOffsetY) * scaleRatio);
            this.previewScale = boundedScale;
            this.updatePanBounds();

            if (this.previewScale === this.previewMinScale) {
                this.previewOffsetX = 0;
                this.previewOffsetY = 0;
                this.previewMaxOffsetX = 0;
                this.previewMaxOffsetY = 0;
            } else {
                this.clampOffsets();
            }

            this.applyPreviewTransform();
        },
        handlePreviewImageLoad() {
            this.resetPreviewTransform();
            this.refreshPreviewBaseSize();
            this.clampOffsets();
            this.applyPreviewTransform();
        },
        zoomIn() {
            this.applyScale(this.previewScale + this.previewZoomStep);
        },
        zoomOut() {
            this.applyScale(this.previewScale - this.previewZoomStep);
        },
        zoomWithWheel(event) {
            const delta = event.deltaY < 0 ? this.previewZoomStep : -this.previewZoomStep;
            this.applyScale(this.previewScale + delta, event.clientX, event.clientY);
        },
        startPan(event) {
            if (this.previewScale <= this.previewMinScale) {
                return;
            }

            this.isPanning = true;
            this.panStartX = event.clientX - this.previewOffsetX;
            this.panStartY = event.clientY - this.previewOffsetY;

            if (event.target.setPointerCapture) {
                event.target.setPointerCapture(event.pointerId);
            }
        },
        onPan(event) {
            if (! this.isPanning) {
                return;
            }

            this.pendingPanX = event.clientX - this.panStartX;
            this.pendingPanY = event.clientY - this.panStartY;
            if (this.panRafId !== null) {
                return;
            }

            this.panRafId = requestAnimationFrame(() => {
                this.previewOffsetX = this.pendingPanX;
                this.previewOffsetY = this.pendingPanY;
                this.clampOffsets();
                this.applyPreviewTransform();
                this.panRafId = null;
            });
        },
        rotateRight() {
            this.previewRotation += 90;
            this.previewRotationDelta += 90;
            this.refreshPreviewBaseSize();
            this.clampOffsets();
            this.applyPreviewTransform();
        },
        rotateLeft() {
            this.previewRotation -= 90;
            this.previewRotationDelta -= 90;
            this.refreshPreviewBaseSize();
            this.clampOffsets();
            this.applyPreviewTransform();
        },
        endPan(event) {
            this.isPanning = false;

            if (event?.target?.releasePointerCapture) {
                event.target.releasePointerCapture(event.pointerId);
            }
        },
        toggleZoomAtPoint(event) {
            if (this.previewScale > this.previewMinScale) {
                this.resetPreviewTransform();

                return;
            }

            this.applyScale(2, event.clientX, event.clientY);
        },
    }"
>
    <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h4 class="text-sm font-semibold text-foreground">{{ $title }}</h4>
            <p class="text-xs text-muted-foreground">{{ $helpText }}</p>
        </div>

        <div class="flex flex-wrap items-center gap-2">
            @if((bool) $allowDelete && filled($selectionModel) && filled($bulkDeleteMethod))
                <button
                    type="button"
                    wire:click="{{ $bulkDeleteMethod }}"
                    @disabled((int) $selectionCount === 0)
                    class="kt-btn kt-btn-outline btn-sm px-4 text-red-600 hover:text-red-700"
                >
                    حذف المحدد
                </button>
            @endif

            @if((bool) $allowCategoryChange && filled($selectionModel) && filled($bulkCategoryMethod))
                <button
                    type="button"
                    @disabled((int) $selectionCount === 0)
                    @click="
                        categoryTarget = 'bulk';
                        categoryImageId = null;
                        categorySelected = '';
                        categoryModalOpen = true;
                    "
                    class="kt-btn kt-btn-outline btn-sm px-4"
                >
                    تغيير التصنيف
                </button>
            @endif

            @if((bool) $canUpload)
                <div>
                    <label
                        for="craft-images-input-{{ $uploadInputKey }}"
                        class="kt-btn kt-btn-outline btn-sm cursor-pointer px-4"
                    >
                        إضافة صور
                    </label>
                    <input
                        id="craft-images-input-{{ $uploadInputKey }}"
                        type="file"
                        class="hidden"
                        accept="{{ $uploadAccept }}"
                        multiple
                        wire:model.live="{{ $uploadModel }}"
                        x-on:livewire-upload-start="isUploading = true; progress = 0"
                        x-on:livewire-upload-finish="isUploading = false; progress = 100"
                        x-on:livewire-upload-error="isUploading = false"
                        x-on:livewire-upload-progress="progress = $event.detail.progress"
                    >
                </div>
            @endif
        </div>
    </div>

    @if((bool) $canUpload)
        <div
            class="fixed inset-0 z-[100] hidden items-center justify-center bg-black/70 px-6"
            wire:loading.flex
            wire:target="{{ $uploadModel }}"
        >
            <div class="w-full max-w-xl rounded-2xl bg-background p-6 shadow-2xl">
                <div class="mb-3 text-center text-2xl font-extrabold text-primary">
                    جاري رفع الملفات...
                </div>
                <div class="mb-2 h-4 overflow-hidden rounded-full bg-muted">
                    <div
                        class="h-full rounded-full bg-primary transition-all duration-150"
                        x-bind:style="`width: ${progress}%`"
                    ></div>
                </div>
                <div class="text-center text-base font-semibold text-muted-foreground">
                    <span x-text="`${progress}%`"></span>
                </div>
            </div>
        </div>

        @error($uploadModel.'.*')
            <div class="kt-form-message JS_error has-error mb-3">{{ $message }}</div>
        @enderror
    @endif

    @if(collect($images)->isEmpty() && collect($pendingUploads)->isEmpty())
        <div class="rounded-lg border border-dashed border-input bg-muted/10 px-4 py-8 text-center text-sm text-muted-foreground">
            {{ $emptyText }}
        </div>
    @else
        <div class="{{ $gridClasses }}">
            @foreach($images as $image)
                <div class="group relative overflow-hidden rounded-lg border border-info bg-background" wire:key="craft-image-box-{{ (int) $image->id }}">
                    @if(filled($selectionModel) && (bool) $allowDelete)
                        <label class="absolute start-2 top-2 z-20 bg-white inline-flex items-center gap-1 rounded-md bg-background/95 px-2 py-1 text-xs font-semibold shadow">
                            <input
                                type="checkbox"
                                class="h-4 w-4"
                                wire:model.live="{{ $selectionModel }}"
                                value="{{ (int) $image->id }}"
                            >
                            <span>{{ __('modules.archive.resources_views_components_image_box.text_ed2dadcfa5') }}</span>
                        </label>
                    @endif

                    <button
                        type="button"
                        class="block w-full"
                        @click="openPreview('{{ $image->image_url }}', {{ (int) $image->id }}, {{ (int) ($image->rotation_degrees ?? 0) }}, '{{ (int) ($image->image_type_id ?? 0) }}')"
                    >
                        <div
                            x-ref="thumbnailFrame_{{ (int) $image->id }}"
                            class="flex h-44 w-full items-center justify-center overflow-hidden bg-muted/10 p-2"
                            @resize.window="syncThumbnailStyle('thumbnailFrame_{{ (int) $image->id }}', 'thumbnailImage_{{ (int) $image->id }}', {{ (int) ($image->rotation_degrees ?? 0) }})"
                        >
                            <img
                                x-ref="thumbnailImage_{{ (int) $image->id }}"
                                src="{{ $image->image_url }}"
                                alt="{{ __('modules.archive.resources_views_components_image_box.text_62333b71e8') }}"
                                class="block object-contain"
                                loading="lazy"
                                @load="syncThumbnailStyle('thumbnailFrame_{{ (int) $image->id }}', 'thumbnailImage_{{ (int) $image->id }}', {{ (int) ($image->rotation_degrees ?? 0) }})"
                                x-init="$nextTick(() => syncThumbnailStyle('thumbnailFrame_{{ (int) $image->id }}', 'thumbnailImage_{{ (int) $image->id }}', {{ (int) ($image->rotation_degrees ?? 0) }}))"
                            >
                        </div>
                    </button>

                    <div class="absolute inset-0 flex items-center justify-center gap-2 bg-black/40 opacity-0 transition group-hover:opacity-100">
                        <button
                            type="button"
                            class="inline-flex items-center rounded-md bg-white/95 px-3 py-1.5 text-xs font-semibold text-foreground hover:bg-white"
                            @click="openPreview('{{ $image->image_url }}', {{ (int) $image->id }}, {{ (int) ($image->rotation_degrees ?? 0) }}, '{{ (int) ($image->image_type_id ?? 0) }}')"
                        >
                            عرض
                        </button>

                        @if((bool) $allowDelete && (bool) $showDeleteOnCard)
                            <button
                                type="button"
                                class="inline-flex items-center rounded-md bg-red-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-red-700"
                                wire:click="{{ $deleteMethod }}({{ (int) $image->id }})"
                            >
                                حذف
                            </button>
                        @endif
                    </div>

                    @if((bool) $canUpload && filled($reorderMethod))
                        <div class="absolute bottom-2 end-2 z-20 rounded-md bg-white/95 px-2 py-1 shadow">
                            <label class="flex items-center gap-2 text-xs font-semibold text-foreground">
                                <span>{{ __('modules.archive.resources_views_components_image_box.text_f7f55b584e') }}</span>
                                <select
                                    class="kt-input h-8 w-20 text-xs"
                                    wire:change="{{ $reorderMethod }}({{ (int) $image->id }}, $event.target.value)"
                                >
                                    @for($order = 1; $order <= max(1, (int) $reorderMax); $order++)
                                        <option value="{{ $order }}" @selected((int) $image->ordering === $order)>{{ $order }}</option>
                                    @endfor
                                </select>
                            </label>
                        </div>
                    @endif
                </div>
            @endforeach

            @foreach($pendingUploads as $pending)
                <div class="group relative overflow-hidden rounded-lg border border-info bg-background" wire:key="craft-image-box-pending-{{ (int) data_get($pending, 'index', 0) }}">
                    @if(filled(data_get($pending, 'preview_url')))
                        <button
                            type="button"
                            class="block w-full"
                            @click="openPreview('{{ data_get($pending, "preview_url") }}')"
                        >
                            <img
                                src="{{ data_get($pending, 'preview_url') }}"
                                alt="{{ __('modules.archive.resources_views_components_image_box.text_3b56ef1523') }}"
                                class="h-44 w-full object-cover"
                                loading="lazy"
                            >
                        </button>
                    @else
                        <div class="flex h-44 w-full items-center justify-center bg-muted/30 text-muted-foreground">
                            <div class="text-center">
                                <i class="ki-outline ki-file fs-2"></i>
                                <div class="mt-2 text-xs font-semibold">{{ __('modules.archive.resources_views_components_image_box.text_685ae0c51a') }}</div>
                            </div>
                        </div>
                    @endif

                    <div class="truncate border-t border-input px-3 py-2 text-xs font-medium">
                        {{ data_get($pending, 'name', '') }}
                    </div>

                    <div class="absolute inset-0 flex items-center justify-center gap-2 bg-black/40 opacity-0 transition group-hover:opacity-100">
                        @if((bool) $pendingShowPreviewButton && filled(data_get($pending, 'preview_url')))
                            <button
                                type="button"
                                class="inline-flex items-center rounded-md bg-white/95 px-3 py-1.5 text-xs font-semibold text-foreground hover:bg-white"
                                @click="openPreview('{{ data_get($pending, "preview_url") }}')"
                            >
                                عرض
                            </button>
                        @endif

                        @if(filled($pendingDeleteMethod))
                            <button
                                type="button"
                                wire:click="{{ $pendingDeleteMethod }}({{ (int) data_get($pending, 'index', 0) }})"
                                class="inline-flex items-center rounded-md bg-red-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-red-700"
                            >
                                حذف
                            </button>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        @if((bool) $hasMoreImages && filled($loadMoreMethod))
            <div
                class="mt-5 flex items-center justify-center"
                wire:poll.visible.750ms="{{ $loadMoreMethod }}"
            >
                <button
                    type="button"
                    wire:click="{{ $loadMoreMethod }}"
                    wire:loading.attr="disabled"
                    wire:target="{{ $loadMoreMethod }}"
                    class="kt-btn kt-btn-outline btn-sm px-5"
                >
                    تحميل المزيد
                </button>
            </div>
        @endif
    @endif

    <template x-if="previewOpen">
    <div
        x-cloak
        class="fixed inset-0 z-[90] flex items-center justify-center bg-black/80 p-5"
        @click.self="closePreview()"
        @keydown.escape.window="closePreview()"
    >
        <div class="absolute left-1/2 top-4 z-[95] -translate-x-1/2">
            <div class="flex items-center gap-2 rounded-full bg-white/95 px-3 py-2 shadow-xl">
                <button
                    type="button"
                    class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-input text-lg font-bold text-foreground"
                    x-bind:disabled="previewScale <= previewMinScale"
                    @click.stop="zoomOut()"
                >
                    -
                </button>
                <div class="min-w-16 text-center text-xs font-semibold text-foreground" x-text="`${Math.round(previewScale * 100)}%`"></div>
                <button
                    type="button"
                    class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-input text-lg font-bold text-foreground"
                    x-bind:disabled="previewScale >= previewMaxScale"
                    @click.stop="zoomIn()"
                >
                    +
                </button>
            </div>
        </div>

        @if((bool) $canRotate)
            <div class="absolute left-4 top-1/2 z-[95] -translate-y-1/2">
            <div class="w-44 rounded-xl border border-input bg-background p-3 shadow-xl backdrop-blur-sm">
                <div class="mb-2 text-xs font-bold text-foreground">{{ __('modules.archive.resources_views_components_image_box.text_8a3a99768a') }}</div>
                <div class="flex flex-col gap-2">
                    <button
                        type="button"
                        class="kt-btn kt-btn-outline btn-sm justify-center"
                        @click.stop="rotateRight()"
                    >
                        تدوير لليمين
                    </button>
                    <button
                        type="button"
                        class="kt-btn kt-btn-outline btn-sm justify-center"
                        @click.stop="rotateLeft()"
                    >
                        تدوير لليسار
                    </button>
                    @if(filled($saveRotateMethod))
                        <button
                            type="button"
                            class="kt-btn btn-sm justify-center"
                            wire:loading.attr="disabled"
                            wire:target="{{ $saveRotateMethod }}"
                            x-bind:disabled="previewImageId === null || (((previewRotationDelta % 360) + 360) % 360) === 0"
                            @click.stop="
                                if (previewImageId === null) {
                                    return;
                                }
                                $wire.{{ $saveRotateMethod }}(previewImageId, previewRotationDelta);
                                previewRotationDelta = 0;
                            "
                        >
                            حفظ
                        </button>
                    @endif
                </div>
            </div>
            </div>
        @endif

        @if((bool) $allowCategoryChange && filled($singleCategoryMethod))
            <div class="absolute right-4 top-1/2 z-[95] -translate-y-1/2">
                <div class="w-52 rounded-xl border border-input bg-background p-3 shadow-xl backdrop-blur-sm">
                    <div class="mb-2 text-xs font-bold text-foreground">{{ __('modules.archive.resources_views_components_image_box.text_6926528f6a') }}</div>
                    <div class="flex flex-col gap-2">
                        <button
                            type="button"
                            class="kt-btn btn-sm justify-center"
                            x-bind:disabled="previewImageId === null"
                            @click.stop="
                                if (previewImageId === null) {
                                    return;
                                }
                                categoryTarget = 'single';
                                categoryImageId = previewImageId;
                                categorySelected = previewCategoryId || '';
                                categoryModalOpen = true;
                            "
                        >
                            تغيير التصنيف
                        </button>
                    </div>
                </div>
            </div>
        @endif

        @if((bool) $allowDelete && (bool) $showDeleteInPreview)
            <div class="absolute bottom-5 right-5 z-[95]">
                <button
                    type="button"
                    class="kt-btn btn-sm bg-red-600 text-white hover:bg-red-700"
                    x-bind:disabled="previewImageId === null"
                    @click.stop="
                        if (previewImageId === null) {
                            return;
                        }
                        $wire.{{ $deleteMethod }}(previewImageId);
                        closePreview();
                    "
                >
                    حذف الصورة
                </button>
            </div>
        @endif

        <button
            type="button"
            class="absolute end-4 top-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/95 text-xl font-bold text-foreground shadow"
            @click="closePreview()"
        >
            ×
        </button>
        <div
            x-ref="previewViewport"
            class="relative flex h-[90vh] w-[92vw] max-h-[90vh] max-w-[92vw] items-center justify-center overflow-hidden rounded-lg shadow-2xl"
            x-bind:class="previewScale > previewMinScale ? (isPanning ? 'cursor-grabbing' : 'cursor-grab') : 'cursor-zoom-in'"
            style="touch-action: none;"
            @resize.window="if (previewOpen) { refreshPreviewBaseSize(); clampOffsets(); }"
            @wheel.prevent="zoomWithWheel($event)"
            @pointerdown.prevent="startPan($event)"
            @pointermove.prevent="onPan($event)"
            @pointerup="endPan($event)"
            @pointercancel="endPan($event)"
            @pointerleave="endPan($event)"
            @dblclick.prevent="toggleZoomAtPoint($event)"
        >
            <img
                x-ref="previewImage"
                :src="previewSrc"
                alt="{{ __('modules.archive.resources_views_components_image_box.text_178f6b5648') }}"
                class="max-w-none max-h-none rounded-lg select-none"
                @load="handlePreviewImageLoad()"
                draggable="false"
            >
        </div>
    </div>
    </template>

    @if((bool) $allowCategoryChange && filled($bulkCategoryMethod) && filled($singleCategoryMethod))
        <div
            x-show="categoryModalOpen"
            x-cloak
            class="fixed inset-0 z-[110] flex items-center justify-center bg-black/60 p-4"
            @click.self="categoryModalOpen = false"
        >
            <div class="w-full max-w-md rounded-xl border border-input bg-background p-4 shadow-2xl">
                <h5 class="mb-3 text-sm font-semibold text-foreground">{{ __('modules.archive.resources_views_components_image_box.text_4866c20335') }}</h5>

                <label class="mb-4 block">
                    <span class="mb-1 block text-xs font-semibold text-muted-foreground">{{ __('modules.archive.resources_views_components_image_box.text_cf23595995') }}</span>
                    <select
                        x-model="categorySelected"
                        class="kt-input h-10 w-full text-sm"
                    >
                        <option value="">{{ __('modules.archive.resources_views_components_image_box.text_c92464248d') }}</option>
                        <template x-for="option in categoryOptions" :key="'modal-' + option.id">
                            <option :value="String(option.id)" x-text="option.name"></option>
                        </template>
                    </select>
                </label>

                <div class="flex items-center justify-end gap-2">
                    <button
                        type="button"
                        class="kt-btn kt-btn-outline btn-sm"
                        @click="categoryModalOpen = false"
                    >
                        إلغاء
                    </button>
                    <button
                        type="button"
                        class="kt-btn btn-sm"
                        x-bind:disabled="!categorySelected"
                        @click="
                            if (!categorySelected) {
                                return;
                            }
                            if (categoryTarget === 'single' && categoryImageId !== null) {
                                $wire.{{ $singleCategoryMethod }}(categoryImageId, Number(categorySelected));
                                closePreview();
                            } else {
                                $wire.{{ $bulkCategoryMethod }}(Number(categorySelected));
                            }
                            categoryModalOpen = false;
                        "
                    >
                        حفظ
                    </button>
                </div>
            </div>
        </div>
    @endif
</div>