@extends('layouts.app-sub')

@section('title', '마이페이지 - GLOBEAU')
@section('header-title', '마이페이지')

@section('content')
<div class="mypage-dashboard py-2">

    <!-- ========================================================
         1. 상단 프로필 및 멤버십 카드 (.profile-card 사용)
         ======================================================== -->
    <div class="card profile-card shadow-sm mb-3">
        <div class="row align-items-center">
            <!-- 프로필 정보 -->
            <div class="col-12 col-md-8 d-flex align-items-center gap-3 mb-3 mb-md-0">
                <div class="profile-avatar shadow-sm">
                    @if (!empty($user->profile_photo_path))
                        <img src="{{ asset('storage/' . $user->profile_photo_path) }}"
                             alt="{{ $user->name }}">
                    @else
                        <span class="fs-4 fw-bold text-brand">{{ mb_substr($user->name, 0, 1) }}</span>
                    @endif
                </div>
                
                <div class="min-w-0 flex-grow-1">
                    <div class="mb-1">
                        <span class="badge bg-white text-dark px-2 py-0.5 fw-bold fs-xs">
                            {{ $user->membership_level ?? 'PREMIUM MEMBER' }}
                        </span>
                    </div>
                    <h4 class="fw-bold mb-0 text-white fs-5 text-truncate">
                        {{ $user->name }} <span class="fs-6 fw-normal text-white-50">님</span>
                    </h4>
                    <div class="text-white-50 fs-xs text-truncate mt-1">{{ $user->email }}</div>
                </div>
            </div>

            <!-- 계정 액션 버튼 그룹 -->
            <div class="col-12 col-md-4">
                <div class="d-flex flex-row gap-2 w-100">
                    <a href="{{ route('mypage.profile.edit') }}"
                       class="btn btn-outline-light btn-sm btn-profile-action flex-fill border-opacity-50 fs-xs">
                        <i class="fas fa-user-cog me-1"></i> 정보수정
                    </a>
                    <form action="{{ route('logout') }}" method="POST" class="flex-fill mb-0">
                        @csrf
                        <button type="submit"
                                class="btn btn-outline-light btn-sm btn-profile-action w-100 border-opacity-50 fs-xs">
                            <i class="fas fa-sign-out-alt me-1"></i> 로그아웃
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- ========================================================
         2. [최우선 액션 카드] 가장 빠른 방문 일정 (.mypage-ticket-pass)
         ======================================================== -->
    @if(isset($upcomingReservation) && $upcomingReservation)
        @php
            $ticketItem = $upcomingReservation->userTicketItem;
            $ticket = $ticketItem?->userTicket;
            $program = $ticketItem?->program ?? ($ticket?->orderItem?->program ?? null);
            $programName = $program?->name ?? ($ticketItem?->program_name ?? '프리미엄 뷰티 프로그램');

            // DB 원본 문자열('2026-09-20 18:00:00') 직접 파싱
            $rawReservedAt = $upcomingReservation->getAttributes()['reserved_at'];
            $carbonDate = \Carbon\Carbon::parse($rawReservedAt);
            
            // 날짜 및 시간 분리 추출 (시간 유실 원천 차단)
            $displayMonth = $carbonDate->translatedFormat('M'); // 예: 9월
            $displayDay   = $carbonDate->format('d');            // 예: 20
            $displayTime  = date('H:i', strtotime($rawReservedAt)); // 🌟 무조건 '18:00' 고정 추출
            
            $diffDays = (int) now()->startOfDay()->diffInDays($carbonDate->startOfDay(), false);

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

        <div class="card mypage-ticket-pass shadow-sm mb-3">
            <!-- 상단 라인: D-Day & 고정 상태 라벨 -->
            <div class="mypage-ticket-header">
                <div class="d-flex align-items-center gap-2">
                    <span class="badge {{ $upcomingReservation->status === \App\Models\Reservation::STATUS_CONFIRMED ? 'badge-state-success' : 'badge-state-warning' }} px-2 py-0.5 fw-bold fs-xs">
                        <i class="fas {{ $upcomingReservation->status === \App\Models\Reservation::STATUS_CONFIRMED ? 'fa-check-circle' : 'fa-clock' }} me-1"></i>
                        {{ $upcomingReservation->status_label }}
                    </span>
					@if($upcomingReservation->status === \App\Models\Reservation::STATUS_PENDING)
			
								<button type="button" 
                                        class="btn btn-sm btn-warning btn-icon-circle" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#pendingGuideModal"
										title="예약 안내 확인">
                                    <i class="fas fa-question"></i>
                                </button>						
                    @endif
                </div>

                <span class="badge badge-soft-primary fs-xs fw-bold px-2 py-1">
                    @if($diffDays === 0)
                        오늘 방문
                    @elseif($diffDays === 1)
                        내일 방문 (D-1)
                    @elseif($diffDays > 1)
                        D-{{ $diffDays }}
                    @else
                        방문 임박
                    @endif
                </span>
            </div>

            <!-- 본문: 날짜 큐브 + 프로그램 정보 -->
            <div class="mypage-ticket-body">
                <div class="d-flex align-items-start gap-3">
                    
                    <!-- 날짜 큐브 블록 (시간: 18:00 선명하고 굵은 다크 폰트) -->
                    <div class="date-cube">
                        <span class="date-cube-month">{{ $displayMonth }}</span>
                        <span class="date-cube-day">{{ $displayDay }}</span>
                        <span class="date-cube-time fw-bold text-nowrap" style="color: var(--primary-dark) !important; font-size: 0.8rem !important;">
                            {{ $displayTime }}
                        </span>
                    </div>

                    <!-- 상세 정보 (최대 2줄 말줄임 적용) -->
                    <div class="min-w-0 flex-grow-1">
                        <!-- 프로그램명: 최대 2줄 말줄임 (.text-clamp-2) -->
                        <h6 class="fw-bold text-dark fs-6 mb-1 text-clamp-2" title="{{ $programName }}">
                            {{ $programName }}
                        </h6>

                        <!-- 매장명 -->
                        <div class="d-flex align-items-center text-muted fs-xs mb-1 text-truncate">
                            <i class="fas fa-store me-1 text-brand"></i>
                            <span class="fw-semibold text-dark me-1">{{ $upcomingReservation->shop->name ?? '지정 제휴 뷰티샵' }}</span>
                        </div>

                        <!-- 매장 주소 -->
                        @if(!empty($upcomingReservation->shop?->address1))
                        <div class="text-muted fs-xs text-truncate mb-1">
                            <i class="fas fa-map-marker-alt me-1 text-danger opacity-75"></i>
                            {{ $upcomingReservation->shop->address1 }}
                        </div>
                        @endif

                        <!-- 주소 아래 위치한 4자리 하이픈 예약번호 -->
                        <div class="text-muted fs-xs font-monospace">
                            <i class="fas fa-receipt me-1 text-brand opacity-75"></i>
                            <span>예약번호: <strong>{{ $formattedReservationCode }}</strong></span>
                        </div>
                    </div>
                </div>

                <!-- 하단 액션 버튼 -->
                <div class="d-flex gap-2 mt-3 pt-2 border-top">
                    <a href="{{ route('mypage.reservations.show', $upcomingReservation->id) }}" 
                       class="btn btn-outline-premium btn-sm flex-fill fs-xs py-2">
                        예약 상세 · 일정 취소
                    </a>
                    @if(!empty($upcomingReservation->shop?->tel))
                    <a href="tel:{{ $upcomingReservation->shop->tel }}" 
                       class="btn btn-premium btn-sm px-3 fs-xs py-2 d-inline-flex align-items-center gap-1">
                        <i class="fas fa-phone-alt fs-xs"></i>
                        <span>매장 통화</span>
                    </a>
                    @endif
                </div>
            </div>
        </div>
    @endif

    <!-- ========================================================
         3. 디지털 지갑 바 & 핵심 자산 위젯 (.mypage-asset-stat)
         ======================================================== -->
    <div class="row g-2 mb-3">
        <!-- ① 글로뷰 페이 (할인 충전 결제 대비) -->
        <div class="col-6 col-md-3">
            <div class="mypage-asset-stat shadow-sm hover-lift">
                <div class="d-flex align-items-center justify-content-center gap-2 mb-1 w-100">
                    <div class="stat-card-icon"><i class="fas fa-coins"></i></div>
                    <h4 class="fw-bold text-dark mb-0 fs-5">
                        {{ number_format($wallet['pay_balance'] ?? 0) }}<span class="fw-normal text-muted fs-xs ms-1">원</span>
                    </h4>
                </div>
                <div class="mypage-asset-footer">
                    <span class="text-muted fw-semibold fs-xs">글로뷰 페이</span>
                    <a href="#" class="badge badge-soft-primary text-decoration-none px-1.5 py-0.5 fs-xs">+ 충전</a>
                </div>
            </div>
        </div>

        <!-- ② 보유 포인트 -->
        <div class="col-6 col-md-3">
            <a href="#" class="mypage-asset-stat shadow-sm hover-lift">
                <div class="d-flex align-items-center justify-content-center gap-2 mb-1 w-100">
                    <div class="stat-card-icon bg-soft-orange">
                        <i class="fas fa-donate"></i>
                    </div>
                    <h4 class="fw-bold text-dark mb-0 fs-5">
                        {{ number_format($user->points ?? ($wallet['point_balance'] ?? 0)) }}<span class="fw-normal text-muted fs-xs ms-1">P</span>
                    </h4>
                </div>
                <div class="mypage-asset-footer">
                    <span class="text-muted fw-semibold fs-xs">보유 포인트</span>
                    <span class="text-muted fs-xs"><i class="fas fa-chevron-right" style="font-size: 8px;"></i></span>
                </div>
            </a>
        </div>

        <!-- ③ 디지털 티켓 (가용 회차) -->
        <div class="col-6 col-md-3">
            <a href="{{ route('mypage.tickets') }}" class="mypage-asset-stat active-ticket shadow-sm hover-lift">
                <div class="d-flex align-items-center justify-content-center gap-2 mb-1 w-100">
                    <div class="stat-card-icon"><i class="fas fa-ticket-alt"></i></div>
                    <h4 class="fw-bold text-brand mb-0 fs-5">
                        {{ $stats['active_tickets_count'] ?? ($ticketSummary['remaining_slots'] ?? 0) }}<span class="fw-normal text-muted fs-xs ms-1">회</span>
                    </h4>
                </div>
                <div class="mypage-asset-footer">
                    <span class="text-brand fw-bold fs-xs">디지털 티켓</span>
                    <span class="text-brand fs-xs fw-bold">사용하기 <i class="fas fa-chevron-right" style="font-size: 8px;"></i></span>
                </div>
            </a>
        </div>

        <!-- ④ 할인 쿠폰 -->
        <div class="col-6 col-md-3">
            <a href="#" class="mypage-asset-stat shadow-sm hover-lift">
                <div class="d-flex align-items-center justify-content-center gap-2 mb-1 w-100">
                    <div class="stat-card-icon bg-soft-success">
                        <i class="fas fa-percent"></i>
                    </div>
                    <h4 class="fw-bold text-dark mb-0 fs-5">
                        {{ $user->coupons_count ?? ($wallet['coupon_count'] ?? 0) }}<span class="fw-normal text-muted fs-xs ms-1">장</span>
                    </h4>
                </div>
                <div class="mypage-asset-footer">
                    <span class="text-muted fw-semibold fs-xs">할인 쿠폰</span>
                    <span class="text-muted fs-xs"><i class="fas fa-chevron-right" style="font-size: 8px;"></i></span>
                </div>
            </a>
        </div>
    </div>

    <!-- ========================================================
         4. 상세 메뉴 바로가기 그리드 (.menu-card)
         ======================================================== -->
    <div class="row g-3 mb-4">
        <!-- ① 방문 예약 내역 -->
        <div class="col-12 col-md-6">
            <a href="{{ route('mypage.reservations.list') }}" class="card menu-card shadow-sm hover-card">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center gap-3">
                        <div class="menu-card-icon">
                            <i class="fas fa-calendar-check fs-5"></i>
                        </div>
                        <div>
                            <div class="d-flex align-items-center gap-2 mb-1">
                                <h6 class="fw-bold mb-0 fs-6 text-dark">방문 예약 내역</h6>
                                @if(($stats['active_reservations_count'] ?? ($reservationSummary['active_count'] ?? 0)) > 0)
                                    <span class="badge badge-state-warning fs-xs px-2 py-0.5">
                                        {{ $stats['active_reservations_count'] ?? ($reservationSummary['active_count'] ?? 0) }}건 진행중
                                    </span>
                                @endif
                            </div>
                            <p class="text-muted small mb-0">신청 접수 일정 조회 및 변경/취소 관리</p>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-muted opacity-50 fs-sm"></i>
                </div>
            </a>
        </div>

        <!-- ② 디지털 티켓 보관함 -->
        <div class="col-12 col-md-6">
            <a href="{{ route('mypage.tickets') }}" class="card menu-card shadow-sm hover-card">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center gap-3">
                        <div class="menu-card-icon">
                            <i class="fas fa-ticket-alt fs-5"></i>
                        </div>
                        <div>
                            <div class="d-flex align-items-center gap-2 mb-1">
                                <h6 class="fw-bold mb-0 fs-6 text-dark">디지털 티켓 보관함</h6>
                                @if(($stats['active_tickets_count'] ?? ($ticketSummary['remaining_slots'] ?? 0)) > 0)
                                    <span class="badge badge-soft-primary fs-xs px-2 py-0.5">
                                        {{ $stats['active_tickets_count'] ?? ($ticketSummary['remaining_slots'] ?? 0) }}회 잔여
                                    </span>
                                @endif
                            </div>
                            <p class="text-muted small mb-0">보유 회차 확인 및 뷰티샵 방문 예약 신청</p>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-muted opacity-50 fs-sm"></i>
                </div>
            </a>
        </div>

        <!-- ③ 상품 주문 및 배송/결제 조회 -->
        <div class="col-12 col-md-6">
            <a href="{{ route('mypage.orders.index') }}" class="card menu-card shadow-sm hover-card">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center gap-3">
                        <div class="menu-card-icon bg-soft-sky">
                            <i class="fas fa-shopping-bag fs-5"></i>
                        </div>
                        <div>
                            <div class="d-flex align-items-center gap-2 mb-1">
                                <h6 class="fw-bold mb-0 fs-6 text-dark">주문 및 배송 조회</h6>
                                @if(($stats['total_orders'] ?? 0) > 0)
                                    <span class="badge badge-soft-secondary fs-xs px-2 py-0.5">
                                        {{ $stats['total_orders'] }}건
                                    </span>
                                @endif
                            </div>
                            <p class="text-muted small mb-0">뷰티 케어 제품 주문 내역 및 실시간 배송 추적</p>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-muted opacity-50 fs-sm"></i>
                </div>
            </a>
        </div>

        <!-- ④ 고객센터 및 1:1 문의 -->
        <div class="col-12 col-md-6">
            <a href="#" class="card menu-card shadow-sm hover-card">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center gap-3">
                        <div class="menu-card-icon bg-soft-dark">
                            <i class="fas fa-headset fs-5"></i>
                        </div>
                        <div>
                            <h6 class="fw-bold mb-1 fs-6 text-dark">고객센터 및 문의</h6>
                            <p class="text-muted small mb-0">자주 묻는 질문, 공지사항 및 1:1 상담 내역</p>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-muted opacity-50 fs-sm"></i>
                </div>
            </a>
        </div>
    </div>

