@extends('layouts.app-sub')

@section('title', '프로그램 예약 신청 - GLOBEAU')
@section('header-title', '프로그램 예약')

@section('content')
<!-- Flatpickr CSS CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<!-- 카카오맵 SDK 로드 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={{ env('KAKAO_MAP_API_KEY') }}&libraries=services"></script>

<div style="padding-top: 8px; padding-bottom: 24px;">
    <!-- 상단 안내 영역 -->
    <div class="mb-3">
        <p class="text-muted small mb-0">날짜를 선택하신 후 제휴 뷰티샵과 방문 시간을 지정해 주세요.</p>
    </div>

    @if(session('error'))
        <div class="alert alert-danger mb-3" style="border-radius: 8px; font-size: 13px;">
            {{ session('error') }}
        </div>
    @endif

    <form action="{{ route('mypage.reservations.store') }}" method="POST" id="reservationForm">
        @csrf
        <input type="hidden" name="user_ticket_item_id" value="{{ $ticketItem->id }}">
        <input type="hidden" name="reserved_at" id="final_reserved_at">
        <input type="hidden" name="shop_id" id="selected_shop_id">

        @php
            $ticket = $ticketItem->userTicket ?? null;
            $program = $ticketItem->program ?? ($ticket->orderItem->program ?? null);
            $programName = $ticketItem->program_name ?? ($program->name ?? '프리미엄 뷰티 프로그램');
            $remainingCount = $ticketItem->remaining_count ?? ($ticketItem->remaining ?? 1);
            $totalCount = $ticketItem->total_count ?? ($ticketItem->total ?? 1);
            $expiresAt = $ticket->expires_at ? \Carbon\Carbon::parse($ticket->expires_at)->format('Y-m-d') : '';
        @endphp

        <!-- 🌟 [상단 티켓 정보 카드] 마음에 드셨던 퍼플 그라데이션 배경 고정 적용 -->
        <div class="card border-0 shadow-sm p-3 mb-4 text-white pc-ticket-card" style="border-radius: 10px; background: linear-gradient(135deg, var(--primary-color), #8a5cf5);">
            <div class="d-flex justify-content-between align-items-start mb-2">
                <span class="badge bg-white text-dark fw-bold px-2 py-1" style="font-size: 10px; border-radius: 4px;">보유 티켓</span>
            </div>
            <h5 class="fw-bold text-white mb-3 ticket-title-clamp pc-ticket-title" style="font-size: 17px; line-height: 23px;">
                {{ $programName }}
            </h5>
            <div class="p-2 rounded d-flex justify-content-between align-items-center pc-ticket-footer" style="background: rgba(255, 255, 255, 0.15); border-radius: 6px; font-size: 13px; backdrop-filter: blur(4px);">
                <div>
                    <span class="text-white-50">잔여 횟수:</span> 
                    <span class="fw-bold text-white">{{ $remainingCount }}회 / 총 {{ $totalCount }}회</span>
                </div>
                @if($expiresAt)
                <div>
                    <span class="text-white-50">만료일:</span> 
                    <span class="fw-semibold text-warning">{{ $expiresAt }}까지</span>
                </div>
                @endif
            </div>
        </div>

        <!-- 🌟 [예약 정보 타이틀 섹션] -->
        <div class="d-flex align-items-center mb-3 px-1 border-bottom pb-2">
            <h6 class="fw-bold text-brand-dark mb-0 pc-section-title" style="font-size: 15px;">
                <i class="fas fa-calendar-check text-brand me-1"></i> 예약 정보 입력
            </h6>
        </div>

        <!-- ========================================== -->
        <!-- STEP 1: 방문 날짜 및 시간 선택 (통합 요약 영역) -->
        <!-- ========================================== -->
        <!-- 완료 후 요약 디스플레이 영역 -->
        <div class="mb-3 px-1" id="step1Summary" style="display: none;">
            <div class="py-2 border-bottom pc-summary-row" style="font-size: 13.5px;">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="badge bg-brand text-white me-1" style="font-size: 10px;">STEP 1</span>
                        <span class="fw-bold text-brand-dark pc-step-label">방문일시 선택</span>
                    </div>
                    <button type="button" class="btn btn-link btn-sm p-0 text-brand-dark text-decoration-none fw-semibold pc-change-btn" style="font-size: 12px;" onclick="resetStep(1)">
                        <i class="fas fa-redo-alt me-1"></i> 변경하기
                    </button>
                </div>
                <div class="mt-1 pc-summary-val text-brand-dark" id="summaryDateText" style="font-size: 13.5px; font-weight: 600;"></div>
            </div>
        </div>

        <!-- 입력 폼 영역 (와이드 컨테이너) -->
        <div class="mb-4 px-1" id="step1InputBox">
            <label class="form-label text-brand-dark fw-bold mb-2 pc-input-label" style="font-size: 14px;">
                <span class="badge bg-brand text-white me-1" style="font-size: 10px;">STEP 1</span> 방문 날짜 선택 <span class="text-danger">*</span>
            </label>
            <div class="input-group premium-picker-group">
                <span class="input-group-text bg-white border-end-0 text-muted" style="border-radius: 6px 0 0 6px; border-color: #ced4da;">
                    <i class="far fa-calendar-alt"></i>
                </span>
                <input type="text" class="form-control border-start-0 ps-0 bg-white" id="reserved_at_date" placeholder="방문하실 날짜를 선택하세요" readonly style="border-radius: 0 6px 6px 0; font-size: 14px; padding: 12px; cursor: pointer;">
            </div>
        </div>

        <!-- ========================================== -->
        <!-- STEP 2: 제휴 뷰티샵 선택 -->
        <!-- ========================================== -->
        <!-- 완료 후 요약 디스플레이 영역 -->
        <div class="mb-3 px-1" id="step2Summary" style="display: none;">
            <div class="py-2 border-bottom pc-summary-row" style="font-size: 13.5px;">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="badge bg-secondary text-white me-1" style="font-size: 10px;">STEP 2</span>
                        <span class="fw-bold text-brand-dark pc-step-label">제휴 뷰티샵 선택</span>
                    </div>
                    <button type="button" class="btn btn-link btn-sm p-0 text-brand-dark text-decoration-none fw-semibold pc-change-btn" style="font-size: 12px;" onclick="resetStep(2)">
                        <i class="fas fa-redo-alt me-1"></i> 변경하기
                    </button>
                </div>
                <div class="mt-1 pc-summary-val text-brand-dark" id="summaryShopText" style="font-size: 13.5px; font-weight: 600;"></div>
            </div>
        </div>

        <!-- 입력 폼 영역 (기본 숨김, 와이드 컨테이너) -->
        <div class="mb-4 px-1" id="step2InputBox" style="display: none;">
            <label class="form-label text-brand-dark fw-bold mb-2 pc-input-label" style="font-size: 14px;">
                <span class="badge bg-secondary text-white me-1" style="font-size: 10px;">STEP 2</span> 제휴 뷰티샵 선택 <span class="text-danger">*</span>
            </label>

            <!-- 위치 검색 바 -->
            <div class="input-group mb-2">
                <input type="text" class="form-control" id="locationKeyword" placeholder="예: 강남구 테헤란로, 홍대, 분당 등 지역 검색" style="font-size: 13px; border-radius: 6px 0 0 6px; padding: 10px;">
                <button class="btn btn-premium px-3" type="button" onclick="searchByKeyword()" style="font-size: 13px; border-radius: 0 6px 6px 0;">
                    <i class="fas fa-search me-1"></i> 위치 검색
                </button>
            </div>

            <!-- 부가 검색 필터 칩 -->
            <div class="d-flex flex-wrap gap-1 mb-3">
                <button type="button" class="btn btn-outline-secondary btn-sm shop-filter-chip" data-filter="parking" onclick="toggleFilter(this)" style="font-size: 11px; border-radius: 20px; padding: 4px 12px;">
                    <i class="fas fa-parking me-1"></i> 주차 가능
                </button>
                <button type="button" class="btn btn-outline-secondary btn-sm shop-filter-chip" data-filter="valet" onclick="toggleFilter(this)" style="font-size: 11px; border-radius: 20px; padding: 4px 12px;">
                    <i class="fas fa-car me-1"></i> 발렛파킹
                </button>
                <button type="button" class="btn btn-outline-secondary btn-sm shop-filter-chip" data-filter="wifi" onclick="toggleFilter(this)" style="font-size: 11px; border-radius: 20px; padding: 4px 12px;">
                    <i class="fas fa-wifi me-1"></i> 무선 인터넷
                </button>
            </div>

            <!-- 샵 카드 리스트 (10개씩 페이징) -->
            <div id="shopCardListContainer" class="d-flex flex-column" style="gap: 8px;">
                <div class="text-muted small py-3 text-center">제휴 샵 목록을 불러오는 중입니다...</div>
            </div>

            <!-- 페이지네이션 -->
            <nav class="mt-3">
                <ul class="pagination pagination-sm justify-content-center mb-0" id="shopPagination"></ul>
            </nav>
        </div>

        <!-- ========================================== -->
        <!-- STEP 3: 방문 시간 선택 및 매장 정보 확인 -->
        <!-- ========================================== -->
        <!-- 입력 폼 영역 (기본 숨김, 와이드 컨테이너) -->
        <div class="mb-4 px-1" id="step3InputBox" style="display: none;">
            <label class="form-label text-brand-dark fw-bold mb-2 pc-input-label" style="font-size: 14px;">
                <span class="badge bg-success text-white me-1" style="font-size: 10px;">STEP 3</span> 방문 시간 선택 및 매장 확인 <span class="text-danger">*</span>
            </label>

            <!-- 미니 지도 영역 -->
            <div class="mb-3">
                <div class="text-muted small mb-1 fw-medium" style="font-size: 12px;"><i class="fas fa-map-marker-alt text-danger me-1"></i> 선택된 매장 위치 미리보기</div>
                <div id="kakaoMap" style="width: 100%; height: 200px; border-radius: 8px; border: 1px solid #ced4da;"></div>
            </div>

            <!-- 뷰티샵 상세정보 영역 -->
            <div class="p-3 rounded mb-3 pc-shop-detail" style="font-size: 13px; color: #495057; line-height: 1.7; background-color: var(--primary-light); border: 1px solid var(--primary-border);">
                <div class="mb-1 fw-bold text-brand-dark pc-shop-name-title" style="font-size: 14.5px;"><i class="fas fa-store text-brand me-1"></i> <span id="panelShopName">매장명</span></div>
                <div class="mb-1"><i class="fas fa-map-marker-alt text-danger me-1"></i> <span id="panelShopAddress">주소 정보 없음</span></div>
                <div class="mb-1"><i class="fas fa-phone-alt text-muted me-1"></i> <span id="panelShopTel">연락처 없음</span></div>
                <div class="text-muted mt-2" id="panelShopIntro" style="line-height: 1.6;">소개말</div>
            </div>

            <!-- 방문 시간 선택 -->
            <div class="mb-3">
                <label class="form-label text-brand-dark small fw-medium mb-1" style="font-size: 13px;">방문 시간 선택 (30분 간격) <span class="text-danger">*</span></label>
                <div id="modalTimeSlotContainer" class="d-flex flex-wrap" style="gap: 6px;"></div>
            </div>

            <div class="p-3 rounded border bg-white small text-muted mb-3" style="font-size: 12px; line-height: 1.6; border-color: #dee2e6 !important;">
                <i class="fas fa-info-circle text-brand me-1"></i> <strong>예약 규정 안내:</strong> 
                방문 예정 시간 기준 <span id="panelMinAdvance" class="fw-bold text-brand-dark">72시간 전</span>까지 예약 필수이며, 취소는 방문 <span id="panelCancelDeadline" class="fw-bold text-brand-dark">72시간 전</span>까지만 가능합니다.
            </div>

            <!-- 요청사항 메모 -->
            <div class="mb-0">
                <label for="memo" class="form-label text-brand-dark fw-bold mb-1" style="font-size: 13px;">요청사항 메모 (선택)</label>
                <textarea class="form-control" id="memo" name="memo" rows="3" placeholder="매장 전달 사항이 있으시면 입력해 주세요." style="border-radius: 6px; font-size: 13px; padding: 10px; resize: none;"></textarea>
            </div>
        </div>

        <!-- 하단 액션 버튼 -->
        <div class="d-flex mt-4 pt-2" style="gap: 8px;">
            <a href="{{ route('mypage.tickets.index') }}" class="btn btn-secondary fw-semibold text-decoration-none text-center d-flex align-items-center justify-content-center p-2.5" style="flex: 1; border-radius: 6px; font-size: 14px;">
                취소
            </a>
            <button type="button" id="applyReservationBtn" class="btn btn-premium fw-semibold text-white text-center d-flex align-items-center justify-content-center p-2.5" style="flex: 1; border-radius: 6px; font-size: 14px; display: none;" onclick="openConfirmModal()">
                예약 신청하기
            </button>
        </div>
    </form>
