@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.shops.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">

    <!-- 기워드 검색 및 상세 필터 영역 -->
    <x-admin.search-filter :route="route('admin.shops.list')" :total="$shops->total()" searchPlaceholder="뷰티샵, 대표자 검색">
        <!-- 이 페이지 전용으로 들어갈 셀렉트박스 정의 -->
		@slot('filters')
			<x-admin.forms.select name="operating_status" label="영업상태" allLabel="영업상태 전체" :options="['active' => '영업중', 'temp_closed' => '일시중지', 'suspended' => '운영정지', 'closed' => '폐점']" />
		{{--
			<x-admin.forms.radio name="status" label="관리자인증" :options="['' => '전체', 'pending' => '대기중', 'approved' => '승인완료']" />
			<x-admin.forms.checkbox name="with_deleted" topLabel="부가 설정" label="삭제 항목 포함" />
			--}}
        @endslot
    </x-admin.search-filter>

	<!-- ======================================================
		[PC 전용 영역 (pc-only-section)]
		====================================================== -->
	<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: 43%;" class="py-3">뷰티샵 정보</th>
							<th style="width: 14%;" class="py-3 text-center">소속 및 대표자</th>
							<th style="width: 10%;" class="py-3 text-center">노출 설정</th>
							<th style="width: 10%;" class="py-3 text-center">등록일자 및 상태</th>
							<th style="width: 23%;" class="py-3 text-center pe-4">관리</th>
						</tr>
					</thead>

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

						@forelse($pcShops as $shop)
							@php
								$id = $shop->id;
								$name = $shop->name;
								$introduction = $shop->introduction;
								$address = trim(($shop->address1 ?? '') . ' ' . ($shop->address2 ?? ''));
								$centerName = $shop->center->name ?? '본사 직접 관리';
								$owner = $shop->ceo_name;
								$status = $shop->operating_status;
								$pinned = $shop->is_pinned ?? false;
								$isMainDisplay = $shop->is_main_displayed ?? true;
								$createdAt = optional($shop->created_at)->format('Y-m-d');
								$updatedAt = optional($shop->updated_at)->format('Y-m-d');
								// N:M 피벗 슬롯 이미지 조회 (없으면 레거시 컬럼 fallback)
								$logoImage = method_exists($shop, 'getSlotImage') ? $shop->getSlotImage('logo') : null;
								// Thumb > WebP > AVIF > 원본 > null 순으로 검증된 최종 URL
								$displayThumbUrl = $logoImage?->preview_url;
								// 만약 피벗 이전 과거 단일 경로 컬럼(logo_path) 데이터가 남아있는 경우 Fallback
								if (!$displayThumbUrl && !empty($shop->logo_path)) {
									$displayThumbUrl = asset('storage/' . $shop->logo_path);
								}
								$defaultPlaceholder = 'https://placehold.co/120x120?text=No+Image';
							@endphp
							<tr>
								<!-- 1. 대표 이미지 썸네일 -->
								<td class="text-center py-3">
									<!-- 외곽 컨테이너: overflow-hidden을 제거하여 배지가 모서리 밖으로 걸칠 수 있도록 허용 -->
									<div class="position-relative d-inline-block">
										
										<!-- 내부 이미지 박스: 여기에만 overflow-hidden을 주어 이미지가 둥근 테두리 안에서 깔끔하게 유지 -->
										<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="{{ $name ?? ($shop->name ?? '이미지') }}" 
												 style="max-width: 100%; max-height: 100%; object-fit: contain; display: block;"
												 loading="lazy"
												 onerror="this.src='{{ $defaultPlaceholder }}'">
										</div>

										<!-- 상단고정 배지: translate-middle로 모서리 너머 50% 걸치게 배치 -->
										@if ($pinned ?? ($shop->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.shops.edit', $id) }}"
												class="fw-bold text-dark text-decoration-none fs-6">
												{{ $name }}
											</a>
										</div>

										<!-- 연동된 카테고리 태그 뱃지 리스트 출력 -->
										@if ($shop->categories && $shop->categories->isNotEmpty())
											<div class="d-flex flex-wrap gap-1 my-1">
												@foreach ($shop->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->name . ' > ' : '' }}{{ $cat->name }}
													</span>
												@endforeach
											</div>
										@endif

										@if ($introduction)
											<div class="text-muted small"
												style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; max-height: 2.8em;">
												{{ $introduction }}
											</div>
										@endif
										@if ($address)
											<div class="text-secondary" style="font-size: 0.75rem;">
												<i
													class="fa-solid fa-location-dot me-1 text-muted"></i>{{ $address }}
											</div>
										@endif
									</div>
								</td>

								<!-- 3. 소속 및 대표자 -->
								<td class="text-center">
									<div class="small fw-semibold text-dark">{{ $centerName }}</div>
									<div class="text-muted small">대표: {{ $owner }}</div>
								</td>

								<!-- 4. 노출 설정 -->
								<td class="text-center">
									<div class="d-flex flex-column gap-2 align-items-center"
										style="font-size: 0.8rem;" data-shop-id="{{ $shop->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_{{ $shop->id }}"
												{{ $shop->is_pinned ? 'checked' : '' }}>
											<label class="form-check-label small fw-semibold"
												for="pinned_{{ $shop->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_{{ $shop->id }}"
												{{ $shop->is_main_displayed ? 'checked' : '' }}>
											<label class="form-check-label small fw-semibold"
												for="main_{{ $shop->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="{{ $shop->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 ($shop->updated_at && $shop->updated_at != $shop->created_at)
										<div class="text-muted" style="font-size: 0.75rem;" title="수정일자">
											(수정: {{ $updatedAt }})
										</div>
									@endif

									<!-- mt-2를 추가하여 날짜와 상태 배지 사이 간격을 살짝 띄워줌 -->
									<div class="mt-2">
										@if ($status === 'active')
											<span
												class="badge bg-primary-subtle text-primary border border-primary-subtle px-2 py-1">영업중
												(active)</span>
										@elseif($status === 'temp_closed')
											<span
												class="badge bg-secondary-subtle text-secondary border border-secondary-subtle px-2 py-1">일시중지
												(temp_closed)</span>
										@elseif($status === 'suspended')
											<span
												class="badge bg-danger-subtle text-danger border border-danger-subtle px-2 py-1">운영정지
												(suspended)</span>
										@else
											<span
												class="badge bg-danger-subtle text-danger border border-danger-subtle px-2 py-1">폐점
												(closed)</span>
										@endif
									</div>
								</td>

								<!-- 6. 관리 (상태변경 1줄, 수정/삭제 1줄 2단 디자인) -->
								<td class="text-end py-3 pe-4">
									<div class="d-flex flex-column align-items-end gap-1">

										<!-- 1단: 상태변경 드롭다운 버튼 -->
										<div class="dropdown">
											<button class="btn btn-sm btn-outline-primary dropdown-toggle"
												type="button" data-bs-toggle="dropdown" aria-expanded="false"
												style="font-size: 0.75rem;">
												<i class="fa-solid fa-rotate me-1"></i> 상태변경
											</button>
											<ul class="dropdown-menu dropdown-menu-end shadow-sm"
												style="font-size: 0.8rem;" data-shop-id="{{ $shop->id }}">
												<li><a class="dropdown-item fw-semibold shop-status-change"
														href="#" data-status="active">영업중 (active)</a></li>
												<li><a class="dropdown-item fw-semibold shop-status-change"
														href="#" data-status="temp_closed">일시중지
														(temp_closed)</a></li>
												<li><a class="dropdown-item fw-semibold shop-status-change"
														href="#" data-status="suspended">운영정지 (suspended)</a>
												</li>
												<li>
													<hr class="dropdown-divider">
												</li>
												<li><a class="dropdown-item text-secondary shop-status-change"
														href="#" data-status="closed">폐점 (closed)</a></li>
											</ul>
										</div>

										<!-- 2단: [수정] [삭제] 버튼 그룹 -->
										<div class="d-flex align-items-center gap-1 mt-2">
											<!-- 수정 버튼 -->
											<a href="{{ route('admin.shops.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.shops.destroy', $shop->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($shops) && method_exists($shops, 'hasPages') && $shops->hasPages())
			<div class="mt-4 d-flex justify-content-center">
				{{ $shops->appends(request()->query())->links('vendor.pagination.admin') }}
			</div>
		@endif
	</div>

	<!-- ======================================================
		[모바일 전용 영역 (mobile-only-section)]
		====================================================== -->
	<div class="mobile-only-section">
		<div id="mobileListContainer">
			@include('admin.shops.partials.list_items', ['shops' => $shops ?? 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($shops)) {
            if (method_exists($shops, 'currentPage')) {
                $currentPageNum = $shops->currentPage();
            }
            if (method_exists($shops, 'lastPage')) {
                $lastPageNum = $shops->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-shop-id]');
                    const shopId = container.getAttribute('data-shop-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 checkboxEl = this;

                    fetch(`/admin/shops/${shopId}/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 {
                                if (typeof showSwalAlert === 'function') {
                                    showSwalAlert(result.body.message || '변경에 실패했습니다.', null,
                                        null, 'warning', '변경 제한');
                                } else {
                                    alert(result.body.message || '변경에 실패했습니다.');
                                }
                                if (checkboxEl.type === 'checkbox' && (field === 'is_pinned' ||
                                        field === 'is_main_displayed')) {
                                    checkboxEl.checked = !checkboxEl.checked;
                                }
                            }
                        })
                        .catch(error => {
                            console.error('인라인 업데이트 오류:', error);
                            alert('서버 통신 중 오류가 발생했습니다.');
                            if (checkboxEl.type === 'checkbox' && (field === 'is_pinned' ||
                                    field === 'is_main_displayed')) {
                                checkboxEl.checked = !checkboxEl.checked;
                            }
                        });
                });
            });

            // [페이지 고유] 영업 상태변경 드롭다운 클릭 이벤트 처리
            document.querySelectorAll('.shop-status-change').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();

                    const dropdownMenu = this.closest('[data-shop-id]');
                    const shopId = dropdownMenu.getAttribute('data-shop-id');
                    const newStatus = this.getAttribute('data-status');

                    if (!confirm('해당 뷰티샵의 영업 상태를 변경하시겠습니까?')) {
                        return;
                    }

                    fetch(`/admin/shops/${shopId}/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({
                                operating_status: newStatus
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                location.reload();
                            } else {
                                alert('상태 변경에 실패했습니다.');
                            }
                        })
                        .catch(error => {
                            console.error('상태 변경 오류:', error);
                            alert('서버 통신 중 오류가 발생했습니다.');
                        });
                });
            });

            // [페이지 고유] 모바일 무한 스크롤 로직 (mobileContainer 변수명 적용)
            let currentPage = {{ $currentPageNum }};
            let lastPage = {{ $lastPageNum }};
            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