@extends('layouts.app')

@section('title', '프리미엄 뷰티샵 리스트 - GLOBEAU')

@section('content')

<div class="container py-4">

    <!-- 브레드크럼 및 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">
                    <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('shops.index') }}" method="GET" class="list-search-form d-flex align-items-center gap-2 flex-wrap flex-md-nowrap">
			
			<!-- 💡 [PC/태블릿 전용] 지역 및 전문분야 셀렉트박스 (모바일에서는 d-none으로 숨김 처리) -->
			<div class="d-none d-md-flex gap-2">
				<select name="sido" class="form-select shadow-none border-brand" style="width: 130px; border-radius: var(--radius-fixed);">
					<option value="">지역 선택</option>
					<option value="서울특별시" {{ request('sido') == '서울특별시' ? 'selected' : '' }}>서울특별시</option>
					<option value="경기도" {{ request('sido') == '경기도' ? 'selected' : '' }}>경기도</option>
				</select>

				<select name="category" class="form-select shadow-none border-brand" style="width: 140px; border-radius: var(--radius-fixed);">
					<option value="">전문분야 선택</option>
					<option value="두피" {{ request('category') == '두피' ? 'selected' : '' }}>두피관리</option>
					<option value="에너지테라피" {{ request('category') == '에너지테라피' ? 'selected' : '' }}>에너지테라피</option>
					<option value="피부" {{ request('category') == '피부' ? '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="address" {{ request('search_type') == 'address' ? '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);">

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

    <!-- 뷰티샵 카드 그리드 (반응형: 모바일 1열, 태블릿 2열, PC 3~4열) -->
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4 g-4 mb-5">
        @forelse($shops as $shop)
        <div class="col">
            <!-- 샵 카드 프리미엄 컴포넌트 -->
            <div class="card card-premium h-100 shop-list-card">

                <!-- 샵 썸네일 (og-image 또는 로고 활용) -->
                <div class="card-img-wrapper bg-white">
                    <img src="{{ !empty($shop->logo_path) ? asset('storage/' . $shop->logo_path) : 'https://globeau.kr/images/default_shop.png' }}"
                        class="shop-logo-thumb"
                        alt="{{ $shop->name }}">

                    @if($shop->is_pinned)
                    <span class="badge bg-brand position-absolute top-0 start-0 m-2 px-2 py-1" style="font-size: 0.7rem; z-index: 2;">PREMIUM</span>
                    @endif
                </div>

                <!-- 샵 정보 본문 -->
                <div class="card-body p-4 d-flex flex-column">
                    <div class="mb-2">
                        <span class="text-brand small fw-bold"><i class="fas fa-map-marker-alt me-1"></i> {{ $shop->region_sido }} {{ $shop->region_sigungu }}</span>
                    </div>

                    <h5 class="card-title fw-bold text-dark brand-font mb-2 text-truncate">
                        <a href="{{ route('shops.show', $shop->id) }}" class="text-dark text-decoration-none stretched-link">
                            {{ $shop->name }}
                        </a>
                    </h5>

                    <p class="text-muted small mb-3 text-truncate-2" style="font-size: 0.85rem; line-height: 1.4;">
                        {{ $shop->introduction ?? '대한민국 프리미엄 에스테틱 & 뷰티 솔루션 공간입니다.' }}
                    </p>

                    <!-- 하단 전문분야 태그 및 바로가기 -->
                    <div class="mt-auto pt-3 border-top d-flex justify-content-between align-items-center">
                        <span class="badge bg-light text-brand border border-brand px-2 py-1" style="font-size: 0.75rem;">
                            {{ $shop->region_category ?? '스킨케어 · 테라피' }}
                        </span>
                        <span class="text-brand small fw-bold">
                            상세보기 <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-store-slash text-muted fa-3x mb-3"></i>
                <h5 class="fw-bold text-dark mb-1">등록된 뷰티샵이 없습니다.</h5>
                <p class="text-muted small mb-0">조건을 변경하여 다시 검색해 주세요.</p>
            </div>
        </div>
        @endforelse
    </div>

    <!-- 페이지네이션 -->
    <div class="d-flex justify-content-center mt-4">
        {{ $shops->links() }}
    </div>

</div>
@endsection

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