@extends('layouts.app')

@section('title', ($program->name ?? 'PROGRAM') . ' - GLOBEAU')

@section('description', ($program->introduction ?? '대한민국 프리미엄 뷰티 플랫폼 Globeau'))

@section('content')

<main class="py-4 bg-white">

    <div class="container">

        <!-- 브레드크럼 및 SNS 공유 버튼 -->
        <div class="d-flex justify-content-between align-items-center common-header-bar mb-4">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb common-breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ url('/') }}" class="text-brand text-decoration-none" title="홈">
                            <i class="fas fa-home"></i>
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('programs.index') }}" class="text-muted text-decoration-none">프로그램</a>
                    </li>
                    <li class="breadcrumb-item">
                        <span class="text-dark fw-bold" aria-current="page">프로그램 소개</span>
                    </li>
                </ol>
            </nav>
            <div class="d-flex align-items-center gap-2">
                <a href="{{ route('programs.index') }}" class="btn btn-sm btn-outline-premium d-none d-md-block px-3 text-decoration-none">프로그램 리스트</a>
                <div class="d-flex">
                    <a href="#" class="sns-share-icon" title="카카오톡"><i class="fas fa-comment"></i></a>
                    <a href="#" class="sns-share-icon" title="페이스북"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="sns-share-icon" title="트위터"><i class="fab fa-twitter"></i></a>
                </div>
            </div>
        </div>

        <div class="row g-4 g-lg-5 mb-5 align-items-start">
            <!-- 상품 썸네일 (6px 고정 카드 스타일) -->
            <div class="col-md-6 col-lg-5">
                <div class="card-img-wrapper rounded-3 shadow-sm border">
                    <img src="{{ $program->logo_path ? asset('storage/' . $program->logo_path) : 'https://placehold.co/600x600?text=Globeau' }}"
                        class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
                        alt="{{ $program->name }}">
                </div>
            </div>

            <!-- 상품 구매 폼 및 요약 정보 -->
            <div class="col-md-6 col-lg-7">

                <div class="d-flex align-items-center justify-content-between gap-2 mb-2">

                    <!-- 좌측: 배지 그룹 (모바일에서 코드는 d-none d-md-inline-block으로 숨김) -->
                    <div class="d-flex align-items-center flex-wrap gap-1">
                        @if($program->execution_type === 'package_single')
                        <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle px-2 py-1">베이직 패키지 (1회용)</span>
                        @elseif($program->execution_type === 'package_separate')
                        <span class="badge bg-danger-subtle text-danger-emphasis border border-danger-subtle px-2 py-1">스페셜 패키지 ({{ $program->session_count }}회차)</span>
                        @else
                        <span class="badge bg-secondary-subtle text-secondary-emphasis border px-2 py-1">기본 프로그램</span>
                        @endif

                        <!-- 패키지 상품일 때만 노출되는 구성품 보기 버튼 -->
                        @if(isset($program->bundleItems) && $program->bundleItems->isNotEmpty())
                        <button type="button" class="btn btn-sm btn-outline-brand py-1 px-2.5 fw-bold text-nowrap" data-bs-toggle="modal" data-bs-target="#packageModal-{{ $program->id }}" style="border-radius: var(--radius-fixed); font-size: 0.75rem;">
                            <i class="fas fa-boxes text-brand me-1"></i> 구성품 보기
                        </button>
                        @endif

                    </div>

                    <!-- 우측: 코드(PC 전용) 및 제휴 뷰티샵 아이콘 버튼 -->
                    <div class="d-flex align-items-center gap-1.5">
                        <!-- 코드 배지 (모바일 숨김) -->
                        <span class="badge bg-light text-secondary border px-2 py-1 d-none d-md-inline-block" style="font-size: 0.75rem;">코드: {{ $program->code }}</span>

                        <!-- 제휴 뷰티샵 모달 호출 아이콘 버튼 -->
                        <button type="button" class="btn btn-sm btn-light border text-secondary px-2 py-1 shadow-sm" onclick="openShopModal({{ $program->id }}, '{{ $program->name }}')" title="제휴 뷰티샵 보기" style="border-radius: var(--radius-fixed); font-size: 0.75rem;">
                            <i class="fas fa-store text-brand"></i>
                            <span class="d-none d-md-inline ms-1">제휴샵</span>
                        </button>
                    </div>

                </div>
                <!-- 제휴 뷰티샵용 [단 하나의 공용 AJAX 모달]-->
                <x-program-shops-modal />

                @if(isset($program->bundleItems) && $program->bundleItems->isNotEmpty())
                <x-program-package-modal :program="$program" />
                @endif

                <h1 class="fw-bold my-2 mb-md-3 text-dark brand-font">{{ $program->name ?? 'BEAUTY SHOP PROGRAN' }}</h1>
                <p class="text-muted mb-3">{{ $program->introduction ?? '프리미엄 뷰티 테라피 체험권입니다.' }}</p>

                <!-- 추가 안내 정보 (외곽 박스 제거, PC는 제목:값 한 줄, 모바일은 제목/값 상하 배치) -->
                <div class="row g-2 mb-4">

                    <!-- 소요 시간 -->
                    <div class="col-4 col-md">
                        <div class="bg-white p-2.5 rounded border h-100 d-flex flex-column flex-md-row align-items-center justify-content-center gap-md-1 text-center text-md-start">
                            <span class="text-muted small mb-1 mb-md-0" style="font-size: 0.75rem;"><i class="fas fa-clock me-1 text-brand"></i>소요시간</span>

                            {{-- 패키지 상품이거나 bundleItems가 있는 경우 '알 수 없음' 처리 --}}
                            @if(isset($program->bundleItems) && $program->bundleItems->isNotEmpty())
                            <strong class="text-dark" style="font-size: 0.85rem;">알 수 없음</strong>
                            @elseif($program->duration_minutes > 0)
                            <strong class="text-dark" style="font-size: 0.85rem;">{{ $program->duration_minutes }}분</strong>
                            @else
                            <strong class="text-dark" style="font-size: 0.85rem;">알 수 없음</strong>
                            @endif
                        </div>
                    </div>

                    <!-- 유효 기간 -->
                    @if($program->validity_days)
                    <div class="col-4 col-md">
                        <div class="bg-white p-2.5 rounded border h-100 d-flex flex-column flex-md-row align-items-center justify-content-center gap-md-1 text-center text-md-start">
                            <span class="text-muted small mb-1 mb-md-0" style="font-size: 0.75rem;"><i class="fas fa-calendar-alt me-1 text-brand"></i>유효기간</span>
                            <strong class="text-dark" style="font-size: 0.85rem;">결제 후 {{ $program->validity_days }}일</strong>
                        </div>
                    </div>
                    @endif

                    <!-- 총 회차 -->
                    @if($program->session_count)
                    <div class="col-4 col-md">
                        <div class="bg-white p-2.5 rounded border h-100 d-flex flex-column flex-md-row align-items-center justify-content-center gap-md-1 text-center text-md-start">
                            <span class="text-muted small mb-1 mb-md-0" style="font-size: 0.75rem;"><i class="fas fa-redo me-1 text-brand"></i>총 회차</span>
                            <strong class="text-dark" style="font-size: 0.85rem;">{{ $program->session_count }}회</strong>
                        </div>
                    </div>
                    @endif

                </div>

                <div class="card border-0 bg-light p-3 mb-4" style="border-radius: var(--radius-fixed);">
                    <!-- 소비자가격 (할인 중일 때만 상단에 은은하게 배치) -->
                    @if($program->original_price > $program->sale_price)
                    <div class="d-flex justify-content-between align-items-center mb-1 text-muted" style="font-size: 0.85rem;">
                        <span>소비자가</span>
                        <span class="text-decoration-line-through">{{ number_format($program->original_price) }}원</span>
                    </div>
                    @endif

                    <!-- 판매가격 및 할인율 (모바일에서도 꺾이지 않게 정돈) -->
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="fw-bold text-dark fs-6">판매가</span>
                        <div class="text-end">
                            @if($program->original_price > 0 && $program->sale_price < $program->original_price)
                                @php $discountRate = round((($program->original_price - $program->sale_price) / $program->original_price) * 100); @endphp
                                <div class="d-inline-block me-1">
                                    <span class="badge bg-danger px-1.5 py-0.5" style="font-size: 0.7rem;">{{ $discountRate }}%</span>
                                </div>
                                @endif
                                <span class="fs-4 fw-bold text-brand">{{ number_format($program->sale_price) }}원</span>
                        </div>
                    </div>

                    <!-- 적립 포인트 (있을 경우 하단에 깔끔한 인라인 뱃지로 배치) -->
                    @if($program->reward_points > 0)
                    <div class="mt-2 pt-2 border-top d-flex justify-content-between align-items-center" style="font-size: 0.8rem;">
                        <span class="text-muted">구매 적립금</span>
                        <span class="fw-semibold text-brand"><i class="fas fa-coins me-1"></i>{{ number_format($program->reward_points) }} P</span>
                    </div>
                    @endif
                </div>

                <!-- 수량 선택 & 총 금액 박스 -->
                <div class="bg-light p-4 rounded-3 mt-2 mb-4 border">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="fw-bold text-dark">수량 선택</span>
                        <div class="d-flex align-items-center bg-white border rounded-3 px-2 py-1">
                            <button type="button" class="btn btn-sm btn-light border-0 py-0 px-2" onclick="updateQty(-1)"><i class="fas fa-minus small"></i></button>
                            <input type="text" id="itemQty" value="1" class="qty-input form-control-sm border-0 text-center fw-bold" style="width: 45px;" readonly>
                            <button type="button" class="btn btn-sm btn-light border-0 py-0 px-2" onclick="updateQty(1)"><i class="fas fa-plus small"></i></button>
                        </div>
                    </div>
                    <hr class="border-secondary opacity-25 my-2">
                    <div class="d-flex justify-content-between align-items-end pt-2">
                        <span class="fw-bold text-dark fs-5">총 결제금액</span>
                        <div class="text-end">
                            <h3 class="fw-bold text-brand m-0" id="totalPrice">{{ number_format($program->sale_price) }}원</h3>
                            <small class="text-muted">적립예정 <span id="totalPoint" class="fw-bold text-brand">{{ number_format($program->reward_points) }} P</span></small>
                        </div>
                    </div>
                </div>

                <!-- 구매 액션 버튼 (6px 통일) -->
				<div class="d-flex gap-2">
					<button type="button" class="btn btn-outline-premium w-25 py-3 fs-5" title="장바구니 담기"><i class="fas fa-shopping-cart"></i></button>
					<button type="button" id="btnDirectCheckout" class="btn btn-premium w-75 py-3 fs-5 fw-bold">바로 구매하기</button>
				</div>
            </div>
        </div>
    </div>
