@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 class="py-2" style="overflow-anchor: none;">
    <!-- 상단 안내 영역 -->
    <div class="mb-3">
        <p class="text-muted small mb-0">날짜를 선택하신 후 제휴 뷰티샵과 방문 시간을 지정해 주세요.</p>
    </div>

    @if(session('error'))
    <div class="alert alert-danger mb-3 fs-sm badge-rounded">
        {{ 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

        <!-- 1. 상단 보유 티켓 정보 카드 -->
        <div class="card ticket-info-card shadow-sm mb-4">
            <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 fs-xs badge-rounded">보유 티켓</span>
            </div>
            <h5 class="fw-bold text-white mb-3 text-clamp-2 fs-5">
                {{ $programName }}
            </h5>
            <div class="ticket-info-footer d-flex justify-content-between align-items-center fs-sm">
                <div>
                    <span class="text-white-50">잔여 횟수:</span> 
                    <span class="fw-bold text-white ms-1">{{ $remainingCount }}회 / 총 {{ $totalCount }}회</span>
                </div>
                @if($expiresAt)
                <div>
                    <span class="text-white-50">만료일:</span> 
                    <span class="fw-semibold text-warning ms-1">{{ $expiresAt }}까지</span>
                </div>
                @endif
            </div>
        </div>

        <!-- 2. 절대 스크롤 타깃: 예약 일정 및 매장 지정 헤더 -->
        <div class="d-flex align-items-center justify-content-between mb-3 px-1 border-bottom pb-2" id="reservationSectionHeader">
            <h6 class="fw-bold text-dark mb-0 fs-base">
                <i class="fas fa-calendar-check text-brand me-1"></i>예약 일정 및 매장 지정
            </h6>
            <!-- 진행 상태 배지 -->
            <span class="badge bg-brand text-white px-2 py-1 fs-xs badge-rounded" id="currentStepBadge">
                1단계: 날짜 선택
            </span>
        </div>

        <!-- ========================================== -->
        <!-- STEP 1: 방문 날짜 선택 -->
        <!-- ========================================== -->
        <!-- STEP 1 완료 요약 디스플레이 (모바일 2열 구조) -->
        <div class="mb-3 px-1" id="step1Summary" style="display: none;">
            <div class="p-3 bg-light rounded border">
                <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                    <span class="badge bg-brand text-white fs-xs px-2 py-1">STEP 1 완료</span>
                    <button type="button" class="btn btn-outline-secondary btn-sm px-2 py-1 fs-xs badge-rounded" onclick="resetStep(1)">
                        <i class="fas fa-redo-alt me-1"></i>날짜 변경
                    </button>
                </div>
                <div class="d-flex align-items-center fs-sm fw-bold text-dark">
                    <i class="far fa-calendar-check text-brand me-2 fs-5"></i>
                    <span id="summaryDateText" class="text-brand"></span>
                </div>
            </div>
        </div>

        <!-- 입력 박스 (지정하신 원본 디자인 100% 고정) -->
        <div class="mb-4 px-1" id="step1InputBox">
            <label class="form-label text-dark fw-bold mb-2 fs-sm">
                <span class="badge bg-brand text-white me-1 fs-xs">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">
                    <i class="far fa-calendar-alt"></i>
                </span>
                <input type="text" 
                       class="form-control border-start-0 ps-0 bg-white fs-base py-3 fw-medium" 
                       id="reserved_at_date" 
                       placeholder="여기를 터치하여 방문 날짜를 선택하세요" 
                       readonly 
                       style="cursor: pointer;">
            </div>
            <div class="text-muted fs-xs mt-2">
                <i class="fas fa-info-circle me-1"></i>오늘부터 티켓 유효기간 내의 날짜만 선택 가능합니다.
            </div>
        </div>

        <!-- ========================================== -->
        <!-- STEP 2: 제휴 뷰티샵 선택 -->
        <!-- ========================================== -->
        <!-- STEP 2 완료 요약 디스플레이 (1행: 뷰티샵명 단독 / 2행: 주소 단독) -->
        <div class="mb-3 px-1" id="step2Summary" style="display: none;">
            <div class="p-3 bg-light rounded border">
                <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                    <span class="badge bg-secondary text-white fs-xs px-2 py-1">STEP 2 완료</span>
                    <button type="button" class="btn btn-outline-secondary btn-sm px-2 py-1 fs-xs badge-rounded" onclick="resetStep(2)">
                        <i class="fas fa-redo-alt me-1"></i>매장 변경
                    </button>
                </div>
                <div class="d-flex flex-column gap-1">
                    <div class="fw-bold text-dark fs-sm d-flex align-items-center text-truncate">
                        <i class="fas fa-store text-brand me-2"></i>
                        <span id="summaryShopNameText" class="text-truncate"></span>
                    </div>
                    <div class="text-muted fs-xs d-flex align-items-start ps-3 ms-1">
                        <i class="fas fa-map-marker-alt text-danger me-1 mt-1"></i>
                        <span id="summaryShopAddressText" class="text-break"></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 입력 폼 영역 -->
        <div class="mb-4 px-1" id="step2InputBox" style="display: none;">
            <label class="form-label text-dark fw-bold mb-2 fs-sm">
                <span class="badge bg-secondary text-white me-1 fs-xs">STEP 2</span> 제휴 뷰티샵 선택 <span class="text-danger">*</span>
            </label>

            <!-- 검색 바 -->
            <div class="input-group mb-2">
                <input type="text" class="form-control fs-sm py-2" id="locationKeyword" placeholder="예: 강남구 테헤란로, 홍대, 분당 등 지역 검색">
                <button class="btn btn-premium px-3 fs-sm" type="button" onclick="searchByKeyword(window.reservationConfig.shopsJsonUrl)">
                    <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)">
                    <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)">
                    <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)">
                    <i class="fas fa-wifi me-1"></i>무선 인터넷
                </button>
            </div>

            <!-- 샵 목록 컨테이너 -->
            <div id="shopCardListContainer" class="d-flex flex-column gap-2">
                <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-dark fw-bold mb-2 fs-sm">
                <span class="badge bg-success text-white me-1 fs-xs">STEP 3</span> 방문 시간 선택 및 매장 확인 <span class="text-danger">*</span>
            </label>

            <!-- 미니 지도 영역 -->
            <div class="mb-3">
                <div class="text-muted fs-xs mb-1 fw-medium">
                    <i class="fas fa-map-marker-alt text-danger me-1"></i>선택된 매장 위치 미리보기
                </div>
                <div id="kakaoMap" class="reservation-map-box"></div>
            </div>

			<!-- 뷰티샵 상세 정보 박스 (.box-soft-primary) -->
			<div class="box-soft-primary mb-3 fs-sm text-dark">
				<!-- 1. 매장명 (기준 타이틀) -->
				<div class="mb-2 fw-bold fs-base text-brand">
					<i class="fas fa-store text-brand me-1"></i><span id="panelShopName">매장명</span>
				</div>

				<!-- 2. 매장 세부 내용 들여쓰기 래퍼 (ps-2 적용) -->
				<div class="ps-2">
					<div class="mb-2">
						<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 fs-xs" id="panelShopIntro">
						소개말
					</div>
				</div>
			</div>

            <!-- 방문 시간 선택 타임슬롯 -->
            <div class="mb-3">
                <label class="form-label text-dark fs-sm fw-medium mb-1">
                    방문 시간 선택 (30분 간격) <span class="text-danger">*</span>
                </label>
                <div id="modalTimeSlotContainer" class="d-flex flex-wrap gap-1"></div>
            </div>

            <!-- 예약 규정 박스 -->
            <div class="p-3 rounded border bg-white fs-xs text-muted mb-3">
                <i class="fas fa-info-circle text-brand me-1"></i><strong>예약 규정 안내:</strong>
                방문 예정 시간 기준 <span id="panelMinAdvance" class="fw-bold text-dark">72시간 전</span>까지 예약 필수이며, 취소는 방문 <span id="panelCancelDeadline" class="fw-bold text-dark">72시간 전</span>까지만 가능합니다.
            </div>

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

        <!-- ========================================== -->
        <!-- 하단 액션 영역 (CTA 중심 디자인) -->
        <!-- ========================================== -->
        <div class="mt-4 pt-2">
            <button type="button" 
                    id="applyReservationBtn" 
                    class="btn btn-premium btn-lg w-100 fw-bold py-3 fs-base d-none align-items-center justify-content-center shadow-sm mb-3" 
                    onclick="openConfirmModal()">
                <i class="fas fa-check me-2"></i>선택한 일정으로 예약 신청하기
            </button>

            <div id="stepGuidanceBox" class="text-center p-3 rounded bg-light border mb-3">
                <span class="text-muted fs-sm">
                    <i class="fas fa-arrow-up me-1 text-brand"></i>날짜, 매장, 방문 시간을 차례대로 선택해 주세요.
                </span>
            </div>

            <div class="text-center">
                <a href="{{ route('mypage.tickets.list') }}" class="text-muted small text-decoration-none py-1 d-inline-block">
                    <i class="fas fa-times me-1"></i>티켓 목록으로 돌아가기 (예약 취소)
                </a>
            </div>
        </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 border-0 shadow">
            <div class="modal-header border-bottom-0 pb-0 pt-3 px-3">
                <h5 class="modal-title fw-bold text-dark fs-base" id="reservationConfirmModalLabel">
                    <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 fs-sm text-dark">
                <p class="text-muted small mb-3">아래 예약 내용을 확인하신 후 예약 규정 및 주의사항에 동의해 주세요.</p>

                <div class="box-soft-primary mb-3">
                    <div class="mb-1"><strong>프로그램:</strong> {{ $programName }}</div>
                    <div class="mb-1"><strong>방문 일시:</strong> <span id="modalSummaryDateTime" class="text-brand fw-bold"></span></div>
                    <div class="mb-1"><strong>제휴 뷰티샵:</strong> <span id="modalSummaryShop" class="fw-bold text-dark"></span></div>
                    <div><strong>매장 주소:</strong> <span id="modalSummaryAddress" class="text-muted fs-xs"></span></div>
                </div>

                <div class="p-3 rounded border bg-light mb-3 fs-xs text-muted" style="max-height: 110px; overflow-y: auto;">
                    <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-dark fs-xs" for="precautionsCheck" style="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 fs-xs" data-bs-dismiss="modal">취소</button>
                <button type="button" class="btn btn-premium btn-sm px-3 py-2 text-white fs-xs" id="modalConfirmBtn" disabled style="opacity: 0.6; cursor: not-allowed;" onclick="submitReservationForm()">
                    확인 및 예약 신청
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- 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>
<script src="{{ asset('js/users/user_reservation.js') }}?v=5.3"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        initReservation({
            expiresAt: "{{ $expiresAt }}",
            shopsJsonUrl: "{{ route('mypage.reservations.shops.json', $ticketItem->id) }}"
        });
    });
</script>
@endpush