@extends('layouts.admin')

@section('title', '프로그램 관리')

@section('content')

<div class="content-header-box mb-4 px-0">
    <div class="content-title-wrap">
        <h1 class="content-title">@yield('title')</h1>
    </div>
    <div class="content-btn-wrap">
        <a href="{{ route('admin.programs.create') }}" class="btn btn-primary btn-app-sm fw-bold">
            <i class="fa-solid fa-plus me-1"></i> 등록
        </a>
    </div>
</div>

<!-- 공통 에러, 성공 알림 블래이드 컴포넌트 -->
<x-admin.alerts-display />

<div class="container-fluid px-0">

    <!-- 1. 검색 및 필터 박스 -->
    <div class="search-filter-section mb-3">
        <form id="searchForm" method="GET" action="{{ route('admin.programs.index') }}">

            <!-- [PC 전용 상세 필터] -->
            <div class="pc-only-section">
                <div class="row g-2 align-items-center">
                    <div class="col-md-5">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-light border-end-0"><i class="fa-solid fa-magnifying-glass text-muted"></i></span>
                            <input type="text" name="keyword" class="form-control border-start-0 ps-0" placeholder="프로그램명, 고유 코드 검색" value="{{ request('keyword') }}">
                        </div>
                    </div>
                    <!-- 실행 방식(카테고리) 필터 -->
                    <div class="col-md-3">
                        <select name="execution_type" class="form-select form-select-sm">
                            <option value="">실행 방식 전체</option>
                            <option value="single" {{ request('execution_type') == 'single' ? 'selected' : '' }}>기본 프로그램 (단품)</option>
                            <option value="package_single" {{ request('execution_type') == 'package_single' ? 'selected' : '' }}>베이직 패키지 (1회용)</option>
                            <option value="package_separate" {{ request('execution_type') == 'package_separate' ? 'selected' : '' }}>스페셜 패키지 (N회차)</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select name="is_active" class="form-select form-select-sm">
                            <option value="">판매 상태 전체</option>
                            <option value="1" {{ request('is_active') == '1' ? 'selected' : '' }}>판매 중</option>
                            <option value="0" {{ request('is_active') == '0' ? 'selected' : '' }}>판매 중지</option>
                        </select>
                    </div>
                    <div class="col-md-2 text-end">
                        <button type="submit" class="btn btn-dark btn-sm w-100">검색 적용</button>
                    </div>
                </div>
            </div>

            <!-- [모바일 전용 검색] -->
            <div class="mobile-only-section">
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0"><i class="fa-solid fa-magnifying-glass text-muted"></i></span>
                    <input type="text" name="keyword" class="form-control border-start-0 ps-0" placeholder="프로그램명, 코드 검색" value="{{ request('keyword') }}">
                    <button type="submit" class="btn btn-sm btn-dark px-3">검색</button>
                </div>
            </div>

            <!-- [건수 표시 건수별 보기 셀렉트 박스] -->
            <div class="d-flex justify-content-between align-items-center mt-3 pt-2 border-top border-light">
                <span class="text-muted small">
                    총 <strong class="text-dark">{{ isset($programs) && method_exists($programs, 'total') ? $programs->total() : 12 }}</strong>건의 프로그램
                </span>

                <!-- [PC 전용 건수별 보기] -->
                <div class="pc-only-section">
                    <div class="d-flex align-items-center gap-1">
                        <select name="per_page" id="perPageSelect" class="form-select form-select-sm" style="width: 110px; font-size: 0.8rem;">
                            <option value="15" {{ request('per_page', 15) == 15 ? 'selected' : '' }}>15개씩</option>
                            <option value="30" {{ request('per_page') == 30 ? 'selected' : '' }}>30개씩</option>
                            <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50개씩</option>
                            <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100개씩</option>
                        </select>
                    </div>
                </div>
            </div>

        </form>
    </div>

    <!-- ======================================================
        [PC 전용 테이블 영역]
        ====================================================== -->
    <div class="pc-only-section">
        <div class="card border-0 shadow-sm">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" style="min-width: 1200px;">
                    <thead class="text-secondary small text-uppercase app-table-header">
                        <tr>
                            <th style="width: 10%;" class="py-3 ps-4 text-center">대표 이미지</th>
                            <th style="width: 40%;" class="py-3">프로그램 정보 (명칭 / 코드)</th>
                            <th style="width: 13%;" class="py-3 text-center">실행 방식 (구분)</th>
                            <th style="width: 10%;" class="py-3 text-center">노출 설정</th>
                            <th style="width: 12%;" class="py-3 text-center">등록일자 및 상태</th>
                            <th style="width: 15%;" class="py-3 text-center pe-4">관리</th>
                        </tr>
                    </thead>

                    <tbody>
                        @php
                        $pcPrograms = isset($programs) && method_exists($programs, 'items') ? $programs->items() : [];
                        @endphp

                        @forelse($pcPrograms as $program)
                        @php
                        $id = $program->id;
                        $name = $program->name;
                        $code = $program->code;
                        $intro = $program->introduction;
                        $price = number_format($program->sale_price);
                        $originalPrice = number_format($program->original_price);
                        $execType = $program->execution_type;
                        $pinned = $program->is_pinned ?? false;
                        $isMain = $program->is_main_displayed ?? false;
                        $isActive = $program->is_active ?? true;
                        $createdAt = optional($program->created_at)->format('Y-m-d');
                        $updatedAt = optional($program->updated_at)->format('Y-m-d');
                        @endphp
                        <tr>
                            <!-- 1. 대표 이미지 썸네일 -->
                            <td class="text-center py-3">
								@php
									// 1. 피벗 슬롯 이미지 조회 (program_logo 우선 -> 레거시 logo_path fallback)
									$logoImage = method_exists($program, 'getSlotImage') ? $program->getSlotImage('program_logo') : null;
									$displayThumbUrl = $logoImage?->preview_url;

									if (!$displayThumbUrl && !empty($program->logo_path)) {
										$displayThumbUrl = asset('storage/' . $program->logo_path);
									}

									$defaultPlaceholder = 'https://placehold.co/120x120?text=No+Image';
								@endphp

								<div class="position-relative d-inline-block">
									<div class="d-flex align-items-center justify-content-center border rounded shadow-sm bg-light overflow-hidden" 
										 style="width: 120px; height: 120px;">
										<img src="{{ $displayThumbUrl ?: $defaultPlaceholder }}"
											 alt="{{ $program->name ?? '프로그램 이미지' }}" 
											 style="max-width: 100%; max-height: 100%; object-fit: contain; display: block;"
											 loading="lazy"
											 onerror="this.src='{{ $defaultPlaceholder }}'">
									</div>

									@if ($program->is_pinned ?? false)
										<span class="position-absolute top-0 start-0 translate-middle badge bg-primary border border-white rounded-pill shadow-sm"
											  style="font-size: 0.65rem; z-index: 5; white-space: nowrap;">
											상단고정
										</span>
									@endif
								</div>
							</td>

                            <!-- 2. 프로그램 정보 -->
                            <td class="py-3">
                                <div class="d-flex flex-column gap-1">
                                    <div>
                                        <a href="{{ route('admin.programs.edit', $id) }}" class="fw-bold text-dark text-decoration-none fs-6">
                                            {{ $name }}
                                        </a>
                                        <span class="badge bg-light text-muted border ms-1 small" style="font-size: 0.7rem;">{{ $code }}</span>
                                    </div>

                                    <!-- 연동된 카테고리 태그 뱃지 리스트 출력 -->
                                    @if($program->categories && $program->categories->isNotEmpty())
                                    <div class="d-flex flex-wrap gap-1 my-1">
                                        @foreach($program->categories as $cat)
                                        <span class="badge bg-light text-dark border px-2 py-1" style="font-size: 0.7rem; font-weight: 500;">
                                            {{ $cat->parent ? ($cat->parent->parent ? $cat->parent->parent->name . ' > ' . $cat->parent->name . ' > ' : $cat->parent->name . ' > ') : '' }}{{ $cat->name }}
                                        </span>
                                        @endforeach
                                    </div>
                                    @endif
                                    
                                    @if($intro)
                                    <div class="text-muted small text-truncate" style="max-width: 100%;">
                                        {{ $intro }}
                                    </div>
                                    @endif
                                    <div class="text-dark fw-semibold small">
                                        @if($program->discount_price > 0)
                                        <span class="text-decoration-line-through text-muted small me-1">{{ $originalPrice }}원</span>
                                        @endif
                                        <span class="text-primary">{{ $price }}원</span>
                                        <span class="text-muted small ms-2">({{ $program->session_count }}회차 / 유효 {{ $program->validity_days }}일)</span>
                                    </div>
                                </div>
                            </td>

                            <!-- 3. 실행 방식 (구분) 배지 -->
                            <td class="text-center">
                                @if($execType === 'single')
                                <span class="badge bg-secondary-subtle text-dark border px-2 py-1">기본 프로그램</span>
                                @elseif($execType === 'package_single')
                                <span class="badge bg-warning text-dark border px-2 py-1">베이직 패키지</span>
                                @elseif($execType === 'package_separate')
                                <span class="badge bg-danger text-white border px-2 py-1">스페셜 패키지</span>
                                @endif
                            </td>

                            <!-- 4. 노출 설정 (상단고정, 메인노출, 정렬순서) -->
                            <td class="text-center">
                                <div class="d-flex flex-column gap-2 align-items-center" style="font-size: 0.8rem;" data-program-id="{{ $program->id }}">
                                    <!-- 상단고정 토글 -->
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input inline-update-field" type="checkbox" data-field="is_pinned" id="pinned_{{ $program->id }}" {{ $program->is_pinned ? 'checked' : '' }}>
                                        <label class="form-check-label small fw-semibold" for="pinned_{{ $program->id }}">상단고정</label>
                                    </div>
                                    <!-- 메인노출 토글 -->
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input inline-update-field" type="checkbox" data-field="is_main_displayed" id="main_{{ $program->id }}" {{ $program->is_main_displayed ? 'checked' : '' }}>
                                        <label class="form-check-label small fw-semibold" for="main_{{ $program->id }}">메인노출</label>
                                    </div>
                                    <!-- 정렬순서 -->
                                    <div class="input-group input-group-sm" style="width: 100px;">
                                        <span class="input-group-text px-1 text-muted" style="font-size: 0.7rem;">정렬</span>
                                        <input type="number" class="form-control form-control-sm text-center inline-update-field" data-field="sort_order" value="{{ $program->sort_order ?? 0 }}" min="0" style="font-size: 0.75rem;">
                                    </div>
                                </div>
                            </td>

                            <!-- 5. 등록일자 (수정일자) 및 상태 -->
                            <td class="text-center">
                                <div class="small text-dark fw-medium">{{ $createdAt }}</div>
                                @if($program->updated_at && $program->updated_at != $program->created_at)
                                <div class="text-muted" style="font-size: 0.75rem;" title="수정일자">
                                    (수정: {{ $updatedAt }})
                                </div>
                                @endif

                                <div class="d-flex flex-column align-items-center gap-2" data-program-id="{{ $program->id }}">
                                    <!-- 판매 상태 토글 (is_active) -->
                                    <div class="form-check form-switch mb-0 mt-2">
                                        <input class="form-check-input inline-update-field" type="checkbox" data-field="is_active" id="active_{{ $program->id }}" {{ $isActive ? 'checked' : '' }}>
                                        <label class="form-check-label small fw-bold {{ $isActive ? 'text-primary' : 'text-muted' }}" for="active_{{ $program->id }}">
                                            {{ $isActive ? '판매 중' : '판매 중지' }}
                                        </label>
                                    </div>
                                </div>
                            </td>

                            <!-- 5. 판매 상태 및 관리 액션 -->
                            <td class="text-end py-3 pe-4">
                                <div class="d-flex flex-column align-items-end gap-1">

                                    <!-- [수정] [삭제] 버튼 그룹 -->
                                    <div class="d-flex align-items-center gap-1 mt-2">
                                        <!-- 수정 버튼 -->
                                        <a href="{{ route('admin.programs.edit', $id) }}" class="btn btn-sm btn-outline-secondary px-2" title="수정" style="font-size: 0.75rem;">
                                            <i class="fa-solid fa-pen"></i> 수정
                                        </a>

                                        <!-- 삭제 버튼 -->
                                        <form action="{{ route('admin.programs.destroy', $program->id) }}" method="POST" class="d-inline-flex m-0 p-0" onsubmit="return confirm('프로그램을 삭제합니다. 정말 삭제하시겠습니까?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger px-2" title="삭제" style="font-size: 0.75rem;">
                                                <i class="fa-solid fa-trash"></i> 삭제
                                            </button>
                                        </form>
                                    </div>

                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-5 text-muted">
                                등록된 프로그램이 없습니다.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        @if(isset($programs) && method_exists($programs, 'hasPages') && $programs->hasPages())
        <div class="mt-4 d-flex justify-content-center">
            {{ $programs->appends(request()->query())->links('vendor.pagination.admin') }}
        </div>
        @endif
    </div>

    <!-- ======================================================
        [모바일 전용 영역 (mobile-only-section)]
        ====================================================== -->
    <div class="mobile-only-section">
        <div id="mobileListContainer">
            @include('admin.programs.partials.list_items', ['programs' => $programs ?? null])
        </div>

        <div id="infiniteScrollLoader" class="text-center py-4 d-none">
            <div class="spinner-border spinner-border-sm text-primary" role="status">
                <span class="visually-hidden">로딩 중...</span>
            </div>
            <span class="text-muted small ms-2">추가 데이터를 불러오는 중입니다...</span>
        </div>
    </div>

