{{-- resources/views/storefront/orders.blade.php --}}
@extends('storefront.layout')

@section('title', trans_key('storefront.pageTitles.orders').' - '.config('app.name', 'FreshMart'))

@section('content')
<style>
.fm-orders-page {
    padding: 12px 0 20px;
}

.fm-orders-header {
    margin-bottom: 16px;
}

.fm-orders-header h1 {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    color: var(--fm-text);
}

.fm-orders-header p {
    font-size: 14px;
    color: var(--fm-text-secondary);
    margin: 4px 0 0;
}

.fm-order-card {
    background: var(--fm-card-bg);
    border-radius: var(--fm-radius);
    padding: 16px;
    margin-bottom: 10px;
    box-shadow: var(--fm-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform var(--fm-transition), box-shadow var(--fm-transition);
}

.fm-order-card:active {
    transform: scale(0.98);
}

.fm-order-card-left {
    flex: 1;
    min-width: 0;
}

.fm-order-card-left strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--fm-text);
    display: block;
}

.fm-order-card-left .fm-order-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--fm-primary);
}

.fm-order-card-left .fm-order-meta {
    font-size: 13px;
    color: var(--fm-text-secondary);
    margin: 2px 0;
}

.fm-order-card-left .fm-order-store {
    font-size: 13px;
    font-weight: 500;
    color: var(--fm-text);
}

.fm-order-card-right {
    text-align: right;
    flex-shrink: 0;
    margin-left: 12px;
}

.fm-order-card-right .fm-order-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--fm-text);
    display: block;
}

.fm-order-card-right .fm-order-status {
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    padding: 2px 12px;
    border-radius: var(--fm-radius-full);
}

.fm-order-card-right .fm-order-status--placed { background: #e0f2fe; color: #0369a1; }
.fm-order-card-right .fm-order-status--confirmed { background: #dbeafe; color: #1d4ed8; }
.fm-order-card-right .fm-order-status--preparing { background: #fef3c7; color: #b45309; }
.fm-order-card-right .fm-order-status--out_for_delivery { background: #ede9fe; color: #6d28d9; }
.fm-order-card-right .fm-order-status--delivered { background: #d1fae5; color: #065f46; }
.fm-order-card-right .fm-order-status--completed { background: #d1fae5; color: #065f46; }
.fm-order-card-right .fm-order-status--cancelled { background: #fee2e2; color: #991b1b; }
.fm-order-card-right .fm-order-status--canceled { background: #fee2e2; color: #991b1b; }
.fm-order-card-right .fm-order-status--refunded { background: #fce7f3; color: #831843; }
.fm-order-card-right .fm-order-status--prescription_pending { background: #fef3c7; color: #b45309; }
.fm-order-card-right .fm-order-status--payment_pending { background: #fef3c7; color: #b45309; }

.fm-order-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    justify-content: flex-end;
}

.fm-order-card-actions a {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: var(--fm-radius-full);
    text-decoration: none;
    transition: all var(--fm-transition);
}

.fm-order-card-actions .fm-action-details {
    background: var(--fm-primary-light);
    color: var(--fm-primary);
}

.fm-order-card-actions .fm-action-details:hover {
    background: var(--fm-primary);
    color: white;
}

.fm-order-card-actions .fm-action-track {
    background: var(--fm-bg);
    color: var(--fm-text-secondary);
}

.fm-order-card-actions .fm-action-track:hover {
    background: var(--fm-border);
}

/* Pagination */
.fm-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 16px;
}

.fm-pagination a,
.fm-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--fm-radius-sm);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--fm-text-secondary);
    transition: all var(--fm-transition);
}

.fm-pagination a:hover {
    background: var(--fm-bg);
}

.fm-pagination .fm-active {
    background: var(--fm-primary);
    color: white;
}

.fm-pagination .fm-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Empty state */
.fm-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--fm-text-secondary);
}

.fm-empty-state .fm-empty-icon {
    font-size: 56px;
    margin-bottom: 12px;
}

.fm-empty-state h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--fm-text);
    margin: 0 0 4px;
}

.fm-empty-state p {
    font-size: 14px;
    margin: 0 0 16px;
}

.fm-empty-state a {
    display: inline-block;
    padding: 10px 32px;
    border-radius: var(--fm-radius-full);
    background: var(--fm-primary);
    color: white;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--fm-transition);
}

.fm-empty-state a:hover {
    background: var(--fm-primary-dark);
}

@media (max-width: 480px) {
    .fm-order-card {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .fm-order-card-right {
        text-align: left;
        margin-left: 0;
    }
    .fm-order-card-actions {
        justify-content: flex-start;
    }
}
</style>

<div class="fm-orders-page">
    <div class="fm-container">
        <div class="fm-orders-header">
            <h1>Order history</h1>
            <p>Recent purchases and live delivery status.</p>
        </div>

        <div class="fm-order-list">
            @if($orders->count())
                @foreach($orders as $order)
                    @php
                        $statusClass = 'fm-order-status--' . $order->status;
                        $canTrack = !in_array($order->status, ['delivered','completed','cancelled','canceled','refunded'], true);
                    @endphp
                    <div class="fm-order-card">
                        <div class="fm-order-card-left">
                            <span class="fm-order-number">#{{ $order->order_number }}</span>
                            <span class="fm-order-store">{{ $order->store?->name ?? trans_key('storefront.fallbacks.multipleItems') }}</span>
                            <span class="fm-order-meta">{{ optional($order->placed_at ?? $order->created_at)->format('d M Y, h:i A') }}</span>
                        </div>
                        <div class="fm-order-card-right">
                            <span class="fm-order-amount">{{ \App\Support\StorefrontPresenter::money($order->grand_total) }}</span>
                            <span class="fm-order-status {{ $statusClass }}">{{ \Illuminate\Support\Str::headline($order->status) }}</span>
                            <div class="fm-order-card-actions">
                                <a href="{{ route('storefront.orders.show', $order) }}" class="fm-action-details">Details</a>
                                @if($canTrack)
                                    <a href="{{ route('storefront.orders.tracking', $order) }}" class="fm-action-track">Track</a>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach

                <div class="fm-pagination">
                    {{ $orders->withQueryString()->links('storefront.partials.pagination') }}
                </div>
            @else
                <div class="fm-empty-state">
                    <div class="fm-empty-icon">📦</div>
                    <h3>No orders yet</h3>
                    <p>Your completed checkout orders will appear here.</p>
                    <a href="{{ route('storefront.home', $storefrontQuery ?? []) }}">Start shopping</a>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection