{{-- ========================================
    프로그램 상단 공용 템플릿 (template1.blade.php)
    ========================================

    주요 기능:
    1. 프로그램 상단 비주얼 영역 (배경 이미지, 타이틀, CTA 버튼)
    2. 페이지 탭 메뉴 (조건부 노출)
    3. 핵심 보기 슬라이드 (조건부 노출)

    데이터 구조:
    - $element: 템플릿 데이터 배열
      - bg_image_pc: 배경 이미지 URL
      - title_sub1, title_sub1_color: 서브 타이틀 및 색상
      - title_row, title_row_color: 메인 타이틀 및 색상
      - cta: CTA 버튼 설정 (use_yn, cta_link, cta_text)
      - countries: 국가 목록
      - target: 대상 정보
      - menu_tabs_use_yn: 탭 메뉴 노출 여부
      - menu_tabs: 탭 메뉴 데이터 배열
      - menu_slides_use_yn: 슬라이드 노출 여부
      - menu_slides: 슬라이드 데이터 배열
--}}

<div class="container program junior-abroad-seminar-admission">
    {{-- ========================================
        상단 비주얼 영역 (헤더)
        ======================================== --}}
    <header class="area-pg-visual">
        {{-- 배경 이미지 설정 --}}
        <figure class="bgImage" style="background-image: url('{{ isset($element['bg_image_pc']) && $element['bg_image_pc'] ? $element['bg_image_pc'] : env('UHAKIMG_S3') . '/uhak/r/v1/programs/junior-abroad-seminar-admission/default-bg.jpg' }}');"></figure>

        <div class="maxWidth">
            {{-- 타이틀 영역 --}}
            <div class="titleWrap">
                {{-- 서브 타이틀 (색상 적용) --}}
                <span style="color: {{ isset($element['title_sub1_color']) && $element['title_sub1_color'] ? $element['title_sub1_color'] : '#000000' }};">{!! isset($element['title_sub1']) && $element['title_sub1'] ? $element['title_sub1'] : '서브 타이틀' !!}</span>
                {{-- 메인 타이틀 (색상 적용) --}}
                <h1 class="title" style="color: {{ isset($element['title_row_color']) && $element['title_row_color'] ? $element['title_row_color'] : '#000000' }};">{!! isset($element['title_row']) && $element['title_row'] ? $element['title_row'] : '타이틀' !!}</h1>
            </div>

            {{-- CTA 버튼 (조건부 노출: use_yn이 'Y'일 때만) --}}
            @if(isset($element['cta']['use_yn']) && $element['cta']['use_yn'] === 'Y')
            <div class="contactWrap">
                <a href="{!! isset($element['cta']['cta_link']) && $element['cta']['cta_link'] ? $element['cta']['cta_link'] : '#' !!}" class="contact-btn">
                    <span>{!! isset($element['cta']['cta_text']) && $element['cta']['cta_text'] ? $element['cta']['cta_text'] : '신청 링크를 입력하세요' !!}</span>
                    <figure class="arrow"></figure>
                </a>
            </div>
            @endif

            {{-- 프로그램 정보 박스 (국가, 대상) --}}
            <div class="contactWrap">
                <div class="box">
                    <p>{!! isset($element['countries']) && $element['countries'] ? $element['countries'] : '국가 목록' !!}</p>
                </div>
                <div class="box">
                    <p>{!! isset($element['target']) && $element['target'] ? $element['target'] : '아이 혼자 유학 : 초? ~ 고? <br>부모 동반 유학 : 초? ~ 고?' !!}</p>
                </div>
            </div>
        </div>
    </header>

    {{-- ========================================
        메인 콘텐츠 영역
        ======================================== --}}
    <section>
        {{-- ========================================
            페이지 탭 메뉴 (조건부 노출)
            ======================================== --}}
        @if(isset($element['menu_tabs_use_yn']) && $element['menu_tabs_use_yn'] === 'Y')
        <div id="page-tabMenu">
            <div class="maxWidth">
                {{-- 동적 탭 메뉴 (DB 데이터 기반) --}}
                @if(isset($element['menu_tabs']) && is_array($element['menu_tabs']) && count($element['menu_tabs']) > 0)
                    @foreach($element['menu_tabs'] as $index => $tab)
                        <button type="button"
                                id="{{ isset($tab['id']) && $tab['id'] ? $tab['id'] : 'tab' . ($index + 1) }}"
                                class="{{ $index === 0 ? 'active' : '' }}"
                                style="color: {{ isset($tab['name_color']) && $tab['name_color'] ? $tab['name_color'] : '#000000' }};">
                            {{-- 아이콘 이미지 (존재하는 경우에만 표시) --}}
                            @if(isset($tab['icon']) && $tab['icon'])
                                <img src="{{ $tab['icon'] }}" alt="탭 아이콘" class="tab-icon">
                            @endif
                            {{-- 탭 이름 --}}
                            <span class="tab-name">{{ isset($tab['name']) && $tab['name'] ? $tab['name'] : '탭' . ($index + 1) }}</span>
                        </button>
                    @endforeach
                @else
                    {{-- 기본 탭 메뉴 (데이터가 없을 때의 폴백) --}}
                    <button type="button" id="tab1" class="active">핵심 보기</button>
                    <button type="button" id="tab2">세미나 정보/혜택</button>
                    <button type="button" id="tab3">고객 후기</button>
                @endif
            </div>
        </div>
        @endif

        {{-- ========================================
            핵심 보기 슬라이드 (조건부 노출)
            ======================================== --}}
        @if(isset($element['menu_slides_use_yn']) && $element['menu_slides_use_yn'] === 'Y')
        <article id="pointView" class="moveArea">
            <div class="maxWidth">
                <div class="slideWrap slideBeforeNone">
                    {{-- 슬라이드 네비게이션 컨트롤 --}}
                    <div class="navigation">
                        <div class="fraction"></div>
                        <button type="button" class="control"></button>
                        <button type="button" class="nav-prev"></button>
                        <button type="button" class="nav-next"></button>
                    </div>

                    {{-- 슬라이드 컨테이너 --}}
                    <div class="slide">
                        {{--
                            슬라이드 개수 주의사항:
                            화면에 보이는 슬라이드 개수 이상의 슬라이드가 존재해야 다음 슬라이드가 안 보이는 오류가 없음
                            등록 슬라이드의 개수가 적을 경우 /js/edmuhak/programs/submain.js 에서 보이는 슬라이드 개수 수정 필요
                            슬라이드 개수가 5개 이하일 경우 좌우스크롤 없이 고정되어 보이도록 처리 (미구현 - 퍼블리셔가 처리해야 함)
                        --}}
                        <div class="swiper-wrapper">
                            {{-- 동적 슬라이드 (DB 데이터 기반) --}}
                            @if(isset($element['menu_slides']) && is_array($element['menu_slides']) && count($element['menu_slides']) > 0)
                                @foreach($element['menu_slides'] as $index => $slide)
                                    <div class="swiper-slide">
                                        {{-- 뱃지 텍스트 --}}
                                        <span>{!! isset($slide['badge']) && $slide['badge'] ? $slide['badge'] : '뱃지 텍스트 ' . ($index + 1) !!}</span>
                                        {{-- 주요 텍스트 --}}
                                        <p>{!! isset($slide['title']) && $slide['title'] ? $slide['title'] : '주요 텍스트 ' . ($index + 1) !!}</p>
                                        {{-- 서브 텍스트 --}}
                                        <span>{!! isset($slide['caption']) && $slide['caption'] ? $slide['caption'] : '서브 텍스트 ' . ($index + 1) !!}</span>
                                    </div>
                                @endforeach
                            @else
                                {{-- 기본 슬라이드 (데이터가 없을 때의 폴백) --}}
                                <div class="swiper-slide">
                                    <span>검증 완료</span>
                                    <p>조기유학 수속비 <br>50% 할인</p>
                                    <span>25만 원 상당</span>
                                </div>
                                <div class="swiper-slide">
                                    <span>추가 지원</span>
                                    <p>학교 추가 지원 <br>1회 무료</p>
                                    <span>50만원 상당</span>
                                </div>
                                <div class="swiper-slide">
                                    <span>선행학습</span>
                                    <p>유학 선행학습 <br>1회 무료</p>
                                    <span>레벨테스트 포함</span>
                                </div>
                                <div class="swiper-slide">
                                    <span>전문 컨설팅</span>
                                    <p>국내 1위 <br>유학 전문 컨설팅</p>
                                    <span>개인별 상세 상담 가능</span>
                                </div>
                                <div class="swiper-slide">
                                    <span>현지 케어</span>
                                    <p>100% 안심 <br>현지 케어</p>
                                    <span>가디언, 현지 지사 등</span>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </article>
        @endif
    </section>
</div>