@extends('layouts.admin')

@section('title', '프로그램 수정')

@section('content')

<div class="content-header-box mb-3 px-0 d-flex justify-content-between align-items-center">
    <div class="content-title-wrap">
        <h1 class="content-title">@yield('title')</h1>
    </div>
    <div class="content-btn-wrap d-flex gap-2">
        <a href="{{ route('admin.programs.index') }}" class="btn btn-outline-secondary btn-app-sm fw-bold">
            <i class="fa-solid fa-arrow-left me-1"></i> 목록
        </a>
        <button type="submit" form="programForm" class="btn btn-dark btn-app-sm fw-bold d-none d-sm-inline-block">
            <i class="fa-solid fa-check me-1"></i> 저장
        </button>
    </div>
</div>

<!-- 공통 에러, 성공 알림 블래이드 컴포넌트 -->
<x-admin.alerts-display />

<!-- 수정 폼 라우트 설정 (PUT/PATCH) -->
<form action="{{ route('admin.programs.update', $program->id) }}" method="POST" enctype="multipart/form-data" id="programForm" data-total-shops="{{ $totalShopsCount ?? 0 }}" data-program-id="{{ $program->id }}">
    @csrf
    @method('PUT')

    <div class="row g-4">
        <!-- 좌측 영역: 기본 정보, 설명, 미디어, 패키지 구성 -->
        <div class="col-lg-8">

            <!-- 1. 기본 설정 카드 -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4">
                    <h5 class="mb-3 fw-bold text-dark">기본 설정</h5>

                    <!-- 프로그램명 -->
                    <div class="mb-3">
                        <label class="form-label fw-semibold">프로그램명 <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" placeholder="예: 프리미엄 두피케어 10회 패키지" value="{{ old('name', $program->name) }}">
                    </div>

                    <!-- [추가 추천 위치] 프로그램명 바로 아래에 카테고리 피커 배치 -->
                    <x-admin.category-picker
                        :selected-categories="$program->categories ?? null"
                        type="program"
                        max-depth="3"
                        title="프로그램 상세 카테고리"
                        variant="secondary" />

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">실행 방식 (구분)</label>
                            <!-- 화면 표시 및 변경 방지를 위한 disabled 적용 -->
                            <select id="executionType" class="form-select bg-light" disabled>
                                <option value="single" {{ $program->execution_type == 'single' ? 'selected' : '' }}>기본 프로그램 (단품)</option>
                                <option value="package_single" {{ $program->execution_type == 'package_single' ? 'selected' : '' }}>베이직 패키지 프로그램 (1회용)</option>
                                <option value="package_separate" {{ $program->execution_type == 'package_separate' ? 'selected' : '' }}>스페셜 패키지 프로그램 (N회차 분할)</option>
                            </select>
                            <!-- disabled된 select는 값이 전송되지 않으므로 hidden으로 실제 값을 함께 전송 -->
                            <input type="hidden" name="execution_type" value="{{ $program->execution_type }}">
                            <div class="form-text">※ 실행 방식(구분)은 데이터 수정할 수 없습니다.</div>

                        </div>

                        <!-- 배포 범위 선택 셀렉트박스 -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">배포 범위</label>
                            <select name="target_scope" id="targetScope" class="form-select">
                                <option value="ALL" {{ old('target_scope', $program->target_scope) == 'ALL' ? 'selected' : '' }}>ALL (전체 샵 자동 배포)</option>
                                <option value="CUSTOM" {{ old('target_scope', $program->target_scope) == 'CUSTOM' ? 'selected' : '' }}>CUSTOM (일부 샵 지정)</option>
                            </select>
                        </div>

                        <!-- [CUSTOM 선택 시 노출 영역] -->
                        <div class="col-12 mb-3" id="customShopSection" style="display: {{ old('target_scope', $program->target_scope) == 'CUSTOM' ? 'block' : 'none' }};">
                            <div class="p-3 bg-light rounded border">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <label class="form-label fw-bold mb-0 text-dark">
                                        대상 뷰티샵 지정 <span class="text-danger">*</span>
                                        @php
                                        $selectedShopIds = old('shop_ids', $program->shops->pluck('id')->toArray() ?? []);
                                        @endphp
                                        <span class="badge bg-primary ms-1" id="selectedCountBadge">{{ count($selectedShopIds) }}개 선택됨</span>
                                    </label>
                                    <div class="d-flex gap-2">
                                        <button type="button" id="removeAllShopsBtn" class="btn btn-sm btn-outline-danger" style="display: none;">
                                            <i class="fa-solid fa-trash-can me-1"></i> 전체 지정 해제
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-dark" data-bs-toggle="modal" data-bs-target="#shopSelectModal">
                                            <i class="fa-solid fa-store me-1"></i> 뷰티샵 선택
                                        </button>
                                    </div>
                                </div>
                                <div class="form-text mb-2">지정한 뷰티샵에만 해당 프로그램을 판매합니다. (최대 10개까지 미리보기 표시)</div>

                                <!-- 가로 한 줄 스크롤형 디자인 적용 (flex-nowrap 및 overflow-x) -->
                                <div id="selectedShopsContainer" class="d-flex flex-row flex-nowrap gap-2 pt-1 align-items-center" style="overflow-x: auto; white-space: nowrap; padding-bottom: 4px;">
                                    @forelse($program->shops as $shop)
                                    <span class="badge bg-dark d-inline-flex align-items-center gap-1 p-2 selected-shop-badge flex-shrink-0" data-id="{{ $shop->id }}" data-name="{{ $shop->name }}">
                                        <span>{{ $shop->name }}</span>
                                        <input type="hidden" name="shop_ids[]" value="{{ $shop->id }}">
                                        <button type="button" class="btn-close btn-close-white remove-shop-badge" style="font-size: 0.65rem;" data-id="{{ $shop->id }}"></button>
                                    </span>
                                    @empty
                                    <span class="text-muted small">선택된 뷰티샵이 없습니다. 우측 버튼을 눌러 선택해 주세요.</span>
                                    @endforelse
                                </div>
                            </div>
                        </div>

                        <!-- 뷰티샵 선택 및 검색 모달 -->
                        <div class="modal fade" id="shopSelectModal" tabindex="-1" aria-labelledby="shopSelectModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title fw-bold" id="shopSelectModalLabel">배포할 뷰티샵 선택</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row g-2 mb-3 align-items-center">
                                            <div class="col-md-12">
                                                <!-- 2자 이상 입력 안내 추가 -->
                                                <input type="text" id="modalShopSearch" class="form-control form-control-sm" placeholder="샵 이름, 대표자, 주소 (2자 이상 입력 시 검색)...">
                                            </div>
                                        </div>
                                        <div class="table-responsive border rounded" style="max-height: 400px;">
                                            <table class="table table-hover align-middle mb-0 small">
                                                <thead class="table-light sticky-top">
                                                    <tr>
                                                        <th style="width: 10%;" class="text-center">
                                                            <!-- 🌟 전체 선택/해제 마스터 체크박스 -->
                                                            <input type="checkbox" id="selectAllModalShops" class="form-check-input" title="현재 목록 전체 선택">
                                                        </th>
                                                        <th style="width: 30%;">뷰티샵 명칭</th>
                                                        <th style="width: 20%;">대표자</th>
                                                        <th style="width: 40%;">주소</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="modalShopTableBody">
                                                    <tr>
                                                        <td colspan="4" class="text-center py-4 text-muted">검색어를 2자 이상 입력해 주세요. (이미 선택된 샵은 제외됩니다)</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">닫기</button>
                                        <button type="button" id="confirmShopSelectionBtn" class="btn btn-dark btn-sm px-4" data-bs-dismiss="modal">선택 완료</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-semibold">총 회차 (Session)</label>
                            <input type="number" name="session_count" id="sessionCount" class="form-control" value="{{ old('session_count', $program->session_count) }}" readonly>
                            <small class="text-muted" id="sessionHelpText">기본/베이직 패키지는 1회로 고정됩니다.</small>
                        </div>
                        <div class="col-md-4 mb-3" id="durationContainer" style="display: {{ $program->execution_type == 'single' ? 'block' : 'none' }};">
                            <label class="form-label fw-semibold">1회 소요시간 (분)</label>
                            <input type="number" name="duration_minutes" class="form-control" value="{{ old('duration_minutes', $program->duration_minutes) }}">
                            <div class="form-text text-muted" style="font-size: 0.75rem;">※ 이미 예약된 건에 즉시 영향을 줄 수 있으니 신중히 변경해주세요.</div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-semibold">티켓 유효기간 (일)</label>
                            <input type="number" name="validity_days" class="form-control" value="{{ old('validity_days', $program->validity_days) }}" min="1">
                            <div class="form-text text-muted" style="font-size: 0.75rem;">※ 변경 시 이후 발급되는 티켓부터 적용됩니다.</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 2. 패키지 구성품 추가 영역 -->
            <div class="card border-0 shadow-sm mb-4" id="bundleSection" style="display: {{ $program->execution_type != 'single' ? 'block' : 'none' }};">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="fw-bold text-dark m-0 d-flex align-items-center gap-2">
                            <span>패키지 구성품 (Bundle Items)</span>
                            <i class="fa-solid fa-circle-question text-primary" id="bundleHelpIcon" style="cursor: pointer; font-size: 1rem;" title="도움말 보기"></i>
                        </h5>
                        <button type="button" class="btn btn-outline-primary btn-sm fw-bold" data-bs-toggle="modal" data-bs-target="#programSelectModal">
                            <i class="fa-solid fa-magnifying-glass me-1"></i> 구성품 추가
                        </button>
                    </div>
                    <p class="text-muted small" id="bundleDescText">이 패키지에 포함될 기본 프로그램들과 횟수를 지정하세요. (최대 10개)</p>

                    <div class="row g-2 mb-2 px-2 py-1 text-muted bg-light small fw-bold">
                        <div class="col-6">기본 프로그램 명칭</div>
                        <div class="col-2 text-center">횟수 (수량)</div>
                        <div class="col-2 text-center">정렬 순서</div>
                        <div class="col-2 text-center">관리</div>
                    </div>

                    <div id="bundleItemsContainer">
                        <!-- 기존 등록된 하위 구성품 렌더링 -->
                        @if($program->execution_type != 'single' && $program->bundleItems)
                        @foreach($program->bundleItems as $index => $item)
                        <div class="row g-2 mb-2 align-items-center bundle-row" data-child-id="{{ $item->id }}">
                            <div class="col-6 overflow-hidden">
                                <span class="fw-bold text-dark text-truncate d-inline-block w-100 program-name-text" style="vertical-align: middle;" title="{{ $item->name }} ({{ $item->code }})">
                                    {{ $item->name }} <span class="text-muted small">({{ $item->code }})</span>
                                </span>
                                <input type="hidden" name="bundle_items[{{ $index }}][child_id]" value="{{ $item->id }}" class="bundle-child-id-input">
                            </div>
                            <div class="col-2">
                                <input type="number" name="bundle_items[{{ $index }}][quantity]"
                                    class="form-control form-control-sm text-center bundle-quantity-input"
                                    value="{{ $item->pivot->quantity }}" min="1" {{ $program->execution_type == 'package_single' ? 'readonly' : '' }}>
                            </div>
                            <div class="col-2">
                                <input type="number" name="bundle_items[{{ $index }}][sort_order]"
                                    class="form-control form-control-sm text-center"
                                    value="{{ $item->pivot->sort_order }}" min="0">
                            </div>
                            <div class="col-2 text-end">
                                <button type="button" class="btn btn-outline-danger btn-sm w-100 remove-bundle-row">삭제</button>
                            </div>
                        </div>
                        @endforeach
                        @endif
                    </div>
                </div>
            </div>

            <!-- 프로그램 선택 모달 -->
            <div class="modal fade" id="programSelectModal" tabindex="-1" aria-labelledby="programSelectModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title fw-bold" id="programSelectModalLabel">패키지 하위 구성 프로그램 선택</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row g-2 mb-3 align-items-center">
                                <div class="col-md-8">
                                    <input type="text" id="modalProgramSearch" class="form-control form-control-sm" placeholder="프로그램 이름 또는 코드로 검색...">
                                </div>
                                <div class="col-md-4 text-end">
                                    <button type="button" id="selectAllProgramsBtn" class="btn btn-sm btn-outline-primary">전체 선택</button>
                                    <button type="button" id="deselectAllProgramsBtn" class="btn btn-sm btn-outline-secondary">전체 해제</button>
                                </div>
                            </div>
                            <div class="table-responsive border rounded" style="max-height: 400px;">
                                <table class="table table-hover align-middle mb-0 small">
                                    <thead class="table-light sticky-top">
                                        <tr>
                                            <th style="width: 10%;" class="text-center">선택</th>
                                            <th style="width: 50%;">프로그램 명칭</th>
                                            <th style="width: 40%;">프로그램 코드</th>
                                        </tr>
                                    </thead>
                                    <tbody id="modalProgramTableBody">
                                        @forelse($singlePrograms ?? [] as $p)
                                        @php
                                        $isAlreadyChecked = $program->bundleItems->contains('child_program_id', $p->id);
                                        @endphp
                                        <tr class="modal-program-row" data-id="{{ $p->id }}" data-name="{{ $p->name }}" data-code="{{ $p->code }}" data-search="{{ strtolower($p->name . ' ' . $p->code) }}">
                                            <td class="text-center">
                                                <input type="checkbox" class="form-check-input program-checkbox" value="{{ $p->id }}" data-name="{{ $p->name }}" data-code="{{ $p->code }}" {{ $isAlreadyChecked ? 'checked' : '' }}>
                                            </td>
                                            <td class="fw-semibold text-dark text-truncate" style="max-width: 250px;" title="{{ $p->name }}">{{ $p->name }}</td>
                                            <td class="text-muted">{{ $p->code }}</td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td colspan="3" class="text-center py-4 text-muted">등록된 단품 프로그램이 없습니다.</td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">닫기</button>
                            <button type="button" id="confirmProgramSelectionBtn" class="btn btn-dark btn-sm px-4" data-bs-dismiss="modal">선택 완료</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 3. 상세 설명 및 미디어 카드 -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4">
                    <h5 class="mb-3 fw-bold text-dark">상세 소개 및 미디어</h5>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">간단 소개글 (Introduction)</label>
                        <textarea name="introduction" class="form-control" rows="2" placeholder="목록이나 카드에 노출될 짧은 소개글">{{ old('introduction', $program->introduction) }}</textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">상세 설명 (Description) <span class="text-danger">*</span></label>
                        <textarea name="description" id="program_editor" class="form-control" rows="8" placeholder="상세 내용을 입력하세요">{{ old('description', $program->description) }}</textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">유튜브 영상 ID</label>
                            <input type="text" name="youtube_id" class="form-control" placeholder="예: dQw4w9WgXcQ" value="{{ old('youtube_id', $program->youtube_id) }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">검색 태그</label>
                            <input type="text" name="tags" class="form-control tag-input-field" placeholder="예: 두피케어, 탈모예방" value="{{ old('tags', is_array($program->tags) ? implode(', ', $program->tags) : $program->tags) }}">
                            <div class="form-text">쉼표(,)로 구분하여 입력하세요.</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 프로그램 마케팅/임상 갤러리 섹션 (멀티 슬롯, 최대 30장 제한) -->
			<x-admin.image-multi-slot 
				name="program_marketing" 
				label="프로그램 마케팅 갤러리 관리" 
				:model="$program ?? null" 
				:maxCount="30" 
				badgeText="최대 30장 등록 가능" 
				buttonText="미디어 보관함에서 선택/업로드" />

            <!--  인증 및 상태 설정 카드 -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header fw-bold py-3 card-header-theme-light d-flex align-items-center">
                    <span><i class="fa-solid fa-sliders me-1 text-primary"></i> 인증 및 상태 설정</span>
                </div>
                <div class="card-body p-4">

                    <!-- 1열: 판매 상태 및 이벤트몰 전용 여부 -->
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold small">판매 상태</label>
                            <div class="form-check form-switch mt-1">
                                <input class="form-check-input" type="checkbox" name="is_active" id="isActive" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                                <label class="form-check-label fw-semibold small text-primary" for="isActive">판매 개시 (Active)</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold small">전용 상품</label>
                            <div class="form-check form-switch mt-1">
                                <input class="form-check-input" type="checkbox" name="is_event_mall_item" id="is_event_mall_item" value="1" {{ old('is_event_mall_item') ? 'checked' : '' }}>
                                <label class="form-check-label fw-semibold small text-dark" for="is_event_mall_item">이벤트몰 전용 상품</label>
                            </div>
                        </div>
                    </div>

                    <!-- 2열: 상단 고정 및 메인 진열 -->
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold small">노출 가이드</label>
                            <div class="form-check form-switch mt-1">
                                <input class="form-check-input" type="checkbox" name="is_pinned" id="isPinned" value="1" {{ old('is_pinned') ? 'checked' : '' }}>
                                <label class="form-check-label fw-semibold small text-danger" for="isPinned">상단 고정 (최대 3개)</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold small">메인 영역</label>
                            <div class="form-check form-switch mt-1">
                                <input class="form-check-input" type="checkbox" name="is_main_displayed" id="isMainDisplayed" value="1" {{ old('is_main_displayed') ? 'checked' : '' }}>
                                <label class="form-check-label fw-semibold small text-dark" for="isMainDisplayed">메인 페이지 진열</label>
                            </div>
                        </div>
                    </div>

                    <!-- 3열: 정렬 순서 -->
                    <div class="mb-3">
                        <label class="form-label fw-semibold small">정렬 순서 (Sort Order)</label>
                        <input type="number" name="sort_order" class="form-control form-control-sm" value="{{ old('sort_order', 0) }}" min="0" oninput="this.value = Math.max(0, this.value)" style="max-width: 200px;">
                        <div class="form-text text-muted" style="font-size: 0.7rem;">숫자가 클수록 목록 상단에 노출됩니다.</div>
                    </div>

                    <!-- 4열: 관리자 내부 메모 -->
                    <div class="mb-0">
                        <label class="form-label fw-semibold small">관리자 내부 메모 (Admin Memo)</label>
                        <textarea name="admin_memo" class="form-control form-control-sm" rows="2" placeholder="일반 사용자는 볼 수 없는 관리자 전용 메모">{{ old('admin_memo') }}</textarea>
                    </div>

                </div>
            </div>

        </div>

        <!-- 우측 영역: 가격, 판촉 설정, 이미지 업로드, 제출 버튼 -->
        <div class="col-lg-4">

            <!-- 1. 가격 및 결제 설정 카드 -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4">
                    <h5 class="mb-3 fw-bold text-dark">가격 및 결제 설정</h5>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">소비자가격 (정가) <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="text" name="original_price" id="original_price" class="form-control text-end number-format-field" value="{{ old('original_price', number_format($program->original_price)) }}">
                            <span class="input-group-text">원</span>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">할인 금액 (-)</label>
                        <div class="input-group">
                            <input type="text" name="discount_price" id="discount_price" class="form-control text-end number-format-field" value="{{ old('discount_price', number_format($program->discount_price)) }}" min="0">
                            <span class="input-group-text">원</span>
                        </div>
                    </div>

                    <div class="mb-3 p-3 bg-light rounded border">
                        <label class="form-label text-muted small fw-bold mb-1">실제 최종 판매가격</label>
                        <div class="fs-4 fw-bold text-primary text-end" id="sale_price_display">0원</div>
                        <input type="hidden" name="sale_price" id="sale_price_input" value="{{ $program->sale_price }}">
                    </div>

                    <hr class="text-muted">

                    <div class="mb-3">
                        <label class="form-label fw-semibold">적립 포인트 지급</label>
                        <div class="input-group">
                            <input type="text" name="reward_points" id="reward_points" class="form-control text-end number-format-field" value="{{ old('reward_points', number_format($program->reward_points)) }}" min="0">
                            <span class="input-group-text">P</span>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">최대 포인트 사용 한도</label>
                        <div class="input-group">
                            <input type="text" name="max_point_usage" id="max_point_usage" class="form-control text-end number-format-field" placeholder="제한없음" min="0" value="{{ old('max_point_usage', $program->max_point_usage ? number_format($program->max_point_usage) : '') }}">
                            <span class="input-group-text">P</span>
                        </div>
                    </div>

                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" name="is_event_mall_item" id="is_event_mall_item" value="1" {{ old('is_event_mall_item', $program->is_event_mall_item) ? 'checked' : '' }}>
                        <label class="form-check-label fw-semibold" for="is_event_mall_item">이벤트몰 전용 상품 여부</label>
                    </div>
                </div>
            </div>

            <!-- 2. 특가 및 기간 설정 카드 -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4">
                    <h5 class="mb-3 fw-bold text-dark">판촉 및 기간 설정</h5>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">특가 판매 시작일시</label>
                        <input type="datetime-local" name="sales_start_at" class="form-control" value="{{ old('sales_start_at', $program->sales_start_at ? \Carbon\Carbon::parse($program->sales_start_at)->format('Y-m-d\TH:i') : '') }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">특가 판매 종료일시</label>
                        <input type="datetime-local" name="sales_end_at" class="form-control" value="{{ old('sales_end_at', $program->sales_end_at ? \Carbon\Carbon::parse($program->sales_end_at)->format('Y-m-d\TH:i') : '') }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">선착순 한정 판매 인원</label>
                        <input type="number" name="max_sales_limit" class="form-control" placeholder="무제한" min="1" value="{{ old('max_sales_limit', $program->max_sales_limit) }}">
                    </div>
                </div>
            </div>

            <!-- 3. 이미지 업로드 카드 -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4">
                    <h5 class="mb-3 fw-bold text-dark">이미지 첨부 및 관리</h5>

                    <!-- 1. 대표 이미지 (Logo) -->
                    <div class="mb-4 pb-3 border-bottom">
                        <!-- 로고 슬롯 -->
						<x-admin.image-single-slot 
							name="program_logo" 
							label="로고 이미지 (Logo - 1:1)" 
							:model="$program ?? null" 
							width="60" 
							height="60" 
							ratioText="권장 비율: 1:1 정사각형" />
                    </div>

                    <!-- 2. PC 메인 배너 -->
                    <div class="mb-4 pb-3 border-bottom">
                        <!-- 배너 슬롯 -->
						<x-admin.image-single-slot 
							name="program_banner" 
							label="배너 이미지 (Banner - 3:1)" 
							:model="$program ?? null" 
							width="180" 
							height="60" 
							ratioText="권장 비율: 3:1 가로형" />
                    </div>

                    <!-- 3. 소셜 공유 (OG) 이미지 -->
                    <div class="mb-0">
                        <!-- 모바일 배너 슬롯 -->
						<x-admin.image-single-slot 
							name="program_og_image" 
							label="모바일 배너 (Og Image - 2:1)" 
							:model="$program ?? null" 
							width="120" 
							height="60" 
							ratioText="권장 비율: 2:1 가로형" />
                    </div>
                </div>
            </div>

            <!-- 범용 스티키 액션 버튼 그룹 -->
            <div class="js-sticky-action-bar mb-4">
                <div class="card border-0 shadow-sm bg-white p-3 border border-primary-subtle">
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-dark btn-lg fw-bold shadow-sm">
                            <i class="fa-solid fa-check me-1"></i> 프로그램 수정
                        </button>
                        <a href="{{ route('admin.programs.index') }}" class="btn btn-outline-secondary btn-sm">
                            <i class="fa-solid fa-arrow-left me-1"></i> 목록
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</form>
@endsection

@push('scripts')
<!-- TinyMCE CDN -->
<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js" referrerpolicy="origin"></script>

<!-- 공통으로 관리하는 한글 번역 파일 로드 -->
<script src="{{ asset('js/tinymce-ko.js') }}"></script>

<!-- 에디터 초기화 (업로드 라우트 주입 불필요) -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof initTinymce === 'function') {
            initTinymce('#program_editor', 400); // 셀렉터와 높이값만 전달합니다.
        }
    });
</script>

<!-- 카테고리 선택 전체 공통 스크립트 -->
<script src="{{ asset('js/admin/category_picker.js') }}"></script>

<!-- 프로그램 공통 스크립트 -->
<script src="{{ asset('js/admin/admin_program.js') }}"></script>
@endpush