</div>
@endsection

@push('scripts')

@php
    $currentPageNum = 1;
    $lastPageNum = 1;

    if (isset($programs)) {
        if (method_exists($programs, 'currentPage')) {
            $currentPageNum = $programs->currentPage();
        }
        if (method_exists($programs, 'lastPage')) {
            $lastPageNum = $programs->lastPage();
        }
    }
@endphp

<script>
    document.addEventListener('DOMContentLoaded', () => {

        // [페이지 고유] 리스트 화면 인라인 즉시 수정 (상단고정, 메인노출, 정렬순서)
        document.querySelectorAll('.inline-update-field').forEach(element => {
            const eventType = element.type === 'checkbox' ? 'change' : 'blur';

            element.addEventListener(eventType, function() {
                const container = this.closest('[data-program-id]');
                const programId = container.getAttribute('data-program-id');
                const field = this.getAttribute('data-field');
                let value = this.type === 'checkbox' ? (this.checked ? 1 : 0) : this.value;

                if (field === 'sort_order' && value < 0) {
                    value = 0;
                    this.value = 0;
                }

                // 체크박스 요소 저장 (실패 시 원복용)
                const targetEl = this;

                fetch(`/admin/programs/${programId}/inline`, {
                        method: 'PATCH',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: JSON.stringify({
                            [field]: value
                        })
                    })
                    .then(response => response.json().then(data => ({
                        status: response.status,
                        body: data
                    })))
                    .then(result => {
                        if (result.body.success) {
                            location.reload();
                        } else {
                            // 제한 초과 등으로 실패했을 때
                            showSwalAlert(result.body.message || '변경에 실패했습니다.', null, null, 'warning', '변경 제한');
                            if (targetEl.type === 'checkbox') {
                                targetEl.checked = !targetEl.checked; // 상태 원복
                            }
                        }
                    })
                    .catch(error => {
                        console.error('인라인 업데이트 오류:', error);
                        alert('서버 통신 중 오류가 발생했습니다.');
                        if (targetEl.type === 'checkbox') {
                            targetEl.checked = !targetEl.checked;
                        }
                    });
            });
        });

        // [페이지 고유] 모바일 무한 스크롤 로직 (mobileContainer 변수명 적용)
        let currentPage = parseInt("{{ $currentPageNum }}", 10) || 1;
        let lastPage = parseInt("{{ $lastPageNum }}", 10) || 1;
        let isLoading = false;

        const loader = document.getElementById('infiniteScrollLoader');
        const mobileContainer = document.getElementById('mobileListContainer'); // 변수명을 mobileContainer로 변경

        window.addEventListener('scroll', () => {
            if (isLoading || currentPage >= lastPage) return;

            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 200) {
                isLoading = true;
                if (loader) loader.classList.remove('d-none');
                currentPage++;

                const urlParams = new URLSearchParams(window.location.search);
                urlParams.set('page', currentPage);

                fetch(`${window.location.pathname}?${urlParams.toString()}`, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.text())
                    .then(html => {
                        if (html.trim() !== '') {
                            if (mobileContainer) { // mobileContainer 참조
                                mobileContainer.insertAdjacentHTML('beforeend', html);
                            }
                        } else {
                            currentPage = lastPage;
                        }
                        if (loader) loader.classList.add('d-none');
                        isLoading = false;
                    })
                    .catch(error => {
                        console.error('무한 스크롤 로드 실패:', error);
                        if (loader) loader.classList.add('d-none');
                        isLoading = false;
                    });
            }
        });
    });
</script>
@endpush