</main>

<!-- 스티키 탭 네비게이션 -->
<ul class="detail-tab-nav shadow-sm" id="detailTabs">
    <li><a class="nav-link active" href="#section-info">상품정보</a></li>
    <li><a class="nav-link" href="#section-guide">구매안내</a></li>
    <li><a class="nav-link" href="#section-review">체험후기 <span class="badge bg-secondary rounded-pill ms-1">{{ $program->review_count ?? 0 }}</span></a></li>
    <li><a class="nav-link" href="#section-qna">Q&A <span class="badge bg-secondary rounded-pill ms-1">{{ $program->qna_count ?? 0 }}</span></a></li>
</ul>

<!-- 상품정보 탭 -->
<section id="section-info" class="py-5 bg-white">
    <div class="container" style="max-width: 800px;">
        <div class="text-center mb-5">
            <h2 class="section-title">상품정보</h2>
        </div>

        <!-- 유튜브 영상 (등록된 경우에만 출력) -->
        @if($program->youtube_id)
        <div class="video-wrapper mb-5">
            <iframe src="https://www.youtube.com/embed/{{ $program->youtube_id }}?rel=0&amp;vq=hd1080&amp;autoplay=0" frameborder="0" allowfullscreen></iframe>
        </div>
        @endif

        <!-- PC 메인 배너 이미지 (등록된 경우) -->
        @if($program->banner_path)
        <div class="mb-5 text-center">
            <img src="{{ asset('storage/' . $program->banner_path) }}" class="img-fluid rounded-3 shadow-sm border w-100" alt="메인 배너">
        </div>
        @endif

        <!-- 에디터 본문 내용 (Summernote / Quill HTML 출력) -->
        <div class="editor-content mt-4">
            {!! $program->description !!}
        </div>

        <!-- 마케팅/갤러리 이미지 다중 출력 영역 -->
        @if($program->images && $program->images->count() > 0)
        <div class="mt-5">
            <h3 class="fw-bold mb-4 text-center">갤러리 및 상세 이미지</h3>
            <div class="row g-3">
                @foreach($program->images as $img)
                <div class="col-12">
                    <div class="card-img-wrapper rounded-3 border shadow-sm">
                        <img src="{{ asset('storage/' . $img->path) }}" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="갤러리 이미지">
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</section>

