<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Riwayat Pesanan 🍕</title>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #fff3e0, #ffe6e6);
            margin: 0;
            padding: 0;
            text-align: center;
            color: #444;
        }

        header {
            background: linear-gradient(45deg, #ff6b6b, #ff9f43);
            color: white;
            padding: 20px 0;
            font-size: 26px;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            position: relative;
        }

        .nav-buttons {
            position: absolute;
            left: 20px;
            top: 20px;
            display: flex;
            gap: 10px;
        }

        .nav-btn {
            background: white;
            color: #ff6b6b;
            border: none;
            padding: 8px 12px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
            transition: background 0.3s;
        }

        .nav-btn:hover {
            background-color: #ffe0e0;
        }

        .content {
            margin: 30px auto;
            width: 90%;
            max-width: 1000px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            padding: 20px;
        }

        h2 {
            color: #ff6b6b;
            margin-bottom: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            overflow: hidden;
            border-radius: 12px;
        }

        th, td {
            padding: 12px;
            border-bottom: 1px solid #f0f0f0;
        }

        th {
            background-color: #ff9f43;
            color: white;
        }

        tr:hover {
            background-color: #fff5f5;
        }

        .btn {
            background: linear-gradient(45deg, #25D366, #128C7E);
            color: white;
            padding: 8px 12px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
            transition: background 0.2s;
        }

        .btn:hover {
            background: linear-gradient(45deg, #20b957, #0f705f);
        }

        .status {
            font-weight: bold;
            padding: 5px 8px;
            border-radius: 6px;
        }

        .status.pending {
            background-color: #ffe066;
            color: #444;
        }

        .status.selesai {
            background-color: #81c784;
            color: white;
        }

        footer {
            margin-top: 30px;
            color: #999;
            font-size: 14px;
            padding-bottom: 15px;
        }
    </style>
</head>
<body>

    <header>
        🍕 Riwayat Pesanan Anda
        <div class="nav-buttons">
            <a href="{{ route('user.dashboard') }}" class="nav-btn">⬅️ Dashboard</a>
        </div>
    </header>

    <div class="content">
        <h2>Daftar Pesanan Kamu</h2>
        <table>
            <tr>
                <th>No</th>
                <th>Nama Pizza</th>
                <th>Jumlah</th>
                <th>Total Harga</th>
                <th>Status</th>
                <th>Tanggal</th>
                <th>Aksi</th>
            </tr>

            @forelse ($orders as $order)
            <tr>
                <td>{{ $loop->iteration }}</td>
                {{-- 🔥 ambil nama pizza dari relasi --}}
               <td>{{ $order->pizza ? $order->pizza->nama : 'Pizza tidak ditemukan' }}</td>
                <td>{{ $order->jumlah }}</td>
                <td>Rp {{ number_format($order->total_harga, 0, ',', '.') }}</td>
                <td>
                    <span class="status {{ $order->status == 'pending' ? 'pending' : 'selesai' }}">
                        {{ ucfirst($order->status) }}
                    </span>
                </td>
                <td>{{ $order->created_at->format('d M Y H:i') }}</td>
                <td>
    @if ($order->status == 'pending')
        <a href="{{ url('/user/qris/' . $order->total_harga) }}" class="btn">Bayar via QRIS 💳</a>
    @else
        <span style="color: gray;">✔️ Selesai</span>
    @endif

    <!-- 🔥 Tombol Hapus -->
    <form action="{{ route('user.order.delete', $order->id) }}" method="POST" style="margin-top: 5px;">
        @csrf
        @method('DELETE')
        <button type="submit" style="
            background:#ff4d4d;
            color:white;
            border:none;
            padding:6px 10px;
            border-radius:6px;
            cursor:pointer;
            font-weight:bold;
        " onclick="return confirm('Yakin ingin menghapus pesanan ini?')">
            Hapus 🗑️
        </button>
    </form>
</td>

            </tr>
            @empty
            <tr>
                <td colspan="7">Belum ada pesanan 😋</td>
            </tr>
            @endforelse
        </table>
    </div>


</body>
</html>
