@props([
    'name' => 'marketing',                      // 슬롯 키 (기본값: marketing)
    'label' => '마케팅 갤러리 이미지 관리',        // 헤더 텍스트
    'model' => null,                            // $shop ?? null 또는 $program ?? null
    'maxCount' => 30,                           // 최대 등록 상한선 (기본값: 30장)
    'badgeText' => '최대 30장 등록 가능',          // 배지 텍스트
    'buttonText' => '미디어 보관함에서 선택/업로드' // 버튼 텍스트
])

@php
    $slotKey = $name;
    $previewContainerId = "{$slotKey}-gallery-preview";
    $hiddenContainerId = "{$slotKey}-hidden-inputs";

    // 1. 모델의 다형성 피벗에서 해당 슬롯의 기존 이미지 목록 추출
    $existingImages = collect();
    if ($model && method_exists($model, 'getSlotImages')) {
        $existingImages = $model->getSlotImages($slotKey);
    }
@endphp

<!-- 다중 마케팅 이미지(갤러리) 관리 섹션 (원본 디자인 100% 일체형 컴포넌트) -->
<div class="app-form-card" data-slot-name="{{ $slotKey }}" data-max-count="{{ $maxCount }}">
    <div class="app-card-header d-flex justify-content-between align-items-center">
        <span><i class="fa-solid fa-images me-1 text-primary"></i> {{ $label }}</span>
        <span class="badge bg-secondary">{{ $badgeText }}</span>
    </div>
    <div class="app-card-body">
        <div class="mb-2">
            <!-- 1) 모달 호출 버튼 -->
            <div class="d-flex align-items-center gap-2 mb-2">
                <button type="button" class="btn btn-outline-dark btn-sm fw-bold" onclick="openMediaModal('{{ $slotKey }}', 'multiple')">
                    <i class="fa-solid fa-images me-1"></i> {{ $buttonText }}
                </button>
            </div>

            <!-- 2) 카드 미리보기 컨테이너 (수정 시 기존 이미지 자동 렌더링 / 등록 시 빈 상태 대기) -->
            <div id="{{ $previewContainerId }}" class="row g-2 mt-2 {{ $slotKey }}-gallery-preview">
                @foreach($existingImages as $img)
                    @php
                        // 🌟 최신 우선순위 적용: Thumb > WebP > AVIF > 원본 > 플레이스홀더
                        $imgSrc = $img->preview_url ?: 'https://placehold.co/150x150?text=No+Image';
                        $sortOrder = $img->pivot->sort_order ?? 0;
                    @endphp
                    <div class="col-6 col-md-3 col-xxl-2 text-center position-relative multi-preview-item {{ $slotKey }}-preview-col mb-2" data-id="{{ $img->id }}">
                        <div class="card border shadow-sm h-100 position-relative bg-white rounded overflow-hidden p-1">
                            <!-- X 제거 버튼 (기존 margin 5px, 20x20px 크기 유지) -->
                            <button type="button" class="position-absolute top-0 end-0 btn btn-dark btn-sm p-0 d-flex align-items-center justify-content-center shadow-sm" 
                                    style="width: 20px; height: 20px; border-radius: 50%; z-index: 5; margin: 5px; font-size: 0.65rem;"
                                    onclick="removeMultiMediaItem(this, {{ $img->id }}, '{{ $slotKey }}')" title="이미지 제거">
                                <i class="fa-solid fa-xmark"></i>
                            </button>

                            <!-- 1:1 비율 박스 (object-fit: contain 유지) -->
                            <div class="card-img-wrapper position-relative d-flex align-items-center justify-content-center overflow-hidden" 
                                 style="aspect-ratio: 1 / 1; width: 100%; background-color: #f8f9fa;">
                                <img src="{{ $imgSrc }}" 
                                     alt="{{ $img->original_name }}" 
                                     style="max-width: 100%; max-height: 100%; object-fit: contain; display: block;"
                                     loading="lazy"
                                     onerror="this.src='https://placehold.co/150x150?text=No+Image'">
                            </div>

                            <!-- 순서(sort_order) 및 파일명 영역 -->
                            <div class="card-body p-2 bg-light d-flex flex-column gap-1">
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text bg-white small px-1 text-muted" style="font-size: 0.75rem;">순서</span>
                                    <input type="number" name="image_sorts[{{ $img->id }}]" value="{{ $sortOrder }}" class="form-control text-center text-dark fw-bold px-1 py-0" min="0">
                                </div>
                                <small class="text-dark text-truncate d-block fw-semibold px-1" style="font-size: 0.7rem;" title="{{ $img->original_name }}">{{ $img->original_name }}</small>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- 3) 마케팅 히든 인풋 컨테이너 (수정 시 기존 ID 세팅 / 등록 시 동적 주입) -->
            <div id="{{ $hiddenContainerId }}">
                @foreach($existingImages as $img)
                    <input type="hidden" name="{{ $slotKey }}_image_ids[]" value="{{ $img->id }}" data-id="{{ $img->id }}">
                @endforeach
            </div>
        </div>
    </div>
</div>