</div>

<!-- 🌟 예약 확인 및 주의사항 동의 모달 팝업 -->
<div class="modal fade" id="reservationConfirmModal" tabindex="-1" aria-labelledby="reservationConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 12px; border: none; box-shadow: 0 10px 25px rgba(0,0,0,0.1);">
            <div class="modal-header border-bottom-0 pb-0 pt-3 px-3">
                <h5 class="modal-title fw-bold text-brand-dark" id="reservationConfirmModalLabel" style="font-size: 16px;">
                    <i class="fas fa-check-circle text-brand me-1"></i> 예약 대기 신청 정보 확인
                </h5>
                <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body px-3 py-2" style="font-size: 13.5px; color: #495057;">
                <p class="text-muted small mb-3">아래 예약 내용을 확인하신 후 예약 규정 및 주의사항에 동의해 주세요.</p>
                
                <div class="p-3 rounded mb-3" style="line-height: 1.6; background-color: var(--primary-light); border: 1px solid var(--primary-border);">
                    <div class="mb-1"><strong>프로그램:</strong> {{ $programName }}</div>
                    <div class="mb-1"><strong>방문 일시:</strong> <span id="modalSummaryDateTime" class="text-brand-dark fw-bold"></span></div>
                    <div class="mb-1"><strong>제휴 뷰티샵:</strong> <span id="modalSummaryShop" class="fw-bold text-brand-dark"></span></div>
                    <div><strong>매장 주소:</strong> <span id="modalSummaryAddress" class="text-muted small"></span></div>
                </div>

                <div class="p-2.5 rounded border bg-white mb-3" style="font-size: 12px; line-height: 1.5; max-height: 110px; overflow-y: auto; color: #6c757d;">
                    <strong>[예약 대기 및 취소 규정 안내]</strong><br>
                    - 본 예약 신청은 즉시 확정되지 않으며, <strong>'예약 대기'</strong> 상태로 저장됩니다.<br>
                    - 제휴 뷰티샵 관리자가 내용을 확인한 후 승인하면 최종 '예약 완료'로 확정됩니다.<br>
                    - 방문 예정 시간 기준 규정된 시간 전까지 예약 및 취소가 가능합니다.
                </div>

                <div class="form-check mb-0">
                    <input class="form-check-input" type="checkbox" id="precautionsCheck" onchange="toggleModalConfirmBtn(this)">
                    <label class="form-check-label fw-medium text-brand-dark" for="precautionsCheck" style="font-size: 12.5px; cursor: pointer;">
                        위 예약 규정 및 주의사항을 모두 확인하였으며 이에 동의합니다. <span class="text-danger">*</span>
                    </label>
                </div>
            </div>
            <div class="modal-footer border-top-0 pt-2 pb-3 px-3">
                <button type="button" class="btn btn-secondary btn-sm px-3 py-2" data-bs-dismiss="modal" style="border-radius: 6px; font-size: 13px;">취소</button>
                <button type="button" class="btn btn-premium btn-sm px-3 py-2 text-white" id="modalConfirmBtn" disabled style="border-radius: 6px; font-size: 13px; opacity: 0.6; cursor: not-allowed;" onclick="submitReservationForm()">확인 및 예약 대기 신청</button>
            </div>
        </div>
    </div>
