@props([
    'name' => 'marketing',
    'label' => '마케팅 갤러리 이미지 관리',
    'model' => null,
    'maxCount' => 30,
    'badgeText' => '최대 30장 등록 가능',
    'buttonText' => '사진 추가'
])

@php
    $slotKey = $name;
    $existingImages = collect();
    if ($model && method_exists($model, 'getSlotImages')) {
        $existingImages = $model->getSlotImages($slotKey);
    }
    $currentCount = $existingImages->count();

    // 🌟 뷰티샵 전용 라우트 고정 주입
    $shopUploadRoute = '/shop-admin/images';
    $shopIndexRoute  = '/shop-admin/images/list';
    $shopFolderRoute = '/shop-admin/image-folders';
@endphp

<!-- 슬롯 컨테이너 -->
<div class="multi-slot-container mb-3 mb-md-4" data-slot-name="{{ $slotKey }}" data-max-count="{{ $maxCount }}">
    
    <!-- 1. 헤더 영역 -->
    <div class="multi-slot-header px-1 px-md-0 mb-2">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <span class="fw-bold text-dark small">
                <i class="fa-solid fa-images me-1 text-primary"></i> {{ $label }}
            </span>
            <span class="badge bg-primary-subtle text-primary border border-primary-subtle small" id="{{ $slotKey }}CountBadge">
                {{ $currentCount }} / {{ $maxCount }}
            </span>
        </div>

        <div class="multi-slot-action-header d-flex flex-wrap align-items-center gap-2">
            <!-- 🌟 뷰티샵 라우트 인자를 직접 넘겨 JS 기본값(/admin) 오작동 방지 -->
            <button type="button" 
                    class="btn btn-outline-primary btn-sm fw-bold shadow-sm text-nowrap flex-shrink-0" 
                    id="btnOpen{{ ucfirst($slotKey) }}Image"
                    onclick="openImageModal('{{ $slotKey }}', 'multiple', null, '{{ $shopUploadRoute }}', '{{ $shopIndexRoute }}', '{{ $shopFolderRoute }}')"
                    style="white-space: nowrap !important; height: 34px;">
                <i class="fa-solid fa-cloud-arrow-up me-1"></i> {{ $buttonText }}
            </button>
            <span class="text-muted small multi-slot-guide-text" style="font-size: 0.75rem; line-height: 1.35; word-break: keep-all;">
                <i class="fa-solid fa-hand-pointer me-1"></i>카드를 꾹 눌러서(롱프레스) 좌우 순서를 변경할 수 있습니다.
            </span>
        </div>
    </div>

    <!-- 2. 슬라이더 영역: PC는 사각 카드 박스, 모바일은 좌우 100% 전폭 레일(edge-to-edge-mobile) -->
    <div class="multi-slot-swiper-outer edge-to-edge-mobile position-relative w-100" style="min-width: 0;">
        <div class="swiper multi-slot-swiper position-relative w-100" data-slot-key="{{ $slotKey }}" style="min-width: 0;">
            <div class="swiper-wrapper" id="{{ $slotKey }}ImagesWrapper">
                @foreach($existingImages as $index => $img)
                    @php
                        $imgSrc = $img->preview_url ?: ($img->thumb_url ?: asset('storage/' . $img->path));
                        $sortOrder = $index + 1;
                    @endphp
                    <div class="swiper-slide multi-slot-slide-item" data-image-id="{{ $img->id }}">
                        <div class="h-100 d-flex flex-column justify-content-between position-relative multi-slot-card p-0">
                            <!-- 개별 삭제 버튼 -->
                            <button type="button" 
                                    class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1 p-0 rounded-circle d-flex align-items-center justify-content-center btn-remove-slot-image shadow-sm" 
                                    style="width: 22px; height: 22px; z-index: 5;" 
                                    data-image-id="{{ $img->id }}" 
                                    title="삭제">
                                <i class="fa-solid fa-xmark" style="font-size: 0.7rem;"></i>
                            </button>

                            <!-- 1:1 미리보기 박스 -->
                            <div class="preview-wrap position-relative w-100">
                                <img src="{{ $imgSrc }}" 
                                    alt="{{ $img->original_name }}" 
                                    class="multi-slot-img-thumb" 
                                    loading="lazy">
                            </div>

                            <!-- 파일명 1줄 말줄임 -->
                            <div class="multi-slot-filename text-center text-muted fw-semibold small text-truncate" title="{{ $img->original_name }}">
                                {{ $img->original_name }}
                            </div>

                            <!-- 히든 인풋 -->
                            <input type="hidden" name="{{ $slotKey }}_image_ids[]" value="{{ $img->id }}">
                            <input type="hidden" name="image_sorts[{{ $img->id }}]" value="{{ $sortOrder }}" class="input-sort-order">
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- 네비게이션 화살표 -->
            <div class="swiper-button-prev multi-slot-prev"></div>
            <div class="swiper-button-next multi-slot-next"></div>
        </div>
    </div>

    <!-- 3. 삭제 대상 ID 보관 컨테이너 -->
    <div id="{{ $slotKey }}DeleteImageIdsContainer"></div>
</div>

{{-- 1. 뷰티샵 이미지 모달 (싱글 슬롯과 동일 키 'shop-image-modal': 1회만 주입) --}}
@pushOnce('modals', 'shop-image-modal')
    <x-admin.modal-image 
        upload-route="/shop-admin/images"
        index-route="/shop-admin/images/list"
        folder-route="/shop-admin/image-folders"
    />
@endpushOnce

{{-- 2. 이미지 라이브러리 전용 CSS 1회 주입 (싱글/멀티 슬롯 공용 키) --}}
@pushOnce('styles', 'shop-image-library-css')
<link rel="stylesheet" href="{{ asset('css/admin/image_library.css') }}?v={{ time() }}">
@endpushOnce

{{-- 3. 이미지 라이브러리 코어 JS (싱글 슬롯과 동일 키 'shop-image-library-js': 1회만 주입) --}}
@pushOnce('scripts', 'shop-image-library-js')
<script src="{{ asset('js/image_lightbox.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/image_library_folder.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/image_library_renderer.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/image_library.js') }}?v={{ time() }}"></script>
@endpushOnce

{{-- 4. 멀티 슬롯 전용 스타일 (Swiper CSS) --}}
@pushOnce('styles', 'multi-slot-swiper-css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
@endpushOnce

{{-- 5. 멀티 슬롯 전용 JS 엔진 --}}
@pushOnce('scripts', 'multi-slot-engine-js')
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="{{ asset('js/admin/image_multi_slot.js') }}?v={{ time() }}"></script>
@endpushOnce