@extends('layouts.app-sub')

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

@section('content')

<!-- 1. 상단 프로필 및 멤버십 카드 -->
<div class="card profile-card shadow-sm mb-4">
    <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 fs-4 shadow-sm overflow-hidden">
                @if ($user->profile_photo_path)
                <img src="{{ asset('storage/' . $user->profile_photo_path) }}"
                    alt="{{ $user->name }}"
                    class="w-100 h-100"
                    style="object-fit: cover;">
                @else
                {{ mb_substr($user->name, 0, 1) }}
                @endif
            </div>
            <div class="min-w-0 flex-grow-1">
                <!-- 미니 뱃지 (fs-xs) -->
                <div class="mb-1">
                    <span class="badge bg-white text-dark px-2 py-1 fw-semibold fs-xs badge-rounded">
                        PREMIUM MEMBER
                    </span>
                </div>
                <!-- 사용자 이름 (fs-5) -->
                <h4 class="fw-bold mb-1 text-white fs-5 text-truncate">
                    {{ $user->name }} <span class="fs-6 fw-normal text-white-50">님</span>
                </h4>
                <!-- 이메일 (small) -->
                <div class="text-white-50 small text-truncate">{{ $user->email }}</div>
            </div>
        </div>

        <!-- 계정 액션 버튼 그룹 (small) -->
        <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 small">
                    <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 small">
                        <i class="fas fa-sign-out-alt me-1"></i> 로그아웃
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 2. 핵심 자산 요약 위젯 -->
<div class="row g-3 mb-4">
    <!-- 모바일 티켓 -->
    <div class="col-6 col-md-3">
        <a href="{{ route('mypage.tickets.index') }}" class="card stat-card 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-dark mb-0 fs-5">
                    {{ $stats['active_tickets_count'] ?? 0 }}<span class="fw-normal text-muted fs-xs ms-1">개</span>
                </h4>
            </div>
            <span class="text-muted fw-semibold fs-sm">모바일 티켓</span>
        </a>
    </div>

    <!-- 최근 주문 -->
    <div class="col-6 col-md-3">
        <a href="{{ route('mypage.orders.index') }}" class="card stat-card 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-shopping-bag"></i></div>
                <h4 class="fw-bold text-dark mb-0 fs-5">
                    {{ $stats['total_orders'] ?? 0 }}<span class="fw-normal text-muted fs-xs ms-1">건</span>
                </h4>
            </div>
            <span class="text-muted fw-semibold fs-sm">최근 주문</span>
        </a>
    </div>

    <!-- 보유 포인트 -->
    <div class="col-6 col-md-3">
        <a href="#" class="card stat-card 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($user->points ?? 0) }}<span class="fw-normal text-muted fs-xs ms-1">P</span>
                </h4>
            </div>
            <span class="text-muted fw-semibold fs-sm">보유 포인트</span>
        </a>
    </div>

    <!-- 할인 쿠폰 -->
    <div class="col-6 col-md-3">
        <a href="#" class="card stat-card 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-percent"></i></div>
                <h4 class="fw-bold text-dark mb-0 fs-5">
                    {{ $user->coupons_count ?? 0 }}<span class="fw-normal text-muted fs-xs ms-1">장</span>
                </h4>
            </div>
            <span class="text-muted fw-semibold fs-sm">할인 쿠폰</span>
        </a>
    </div>
</div>

<!-- 3. 상세 메뉴 바로가기 그리드 (2열 그리드) -->
<div class="row g-3 mb-4">
    <!-- 예약 및 티켓 관리 -->
    <div class="col-12 col-md-6">
        <a href="{{ route('mypage.reservations') }}" 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>
                        <h6 class="fw-bold mb-1 fs-6 text-dark">예약 및 티켓 관리</h6>
                        <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">
                        <i class="fas fa-receipt fs-5"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1 fs-6 text-dark">주문 및 결제 내역</h6>
                        <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="#" 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-wallet fs-5"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1 fs-6 text-dark">포인트 및 쿠폰</h6>
                        <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="#" 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-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>

@endsection