@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 />

<!-- 🌟 data-total-shops 속성 추가: 전체 시스템 샵 개수를 JS로 전달하여 ALL/CUSTOM 자동 판별에 활용 -->
<form action="{{ route('admin.programs.store') }}" method="POST" enctype="multipart/form-data" id="programForm">
    @csrf

    <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') }}">
                    </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>
                            <select name="execution_type" id="executionType" class="form-select">
                                <option value="single" {{ old('execution_type') == 'single' ? 'selected' : '' }}>기본 프로그램 (단품)</option>
                                <option value="package_single" {{ old('execution_type') == 'package_single' ? 'selected' : '' }}>베이직 패키지 프로그램 (1회용)</option>
                                <option value="package_separate" {{ old('execution_type') == 'package_separate' ? 'selected' : '' }}>스페셜 패키지 프로그램 (N회차 분할)</option>
                            </select>
                            <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', 'ALL') == 'ALL' ? 'selected' : '' }}>ALL (전체 샵 자동 배포)</option>
                                <option value="CUSTOM" {{ old('target_scope') == 'CUSTOM' ? 'selected' : '' }}>CUSTOM (일부 샵 지정)</option>
                            </select>
                        </div>

                        <!-- [CUSTOM 선택 시 노출 영역] -->
                        <div class="col-12 mb-3" id="customShopSection" style="display: 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>
                                        <span class="badge bg-primary ms-1" id="selectedCountBadge">0개 선택됨</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">지정한 뷰티샵에만 해당 프로그램을 판매합니다.</div>
                                <!-- 🌟 범용 가로 스크롤 클래스(admin-horizontal-scroll)가 JS에 의해 적용됨 -->
                                <div id="selectedShopsContainer" class="admin-horizontal-scroll border p-2 rounded bg-white">
                                    <span class="text-muted small">선택된 뷰티샵이 없습니다. 우측 버튼을 눌러 선택해 주세요.</span>
                                </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-12">
                                                <input type="text" id="modalShopSearch" class="form-control form-control-sm" placeholder="샵 이름, 대표자, 주소로 검색...">
                                            </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">
                                                    <!-- AJAX 비동기로 동적 로드됨 -->
                                                </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="1" readonly>
                            <small class="text-muted" id="sessionHelpText">기본/베이직 패키지는 1회로 고정됩니다.</small>
                        </div>
                        <div class="col-md-4 mb-3" id="durationContainer">
                            <label class="form-label fw-semibold">1회 소요시간 (분)</label>
                            <input type="number" name="duration_minutes" class="form-control" value="60">
                        </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="90" min="1">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 2. 패키지 구성품 추가 영역 -->
            <div class="card border-0 shadow-sm mb-4" id="bundleSection" style="display: 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">
                        @php
                        $oldBundleItems = old('bundle_items');

                        // 1. 유효성 에러로 재출력되는 경우 (등록/수정 공통 old 데이터 복구)
                        if (!empty($oldBundleItems)) {
                        $childIds = collect($oldBundleItems)->pluck('child_id')->filter()->toArray();
                        $fetchedPrograms = !empty($childIds) ? \App\Models\Program::whereIn('id', $childIds)->get()->keyBy('id') : collect();
                        }
                        @endphp

                        @if(!empty($oldBundleItems))
                        {{-- 유효성 검사 실패로 튕겨 돌아온 경우 (old 데이터 기준 렌더링) --}}
                        @foreach($oldBundleItems as $index => $item)
                        @php
                        $childProg = $fetchedPrograms[$item['child_id']] ?? null;
                        if (!$childProg) continue;
                        // 패키지 타입 판별 (수정페이지는 $program->execution_type, 등록페이지는 old('execution_type') 활용 가능)
                        $currentExecType = $program->execution_type ?? old('execution_type', 'package_single');
                        @endphp
                        <div class="row g-2 mb-2 align-items-center bundle-row" data-child-id="{{ $childProg->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="{{ $childProg->name }} ({{ $childProg->code }})">
                                    {{ $childProg->name }} <span class="text-muted small">({{ $childProg->code }})</span>
                                </span>
                                <input type="hidden" name="bundle_items[{{ $index }}][child_id]" value="{{ $childProg->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['quantity'] ?? 1 }}" min="1" {{ $currentExecType == '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['sort_order'] ?? 0 }}" 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

                        @elseif(isset($program) && $program->execution_type != 'single' && $program->bundleItems)
                        {{-- 수정 페이지 최초 진입 시 (기존 DB 데이터 렌더링) --}}
                        @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-12">
                                    <!-- 2자 이상 입력 안내 추가 -->
                                    <input type="text" id="modalProgramSearch" 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="selectAllModalPrograms" class="form-check-input" title="현재 목록 전체 선택">
                                            </th>
                                            <th style="width: 35%;">프로그램 명칭</th>
                                            <th style="width: 20%;">프로그램 코드</th>
                                            <th style="width: 20%;">1차 카테고리</th>
                                            <th style="width: 15%;" class="text-center">소요시간</th>
                                        </tr>
                                    </thead>
                                    <tbody id="modalProgramTableBody">
                                        <tr>
                                            <td colspan="5" 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="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') }}</textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">상세 설명 (Description) <span class="text-danger">*</span></label>
                        <textarea name="description" id="editor" class="form-control" rows="8" placeholder="상세 내용을 입력하세요">{{ old('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') }}">
                        </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') }}">
                            <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">

                    <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>

                    <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>

                    <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>

                    <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', 0) }}">
                            <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', 0) }}" 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="0">
                    </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', 0) }}" 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') }}">
                            <span class="input-group-text">P</span>
                        </div>
                    </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') }}">
                    </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') }}">
                    </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') }}">
                    </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 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">취소 및 목록으로</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('#editor', 400, '{{ route("admin.programs.upload-image") }}');
        }
    });
</script>

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

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