</div>

<!-- Flatpickr JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ko.js"></script>

<style>
    :root {
        --primary-color: #b18977;
        --primary-hover: #987261;
        --primary-light: #faf7f5;
        --primary-border: #e6d7d0;
        --primary-dark: #6e4e3f; 
    }

    /* 텍스트 유틸리티 클래스 */
    .text-brand { color: var(--primary-color) !important; }
    .text-brand-dark { color: var(--primary-dark) !important; }
    .bg-brand { background-color: var(--primary-color) !important; }

    /* 티켓 타이틀 최대 2줄 제한 및 말줄임표(...) 처리 */
    .ticket-title-clamp {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
    }

    .premium-picker-group:focus-within {
        box-shadow: 0 0 0 3px rgba(177, 137, 119, 0.2);
        border-radius: 6px;
    }
    .premium-picker-group:focus-within .input-group-text,
    .premium-picker-group:focus-within .form-control {
        border-color: var(--primary-color) !important;
    }
    
    .flatpickr-day.selected, .flatpickr-day.selected:hover {
        background: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
    }
    .shop-select-card {
        border: 1px solid #ced4da;
        border-radius: 8px;
        padding: 12px 14px;
        background-color: #fff;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .shop-select-card:hover {
        border-color: var(--primary-color);
        background-color: var(--primary-light);
    }
    .shop-select-card.selected {
        border-color: var(--primary-color);
        background-color: var(--primary-light);
        box-shadow: 0 0 0 1px var(--primary-color);
    }
    .shop-filter-chip.active {
        background-color: var(--primary-color) !important;
        color: white !important;
        border-color: var(--primary-color) !important;
    }
    .timeslot-btn {
        flex: 0 0 calc(33.333% - 4px);
        padding: 10px;
        font-size: 13px;
        font-weight: 500;
        text-align: center;
        border: 1px solid #ced4da;
        background-color: #fff;
        color: #495057;
        border-radius: 6px;
        transition: all 0.2s ease;
    }
    .timeslot-btn:hover {
        border-color: var(--primary-color);
        color: var(--primary-dark);
        background-color: var(--primary-light);
    }
    .timeslot-btn.active {
        background-color: var(--primary-color) !important;
        color: #fff !important;
        border-color: var(--primary-color) !important;
    }

    /* 🌟 PC 화면 전용 가로 크기 및 타이포그래피 확장 반응형 스타일 (날짜, 시간, 샵 이름 강조) */
    @media (min-width: 768px) {
        #kakaoMap {
            height: 280px !important;
        }
        .timeslot-btn {
            flex: 0 0 calc(16.666% - 5px) !important;
        }
        .pc-ticket-card {
            padding: 24px !important;
        }
        .pc-ticket-title {
            font-size: 20px !important;
            line-height: 28px !important;
        }
        .pc-section-title {
            font-size: 18px !important;
        }
        .pc-summary-row {
            font-size: 16px !important;
        }
        .pc-summary-val {
            font-size: 18px !important;
            font-weight: 700 !important;
            color: var(--primary-dark) !important;
        }
        .pc-input-label {
            font-size: 16px !important;
        }
        .pc-shop-detail {
            font-size: 15px !important;
        }
        .pc-shop-name-title {
            font-size: 18px !important;
        }
    }
