@extends($service.'.layout')

@section('page-title', "수강 신청")

@section($service.'-css')
	{!! resource('css/'.$service.'/sub.css') !!}
	{!! resource('css/myclass/lecture.css') !!}
@endsection

@section($service."-content")
	<div class="lecture-container list-container {{ $service }}" id="wrap">
        <div class="contentsWrap">
        	<div class="pageTitle">
	            <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
	            <h1>수강신청</h1>
	        </div>
	        @if ($service == 'academy')
                <div class="max-width">
                    <div class="lecture-banner-wrapper">
                        <div id="eventBannerSlide">
                            <div class="swiper-wrapper">
                                @foreach ( $banners as $banner)
                                <div class="swiper-slide">
                                    <a href="{{ $banner['link'] }}">
                                        <picture>
                                            <source srcset="{{env('AWS_S3_IMG_URL')}}{{ $banner['urls'][0] }}" media="(min-width: 744px)">
                                            {{-- <source srcset="{{env('AWS_S3_IMG_URL')}}{{ $banner['urls'][2] }}" media="(min-width: 744px)"> --}}
                                            <img src="{{env('AWS_S3_IMG_URL')}}{{ $banner['urls'][1] }}" alt="{{ $banner['name'] }}">
                                        </picture>
                                    </a>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
	        @endif

	        @if ($service == 'ielts')
	        <div class="max-width">
	        	<div class="lecture-banner-wrapper">
					<div id="eventBannerSlide">
						<div class="swiper-wrapper">
							<div class="swiper-slide btn-slide">
								<button type="button" class="comparisonPopupOn" style="background: linear-gradient(90deg, #7028FF 0%, #1500D5 96.36%, #fff 100%);">
									<p>나에게 딱 맞는 수강상품은? <br class="mo-br">한 눈에 비교하고 선택하세요.</p>
								</button>
							</div>
						</div>
					</div>


		            <div class="popupArea">
		                <div class="popupWrap-lecture-comparison">
		                    <div class="popup">
		                        <div class="closeIcon closeBtn"></div>
		                        <div class="textWrap">
		                            <p class="title">수강상품 비교</p>
		                            <div class="scrollWidth">
		                                <div class="scrollWrap">
		                                    <div class="selectArea flex sb">
		                                        <p class="info-text">비교할 상품을 선택해 주세요.</p>
		                                        <div class="dropDownMenu type2">
		                                            <div class="selectBox">
		                                                <button type="button" class="label" data-selected="수강 상품 선택" data-default="수강 상품 선택">수강 상품 선택</button>
		                                                <div class="optionListWrap">
		                                                    <div class="scrollWidth">
		                                                        <ul class="optionList scrollWrap">
		                                                            @foreach ($lectureComparison as $item)
		                                                                <li class="optionItem"><button type="button" data-account="">{{ $item[0] }}</button></li>
		                                                            @endforeach
		                                                        </ul>
		                                                    </div>
		                                                </div>
		                                            </div>
		                                        </div>
		                                        <div class="dropDownMenu type2">
		                                            <div class="selectBox">
		                                                <button type="button" class="label" data-selected="수강 상품 선택" data-default="수강 상품 선택">수강 상품 선택</button>
		                                                <div class="optionListWrap">
		                                                    <div class="scrollWidth">
		                                                        <ul class="optionList scrollWrap">
		                                                            @foreach ($lectureComparison as $item)
		                                                                <li class="optionItem"><button type="button" data-account="">{{ $item[0] }}</button></li>
		                                                            @endforeach
		                                                        </ul>
		                                                    </div>
		                                                </div>
		                                            </div>
		                                        </div>

		                                        <div class="comparison-table">
		                                            <table>
		                                                <thead>
		                                                    <th>비교항목</th>
		                                                    <td></td>
		                                                    <td></td>
		                                                </thead>
		                                                <tbody>
		                                                    <tr>
		                                                        <th></th>
		                                                        <td>
		                                                            <div class="iconBox">

		                                                            </div>
		                                                        </td>
		                                                        <td>
		                                                            <div class="iconBox">

		                                                            </div>
		                                                        </td>
		                                                    </tr>
		                                                    <tr>
		                                                        <th>옵션구성</th>
		                                                        <td></td>
		                                                        <td></td>
		                                                    </tr>
		                                                    <tr>
		                                                        <th>강좌구성</th>
		                                                        <td class="lecture-composition"></td>
		                                                        <td class="lecture-composition"></td>
		                                                    </tr>
		                                                    <tr>
		                                                        <th>제공<br class="mo_tab-br">강의수</th>
		                                                        <td></td>
		                                                        <td></td>
		                                                    </tr>
		                                                    <tr>
		                                                        <th>첨삭</th>
		                                                        <td></td>
		                                                        <td></td>
		                                                    </tr>
		                                                    <tr>
		                                                        <th>CDT</th>
		                                                        <td></td>
		                                                        <td></td>
		                                                    </tr>
		                                                    <tr>
		                                                        <th>학습자료 <br>(교재)</th>
		                                                        <td></td>
		                                                        <td></td>
		                                                    </tr>
		                                                    <tr>
		                                                        <th>수강기간</th>
		                                                        <td></td>
		                                                        <td></td>
		                                                    </tr>
		                                                    <tr>
		                                                        <th>수강대상</th>
		                                                        <td></td>
		                                                        <td></td>
		                                                    </tr>
		                                                    <tr>
		                                                        <th>수강료</th>
		                                                        <td></td>
		                                                        <td></td>
		                                                    </tr>
		                                                </tbody>
		                                            </table>
		                                        </div>
		                                        <p class="bottom-text">*강의수와 교재 정보는 운영 상황이 따라 변동될 수 있습니다.</p>
		                                    </div>
		                                </div>
		                            </div>
		                        </div>
		                        <button type="button" class="popupClose closeBtn">확인</button>
		                    </div>
		                    <div class="dim"></div>
		                </div>
		            </div>
		        </div>
	        </div>
	        @endif

	        {{-- 검색 --}}
			<div class="findMyCourse">
				<div class="max-width">
					@if ($service == 'ielts')
						<div class="ieltsBox">
							<b><figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/lecture/lecture-icon.svg');"></figure>나에게 맞는 강좌는?</b>
							<form name="product-search-form" method="get" action="{{ route("enrol", ['service' => $service]) }}">
								<div class="form-wrap">
									<div class="dropDownMenu type2">
										<div class="selectBox">
											<button type="button" class="label" data-selected="{{ request()->module ?? "모듈"}}" data-default="모듈">{{ request()->module ?? "모듈"}}</button>
											<input type="hidden" name="module" id="module" value="{{request()->module}}" />
											<div class="optionListWrap">
												<div class="scrollWidth">
													<ul class="optionList scrollWrap">
														<!-- 활성화 메뉴 active class 추가 -->
														<li class="optionItem"><button type="button" data-account="">전체</button></li>
														<li @class(["optionItem", "selected" =>'academic' == request()->module])><button type="button" data-account="academic">Academic</button></li>
														<li @class(["optionItem", "selected" =>'general' == request()->module])><button type="button" data-account="general">General</button></li>
													</ul>
												</div>
											</div>
										</div>
									</div>

									<!-- <select name="current_level">
										<option value="">현재 레벨</option>
										@foreach(config('edmclass.current_level') as $k => $v)
										<option value="{{ $k }}" @selected(request()->current_level == $k)>{{ $v }}</option>
										@endforeach
									</select> -->
									<div class="dropDownMenu type2">
										<div class="selectBox">
											<button type="button" class="label" data-selected="{{ request()->current_level ?? "현재 레벨"}}" data-default="현재 레벨">현재 레벨</button>
											<input type="hidden" name="current_level" id="current_level" value="{{request()->current_level}}" />
											<div class="optionListWrap">
												<div class="scrollWidth">
													<ul class="optionList scrollWrap">
														<li class="optionItem"><button type="button" data-account="">전체</button></li>
														<!-- 활성화 메뉴 active class 추가 -->
														@foreach(config('edmclass.current_level') as $k => $v)
															<li @class(["optionItem", "selected" => $k == request()->current_level]) class="optionItem"><button type="button" data-account="{{ $k }}">{{ $v }}</button></li>
														@endforeach
													</ul>
												</div>
											</div>
										</div>
									</div>

									<!-- <select name="etc_product_type">
										<option value="">시험 응시권</option>
										<option value="1" @selected(request()->etc_product_type == 1)>포함</option>
									</select> -->
									<div class="dropDownMenu type2">
										<div class="selectBox">
											<button type="button" class="label" data-selected="시험 응시권" data-default="시험 응시권">시험 응시권</button>
											<input type="hidden" name="etc_product_type" id="etc_product_type" value="{{request()->etc_product_type}}" />
											<div class="optionListWrap">
												<div class="scrollWidth">
													<ul class="optionList scrollWrap">
														<li class="optionItem"><button type="button" data-account="">전체</button></li>
														<!-- 활성화 메뉴 active class 추가 -->
														<li @class(["optionItem", "selected" => request()->etc_product_type == 1])><button type="button" data-account="1">포함</button></li>
														<li @class(["optionItem", "selected" => request()->etc_product_type == '0'])><button type="button" data-account="0">불포함</button></li>
													</ul>
												</div>
											</div>
										</div>
									</div>

									<button type="submit" class="search-btn">검색</button>
								</div>
							</form>
						</div>
					@else
						<div class="academyBox">
							<div class="lecture-tab-module flex">
								<b>모듈을 선택하세요.</b>
								<div class="flex btnWrap">
									<a href="javascript:;" data-module="academic">Academic</a>
									<a href="javascript:;" data-module="general">General</a>
								</div>
							</div>
							<div class="lecture-tab-list">
								<div class="scrollWrap">
									<ul>
										@foreach($productCategories as $categoryName => $products)
										<li class="lecture-tab">
											<div class="title"><b>{{ $categoryName }}</b></div>
											<div class="info">
												@foreach ($products as $product)
												<a href="javascript:;" id="product-btn-{{ $product->id }}" data-product-id="{{ $product->id }}" data-module="{{ $product->module }}" data-category="{{ $categoryName }}">{{ $product->name }}</a>
												@endforeach
											</div>
										</li>
										@endforeach
									</ul>
								</div>
							</div>
						</div>
					@endif
				</div>
			</div>

	        <div class="lecture-cont-wrapper">
				@if ($service == 'ielts')
					<div class="categoryWrap">
						<div class="flex">
							@foreach($productCategories as $categoryName => $products)
								<a href="#none" class="{{ $loop->first ? 'active' : '' }}" onclick="fnMove('category-{{ $products[0]->productCategoryId }}')" data-id="category-{{ $products[0]->productCategoryId }}">{{ $categoryName }}</a>
							@endforeach
						</div>
						<div class="line"></div>
					</div>
				@endif

				<div class="list-wrap">
					<div class="max-width">
						@foreach($productCategories as $categoryName => $products)
						{{-- <span class="lecture-cont-anchor" id="category-{{ preg_replace('/[^a-zA-Z0-9-_]/', '-', $categoryName) }}"></span> --}}
						<span class="lecture-cont-anchor" id="category-{{ $products[0]->productCategoryId }}"></span>
						<div class="lecture-cont">
							<p class="lecture-cont-title" data-category="{{ $categoryName }}">{{ $categoryName }}</p>

							@foreach($products as $product)
								<div class="lecture-cont-box" id="product-{{ $product->id }}" data-module="{{ $product->module }}">
									<div class="lecture-thumbnail">
										<img src="{{ $product->thumbnail }}" alt="">
									</div>
									<div class="lecture-info">
										<div class="lecture-detail-title">
											<div class="flex">
												@if ($product->promotion_flag_word)
												<div class="flag {{ $product->promotion_flag }}">
													<span>{{ $product->promotion_flag_word }}</span>
												</div>
												@endif
												<b>{{ $product->name }}</b>
											</div>
											<div class="lecture-detail-desc">{{ $product->description }}</div>
										</div>

										<!-- 과정별 가격 목록 -->
										<ul class="lecture-detail-list">
											@foreach($product->getActivateProductOptions() as $option)
												<li>
													<a href="{{ route('product', ['service' => $service, 'product_id'=>$product->id, 'option_id'=>$option->id]) }}">
														<div class="month">{{ $option->name }}</div>
														<div class="price-wrap flex">
															@if ($option->is_discounted && $option->isInDiscountPeriod() || $option->discount_rate > 0)
																<div class="desc">{{ round($option->discount_rate) }}%</div>&nbsp;할인
															@endif
															@if ($option->is_discounted && $option->isInDiscountPeriod() || $option->discount_rate > 0)
																<div class="price-before">{{ number_format($option->consumer_price) }}원</div>
															@endif
															<div class="price">{{  $option->is_discounted && $option->isInDiscountPeriod() ? number_format($option->discount_price):number_format($option->sales_price) }}원</div>
															<div class="more">자세히 보기 <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/lecture/right-arrow-pc.svg');"></figure></div>
														</div>
													</a>
												</li>
											@endforeach
										</ul>
									</div>
									<!-- TODO 과정별 가격 목록 더보기 버튼 (최대 노출 4개, 5개 부터 더보기 버튼 노출) -->
									<div class="more-btn-wrap">
										<div class="mo_tab-btn"><button type="button" class="more-btn">더보기</button></div>
										<div class="pc-btn"><button type="button" class="more-btn"><span class="el-hide">더보기</span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 6L8 10.5L12.5 6" stroke="#7D7B90" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button></div>
									</div>
								</div>
							@endforeach
						</div>
						@endforeach
					</div>
				</div>
	        </div>

			{{-- <a href="#none" class="scroll-up"><img src="{{ env('AWS_S3_IMG_URL') }}/common/lecture/ico-scroll-top.png" alt="TOP">TOP</a> --}}
        </div>
	</div>