<!-- 구매안내 탭 -->
<section id="section-guide" class="py-5 bg-light border-top">
    <div class="container" style="max-width: 800px;">
        <div class="text-center mb-5">
            <h2 class="section-title">구매안내</h2>
        </div>

        <div class="accordion accordion-flush bg-white rounded-3 shadow-sm overflow-hidden border" id="guideAccordion">
            <!-- 결제안내 -->
            <div class="accordion-item border-0 border-bottom">
                <h2 class="accordion-header">
                    <button class="accordion-button fw-bold py-4" type="button" data-bs-toggle="collapse" data-bs-target="#guide1" aria-expanded="true">
                        <i class="fas fa-credit-card text-brand me-2"></i> 결제안내
                    </button>
                </h2>
                <div id="guide1" class="accordion-collapse collapse show" data-bs-parent="#guideAccordion">
                    <div class="accordion-body text-muted small lh-lg px-4 pb-4">
                        고액결제의 경우 안전을 위해 카드사에서 확인전화를 드릴 수도 있습니다. 확인과정에서 도난 카드의 사용이나 타인 명의의 주문등 정상적인 주문이 아니라고 판단될 경우 임의로 주문을 보류 또는 취소할 수 있습니다.<br><br>
                        무통장 입금은 상품 구매 대금은 PC뱅킹, 인터넷뱅킹, 텔레뱅킹 혹은 가까운 은행에서 직접 입금하시면 됩니다.<br>
                        주문시 입력한 입금자명과 실제입금자의 성명이 반드시 일치하여야 하며, 7일 이내로 입금을 하셔야 하며 입금되지 않은 주문은 자동취소 됩니다.
                    </div>
                </div>
            </div>
            <!-- 배송안내 -->
            <div class="accordion-item border-0 border-bottom">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed fw-bold py-4" type="button" data-bs-toggle="collapse" data-bs-target="#guide2">
                        <i class="fas fa-truck text-brand me-2"></i> 배송/티켓 안내
                    </button>
                </h2>
                <div id="guide2" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
                    <div class="accordion-body text-muted small lh-lg px-4 pb-4">
                        배송 방법 : 모바일 바코드 티켓 전송 및 마이페이지 확인<br>
                        배송 지역 : 전국<br>
                        배송 기간 : 결제 완료 즉시 발행<br>
                        ※ 본 상품은 오프라인 뷰티샵 방문 전용 체험권이며 실물 상품이 배송되지 않습니다.
                    </div>
                </div>
            </div>
            <!-- 환불안내 -->
            <div class="accordion-item border-0">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed fw-bold py-4" type="button" data-bs-toggle="collapse" data-bs-target="#guide3">
                        <i class="fas fa-undo-alt text-brand me-2"></i> 취소 및 환불 안내
                    </button>
                </h2>
                <div id="guide3" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
                    <div class="accordion-body text-muted small lh-lg px-4 pb-4">
                        <b>취소 및 환불이 가능한 경우</b><br>
                        - 결제일로부터 7일 이내, 뷰티샵을 방문하여 바코드를 사용하지 않은 미사용 티켓에 한함.<br><br>
                        <b>취소 및 환불이 불가능한 경우</b><br>
                        - 뷰티샵을 방문하여 이미 프로그램이 진행되었거나 바코드가 스캔된 경우.<br>
                        - 결제 후 7일이 경과한 미사용 티켓. (단, 매장 규정에 따라 포인트 환급 등으로 대체될 수 있습니다.)
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 체험후기 탭 -->
<section id="section-review" class="py-5 bg-white border-top">
    <div class="container" style="max-width: 800px;">
        <div class="text-center mb-4">
            <h2 class="section-title">체험후기</h2>
            <p class="text-muted small">프로그램의 생생한 체험후기를 확인해보세요.</p>
        </div>
        <div class="text-end mb-4">
            <button class="btn btn-premium rounded-3 px-4"><i class="fas fa-pen me-1"></i> 체험후기 작성</button>
        </div>

        @if(isset($program->reviews) && $program->reviews->count() > 0)
        <!-- 후기 리스트 루프 -->
        @else
        <div class="bg-light text-center py-5 rounded-3 border">
            <i class="fas fa-comment-slash fs-1 text-muted opacity-25 mb-3 d-block"></i>
            <p class="text-muted m-0">아직 등록된 체험후기가 없습니다.</p>
        </div>
        @endif
    </div>
