@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.91:1) OG 표준 비율 완벽 고정 */
    .ticket-banner-header {
        position: relative;
        width: 100%;
        aspect-ratio: 1200 / 630; /* 또는 1.905 / 1 */
        background-color: var(--primary-color);
        overflow: hidden;
    }

    .ticket-banner-header img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* 1200x630 이미지 등록 시 여백 없이 1:1 완벽 피팅 */
        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.05) 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
        $program = $ticket->orderItem->program ?? null;
        $rawImage = null;

        if ($program) {
            $possibleColumns = [
                'mobile_banner_path', 'og_image_url', 'og_image_path',
                'banner_path', 'banner_image', 'thumbnail', 'image', 'file_path'
            ];
            foreach ($possibleColumns as $col) {
                if (!empty($program->$col)) {
                    $rawImage = $program->$col;
                    break;
                }
            }
        }
        
        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;
        }

        $rawTicketCode = $ticket->ticket_code ?? $ticket->id;
        $formattedTicketCode = implode('-', str_split($rawTicketCode, 4));

        $ticketStatus = strtolower(trim($ticket->status ?? 'active'));
        $statusLabels = [
            'active'    => '사용 가능',
            'exhausted' => '사용 완료',
            'expired'   => '기간 만료',
            'cancelled' => '취소됨',
        ];
        $statusText = $statusLabels[$ticketStatus] ?? '사용 가능';

        if ($ticketStatus === 'active') {
            $statusBadgeClass = 'badge-state-success';
        } elseif (in_array($ticketStatus, ['exhausted', 'expired'])) {
            $statusBadgeClass = 'badge-state-warning';
        } else {
            $statusBadgeClass = 'badge-state-danger';
        }
    @endphp

    <!-- 뒤로가기 네비게이션 헤더 바 -->
    <div class="d-flex justify-content-between align-items-center mb-3 px-1">
        <a href="{{ route('mypage.tickets.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 {{ $statusBadgeClass }} fs-xs px-2 py-1">
            {{ $statusText }}
        </span>
    </div>

    <!-- 모바일 티켓 패스 카드 -->
    <div class="card ticket-card-wrap shadow-sm mb-3">

        <!-- 1. 상단 티켓 헤더 (배경 이미지 오버레이 또는 브랜드 딥 브론즈 배경) -->
        @if($programImage)
            <div class="ticket-banner-header">
                <img src="{{ $programImage }}" 
                     alt="{{ $program->name ?? '프로그램 이미지' }}" 
                     onerror="this.style.display='none';">
                <div class="ticket-banner-overlay">
                    <span class="badge bg-white text-dark px-2.5 py-1 fw-bold mb-1.5 align-self-start fs-xs" style="border-radius: var(--radius-fixed);">
                        GLOBEAU OFFICIAL TICKET
                    </span>
                    <h5 class="fw-bold text-white mb-0 text-clamp-2 fs-5" title="{{ $program->name ?? '프리미엄 뷰티 프로그램' }}">
                        {{ $program->name ?? '프리미엄 뷰티 프로그램' }}
                    </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 TICKET
                </span>
                <h5 class="fw-bold mb-1 fs-5 text-clamp-2">
                    {{ $program->name ?? '프리미엄 뷰티 프로그램' }}
                </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">
                    {{ $formattedTicketCode }}
                </span>
            </div>
        </div>

        <!-- 3. 티켓 상세 이용 정보 -->
        <div class="p-4 bg-white">
            <h6 class="fw-bold text-dark mb-3 pb-2 border-bottom fs-base">티켓 이용 상세 정보</h6>
            
            <div class="d-flex flex-column gap-3 fs-sm">
                <div class="d-flex justify-content-between align-items-center">
                    <span class="text-muted">티켓 상태</span>
                    <span class="badge px-3 py-1 fw-semibold fs-xs {{ $statusBadgeClass }}">
                        {{ $statusText }}
                    </span>
                </div>

                <div class="d-flex justify-content-between align-items-center">
                    <span class="text-muted">구매 수량</span>
                    <span class="text-dark fw-medium">{{ $ticket->orderItem->quantity ?? 1 }}매</span>
                </div>

                <div class="d-flex justify-content-between align-items-center">
                    <span class="text-muted">결제 주문번호</span>
                    <span class="text-dark fw-medium font-monospace">{{ $ticket->orderItem->order->order_code ?? '-' }}</span>
                </div>

                <div class="d-flex justify-content-between align-items-center">
                    <span class="text-muted">예약/구매 일시</span>
                    <span class="text-dark fw-medium">{{ $ticket->created_at ? $ticket->created_at->format('Y.m.d H:i') : '-' }}</span>
                </div>

                @if($ticket->expires_at)
                <div class="d-flex justify-content-between align-items-center">
                    <span class="text-muted">유효 만료일</span>
                    <span class="text-danger fw-medium">{{ \Carbon\Carbon::parse($ticket->expires_at)->format('Y.m.d') }} 까지</span>
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- 하단 액션 버튼 영역 -->
    <div class="text-center d-flex flex-column flex-sm-row justify-content-center gap-2 mb-3">
        <a href="{{ route('mypage.tickets.list') }}" class="btn btn-premium px-4 py-2 fw-semibold fs-sm">
            보유 티켓 목록
        </a>
        <a href="{{ $ticket->orderItem && $ticket->orderItem->order_id ? route('mypage.orders.show', $ticket->orderItem->order_id) : route('mypage.orders.index') }}" 
           class="btn btn-outline-secondary px-4 py-2 fw-semibold fs-sm" style="border-radius: var(--radius-fixed);">
            주문 상세로 돌아가기
        </a>
    </div>
</div>
@endsection

@push('scripts')
<!-- QR 코드 생성을 위한 CDN 및 동적 갱신 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const ticketId = "{{ $ticket->id }}";
        const qrContainer = document.getElementById("qrcode");
        const timerElement = document.getElementById("timerCountdown");
        let qrcodeInstance = null;
        let countdownInterval = null;

        function fetchDynamicQR() {
            fetch(`/mypage/tickets/${ticketId}/dynamic-token`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        qrContainer.innerHTML = "";
                        qrcodeInstance = new QRCode(qrContainer, {
                            text: data.payload,
                            width: 160,
                            height: 160,
                            colorDark: "#1e2638",
                            colorLight: "#ffffff",
                            correctLevel: QRCode.CorrectLevel.H
                        });

                        let remainingSeconds = data.expires_in;
                        startTimer(remainingSeconds);
                    }
                })
                .catch(error => console.error("QR 갱신 실패:", error));
        }

        function startTimer(duration) {
            clearInterval(countdownInterval);
            let timer = duration;

            countdownInterval = setInterval(function () {
                let minutes = parseInt(timer / 60, 10);
                let seconds = parseInt(timer % 60, 10);

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                if (timerElement) {
                    timerElement.textContent = minutes + ":" + seconds;
                }

                if (--timer < 0) {
                    clearInterval(countdownInterval);
                    fetchDynamicQR();
                }
            }, 1000);
        }

        fetchDynamicQR();
    });
</script>
@endpush