@extends('layouts.app-sub')

@section('title', '예약 상세정보 - GLOBEAU')
@section('header-title', '예약 상세정보')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/mypage/user_mypage.css') }}">
<style>
    /* 티켓 규격 통일 스타일 */
    .ticket-card-wrap {
        border-radius: var(--radius-fixed);
        border: 1px solid var(--border-default);
        background: #ffffff;
        overflow: hidden;
    }

    /* 🌟 1200 x 630 (1.905:1) OG/모바일 배너 표준 비율 완벽 적용 */
    .ticket-banner-header {
        position: relative;
        width: 100%;
        aspect-ratio: 1200 / 630;
        min-height: 170px;
        background-color: var(--primary-color);
        overflow: hidden;
    }

    .ticket-banner-header img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 1;
    }

    .ticket-banner-overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.72) 100%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 1.25rem;
    }

    .qr-code-box {
        display: inline-block;
        padding: 1rem;
        background: #ffffff;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-fixed);
    }
</style>
@endpush

@section('content')
<div class="py-2" style="max-width: 600px; margin: 0 auto;">

    @php
        // 1. 데이터 안전 추출 (티켓 및 프로그램 관계 연쇄 탐색)
        $ticketItem = $reservation->userTicketItem;
        $userTicket = $ticketItem?->userTicket;
        $orderItem  = $userTicket?->orderItem;
        $program    = $ticketItem?->program ?? ($orderItem?->program ?? null);
        
        $programName = $program?->name ?? ($ticketItem?->program_name ?? '프리미엄 뷰티 프로그램');
        $programId   = $program?->id ?? ($ticketItem?->program_id ?? null);
        
        // 2. 🌟 프로그램 이미지 컬럼 다중 탐색 (티켓 상세와 100% 동일한 안전 로직)
        $rawImage = null;
        if ($program) {
            $possibleColumns = [
                'mobile_banner_path', 'og_image_url', 'og_image_path',
                'banner_path', 'banner_image', 'thumbnail', 'image', 'file_path', 'logo_path'
            ];
            foreach ($possibleColumns as $col) {
                if (!empty($program->$col)) {
                    $rawImage = $program->$col;
                    break;
                }
            }
        }
        
        // 3. 🌟 스토리지 및 URL 경로 변환
        if ($rawImage) {
            if (str_starts_with($rawImage, 'http://') || str_starts_with($rawImage, 'https://')) {
                $programImage = $rawImage;
            } elseif (str_starts_with($rawImage, 'storage/')) {
                $programImage = asset($rawImage);
            } else {
                $programImage = asset('storage/' . ltrim($rawImage, '/'));
            }
        } else {
            $programImage = null;
        }

        // 방문 일시 파싱 (시간 유실 방지)
        $rawReservedAt = $reservation->getAttributes()['reserved_at'] ?? $reservation->reserved_at;
        $carbonReserved = \Carbon\Carbon::parse($rawReservedAt);

        // 예약번호 4자리 하이픈 분할
        $cleanCode = str_replace('-', '', $reservation->reservation_code);
        $formattedReservationCode = implode('-', str_split($cleanCode, 4));

        // 티켓 회차 정보
        $totalSlots     = $userTicket->total_count ?? ($userTicket->total_slots ?? 1);
        $remainingSlots = $userTicket->remaining_count ?? ($userTicket->remaining_slots ?? 0);
    @endphp

    <!-- 뒤로가기 네비게이션 헤더 바 -->
    <div class="d-flex justify-content-between align-items-center mb-3 px-1">
        <a href="{{ route('mypage.reservations.list') }}" class="text-decoration-none text-muted fs-sm d-inline-flex align-items-center">
            <i class="fas fa-arrow-left me-1"></i> 예약 목록으로 돌아가기
        </a>
        <span class="badge {{ $reservation->status_badge_class }} fs-xs px-2 py-1">
            {{ $reservation->status_label }}
        </span>
    </div>

    <!-- 메인 티켓 패스 카드 -->
    <div class="card ticket-card-wrap shadow-sm mb-3">
        
        <!-- 1. 상단 티켓 헤더 (1200x630 모바일 배너 이미지 또는 브랜드 배경) -->
        @if($programImage)
            <div class="ticket-banner-header">
                <img src="{{ $programImage }}" 
                     alt="{{ $programName }}" 
                     onerror="this.style.display='none';">
                <div class="ticket-banner-overlay">
                    <span class="badge bg-white text-dark px-3 py-1 fw-bold mb-2 align-self-start fs-xs" style="border-radius: var(--radius-fixed);">
                        GLOBEAU OFFICIAL RESERVATION
                    </span>
                    <h5 class="fw-bold text-white mb-0 text-clamp-2 fs-5" title="{{ $programName }}">
                        {{ $programName }}
                    </h5>
                </div>
            </div>
        @else
            <div class="p-4 text-white text-center bg-brand">
                <span class="badge bg-white text-dark px-3 py-1 fw-bold mb-2 fs-xs" style="border-radius: var(--radius-fixed);">
                    GLOBEAU OFFICIAL RESERVATION
                </span>
                <h5 class="fw-bold mb-1 fs-5 text-clamp-2">
                    {{ $programName }}
                </h5>
                <p class="fs-xs mb-0 opacity-75">본 예약권은 3분마다 갱신되는 안전한 모바일 체크인 티켓입니다.</p>
            </div>
        @endif

        <!-- 2. QR 코드 및 유동 갱신 안내 영역 -->
        <div class="p-4 text-center border-bottom">
            <!-- QR 코드 래퍼 (.qr-code-box) -->
            <div class="qr-code-box mb-3 shadow-xs">
                <div id="qrcode" class="d-flex justify-content-center align-items-center"></div>
            </div>

            <!-- 유동 갱신 타이머 표시 -->
            <div class="mb-3">
                <span class="badge bg-light text-dark border px-3 py-1 fs-xs">
                    보안 QR 갱신 남은 시간: <span id="timerCountdown" class="fw-bold text-brand">03:00</span>
                </span>
            </div>

            <!-- 고유 예약 코드 (4자리 하이픈) -->
            <div>
                <span class="text-muted d-block fs-xs mb-1">예약 확인 번호</span>
                <span class="fw-bold fs-5 text-dark font-monospace">
                    {{ $formattedReservationCode }}
                </span>
            </div>
        </div>

        <!-- 3. 본문 상세 정보 영역 -->
        <div class="p-3">
            <!-- 방문 예약 상세 스케줄 -->
            <div class="mb-3">
                <h6 class="fw-bold fs-sm text-dark mb-2">
                    <i class="far fa-calendar-check text-brand me-1"></i>방문 일정 정보
                </h6>
                <div class="p-3 fs-xs" style="background-color: var(--color-gray-bg); border-radius: var(--radius-fixed); border: 1px solid var(--border-default);">
                    <div class="d-flex justify-content-between py-2 border-bottom">
                        <span class="text-muted">예약 일시</span>
                        <strong class="text-dark">{{ $carbonReserved->translatedFormat('Y년 m월 d일 (D) H:i') }}</strong>
                    </div>
                    <div class="d-flex justify-content-between py-2 border-bottom">
                        <span class="text-muted">방문 매장</span>
                        <strong class="text-dark">{{ $reservation->shop->name ?? '지정 제휴 뷰티샵' }}</strong>
                    </div>
                    @if(!empty($reservation->shop?->tel))
                    <div class="d-flex justify-content-between py-2 border-bottom">
                        <span class="text-muted">매장 전화</span>
                        <a href="tel:{{ $reservation->shop->tel }}" class="text-brand text-decoration-none fw-semibold">
                            <i class="fas fa-phone-alt me-1"></i>{{ $reservation->shop->tel }}
                        </a>
                    </div>
                    @endif
                    @if(!empty($reservation->shop?->address1 ?? $reservation->shop?->address))
                    <div class="py-2">
                        <div class="text-muted mb-1">매장 위치</div>
                        <div class="text-dark fw-semibold">
                            <i class="fas fa-map-marker-alt text-danger opacity-75 me-1"></i>
                            {{ $reservation->shop->address1 ?? $reservation->shop->address }}
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- 티켓 회차 정보 (총 회차 / 차감 회차 / 잔여 회차) -->
            <div class="mb-3">
                <h6 class="fw-bold fs-sm text-dark mb-2">
                    <i class="fas fa-ticket-alt text-brand me-1"></i>티켓 및 회차 현황
                </h6>
                <div class="row g-2 text-center">
                    <div class="col-4">
                        <div class="p-2 border rounded bg-white">
                            <span class="text-muted fs-xxs d-block mb-1">총 발급 회차</span>
                            <span class="fw-bold fs-sm text-dark">{{ $totalSlots }}회</span>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="p-2 border rounded" style="background-color: var(--primary-light); border-color: var(--primary-border) !important;">
                            <span class="text-brand fs-xxs fw-bold d-block mb-1">이번 배정 회차</span>
                            <span class="fw-bold fs-sm text-brand">1회</span>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="p-2 border rounded bg-white">
                            <span class="text-muted fs-xxs d-block mb-1">이용 잔여 회차</span>
                            <span class="fw-bold fs-sm text-success">{{ $remainingSlots }}회</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 고객 메모 -->
            @if(!empty($reservation->memo))
            <div class="p-3 mb-3 fs-xs" style="background-color: var(--color-gray-bg); border-radius: var(--radius-fixed); border: 1px solid var(--border-default);">
                <span class="text-muted d-block mb-1 fw-bold">
                    <i class="far fa-comment-dots text-brand me-1"></i>고객 전달 메모
                </span>
                <p class="mb-0 text-dark">{{ $reservation->memo }}</p>
            </div>
            @endif

            <!-- 반려 사유 (해당 시) -->
            @if($reservation->status === \App\Models\Reservation::STATUS_REJECTED && !empty($reservation->rejection_reason))
            <div class="alert alert-danger p-3 mb-3 fs-xs" style="border-radius: var(--radius-fixed);">
                <i class="fas fa-exclamation-circle me-1"></i><strong>예약 반려 사유:</strong>
                <p class="mb-0 mt-1">{{ $reservation->rejection_reason }}</p>
            </div>
            @endif

            <!-- 4. 액션 버튼 모음 -->
            <div class="d-flex flex-column gap-2 pt-2 border-top">
                <div class="d-flex gap-2">
                    @if($programId && \Illuminate\Support\Facades\Route::has('programs.show'))
                    <a href="{{ route('programs.show', $programId) }}" class="btn btn-outline-premium btn-sm flex-fill py-2 fs-xs">
                        <i class="fas fa-spa me-1"></i> 프로그램 정보
                    </a>
                    @endif

                    <a href="{{ route('mypage.reservations') }}" class="btn btn-sm btn-light border flex-fill py-2 fs-xs text-muted" style="border-radius: var(--radius-fixed);">
                        <i class="fas fa-wallet me-1"></i> 예약 스케줄
                    </a>
                </div>

                @if(in_array($reservation->status, [\App\Models\Reservation::STATUS_PENDING, \App\Models\Reservation::STATUS_CONFIRMED]))
                <button type="button" class="btn btn-outline-danger btn-sm w-100 py-2 fs-xs" data-bs-toggle="modal" data-bs-target="#cancelModal" style="border-radius: var(--radius-fixed);">
                    <i class="fas fa-times-circle me-1"></i> 방문 예약 취소하기
                </button>
                @endif
            </div>

        </div>
    </div>