</section>

<!-- Q&A 탭 -->
<section id="section-qna" class="py-5 bg-light border-top">
    <div class="container" style="max-width: 800px;">
        <div class="text-center mb-4">
            <h2 class="section-title">Q & A</h2>
            <p class="text-muted small">상품에 대한 궁금한 점을 남겨주세요.</p>
        </div>
        <div class="text-end mb-4">
            <button class="btn btn-outline-premium rounded-3 px-4"><i class="fas fa-question-circle me-1"></i> Q&A 작성</button>
        </div>

        @if(isset($program->qnas) && $program->qnas->count() > 0)
        <!-- Q&A 리스트 루프 -->
        @else
        <div class="bg-white text-center py-5 rounded-3 border shadow-sm">
            <i class="fas fa-headset fs-1 text-muted opacity-25 mb-3 d-block"></i>
            <p class="text-muted m-0">등록된 Q&A가 없습니다.</p>
        </div>
        @endif
    </div>
</section>

@endsection

@push('scripts')

<!-- 공통으로 관리하는 프로그램 스크립트 -->
<script src="{{ asset('js/users/user_program.js') }}"></script>

<script>
    // 컨트롤러에서 넘어온 단가 및 적립 포인트 데이터 연동 (한 줄 형식으로 수정)
    const unitPrice = {{ $program->sale_price ?? 0 }};
    const unitPoint = {{ $program->reward_points ?? 0 }};

    // 수량 증감 및 스크롤 함수 등 기존 로직...
    function updateQty(change) {
        const qtyInput = document.getElementById('itemQty');
        let currentQty = parseInt(qtyInput.value) || 1;
        let newQty = currentQty + change;

        if (newQty < 1) newQty = 1;
        if (newQty > 10) {
            alert("최대 10개까지 구매 가능합니다.");
            newQty = 10;
        }

        qtyInput.value = newQty;
        calculateTotal(newQty);
    }

    function calculateTotal(qty) {
        const total = unitPrice * qty;
        const totalP = unitPoint * qty;

        document.getElementById('totalPrice').innerText = total.toLocaleString('ko-KR') + "원";
        document.getElementById('totalPoint').innerText = totalP.toLocaleString('ko-KR') + " P";
    }

    document.querySelectorAll('.detail-tab-nav a').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            if (!targetElement) return;

            const headerOffset = 120;
            const elementPosition = targetElement.getBoundingClientRect().top;
            const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

            window.scrollTo({
                top: offsetPosition,
                behavior: "smooth"
            });
        });
    });
	
	// 상세페이지 하단 "바로 구매하기" 버튼 클릭 시 동작 예시
	document.getElementById('btnDirectCheckout').addEventListener('click', function() {
		const qty = document.getElementById('itemQty').value;
		const programCode = "{{ $program->code }}"; // 예: P8552875
		
		window.location.href = "{{ route('orders.checkout') }}?type=program&code=" + programCode + "&quantity=" + qty;
	});
</script>
@endpush