@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">뷰티샵 관리</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>

<!-- 성공 메시지 알림 (세션) -->
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show border-0 shadow-sm" role="alert">
    <i class="fa-solid fa-circle-check me-2"></i> {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

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

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

            <!-- [PC 전용 상세 필터] (PC 화면에서만 노출) -->
            <div class="pc-only-section">
                <div class="row g-2 align-items-center">
                    <div class="col-md-7">
                        <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="status" class="form-select form-select-sm">
                            <option value="">승인 상태 전체</option>
                            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>승인 대기</option>
                            <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>정상 영업</option>
                            <option value="rejected" {{ request('status') == 'rejected' ? '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>

            <!-- 2. 건수 표시 및 [건수별 보기] 셀렉트 박스 (검색 아래 좌우 배치) -->
            <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($shops) && method_exists($shops, 'total') ? $shops->total() : 12 }}</strong>건의 뷰티샵
                </span>

                <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>

        </form>
    </div>

	<!-- ======================================================
		[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 shop-table-header">
						<tr>
							<th style="width: 10%;" class="py-3 ps-4 text-center">대표 이미지</th>
							<th style="width: 38%;" class="py-3">뷰티샵 정보</th>
							<th style="width: 14%;" class="py-3text-center">소속 및 대표자</th>
							<th style="width: 10%;" class="py-3text-center">노출 설정</th>
							<th style="width: 28%;" class="py-3 text-end 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;
							// 메인 노출 여부 필드가 DB에 있다면 매칭, 없다면 기본값 처리 (예: is_main 혹은 메인 노출 상태 컬럼)
							$isMainDisplay = $shop->is_main_displayed ?? true; 
							$thumbPath = $shop->logo_path ?? null;
						@endphp
						<tr>
							<!-- 1. 120x120 대표 이미지 썸네일 -->
							<td class="text-center py-3">
								<div class="position-relative d-inline-block">
									<img src="{{ $thumbPath ? asset('storage/' . $thumbPath) : 'https://placehold.co/120x120?text=No+Image' }}"
										alt="{{ $name }}"
										class="rounded border shadow-sm" 
										style="width: 120px; height: 120px; object-fit: cover;"
										onerror="this.src='https://placehold.co/120x120?text=No+Image'">
									@if($pinned)
									<span class="position-absolute top-0 start-0 translate-middle badge bg-primary border border-white rounded-pill" style="font-size: 0.6rem;">상단고정</span>
									@endif
								</div>
							</td>

							<!-- 2. 뷰티샵 정보 (명칭, 2~3줄 소개 및 주소) -->
							<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($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>
								<div class="small fw-semibold text-dark">{{ $centerName }}</div>
								<div class="text-muted small">대표: {{ $owner }}</div>
							</td>

							<!-- 4. 노출 설정 (상단 고정 여부 / 메인 노출 여부 / 정렬순서) -->
							<td>
								<div class="d-flex flex-column gap-2" 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>
									<!-- 메인페이지 노출 토글 (is_main_displayed) -->
									<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>
									<!-- 정렬순서 입력 (0은 최근등록순) -->
									<div class="input-group input-group-sm" style="width: 110px;">
										<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-end py-3">
								<div class="d-flex flex-column align-items-end gap-2">
									<!-- 현재 영업 상태 표시 배지 -->
									<div>
										@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>

									<!-- 🌟 각 버튼 및 그룹 사이에 간격(gap-1 등)을 주어 떨어져 보이도록 배치 -->
									<div class="d-flex align-items-center 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. 수정 버튼 (연필 아이콘) -->
										<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>

										<!-- 3. 삭제 버튼 (휴지통 아이콘) -->
										<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() }}
		</div>
		@endif
	</div>

    <!-- ======================================================
        [모바일 전용 영역 (mobile-only-section)]
        ====================================================== -->
    <div class="mobile-only-section">
        <div id="shopListContainer">
            @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', () => {
        const perPageSelect = document.getElementById('perPageSelect');
        if (perPageSelect) {
            perPageSelect.addEventListener('change', () => {
                document.getElementById('searchForm').submit();
            });
        }

        // 리스트 화면 인라인 즉시 수정 (상단고정, 메인노출, 정렬순서)
        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 {
                        // 🌟 제한 초과 등으로 실패했을 때
                        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('서버 통신 중 오류가 발생했습니다.');
                });
            });
        });

        const isMobilePlatform = document.body.classList.contains('platform-mobile');
        if (!isMobilePlatform);

        let currentPage = {{ $currentPageNum }};
        let lastPage = {{ $lastPageNum }};
        let isLoading = false;

        const loader = document.getElementById('infiniteScrollLoader');
        const container = document.getElementById('shopListContainer');

        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 (container) {
                            container.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