@extends('layouts.app-sub')

@section('title', '나의 예약 내역 - GLOBEAU')
@section('header-title', '예약 내역')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/mypage/user_mypage.css') }}">
@endpush

@section('content')
<div class="py-2">
    @if(session('success'))
    <div class="alert alert-success mb-3 fs-sm" style="border-radius: var(--radius-fixed);">
        <i class="fas fa-check-circle me-1"></i> {{ session('success') }}
    </div>
    @endif

    <div class="d-flex justify-content-between align-items-center mb-3 px-1 border-bottom pb-2">
        <h6 class="fw-bold text-dark mb-0 fs-base">
            <i class="fas fa-calendar-check text-brand me-1"></i>나의 방문 예약 내역
        </h6>
        <span class="text-muted fs-xs">총 {{ $reservations->total() ?? $reservations->count() }}건</span>
    </div>

    @if(isset($reservations) && $reservations->count() > 0)
        <div class="d-flex flex-column gap-3">
            @foreach($reservations as $reservation)
                @php
                    $ticketItem = $reservation->userTicketItem;
                    $ticket = $ticketItem?->userTicket;
                    $program = $ticketItem?->program ?? ($ticket?->orderItem?->program ?? null);
                    $programName = $program?->name ?? ($ticketItem?->program_name ?? '프리미엄 뷰티 프로그램');
                    $programId = $program?->id ?? ($ticketItem?->program_id ?? null);

                    // 4자리 단위 하이픈 포맷팅 (예: R260-9125-9635-9333)
                    $rawCode = str_replace('-', '', $reservation->reservation_code);
                    $formattedReservationCode = implode('-', str_split($rawCode, 4));

                    // 시간 유실 방지 및 포맷팅
                    $rawReservedAt = $reservation->getAttributes()['reserved_at'] ?? $reservation->reserved_at;
                    $reservedAtFormatted = \Carbon\Carbon::parse($rawReservedAt)->translatedFormat('Y년 m월 d일 (D) H:i');
                @endphp

                <div class="card shadow-xs border p-3 hover-lift" style="border-radius: var(--radius-fixed); background-color: #ffffff;">
                    <!-- 1. 상단 라인: 상태 배지 + 신청일 -->
                    <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                        <div class="d-flex align-items-center gap-1">
                            <span class="badge {{ $reservation->status_badge_class }} fs-xs px-2 py-1">
                                @if($reservation->status === \App\Models\Reservation::STATUS_PENDING)
                                    <i class="fas fa-spinner fa-spin me-1"></i>
                                @endif
                                {{ $reservation->status_label }}
                            </span>
                        </div>
                        <span class="text-muted fs-xs font-monospace">
                            신청일: {{ $reservation->created_at->format('Y-m-d') }}
                        </span>
                    </div>

                    <!-- 2. 프로그램 타이틀 (누르면 예약 상세현황 show 블레이드로 이동) -->
                    <div class="mb-1">
                        <a href="{{ route('mypage.reservations.show', $reservation->id) }}" 
                           class="text-decoration-none text-dark d-block">
                            <h6 class="fw-bold fs-6 mb-0 text-clamp-2 text-dark hover-opacity d-inline" title="예약 상세 확인">
                                {{ $programName }}
                            </h6>
                            <i class="fas fa-chevron-right fs-xs text-muted ms-1 opacity-75"></i>
                        </a>
                    </div>

                    <!-- 3. 예약번호 & PC 전용 우측 액션 버튼 행 -->
                    <div class="d-flex flex-wrap justify-content-between align-items-center mb-2 pb-1 gap-2">
                        <!-- 예약번호 (좌측) -->
                        <div class="text-muted fs-xs font-monospace">
                            <i class="fas fa-receipt text-brand opacity-75 me-1"></i>
                            <span>예약번호: <strong>{{ $formattedReservationCode }}</strong></span>
                        </div>

                        <!-- 🌟 PC 전용 우측 버튼 그룹 (md 이상 노출: d-none d-md-flex) -->
                        <div class="d-none d-md-flex gap-2">
                            <!-- 프로그램 상세정보 버튼 -->
                            @if($programId && \Illuminate\Support\Facades\Route::has('programs.show'))
                            <a href="{{ route('programs.show', $programId) }}" 
                               class="btn btn-sm btn-light border fs-xs py-1 px-2 text-muted"
                               style="border-radius: var(--radius-fixed);">
                                <i class="fas fa-info-circle me-1"></i> 프로그램 정보
                            </a>
                            @endif

                            <!-- 예약 상세현황 버튼 -->
                            <a href="{{ route('mypage.reservations.show', $reservation->id) }}" 
                               class="btn btn-outline-premium btn-sm fs-xs py-1 px-3">
                                <i class="fas fa-clipboard-list me-1"></i> 예약 상세현황
                            </a>
                        </div>
                    </div>

                    <!-- 4. 예약 매장 및 방문 일시 정보 박스 -->
                    <div class="p-3 mb-2 fs-xs text-muted" style="background-color: var(--color-gray-bg); border-radius: var(--radius-fixed); border: 1px solid var(--border-default);">
                        <div class="mb-1 text-dark fs-sm fw-semibold">
                            <i class="fas fa-store text-brand me-1"></i>
                            {{ $reservation->shop->name ?? '지정 제휴 뷰티샵' }}
                        </div>
                        <div class="mb-1 text-dark">
                            <i class="far fa-clock text-brand me-1"></i>
                            방문 일시: <strong>{{ $reservedAtFormatted }}</strong>
                        </div>
                        @if(!empty($reservation->shop?->address1 ?? $reservation->shop?->address))
                        <div class="text-truncate">
                            <i class="fas fa-map-marker-alt text-danger opacity-75 me-1"></i>
                            {{ $reservation->shop->address1 ?? $reservation->shop->address }}
                        </div>
                        @endif
                    </div>

                    <!-- 5. 반려/거절 사유 안내 (해당 상태일 때만) -->
                    @if($reservation->status === \App\Models\Reservation::STATUS_REJECTED && !empty($reservation->rejection_reason))
                    <div class="alert alert-danger p-2 fs-xs mb-2" style="border-radius: var(--radius-fixed);">
                        <i class="fas fa-exclamation-triangle me-1"></i><strong>반려 사유:</strong> {{ $reservation->rejection_reason }}
                    </div>
                    @endif

                    <!-- 6. 요청사항 메모 -->
                    @if(!empty($reservation->memo))
                    <div class="text-muted fs-xs mb-2 text-truncate">
                        <i class="far fa-comment-dots me-1 text-brand"></i>요청사항: {{ $reservation->memo }}
                    </div>
                    @endif

                    <!-- 7. 🌟 모바일 전용 하단 액션 버튼 영역 (md 이상 숨김: d-md-none) -->
                    <div class="d-flex d-md-none gap-2 pt-2 border-top mt-1">
                        <!-- 예약 상세현황 버튼 -->
                        <a href="{{ route('mypage.reservations.show', $reservation->id) }}" 
                           class="btn btn-outline-premium btn-sm flex-fill fs-xs py-2 text-center">
                            <i class="fas fa-clipboard-list me-1"></i> 예약 상세현황
                        </a>

                        <!-- 프로그램 상세정보 버튼 -->
                        @if($programId && \Illuminate\Support\Facades\Route::has('programs.show'))
                        <a href="{{ route('programs.show', $programId) }}" 
                           class="btn btn-sm btn-light border flex-fill fs-xs py-2 text-center text-muted"
                           style="border-radius: var(--radius-fixed);">
                            <i class="fas fa-info-circle me-1"></i> 프로그램 정보
                        </a>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        <!-- 페이지네이션 -->
        @if(method_exists($reservations, 'links'))
        <div class="mt-4 d-flex justify-content-center">
            {{ $reservations->links() }}
        </div>
        @endif
    @else
        <!-- 빈 상태 안내 -->
        <div class="text-center py-5 text-muted">
            <i class="far fa-calendar-times fa-3x mb-3 text-muted opacity-50"></i>
            <p class="fs-sm mb-3">신청하신 예약 내역이 없습니다.</p>
            <a href="{{ route('mypage.tickets.index') }}" class="btn btn-premium btn-sm px-3 py-2">
                보유 티켓으로 예약하기
            </a>
        </div>
    @endif
</div>
@endsection