@extends('layouts.app-sub')

@section('title', '주문 및 결제 내역 - GLOBEAU')
@section('header-title', '주문 및 결제 내역')

@section('content')
<div class="py-2">
    <!-- 상단 안내문 (정규 간격 mb-3) -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <p class="text-muted small mb-0">최근 3개월간의 상품 및 프로그램 주문·결제 내역입니다.</p>
    </div>

    @if(isset($orders) && $orders->count() > 0)
        <!-- 주문 목록 (정수 gap-3: 16px) -->
        <div class="d-flex flex-column gap-3">
            @foreach($orders as $order)
                @php
                    $firstItem = $order->items->first();
                    $itemType = strtolower(trim($firstItem->item_type ?? 'program'));
                    
                    // 1. 기능 중심 카테고리 배지 클래스 매핑 (.badge-soft-*)
                    if ($itemType === 'product') {
                        $typeName = '상품';
                        $typeBadgeClass = 'badge-soft-secondary';
                        $itemName = $firstItem && $firstItem->product ? $firstItem->product->name : ($firstItem->name ?? '주문 상품');
                    } else {
                        $program = $firstItem ? $firstItem->program : null;
                        $executionType = $program ? $program->execution_type : 'single';

                        if ($executionType === 'package_separate') {
                            $typeName = '스페셜 패키지';
                            $typeBadgeClass = 'badge-soft-purple';
                        } elseif ($executionType === 'package_single') {
                            $typeName = '베이직 패키지';
                            $typeBadgeClass = 'badge-soft-blue';
                        } else {
                            $typeName = '기본 프로그램';
                            $typeBadgeClass = 'badge-soft-primary';
                        }

                        $itemName = $program ? $program->name : ($firstItem->name ?? '예약 프로그램');
                    }
                    
                    $itemCount = $order->items->count();
                    $totalPrice = $order->total_amount ?? $order->total_price ?? 0;

                    // 2. 기능 중심 상태 배지 클래스 매핑 (.badge-state-*)
                    $orderStatus = strtolower(trim($order->status));
                    if (in_array($orderStatus, ['completed', 'paid', 'delivered'])) {
                        $statusClass = 'badge-state-success';
                    } elseif (in_array($orderStatus, ['pending', 'deposit_pending', 'preparing', 'shipping'])) {
                        $statusClass = 'badge-state-warning';
                    } elseif (in_array($orderStatus, ['cancelled', 'failed', 'expired', 'refunded'])) {
                        $statusClass = 'badge-state-danger';
                    } else {
                        $statusClass = 'badge-state-neutral';
                    }
                @endphp

                <!-- 공용 범용 카드: .item-card 및 .hover-lift 적용 -->
                <div class="card item-card shadow-sm hover-lift">
                    <!-- 주문 카드 헤더: 일자 및 주문 상태 -->
                    <div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-2">
                        <span class="text-muted fs-sm">
                            <i class="far fa-calendar-alt me-1"></i>{{ $order->created_at->format('Y.m.d (H:i)') }}
                        </span>
                        <span class="badge px-3 py-1 fw-semibold fs-xs {{ $statusClass }}">
                            {{ $order->status_label }}
                        </span>
                    </div>

                    <!-- 주문 카드 본문: PC 가로 배치 / 모바일 세로 적층 (정수 gap-2) -->
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center py-1 gap-2">
                        <div class="min-w-0 flex-grow-1">
                            <div class="d-flex align-items-center gap-2 mb-1">
                                <span class="badge {{ $typeBadgeClass }} px-2 py-1 fw-bold fs-xs shadow-xs">
                                    {{ $typeName }}
                                </span>
                                <span class="text-muted fs-xs">주문번호: {{ $order->order_code ?? $order->id }}</span>
                            </div>
                            
                            <!-- 공용 2줄 말줄임: .text-clamp-2 -->
                            <div>
                                <h6 class="fw-bold mb-0 text-dark fs-base text-clamp-2">
                                    {{ $itemName }}
                                    @if($itemCount > 1)
                                        <span class="text-muted fw-normal fs-sm ms-1">외 {{ $itemCount - 1 }}건</span>
                                    @endif
                                </h6>
                            </div>
                        </div>

                        <!-- 우측 결제 금액 영역 -->
                        <div class="text-start text-md-end flex-shrink-0">
                            <span class="fw-bold text-dark fs-5">{{ number_format($totalPrice) }}원</span>
                        </div>
                    </div>

                    <!-- 주문 카드 하단: 상세 보기 버튼 (정수 여백 pt-2, mt-2) -->
                    <div class="border-top pt-2 mt-2 text-end">
                        <a href="{{ route('mypage.orders.show', $order->id) }}" 
                           class="btn btn-sm btn-outline-secondary px-3 py-1 fw-semibold fs-xs text-decoration-none">
                            주문 상세 보기 <i class="fas fa-chevron-right ms-1"></i>
                        </a>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- 페이징 영역: 공용 .custom-pagination -->
        @if(method_exists($orders, 'links'))
            <div class="custom-pagination d-flex justify-content-center mt-4">
                {{ $orders->links() }}
            </div>
        @endif

    @else
        <!-- 빈 목록 안내 카드: .item-card -->
        <div class="card item-card shadow-sm p-4 text-center">
            <div class="py-4">
                <div class="text-muted mb-3 fs-1 opacity-50">
                    <i class="fas fa-receipt"></i>
                </div>
                <h6 class="fw-bold text-dark mb-1 fs-6">주문 및 결제 내역이 없습니다.</h6>
                <p class="text-muted small mb-4">원하시는 뷰티 프로그램과 상품을 만나보세요!</p>
                <a href="{{ route('main') }}" class="btn btn-premium px-4 py-2 fw-semibold fs-sm">
                    쇼핑하러 가기
                </a>
            </div>
        </div>
    @endif
</div>
@endsection