@extends('layouts.navigation')

@section('content')

    <style>
        .transactions-container {
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
        }

        .page-header {
            margin-bottom: 32px;
        }

        .page-header h1 {
            font-size: 32px;
            font-weight: 800;
            color: #111;
            margin-bottom: 8px;
        }

        .page-header p {
            color: #666;
            font-size: 15px;
        }

        .transaction-card {
            background: white;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 20px;
            border: 1px solid #e5e5e5;
            transition: 0.3s;
        }

        .transaction-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .transaction-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 2px dashed #e5e5e5;
        }

        .receipt-info h3 {
            font-size: 20px;
            font-weight: 700;
            color: #dc2626;
            margin-bottom: 4px;
        }

        .receipt-date {
            color: #666;
            font-size: 14px;
        }

        .status-badge {
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .status-pending {
            background: #fef3c7;
            color: #92400e;
        }

        .status-confirmed {
            background: #dbeafe;
            color: #1e40af;
        }

        .status-paid {
            background: #d1fae5;
            color: #065f46;
        }

        .status-cancelled {
            background: #f3f4f6;
            color: #6b7280;
        }

        .items-list {
            margin-bottom: 16px;
        }

        .item-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            font-size: 14px;
        }

        .item-name {
            color: #444;
        }

        .item-qty {
            color: #666;
            margin-left: 8px;
        }

        .item-price {
            font-weight: 600;
            color: #111;
        }

        .transaction-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #e5e5e5;
        }

        .total-amount {
            font-size: 20px;
            font-weight: 800;
            color: #dc2626;
        }

        .btn-view {
            background: #dc2626;
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            transition: 0.3s;
            display: inline-block;
        }

        .btn-view:hover {
            background: #b91c1c;
        }

        .empty-state {
            text-align: center;
            padding: 80px 20px;
            background: white;
            border-radius: 12px;
        }

        .empty-state img {
            width: 200px;
            opacity: 0.5;
            margin-bottom: 24px;
        }

        .empty-state h3 {
            font-size: 24px;
            color: #666;
            margin-bottom: 12px;
        }

        .empty-state p {
            color: #999;
            margin-bottom: 24px;
        }

        .btn-shop {
            background: #dc2626;
            color: white;
            padding: 12px 32px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            display: inline-block;
        }

        .btn-shop:hover {
            background: #b91c1c;
        }
    </style>

    <div class="transactions-container">
        <div class="page-header">
            <h1>📋 Riwayat Pesanan</h1>
            <p>Daftar semua pesanan Anda di Warung Ara</p>
        </div>

        @if($transactions->isEmpty())
            <div class="empty-state">
                <div style="font-size: 80px; margin-bottom: 16px;">🍽️</div>
                <h3>Belum Ada Pesanan</h3>
                <p>Anda belum memiliki riwayat pesanan. Mulai pesan menu favorit Anda!</p>
                <a href="{{ route('user.products') }}" class="btn-shop">Lihat Menu</a>
            </div>
        @else
            @foreach($transactions as $transaction)
                <div class="transaction-card">
                    <div class="transaction-header">
                        <div class="receipt-info">
                            <h3>
                                {{ $transaction->receipt_number }}
                                @if($transaction->type == 'reservation')
                                    <span
                                        style="background: #fef3c7; color: #92400e; padding: 4px 12px; border-radius: 12px; font-size: 12px; margin-left: 8px;">Reservasi</span>
                                @endif
                            </h3>
                            <div class="receipt-date">
                                📅 {{ $transaction->created_at->format('d M Y, H:i') }}
                                @if($transaction->type == 'reservation')
                                    <br>🪑 Reservasi: {{ \Carbon\Carbon::parse($transaction->reservation_date)->format('d M Y') }} -
                                    {{ \Carbon\Carbon::parse($transaction->reservation_time)->format('H:i') }}
                                @endif
                            </div>
                        </div>
                        <span class="status-badge status-{{ $transaction->status }}">
                            @if($transaction->status == 'pending')
                                Menunggu Pembayaran
                            @elseif($transaction->status == 'paid')
                                Lunas
                            @else
                                Selesai
                            @endif
                        </span>
                    </div>

                    <div class="items-list">
                        @foreach($transaction->items as $item)
                            <div class="item-row">
                                <div>
                                    <span class="item-name">{{ $item->product->name }}</span>
                                    <span class="item-qty">× {{ $item->qty }}</span>
                                </div>
                                <div class="item-price">Rp{{ number_format($item->subtotal, 0, ',', '.') }}</div>
                            </div>
                        @endforeach
                    </div>

                    <div class="transaction-footer">
                        <div class="total-amount">
                            Total: Rp{{ number_format($transaction->total_price, 0, ',', '.') }}
                        </div>
                        <a href="{{ route('user.transactions.show', $transaction->id) }}" class="btn-view">
                            Lihat Resi
                        </a>
                    </div>
                </div>
            @endforeach
        @endif
    </div>

@endsection