@extends('layouts.app-sub')

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

@section('content')
@php
    $unreadCount = $unreadCount ?? (Auth::check() ? Auth::user()->unreadNotifications()->count() : 0);
    $latestShop = $latestShop ?? (Auth::check() ? \App\Models\Shop::where('user_id', Auth::id())
        ->orWhere(function($query) {
            if (!empty(Auth::user()->phone)) {
                $query->where('ceo_phone', Auth::user()->phone);
            }
        })
        ->latest('id')
        ->first() : null);
@endphp

<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-7 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-5">
                <div class="d-flex flex-row gap-2 w-100">
                    <!-- 알림함 바로가기 버튼 (N 배지 연동) -->
                    <a href="{{ route('mypage.notifications.index') }}" 
                       class="btn btn-outline-light btn-sm btn-profile-action flex-fill border-opacity-50 fs-xs position-relative">
                        <i class="fas fa-bell me-1"></i> 알림함
                        @if($unreadCount > 0)
                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger border border-white" style="font-size: 0.6rem; padding: 0.25em 0.45em;">
                                {{ $unreadCount > 99 ? '99+' : $unreadCount }}
                            </span>
                        @endif
                    </a>

                    <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. [비즈니스 센터] 뷰티샵 파트너 입점 및 심사 상태 위젯
         ======================================================== -->
    @if($latestShop)
        <div class="card border-0 shadow-sm mb-3 overflow-hidden" style="border-radius: var(--radius-fixed);">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between gap-2 flex-wrap">
                    <div class="d-flex align-items-center gap-2.5">
                        <div class="d-flex align-items-center justify-content-center rounded" 
                             style="width: 42px; height: 42px; background: #faf8f6;">
                            <i class="fas fa-store-alt text-brand fs-5"></i>
                        </div>
                        <div>
                            <div class="d-flex align-items-center gap-1.5 mb-0.5">
                                <span class="badge bg-light text-brand border border-brand-subtle px-2 py-0.5 fw-bold fs-xs">비즈니스 파트너</span>
                                <h6 class="fw-bold text-dark mb-0 fs-6">{{ $latestShop->name }}</h6>
                            </div>
                            <div class="text-muted fs-xs">
                                @if($latestShop->status === 'pending')
                                    <span>현재 본사 입점 적격 심사가 진행 중입니다.</span>
                                @elseif($latestShop->status === 'rejected')
                                    <span class="text-danger">입점 서류 또는 정보 보완이 필요합니다.</span>
                                @elseif($latestShop->status === 'approved')
                                    <span class="text-success">글로뷰 공식 제휴 뷰티샵 인증 매장</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- 상태별 액션 버튼 -->
                    <div>
                        @if($latestShop->status === 'pending')
                            <a href="{{ route('shops.status', $latestShop->code) }}" class="btn btn-sm btn-warning text-dark px-3 py-1.5 fw-semibold fs-xs" style="border-radius: var(--radius-fixed);">
                                <i class="fas fa-hourglass-half me-1"></i> 심사 현황 확인
                            </a>
                        @elseif($latestShop->status === 'rejected')
                            <a href="{{ route('shops.status', $latestShop->id) }}" class="btn btn-sm btn-outline-danger px-3 py-1.5 fw-semibold fs-xs" style="border-radius: var(--radius-fixed);">
                                <i class="fas fa-exclamation-circle me-1"></i> 반려 사유 확인
                            </a>
                        @elseif($latestShop->status === 'approved')
                            <a href="{{ route('shop_admin.index') }}" target="_blank" class="btn btn-sm btn-premium px-3 py-1.5 fw-bold fs-xs d-inline-flex align-items-center gap-1" style="border-radius: var(--radius-fixed);">
                                <i class="fas fa-cog"></i> 뷰티샵 관리자 센터
                                <i class="fas fa-external-link-alt ms-0.5 fs-xs"></i>
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @else
        <!-- 미입점 일반회원용 파트너 입점 안내 배너 -->
        <div class="card border-0 shadow-sm mb-3 overflow-hidden" style="border-radius: var(--radius-fixed); background: linear-gradient(135deg, #fdfbf9 0%, #f7f3ef 100%); border-left: 4px solid var(--primary-color) !important;">
            <div class="card-body p-3 d-flex align-items-center justify-content-between gap-2 flex-wrap">
                <div class="d-flex align-items-center gap-2.5">
                    <div class="d-flex align-items-center justify-content-center rounded bg-white shadow-sm" style="width: 40px; height: 40px;">
                        <i class="fas fa-handshake text-brand fs-5"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold text-dark mb-0.5 fs-6">뷰티샵 원장님이신가요?</h6>
                        <p class="text-muted fs-xs mb-0">글로뷰의 엄선된 고객들과 만나고 디지털 예약 관리를 시작해 보세요.</p>
                    </div>
                </div>
                <a href="{{ route('shops.create') }}" class="btn btn-sm btn-premium px-3 py-1.5 fw-bold fs-xs" style="border-radius: var(--radius-fixed);">
                    입점 신청하기 <i class="fas fa-chevron-right ms-1"></i>
                </a>
            </div>
        </div>
    @endif

    <!-- ========================================================
         3. [최우선 액션 카드] 가장 빠른 방문 일정 (.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 ?? '프리미엄 뷰티 프로그램');

            $rawReservedAt = $upcomingReservation->getAttributes()['reserved_at'];
            $carbonDate = \Carbon\Carbon::parse($rawReservedAt);
            
            $displayMonth = $carbonDate->translatedFormat('M');
            $displayDay   = $carbonDate->format('d');
            $displayTime  = date('H:i', strtotime($rawReservedAt));
            
            $diffDays = (int) now()->startOfDay()->diffInDays($carbonDate->startOfDay(), false);

            $rawCode = str_replace('-', '', $upcomingReservation->reservation_code);
            $formattedReservationCode = implode('-', str_split($rawCode, 4));
        @endphp

        <div class="card mypage-ticket-pass shadow-sm mb-3">
            <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">
                    <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>

                    <div class="min-w-0 flex-grow-1">
                        <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

                        <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

    <!-- ========================================================
         4. 디지털 지갑 바 & 핵심 자산 위젯 (.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 text-decoration-none">
                <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 text-decoration-none">
                <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 text-decoration-none">
                <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>

    <!-- ========================================================
         5. 상세 메뉴 바로가기 그리드 (.menu-card)
         ======================================================== -->
    <div class="row g-3 mb-4">
        <!-- ① 알림함 바로가기 (신규 추가) -->
        <div class="col-12 col-md-6">
            <a href="{{ route('mypage.notifications.index') }}" class="card menu-card shadow-sm hover-card text-decoration-none">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center gap-3">
                        <div class="menu-card-icon position-relative" style="background: rgba(177, 137, 119, 0.12); color: var(--primary-color);">
                            <i class="fas fa-bell fs-5"></i>
                            @if($unreadCount > 0)
                                <span class="position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle">
                                    <span class="visually-hidden">새 알림</span>
                                </span>
                            @endif
                        </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($unreadCount > 0)
                                    <span class="badge bg-danger rounded-pill fs-xs px-2 py-0.5">
                                        {{ $unreadCount }}건 안 읽음
                                    </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="{{ $latestShop ? route('shops.status', $latestShop->code) : route('shops.create') }}" class="card menu-card shadow-sm hover-card text-decoration-none">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center gap-3">
                        <div class="menu-card-icon" style="background: rgba(15, 23, 42, 0.08); color: #0f172a;">
                            <i class="fas fa-store 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($latestShop)
                                    @if($latestShop->status === 'approved')
                                        <span class="badge bg-success-subtle text-success fs-xs px-2 py-0.5">정식 제휴</span>
                                    @elseif($latestShop->status === 'pending')
                                        <span class="badge bg-warning-subtle text-warning border border-warning fs-xs px-2 py-0.5">심사중</span>
                                    @elseif($latestShop->status === 'rejected')
                                        <span class="badge bg-danger text-white fs-xs px-2 py-0.5">반려됨</span>
                                    @endif
                                @else
                                    <span class="badge badge-soft-primary fs-xs px-2 py-0.5">입점 신청</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.reservations.list') }}" class="card menu-card shadow-sm hover-card text-decoration-none">
                <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 text-decoration-none">
                <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 text-decoration-none">
                <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 text-decoration-none">
                <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);">
            <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 rounded" 
                          style="width: 36px; height: 36px; 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">
                <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>

                <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>

            <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