@endsection

@section($service.'-script')
	<script>
		@if ($service == 'academy')
            function updateFilter(){
                if ($(".academyBox .active").length === 0) {
                    defaultLectureList();
                    return;
                }

                if ($(".lecture-tab .active").length === 0 || $(".lecture-tab-module .active").length === 0) {
                    hideLectureList();
                }
                let activeProducts= [];
                let activeModules = [];

                $(".lecture-cont-title").hide();

                $(".lecture-tab .active").each(function () {
                    const productId = $(this).data('product-id');
                    activeProducts.push(productId);
                });

                $(".lecture-tab-module .active").each(function () {
                    const module = $(this).data('module');
                    activeModules.push(module);
                });

                // 각 강좌 박스 별로 교집합 체크
                $(".lecture-cont-box").each(function () {
                    const productId = $(this).attr("id")?.replace("product-", "");
                    const modules = ($(this).data("module") || "").split("|");
                    let isProductMatched = activeProducts.includes(parseInt(productId));
                    let isModuleMatched = modules.some(m => activeModules.includes(m));

                    if(activeProducts.length === 0){
                        isProductMatched = true;
                    }
                    if(activeModules.length === 0) {
                        isModuleMatched = true;
                    }

                    if (isProductMatched && isModuleMatched) {
                        $(this).show();
                        $(this).parents('.lecture-cont').find('.lecture-cont-title').show();
                    } else {
                        $(this).hide();
                    }
                });

            }
            function defaultLectureList(){
                $(".lecture-cont-title").show();
                $(".lecture-cont-box").show();
            }
            function hideLectureList(){
                $(".lecture-cont-title").hide();
                $(".lecture-cont-box").hide();
            }

			// TODO
			function lectureTabListLenth(){
				const items = document.querySelectorAll('.lecture-tab-list ul > li');
				let odd = [], even = [];

				items.forEach((li, i) => ((i + 1) % 2 ? odd : even).push(li));

				odd.at(-1)?.classList.add('no-after');       // 마지막 홀수
				even.slice(-2).forEach(li => li.classList.add('no-after')); // 짝수 뒤 2개

				// 전체에 클래스 추가
				odd.forEach(li => li.classList.add('is-odd'));
				even.forEach(li => li.classList.add('is-even'));
			}


		@endif
		// TODO 옵션 길이에 따라 리스트 영역 margin 조정 (744px이상 ~ 1200px 미만에서만)
		function updateLectureContWrapperMargin() {
				const docWidth = $(document).width();
				if (docWidth >= 744 && docWidth < 1200) {
					$('.lecture-container.list-container .lecture-cont-wrapper').css({
						'margin-top': -$('.findMyCourse').outerHeight(true) + 'px'
					});
				} else {
					$('.lecture-container.list-container .lecture-cont-wrapper').css('margin-top', '0');
				}
			}
			updateLectureContWrapperMargin();
			$(window).on('resize', function() {
				updateLectureContWrapperMargin();
			});


        let isScroll = "available" ;
        function fnMove(idName) {
            isScroll = "not_used";

            const offset = $("#"+idName).offset();
            let header = $('#header').outerHeight();
            const docWidth = $(document).width();
            if ( docWidth < 576 ) {
                header += $('.pageTitle').outerHeight()
            } else if ( $('body').hasClass('ielts') ) {
                header += $('.categoryWrap').outerHeight()
            }

            offsetTop = offset.top - header;
            $('html, body').animate({scrollTop: offsetTop},400, function() {
                setTimeout(function() {
                    isScroll = "pending";
                }, 1000)
            });

		}

		$(document).ready(function () {
            @if($service == 'ielts')
                $(".selected").trigger('click');

                @if ( request()->has("compare"))
                    $('.popupWrap-lecture-comparison').addClass('active');
                @endif
            @endif

            @if (Request::has("anchor"))
                fnMove("category-{{ Request::get('anchor') }}");
            @endif


			@if ($service == 'academy')
                $(".lecture-tab a").click(function (event) {
                    event.stopPropagation();
                    $(this).toggleClass("active");
                    updateFilter();
                });

                $(".lecture-tab-module a").click(function (event) {
                    event.stopPropagation();
                    $(this).toggleClass("active");
                    updateFilter();
                });

                // $('a[data-module="academic"]').addClass('active');
                // updateModule();
			@endif

			$(".categoryWrap a").click(function(event) {
				$(".categoryWrap a").removeClass("active");
				$(this).addClass("active");
			});


            // 배너 클릭 > 수강상품 비교 팝업
            $('.comparisonPopupOn').on('click', function(){
                $('.popupWrap-lecture-comparison').addClass('active');
            });
            $('.popupWrap-lecture-comparison .closeBtn, .popupWrap-lecture-comparison .dim').on('click',function(){
                $('.popupWrap-lecture-comparison').removeClass('active');
            });

			/* TODO 더보기 버튼 */
			$('.lecture-cont-box').each(function () {
				const $list = $(this).find('.lecture-detail-list > li');
				const $moreBtn = $(this).find('.more-btn-wrap');

				if ($list.length > 4) {
					$list.slice(4).hide();
					$moreBtn.show();
				}

				$moreBtn.on('click', function () {
					// 토글 동작
					if ($(this).hasClass('active')) {
						$(this).removeClass('active');
						$list.slice(4).hide();
					} else {
						$(this).addClass('active');
						$list.show();
					}
				});
			});

			/* TODO 카테고리 sticky */
			// IntersectionObserver를 사용하여 .categoryWrap이 sticky 되는 시작점에서 is-sticky-bg 클래스를 토글
			if ('IntersectionObserver' in window) {
				const $categoryWrap = $('.categoryWrap');
				if ($categoryWrap.length) {
					// 감시할 더미 엘리먼트 생성 (categoryWrap 바로 위에 삽입)
					const $stickySentinel = $('<div class="sticky-sentinel"></div>').css({
						position: 'relative',
						top: 0,
						width: 0,
						height: 0
					});
					$categoryWrap.before($stickySentinel);

					const observer = new IntersectionObserver(function(entries) {
						entries.forEach(function(entry) {
							if (entry.boundingClientRect.top < 0 && !entry.isIntersecting) {
								$categoryWrap.addClass('is-sticky-bg');
							} else {
								$categoryWrap.removeClass('is-sticky-bg');
							}
						});
					}, {
						root: null,
						threshold: 0
					});

					observer.observe($stickySentinel[0]);
				}
			}
		});

        if ( $('body').hasClass("ielts") ) {
            window.addEventListener('scroll', () => scrollEvent());
        }

        function scrollEvent() {
            if ( isScroll != 'available' ) {
                isScroll = isScroll == "pending" ? "available" : scroll;
                return false;
            }
            const scrollTop = $(window).scrollTop();
            $('span.lecture-cont-anchor').each(function () {
                const id = $(this).attr('id');
                const anchorOffsetTop = $(this).next().offset().top ;
                const nextOffsetBottom = $(this).next().offset().top + $(this).next().innerHeight() ;

                if (scrollTop >= anchorOffsetTop && scrollTop <= nextOffsetBottom) {
                    $('.categoryWrap a[data-id="' + id + '"]').addClass('active');
                } else {
                    $('.categoryWrap a[data-id="' + id + '"]').removeClass('active');
                }
            });

            if ( $('.categoryWrap a.active').length == 0 ) {
                $('.categoryWrap a:eq(0)').addClass("active");
            }
        }
	</script>

    {{--  수강상품 비교 팝업 select --}}
    <script>
        // let iconMap = {
        //     'icon-1': [{ img: 'lecture-ticket-con.svg', label: '응시권' }],
        //     'icon-2': [{ img: 'lecture-mockTest-icon.svg', label: 'CDT 모의고사' }],
        //     'icon-3': [{ img: 'lecture-refund-icon.svg', label: '환급' }],
        //     'icon-4': [
        //         { img: 'lecture-ticket-con.svg', label: '응시권' },
        //         { img: 'lecture-mockTest-icon.svg', label: 'CDT 모의고사' }
        //     ]
        // };

        let iconMap = {
            'ticket': { img: 'lecture-ticket-con.svg', label: '응시권' },
            'cdt': { img: 'lecture-mockTest-icon.svg', label: 'CDT 모의고사' },
            'refund': { img: 'lecture-refund-icon.svg', label: '환급' },
        };

        let AWS_IMG_URL = '{{ env("AWS_S3_IMG_URL") }}/ielts/common';
        let lectureComparisonData = @json($lectureComparison);
        let selectedIndexes = [null, null]; // 좌우 선택 인덱스 기억

        $(document).ready(function () {
            $('.popupWrap-lecture-comparison .dropDownMenu').each(function (colIndex) {
                $(this).find('.optionItem button').each(function (index) {
                    $(this).data('index', index); // 인덱스 추가
                }).on('click', function () {
                    let selectedIndex = $(this).data('index');
                    selectedIndexes[colIndex] = selectedIndex;
                    fillComparisonTable(colIndex, lectureComparisonData[selectedIndex]);
                    updateDropdownMenu();
                });
            });

            function updateDropdownMenu() {
                $('.popupWrap-lecture-comparison .dropDownMenu').each(function (colIndex) {
                    $(this).find('.optionItem button').each(function () {
                        let index = $(this).data('index');
                        $(this).toggle(index !== selectedIndexes[1 - colIndex]);
                    });
                });
            }

            function fillComparisonTable(col, data) {
                let $table = $('.comparison-table table');
                $table.find('thead td').eq(col).text(data[0]);

                // 아이콘 구성 (iconBox 클래스가 사라지지 않도록)
                let $iconCell = $table.find('tbody tr').eq(0).find('td').eq(col);
                let $iconBox = $iconCell.find('.iconBox');

                if ($iconBox.length === 0) {
                    $iconBox = $('<div class="iconBox"></div>').appendTo($iconCell);
                } else {
                    $iconBox.empty(); // 기존 아이콘 내용 비우기
                }

                if ( data[1].length > 0 ) {
                    data[1].forEach(key => {
                        const icon = iconMap[key];
                        console.log(icon)
                        $iconBox.append(`
                            <div class="icon">
                                <figure style="background-image: url('${AWS_IMG_URL}/${icon.img}');"></figure>
                                <p>${icon.label}</p>
                            </div>
                        `);
                    });
                }

                // 나머지 데이터
                for (let i = 2; i <= 10; i++) {
                    $table.find('tbody tr').eq(i - 1).find('td').eq(col).html(data[i]);
                }
            }
        });
    </script>
@endsection