</div>

<!-- 취소 확인 팝업 모달 -->
@if(in_array($reservation->status, [\App\Models\Reservation::STATUS_PENDING, \App\Models\Reservation::STATUS_CONFIRMED]))
<div class="modal fade" id="cancelModal" tabindex="-1" aria-labelledby="cancelModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 400px;">
        <div class="modal-content border-0 shadow" style="border-radius: var(--radius-fixed);">
            <form action="{{ \Illuminate\Support\Facades\Route::has('mypage.reservations.cancel') ? route('mypage.reservations.cancel', $reservation->id) : '#' }}" method="POST">
                @csrf
                <div class="modal-header border-0 pb-0">
                    <h6 class="modal-title fw-bold text-dark fs-base" id="cancelModalLabel">
                        방문 예약을 취소하시겠습니까?
                    </h6>
                    <button type="button" class="btn-close fs-xs" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-3">
                    <p class="fs-sm text-secondary mb-3">
                        예약을 취소하시면 배정되었던 회차는 티켓으로 즉시 반환되며, 다른 날짜로 언제든지 다시 예약하실 수 있습니다.
                    </p>
                    <div class="mb-2">
                        <label class="form-label fs-xs text-dark fw-bold">취소 사유 (선택)</label>
                        <textarea name="cancel_reason" class="form-control fs-xs" rows="2" placeholder="일정 변경 등의 취소 사유를 남겨주세요." style="border-radius: var(--radius-fixed);"></textarea>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light btn-sm flex-fill fs-xs py-2" data-bs-dismiss="modal" style="border-radius: var(--radius-fixed);">돌아가기</button>
                    <button type="submit" class="btn btn-danger btn-sm flex-fill fs-xs py-2" style="border-radius: var(--radius-fixed);">예약 취소 확정</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
    const reservationCode = "{{ $cleanCode }}";
    const qrContainer = document.getElementById("qrcode");
    let timerInterval = null;
    let remainingSeconds = 180; // 3분

    function generateQRString() {
        const timeBucket = Math.floor(Date.now() / (180 * 1000));
        return `GLOBEAU:RESERVE:${reservationCode}:${timeBucket}`;
    }

    function renderQRCode() {
        const payload = generateQRString();
        qrContainer.innerHTML = "";
        new QRCode(qrContainer, {
            text: payload,
            width: 140,
            height: 140,
            colorDark : "#1e2638",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.M
        });
    }

    function startTimer() {
        clearInterval(timerInterval);
        remainingSeconds = 180;
        updateTimerDisplay();

        timerInterval = setInterval(() => {
            remainingSeconds--;
            updateTimerDisplay();

            if (remainingSeconds <= 0) {
                renderQRCode();
                startTimer();
            }
        }, 1000);
    }

    function updateTimerDisplay() {
        const minutes = Math.floor(remainingSeconds / 60);
        const seconds = remainingSeconds % 60;
        const display = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        const timerElem = document.getElementById("timerCountdown");
        if (timerElem) {
            timerElem.innerText = display;
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        renderQRCode();
        startTimer();
    });
</script>
@endpush