@extends('layouts.app')

@section('title', '프리미엄 프로그램 리스트 - GLOBEAU')

@section('content')

<div class="container py-4">

    <!-- 브레드크럼 -->
    <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">
                    <span class="text-dark fw-bold" aria-current="page">프로그램</span>
                </li>
            </ol>
        </nav>
    </div>

    <!-- 상단 타이틀 및 검색/필터 바 -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4 gap-3">
        <div>
            <h1 class="fw-bold mb-2 mb-md-3 text-dark brand-font">GLOBEAU 프로그램</h1>
            <p class="text-muted small mb-0">피부 본연의 광채를 되찾아주는 엄선된 프리미엄 뷰티 프로그램을 만나보세요.</p>
        </div>

        <!-- 검색 및 필터 폼 -->
        <form action="{{ route('programs.index') }}" method="GET" class="list-search-form d-flex align-items-center gap-2 flex-wrap flex-md-nowrap">

            <!-- 💡 [PC/태블릿 전용] 실행 방식 또는 카테고리 셀렉트박스 -->
            <div class="d-none d-md-flex gap-2">
                <select name="execution_type" class="form-select shadow-none border-brand" style="width: 140px; border-radius: var(--radius-fixed);">
                    <option value="">프로그램 유형</option>
                    <option value="single" {{ request('execution_type') == 'single' ? 'selected' : '' }}>단독/기본 프로그램</option>
                    <option value="package_single" {{ request('execution_type') == 'package_single' ? 'selected' : '' }}>베이직 패키지</option>
                    <option value="package_separate" {{ request('execution_type') == 'package_separate' ? 'selected' : '' }}>스페셜 패키지</option>
                </select>
            </div>

            <!-- 💡 [모바일 및 전체 공통] 검색 분류, 검색어 입력 폼, 검색 버튼 영역 -->
            <div class="d-flex align-items-center gap-2 flex-grow-1 flex-md-grow-0">
                <!-- 검색 분류 선택 -->
                <select name="search_type" class="form-select shadow-none border-brand" style="width: 100px; border-radius: var(--radius-fixed);">
                    <option value="name" {{ request('search_type') == 'name' ? 'selected' : '' }}>프로그램명</option>
                    <option value="description" {{ request('search_type') == 'description' ? 'selected' : '' }}>상세내용</option>
                </select>

                <!-- 검색어 입력 폼 -->
                <input type="text" name="keyword" value="{{ request('keyword') }}" class="form-control shadow-none border-brand" placeholder="검색어를 입력하세요" style="min-width: 140px; border-radius: var(--radius-fixed);">

                <!-- 검색 버튼 -->
                <button type="submit" class="btn btn-sm btn-premium px-3 text-nowrap" style="border-radius: var(--radius-fixed);">검색</button>
            </div>
        </form>
    </div>

    <!-- 프로그램 카드 그리드 (뷰티샵 리스트와 동일한 반응형 구조 적용) -->
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4 g-4 mb-5">
        @forelse($programs as $program)
        <div class="col">
            <!-- 프로그램 카드 프리미엄 컴포넌트 -->
            <div class="card card-premium h-100 position-relative border">

                <!-- 상단 고정 및 실행 방식 뱃지 오버레이 -->
                <div class="position-absolute top-0 start-0 p-3 z-2 d-flex gap-1">
                    @if($program->is_pinned)
                    <span class="badge bg-danger text-white shadow-sm" style="font-size: 0.7rem;">
                        <i class="fas fa-thumbtack me-1"></i>추천
                    </span>
                    @endif
                    @if($program->execution_type === 'package_single')
                    <span class="badge bg-warning text-dark shadow-sm" style="font-size: 0.7rem;">베이직 패키지</span>
                    @elseif($program->execution_type === 'package_separate')
                    <span class="badge bg-primary text-white shadow-sm" style="font-size: 0.7rem;">스페셜 패키지</span>
                    @endif
                </div>

                <!-- 프로그램 대표 이미지 썸네일 (와이드 래퍼 적용) -->
                <div class="card-img-wrapper bg-white">
                    <img src="{{ !empty($program->logo_path) ? asset('storage/' . $program->logo_path) : asset('images/default_thumb.png') }}"
                        class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
                        alt="{{ $program->name }}"
                        loading="lazy"
                        onerror="this.src='https://placehold.co/600x400?text=Globeau'">
                </div>

                <!-- 프로그램 정보 본문 -->
                <div class="card-body p-4 d-flex flex-column">
                    <!-- 회차 및 소요 시간 정보 -->
                    <div class="mb-1 d-flex align-items-center gap-2 small text-brand fw-semibold">
                        <span>
                            <i class="fas fa-clock me-1"></i>{{ $program->session_count }}회차 / 유효 {{ $program->validity_days }}일
                        </span>
                        @if(($program->execution_type === 'single' || $program->execution_type === 'basic') && $program->duration_minutes)
                        <span class="text-muted fw-normal">|</span>
                        <span class="text-secondary fw-normal">
                            <i class="fas fa-hourglass-half me-1"></i>1회 {{ $program->duration_minutes }}분
                        </span>
                        @endif
                    </div>

                    <!-- 프로그램 명 -->
                    <h5 class="card-title fw-bold text-dark brand-font mb-2 text-ellipsis-single">
                        <a href="{{ route('programs.show', $program->code) }}" class="text-dark text-decoration-none stretched-link">
                            {{ $program->name }}
                        </a>
                    </h5>

                    <!-- 소개글 (2줄 제한) -->
                    <p class="text-muted small mb-2 text-truncate-2" style="font-size: 0.85rem; line-height: 1.4; min-height: 2.4rem;">
                        {{ $program->introduction ?? '피부 본연의 광채와 탄력을 되찾아주는 프리미엄 뷰티 프로그램입니다.' }}
                    </p>

                    <!-- 1. 제휴 뷰티샵 버튼 (AJAX 공용 모달 호출) -->
                    @if($program->shops && $program->shops->count() > 0)
                    <div class="mb-2">
                        <button type="button"
                            class="fetch-shops-btn btn btn-sm btn-outline-premium w-100 py-1.5 d-flex align-items-center justify-content-center gap-2 z-2 position-relative fetch-shops-btn"
                            style="font-size: 0.75rem; border-radius: var(--radius-fixed);"
                            data-program-id="{{ $program->id }}"
                            data-program-name="{{ $program->name }}">
                            <i class="fas fa-store text-brand"></i>
                            <span>제휴 뷰티샵 보기 (<strong>{{ $program->shops->count() }}개점</strong>)</span>
                            <i class="fas fa-chevron-right ms-auto" style="font-size: 0.65rem;"></i>
                        </button>
                    </div>
                    @endif

                    <!-- 2. 패키지 구성 버튼 (개별 모달 팝업 호출 - 최대 10개 제한이므로 가볍고 빠름) -->
                    @if($program->bundleItems && $program->bundleItems->isNotEmpty())
                    <div class="mb-3">
                        <button type="button"
                            class="btn btn-sm btn-outline-premium w-100 py-1.5 d-flex align-items-center justify-content-center gap-2 z-2 position-relative"
                            style="font-size: 0.75rem; border-radius: var(--radius-fixed);"
                            data-bs-toggle="modal"
                            data-bs-target="#packageModal-{{ $program->id }}">
                            <i class="fas fa-boxes text-brand"></i>
                            <span>패키지 구성 보기 (<strong>{{ $program->bundleItems->count() }}개 구성</strong>)</span>
                            <i class="fas fa-chevron-right ms-auto" style="font-size: 0.65rem;"></i>
                        </button>
                    </div>
                    @endif

                    <!-- 가격 정보 및 하단 바로가기 -->
                    <div class="mt-auto pt-3 border-top d-flex justify-content-between align-items-center">
                        <div>
                            @if($program->original_price > $program->sale_price)
                            <div class="text-muted small text-decoration-line-through" style="font-size: 0.75rem;">{{ number_format($program->original_price) }}원</div>
                            @endif
                            <span class="fw-bold text-brand" style="font-size: 1.05rem;">
                                {{ number_format($program->sale_price) }}원
                            </span>
                        </div>
                        <span class="text-brand small fw-bold z-2 position-relative">
                            상세보기 <i class="fas fa-chevron-right ms-1" style="font-size: 0.7rem;"></i>
                        </span>
                    </div>
                </div>

            </div>
        </div>
        @empty
        <div class="col-12 text-center py-5">
            <div class="py-5 bg-white border shadow-sm rounded-3">
                <i class="fas fa-spa text-muted fa-3x mb-3 opacity-50"></i>
                <h5 class="fw-bold text-dark mb-1">등록된 프로그램이 없습니다.</h5>
                <p class="text-muted small mb-0">조건을 변경하여 다시 검색해 주세요.</p>
            </div>
        </div>
        @endforelse
    </div>

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

    <!-- 패키지 구성 안내 모달 (카드 반복문 바깥 하단에 위치) -->
    @foreach($programs as $program)
    <x-program-package-modal :program="$program" />
    @endforeach
    <!-- 프로그램 또는 뷰티샵 리스트 뷰에서 호출 시 -->
    <div class="d-none d-md-block">
        {{ $programs->withQueryString()->links('vendor.pagination.user_basic') }}
    </div>

</div>
@endsection

@push('styles')
@once
<link rel="stylesheet" href="{{ asset('css/programs/program_index.css') }}">
@endonce
@endpush

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