</style>

<script>
    let map = null;
    let markers = [];
    let shopsData = [];
    let selectedDate = null;
    let selectedShopId = null;
    let selectedTime = null;
    let geocoder = null;
    let fpInstance = null;

    let currentPage = 1;
    const itemsPerPage = 10;

    let activeFilters = {
        parking: false,
        valet: false,
        wifi: false
    };

    document.addEventListener('DOMContentLoaded', function() {
        const fpConfig = {
            locale: "ko",
            dateFormat: "Y-m-d",
            minDate: "today",
            maxDate: "{{ $expiresAt }}",
            disableMobile: "true",
            onChange: function(selectedDates, dateStr) {
                if (!dateStr) return;

                selectedDate = dateStr;
                selectedTime = null;
                selectedShopId = null;
                document.getElementById('final_reserved_at').value = '';
                document.getElementById('selected_shop_id').value = '';

                // STEP 1 입력폼 숨기기 및 요약 표시 (날짜만 먼저 표시)
                document.getElementById('step1InputBox').style.display = 'none';
                document.getElementById('summaryDateText').innerText = dateStr;
                document.getElementById('step1Summary').style.display = 'block';

                // 하위 요약 및 입력폼 초기화
                document.getElementById('step2Summary').style.display = 'none';
                document.getElementById('step3InputBox').style.display = 'none';
                document.getElementById('applyReservationBtn').style.display = 'none';

                // STEP 2 입력폼 노출 및 샵 목록 로드
                document.getElementById('step2InputBox').style.display = 'block';
                loadShops(null, null);

                // 스크롤 이동
                document.getElementById('step2InputBox').scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        };

        fpInstance = flatpickr("#reserved_at_date", fpConfig);
        geocoder = new kakao.maps.services.Geocoder();

        const locationKeywordInput = document.getElementById('locationKeyword');
        if (locationKeywordInput) {
            locationKeywordInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    searchByKeyword();
                }
            });
        }
    });

    // 각 단계별 [변경하기] 버튼 클릭 시 하위 단계 초기화 후 해당 단계로 복귀
    function resetStep(stepNum) {
        if (stepNum === 1) {
            selectedDate = null;
            selectedShopId = null;
            selectedTime = null;
            if (fpInstance) fpInstance.clear();
            document.getElementById('final_reserved_at').value = '';
            document.getElementById('selected_shop_id').value = '';

            document.getElementById('step1Summary').style.display = 'none';
            document.getElementById('step2Summary').style.display = 'none';
            document.getElementById('step3InputBox').style.display = 'none';
            document.getElementById('applyReservationBtn').style.display = 'none';

            document.getElementById('step2InputBox').style.display = 'none';
            document.getElementById('step1InputBox').style.display = 'block';
            document.getElementById('step1InputBox').scrollIntoView({ behavior: 'smooth', block: 'start' });
        } else if (stepNum === 2) {
            selectedShopId = null;
            selectedTime = null;
            document.getElementById('selected_shop_id').value = '';
            document.getElementById('final_reserved_at').value = '';

            document.getElementById('step2Summary').style.display = 'none';
            document.getElementById('step3InputBox').style.display = 'none';
            document.getElementById('applyReservationBtn').style.display = 'none';

            document.getElementById('step2InputBox').style.display = 'block';
            document.querySelectorAll('.shop-select-card').forEach(c => c.classList.remove('selected'));
            document.getElementById('step2InputBox').scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    }

    function toggleFilter(btn) {
        btn.classList.toggle('active');
        const filterName = btn.getAttribute('data-filter');
        activeFilters[filterName] = btn.classList.contains('active');
        currentPage = 1;
        searchByKeyword();
    }

    function searchByKeyword() {
        const keyword = document.getElementById('locationKeyword').value.trim();

        if (!keyword) {
            currentPage = 1;
            loadShops(null, null, '');
            return;
        }

        geocoder.addressSearch(keyword, function(result, status) {
            let lat = null;
            let lng = null;
            if (status === kakao.maps.services.Status.OK) {
                lat = result[0].y;
                lng = result[0].x;
            }
            currentPage = 1;
            loadShops(lat, lng, keyword);
        });
    }

    function loadShops(lat, lng, keyword = '') {
        const listContainer = document.getElementById('shopCardListContainer');
        listContainer.innerHTML = '<div class="text-muted small py-3 text-center">주변 제휴 뷰티샵을 탐색 중입니다...</div>';

        let queryUrl = `{{ route('mypage.reservations.shops.json', $ticketItem->id) }}?lat=${lat || ''}&lng=${lng || ''}&keyword=${encodeURIComponent(keyword)}`;
        
        if (activeFilters.parking) queryUrl += '&parking=1';
        if (activeFilters.valet) queryUrl += '&valet=1';
        if (activeFilters.wifi) queryUrl += '&wifi=1';

        fetch(queryUrl)
            .then(res => res.json())
            .then(data => {
                shopsData = data.shops || [];
                renderMapAndList(shopsData);
            })
            .catch(err => {
                listContainer.innerHTML = '<div class="text-danger small py-3 text-center">샵 정보를 불러오는 데 실패했습니다.</div>';
            });
    }

    function renderMapAndList(shops) {
        const listContainer = document.getElementById('shopCardListContainer');
        listContainer.innerHTML = '';

        if (shops.length === 0) {
            listContainer.innerHTML = '<div class="text-muted small py-3 text-center">조건에 맞는 제휴 뷰티샵이 없습니다.</div>';
            document.getElementById('shopPagination').innerHTML = '';
            return;
        }

        renderCurrentPageShops(shops);
    }

    function renderCurrentPageShops(shops) {
        const listContainer = document.getElementById('shopCardListContainer');
        listContainer.innerHTML = '';

        const startIndex = (currentPage - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;
        const pageShops = shops.slice(startIndex, endIndex);

        pageShops.forEach((shop) => {
            const card = document.createElement('div');
            card.className = 'shop-select-card';
            card.id = `shopCard_${shop.id}`;
            
            const distanceBadge = shop.distance !== null 
                ? `<span class="badge bg-light text-brand-dark border px-2 py-1" style="font-size: 11px;">${shop.distance}km</span>` 
                : '';

            card.innerHTML = `
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <span class="fw-bold text-dark" style="font-size: 14px;">${shop.name}</span>
                    ${distanceBadge}
                </div>
                <div class="text-muted small text-truncate" style="font-size: 12px;">
                    <i class="fas fa-map-marker-alt text-danger me-1"></i> ${shop.address}
                </div>
            `;

            card.onclick = function() {
                selectShop(shop.id);
            };

            listContainer.appendChild(card);
        });

        renderPaginationControls(shops.length);
    }

    function renderPaginationControls(totalItems) {
        const paginationContainer = document.getElementById('shopPagination');
        paginationContainer.innerHTML = '';

        const totalPages = Math.ceil(totalItems / itemsPerPage);
        if (totalPages <= 1) return;

        paginationContainer.className = "pagination justify-content-center mb-0 gap-1";

        const prevLi = document.createElement('li');
        prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
        prevLi.innerHTML = `
            <button class="page-link border-0 text-secondary shadow-none" type="button" 
                    style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 13px; border-radius: 6px; background-color: transparent;">
                &laquo;
            </button>`;
        prevLi.onclick = function() {
            if (currentPage > 1) { currentPage--; renderCurrentPageShops(shopsData); }
        };
        paginationContainer.appendChild(prevLi);

        for (let i = 1; i <= totalPages; i++) {
            const li = document.createElement('li');
            li.className = `page-item ${currentPage === i ? 'active' : ''}`;
            const isActive = (currentPage === i);
            const bgColor = isActive ? 'var(--primary-color)' : 'transparent';
            const textColor = isActive ? '#ffffff' : '#495057';
            const fontWeight = isActive ? 'bold' : 'normal';

            li.innerHTML = `
                <button class="page-link border-0 shadow-none" type="button" 
                        style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 13px; border-radius: 6px; background-color: ${bgColor}; color: ${textColor}; font-weight: ${fontWeight};">
                    ${i}
                </button>`;
            li.onclick = (function(page) {
                return function() { currentPage = page; renderCurrentPageShops(shopsData); };
            })(i);
            paginationContainer.appendChild(li);
        }

        const nextLi = document.createElement('li');
        nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
        nextLi.innerHTML = `
            <button class="page-link border-0 text-secondary shadow-none" type="button" 
                    style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 13px; border-radius: 6px; background-color: transparent;">
                &raquo;
            </button>`;
        nextLi.onclick = function() {
            if (currentPage < totalPages) { currentPage++; renderCurrentPageShops(shopsData); }
        };
        paginationContainer.appendChild(nextLi);
    }

    function selectShop(shopId) {
        selectedShopId = shopId;
        document.getElementById('selected_shop_id').value = shopId;

        document.querySelectorAll('.shop-select-card').forEach(c => c.classList.remove('selected'));
        const targetCard = document.getElementById(`shopCard_${shopId}`);
        if (!targetCard) return;

        targetCard.classList.add('selected');

        const shop = shopsData.find(s => s.id === shopId);
        if (!shop) return;

        // STEP 2 입력폼 숨기기 및 요약 표시
        document.getElementById('step2InputBox').style.display = 'none';
        document.getElementById('summaryShopText').innerText = `${shop.name} (${shop.address})`;
        document.getElementById('step2Summary').style.display = 'block';

        // 하위 시간 초기화
        selectedTime = null;
        document.getElementById('final_reserved_at').value = '';
        document.getElementById('applyReservationBtn').style.display = 'none';
        if (selectedDate) {
            document.getElementById('summaryDateText').innerText = selectedDate;
        }

        document.getElementById('panelShopName').innerText = shop.name;
        document.getElementById('panelShopAddress').innerText = shop.address;
        document.getElementById('panelShopTel').innerText = shop.tel;
        document.getElementById('panelShopIntro').innerText = shop.introduction;
        document.getElementById('panelMinAdvance').innerText = shop.min_advance_hours + '시간 전';
        document.getElementById('panelCancelDeadline').innerText = shop.cancel_deadline_hours + '시간 전';

        const minAllowedDate = new Date();
        minAllowedDate.setHours(minAllowedDate.getHours() + shop.min_advance_hours);
        if (fpInstance) fpInstance.set('minDate', minAllowedDate);

        if (selectedDate) {
            const selectedDateObj = new Date(selectedDate);
            if (selectedDateObj < new Date(minAllowedDate.toDateString())) {
                showSwalAlert(`선택하신 샵은 방문 ${shop.min_advance_hours}시간 전까지 예약해야 합니다. 선택하신 날짜는 예약 규정에 어긋나 초기화됩니다.`, null, null, 'warning', '예약 일자 확인');
                resetStep(1);
                return;
            }
        }

        // STEP 3 입력폼 표시
        const step3Input = document.getElementById('step3InputBox');
        step3Input.style.display = 'block';

        setTimeout(() => {
            const container = document.getElementById('kakaoMap');
            container.innerHTML = ''; 
            map = null; 

            const coords = new kakao.maps.LatLng(shop.lat, shop.lng);
            const options = { center: coords, level: 3 };
            map = new kakao.maps.Map(container, options);

            markers.forEach(m => m.setMap(null));
            markers = [];
            const marker = new kakao.maps.Marker({
                map: map,
                position: coords,
                title: shop.name
            });
            markers.push(marker);
        }, 100);

        step3Input.scrollIntoView({ behavior: 'smooth', block: 'start' });

        if (selectedDate) {
            loadTimeSlots(shopId, selectedDate);
        }
    }

    function loadTimeSlots(shopId, dateStr) {
        const container = document.getElementById('modalTimeSlotContainer');
        container.innerHTML = '<div class="text-muted small py-2 w-100 text-center">예약 가능 시간을 불러오는 중...</div>';

        const shop = shopsData.find(s => s.id === shopId);
        const minAdvanceHours = shop ? shop.min_advance_hours : 72;

        const minAllowedDateTime = new Date();
        minAllowedDateTime.setHours(minAllowedDateTime.getHours() + minAdvanceHours);

        setTimeout(() => {
            container.innerHTML = '';
            const openHour = 10;
            const closeHour = 20;
            let availableCount = 0;
            
            for (let h = openHour; h < closeHour; h++) {
                for (let m = 0; m < 60; m += 30) {
                    const timeString = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
                    const slotDateTime = new Date(`${dateStr}T${timeString}:00`);

                    const isAfterMinAdvance = slotDateTime >= minAllowedDateTime;

                    const btn = document.createElement('button');
                    btn.type = 'button';
                    btn.className = 'timeslot-btn';
                    btn.innerText = timeString;

                    if (!isAfterMinAdvance) {
                        btn.disabled = true;
                        btn.style.opacity = '0.35';
                        btn.style.cursor = 'not-allowed';
                        btn.title = `최소 ${minAdvanceHours}시간 전 사전 예약 필수`;
                    } else {
                        availableCount++;
                        if (selectedTime === timeString) btn.classList.add('active');
                        
                        btn.onclick = function() {
                            document.querySelectorAll('.timeslot-btn').forEach(b => b.classList.remove('active'));
                            btn.classList.add('active');
                            selectedTime = timeString;
                            document.getElementById('final_reserved_at').value = `${dateStr}T${timeString}:00`;

                            // 스텝 1 요약에 날짜 + 시간 반영 (딥 브라운 강조)
                            document.getElementById('summaryDateText').innerText = `${dateStr} (${timeString})`;

                            // [예약 신청하기] 버튼 노출
                            document.getElementById('applyReservationBtn').style.display = 'flex';

                            // 하단 제출 버튼 영역으로 스크롤
                            document.getElementById('applyReservationBtn').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                        };
                    }
                    container.appendChild(btn);
                }
            }

            if (availableCount === 0) {
                container.innerHTML = `<div class="text-danger small py-2 w-100 text-center">선택하신 날짜는 사전 예약 규정(${minAdvanceHours}시간 전)으로 인해 예약 가능한 시간이 없습니다. 다른 날짜를 선택해 주세요.</div>`;
            }
        }, 150);
    }

    function toggleModalConfirmBtn(checkbox) {
        const confirmBtn = document.getElementById('modalConfirmBtn');
        if (checkbox.checked) {
            confirmBtn.disabled = false;
            confirmBtn.style.opacity = '1';
            confirmBtn.style.cursor = 'pointer';
        } else {
            confirmBtn.disabled = true;
            confirmBtn.style.opacity = '0.6';
            confirmBtn.style.cursor = 'not-allowed';
        }
    }

    function openConfirmModal() {
        const dateInput = document.getElementById('reserved_at_date');
        if (!dateInput || !dateInput.value) {
            showSwalAlert('방문 날짜를 선택해 주세요.', dateInput, null, 'warning', '필수 입력 확인');
            return;
        }

        const selectedShopIdInput = document.getElementById('selected_shop_id');
        if (!selectedShopIdInput || !selectedShopIdInput.value) {
            showSwalAlert('제휴 뷰티샵을 선택해 주세요.', null, document.getElementById('step2InputBox'), 'warning', '필수 입력 확인');
            return;
        }

        const finalReservedAtInput = document.getElementById('final_reserved_at');
        if (!finalReservedAtInput || !finalReservedAtInput.value) {
            showSwalAlert('방문 시간을 선택해 주세요.', null, document.getElementById('step3InputBox'), 'warning', '필수 입력 확인');
            return;
        }

        const shop = shopsData.find(s => s.id == selectedShopId);
        if (shop) {
            document.getElementById('modalSummaryDateTime').innerText = finalReservedAtInput.value;
            document.getElementById('modalSummaryShop').innerText = shop.name;
            document.getElementById('modalSummaryAddress').innerText = shop.address;
        }

        document.getElementById('precautionsCheck').checked = false;
        toggleModalConfirmBtn(document.getElementById('precautionsCheck'));

        const confirmModal = new bootstrap.Modal(document.getElementById('reservationConfirmModal'));
        confirmModal.show();
    }

    function submitReservationForm() {
        document.getElementById('reservationForm').submit();
    }
</script>
@endsection