TA/web_JMW/resources/views/user/profile.blade.php

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Profil Pengguna</title>
  <style>
    :root {
      font-family: Inter, system-ui, sans-serif;
      color: #111827;
      background: #f8fafc;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: #f8fafc;
    }

    .page-shell {
      max-width: 940px;
      margin: 0 auto;
      padding: 32px 24px 64px;
    }

    .profile-card {
      background: white;
      border-radius: 28px;
      padding: 32px;
      box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
    }

    .profile-header {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 28px;
    }

    .profile-avatar {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #4338ca;
      color: white;
      font-size: 1.75rem;
      font-weight: 700;
    }

    .profile-header h1 {
      margin: 0;
      font-size: 2rem;
      line-height: 1.1;
    }

    .profile-header p {
      margin: 6px 0 0;
      color: #475569;
      font-size: 0.98rem;
    }

    .profile-detail {
      display: grid;
      gap: 18px;
    }

    .detail-row {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 20px;
      border-radius: 18px;
      background: #f1f5f9;
    }

    .detail-row strong {
      color: #0f172a;
    }

    .detail-row span {
      color: #475569;
    }

    .actions {
      margin-top: 28px;
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .button-primary,
    .button-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 14px 22px;
      border-radius: 999px;
      font-weight: 700;
      border: none;
      text-decoration: none;
      cursor: pointer;
    }

    .button-primary {
      background: #4338ca;
      color: white;
    }

    .button-secondary {
      background: white;
      color: #4338ca;
      border: 1px solid #c7d2fe;
    }

    .favorites-section {
      margin-top: 40px;
    }

    .favorites-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
    }

    .favorite-card-link {
      text-decoration: none;
      color: inherit;
    }

    .favorite-card {
      background: white;
      border-radius: 16px;
      border: 1px solid #e5e7eb;
      overflow: hidden;
      display: flex;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .favorite-card.sold-out {
      border-color: #fecaca;
      background: #fff7f7;
    }

    .favorite-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(15, 23, 42, 0.1);
    }

    .favorite-image {
      width: 100px;
      height: 80px;
      background: #f8fafc;
      display: grid;
      place-items: center;
      overflow: hidden;
      position: relative;
    }

    .favorite-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .favorite-card.sold-out .favorite-image img {
      filter: grayscale(1);
      opacity: 0.6;
    }

    .sold-out-badge {
      position: absolute;
      top: 8px;
      left: 8px;
      padding: 4px 8px;
      border-radius: 999px;
      background: #dc2626;
      color: white;
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.3px;
      text-transform: uppercase;
    }

    .favorite-content {
      padding: 12px 16px;
      flex: 1;
    }

    .favorite-content h4 {
      margin: 0 0 4px;
      font-size: 1rem;
      font-weight: 700;
      color: #0f172a;
    }

    .favorite-content p {
      margin: 0 0 4px;
      font-size: 0.9rem;
      font-weight: 600;
      color: #4338ca;
    }

    .favorite-content small {
      color: #64748b;
      font-size: 0.8rem;
    }
  </style>
</head>
<body>
  <div class="page-shell">
    <div class="profile-card">
      <div class="profile-header">
        <div class="profile-avatar">{{ strtoupper(substr(Auth::user()->username, 0, 1)) }}</div>
        <div>
          <h1>Halo, {{ Auth::user()->username }}</h1>
          <p>Berikut informasi akun Anda. Gunakan halaman ini untuk melihat detail dan kembali ke pasar mobil.</p>
        </div>
      </div>

      <div class="profile-detail">
        <div class="detail-row">
          <strong>Username</strong>
          <span>{{ Auth::user()->username }}</span>
        </div>
        <div class="detail-row">
          <strong>Email</strong>
          <span>{{ Auth::user()->email }}</span>
        </div>
      </div>

      @php
        $favorites = Auth::user()->favoriteCategories;
      @endphp

      @if($favorites->count() > 0)
        <div class="favorites-section">
          <h3 style="margin: 32px 0 20px; font-size: 1.5rem; color: #0f172a;">Mobil Favorit Saya</h3>
          <div class="favorites-grid">
            @foreach($favorites as $category)
              <a href="{{ route('mobil-bekas.detail', $category) }}" class="favorite-card-link">
                <div class="favorite-card {{ $category->status === 'sold' ? 'sold-out' : '' }}">
                  <div class="favorite-image">
                    <img src="{{ $category->image_url }}" alt="{{ $category->image ? $category->name : 'Gambar default ' . $category->name }}" />
                    @if($category->status === 'sold')
                      <span class="sold-out-badge">Sold Out</span>
                    @endif
                  </div>
                  <div class="favorite-content">
                    <h4>{{ $category->name }}</h4>
                    <p>Rp {{ number_format($category->price, 0, ',', '.') }}</p>
                    @if($category->year)
                      <small>{{ $category->year }}</small>
                    @endif
                    @if($category->status === 'sold')
                      <small style="display:block; margin-top:6px; color:#dc2626; font-weight:800;">Mobil sudah terjual</small>
                    @endif
                  </div>
                </div>
              </a>
            @endforeach
          </div>
        </div>
      @endif

      <div class="actions">
        <a href="{{ route('mobil-bekas') }}" class="button-secondary">Kembali ke Marketplace</a>
        <form action="{{ route('logout') }}" method="POST" style="margin:0;">
          @csrf
          <button type="submit" class="button-primary">Logout</button>
        </form>
      </div>
    </div>
  </div>
</body>
</html>