</div>
@endsection

<!-- ========================================================
     예약 접수 확인중 안내 모달 (#pendingGuideModal)
     ======================================================== -->
<div class="modal fade" id="pendingGuideModal" tabindex="-1" aria-labelledby="pendingGuideModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 420px;">
        <div class="modal-content border-0 shadow" style="border-radius: var(--radius-fixed);">
            
            <!-- 모달 헤더: 타이틀 17.6px (fs-md)로 큼직하고 시원하게 -->
            <div class="modal-header border-0 pb-0 pt-4 px-4">
                <div class="d-flex align-items-center gap-2">
                    <span class="d-flex align-items-center justify-content-center" 
                          style="width: 36px; height: 36px; border-radius: var(--radius-fixed); background: rgba(217, 119, 6, 0.1); color: var(--color-warning);">
                        <i class="fas fa-clock fs-6"></i>
                    </span>
                    <h5 class="modal-title fw-bold text-dark mb-0 fs-md" id="pendingGuideModalLabel">
                        예약 접수 확인 안내
                    </h5>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- 모달 본문: 가독성 대폭 향상 -->
            <div class="modal-body px-4 py-3">
                
                <!-- 중요 알림 박스: 15.2px(fs-base)로 선명하게 강조 -->
                <div class="p-3 mb-3" style="background-color: var(--color-gray-bg); border-radius: var(--radius-fixed); border: 1px solid var(--border-default);">
                    <div class="text-dark fw-bold mb-1 fs-base">
                        <i class="fas fa-exclamation-circle text-warning me-1"></i> 현재는 '예약 확정' 상태가 아닙니다
                    </div>
                    <p class="text-secondary mb-0 fs-sm" style="line-height: 1.5;">
                        고객님의 예약 신청건을 제휴 뷰티샵 담당자가 스케줄 확인 중입니다. 매장 사정에 따라 일정 조율 또는 반려될 수 있습니다.
                    </p>
                </div>

                <!-- 안내 항목: 13.6px(fs-sm)와 편안한 줄간격(line-height: 1.5) -->
                <ul class="list-unstyled mb-0 d-flex flex-column gap-2 ps-1">
                    <li class="d-flex align-items-start gap-2 fs-sm text-secondary" style="line-height: 1.5;">
                        <i class="fas fa-check-circle text-brand mt-1 flex-shrink-0"></i>
                        <span>매장에서 스케줄을 승인하면 즉시 <strong>'예약 확정'</strong>으로 상태가 변경됩니다.</span>
                    </li>
                    <li class="d-flex align-items-start gap-2 fs-sm text-secondary" style="line-height: 1.5;">
                        <i class="fas fa-check-circle text-brand mt-1 flex-shrink-0"></i>
                        <span>확정 전까지는 고객님께서 언제든지 위약금 없이 <strong>직접 취소</strong>하실 수 있습니다.</span>
                    </li>
                </ul>
            </div>

            <!-- 모달 푸터: 버튼 글씨도 14px(fs-sm)로 큼직하게 -->
            <div class="modal-footer border-0 pt-0 pb-4 px-4">
                <button type="button" class="btn btn-premium w-100 fs-sm fw-bold py-2" data-bs-dismiss="modal">
                    확인했습니다
                </button>
            </div>

        </div>
    </div>
</div>

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