@extends('admin.layout')

@section('title', 'Admin Dashboard')

@section('content')
  @php
    $availableCars = $categories->where('status', 'available')->count();
    $soldCars = $categories->where('status', 'sold')->count();
    $pendingTransactions = $transactions->where('payment_status', 'pending')->count();
    $paidTransactions = $transactions->where('payment_status', 'paid')->count();
    $todayTransactions = $transactions->where('created_at', '>=', today())->count();
    $totalSales = $transactions->where('payment_status', 'paid')->sum('total_amount');
  @endphp

  <style>
    .dashboard-hero {
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 22px;
      padding: 30px;
      border-radius: 24px;
      background: #0f172a;
      color: #ffffff;
      box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
    }

    .dashboard-hero::after {
      content: "";
      position: absolute;
      right: -80px;
      top: -90px;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: rgba(34, 197, 94, 0.18);
    }

    .dashboard-hero > * {
      position: relative;
      z-index: 1;
    }

    .dashboard-hero .eyebrow {
      margin: 0 0 8px;
      color: #93c5fd;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-size: 12px;
    }

    .dashboard-hero h2 {
      margin: 0;
      color: #ffffff;
      font-size: 34px;
    }

    .dashboard-hero p {
      margin: 8px 0 0;
      color: #cbd5e1;
      max-width: 660px;
      line-height: 1.7;
    }

    .dashboard-hero .badge {
      background: rgba(34, 197, 94, 0.16);
      color: #bbf7d0;
      border: 1px solid rgba(187, 247, 208, 0.24);
      height: fit-content;
    }

    .quick-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 22px;
    }

    .quick-actions a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 10px 16px;
      border-radius: 14px;
      color: #ffffff;
      text-decoration: none;
      font-weight: 700;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .quick-actions a:first-child {
      background: #2563eb;
      border-color: #2563eb;
    }

    .dashboard-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 24px;
      padding: 6px;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 18px;
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
      overflow-x: auto;
    }

    .dashboard-tab {
      padding: 11px 16px;
      border: none;
      border-radius: 13px;
      background: transparent;
      cursor: pointer;
      font-size: 0.92rem;
      font-weight: 700;
      color: #64748b;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .dashboard-tab.active {
      color: #ffffff;
      background: #2563eb;
      box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
      animation: fadeIn 0.2s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(5px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .metric-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }

    .metric-card {
      position: relative;
      overflow: hidden;
      min-height: 148px;
      padding: 20px;
      border-radius: 22px;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      box-shadow: 0 18px 46px rgba(15, 23, 42, 0.06);
    }

    .metric-card::after {
      content: "";
      position: absolute;
      right: 16px;
      top: 18px;
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: #eff6ff;
    }

    .metric-card small {
      display: block;
      color: #64748b;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .metric-card strong {
      display: block;
      color: #0f172a;
      font-size: 30px;
      line-height: 1;
      margin-bottom: 16px;
    }

    .metric-card span {
      display: inline-flex;
      padding: 6px 10px;
      border-radius: 999px;
      background: #f8fafc;
      color: #475569;
      font-size: 12px;
      font-weight: 700;
    }

    .metric-card.is-warning::after {
      background: #fef3c7;
    }

    .metric-card.is-success::after {
      background: #dcfce7;
    }

    .metric-card.is-dark {
      background: #111827;
      border-color: #111827;
    }

    .metric-card.is-dark small,
    .metric-card.is-dark span {
      color: #cbd5e1;
    }

    .metric-card.is-dark strong {
      color: #ffffff;
      font-size: 25px;
    }

    .metric-card.is-dark span {
      background: rgba(255, 255, 255, 0.1);
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
      gap: 20px;
      align-items: start;
    }

    .inventory-bars {
      display: grid;
      gap: 16px;
    }

    .inventory-row {
      display: grid;
      gap: 8px;
    }

    .inventory-row header {
      display: flex;
      justify-content: space-between;
      color: #334155;
      font-weight: 700;
      font-size: 14px;
    }

    .bar-track {
      height: 12px;
      border-radius: 999px;
      background: #e2e8f0;
      overflow: hidden;
    }

    .bar-fill {
      height: 100%;
      border-radius: inherit;
      background: #2563eb;
    }

    .bar-fill.sold {
      background: #16a34a;
    }

    .activity-list {
      display: grid;
      gap: 12px;
    }

    .activity-item {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      padding: 14px;
      border-radius: 16px;
      background: #f8fafc;
      border: 1px solid #eef2f7;
    }

    .activity-item strong {
      display: block;
      color: #0f172a;
      margin-bottom: 4px;
    }

    .activity-item small {
      color: #64748b;
    }

    .activity-price {
      white-space: nowrap;
      font-weight: 800;
      color: #0f172a;
    }

    @media (max-width: 1100px) {
      .metric-grid,
      .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 720px) {
      .dashboard-hero {
        flex-direction: column;
        padding: 22px;
      }

      .metric-grid,
      .dashboard-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>

  <div class="dashboard-hero">
    <div>
      <p class="eyebrow">Admin Dashboard</p>
      <h2>Hai, {{ Auth::guard('admin')->check() ? Auth::guard('admin')->user()->username : 'Admin' }}</h2>
      <p>Pantau transaksi masuk, status mobil, dan data pengguna dari satu tempat yang lebih rapi.</p>
      <div class="quick-actions">
        <a href="{{ route('riwayat') }}">Cek Transaksi</a>
        <a href="{{ route('kategori') }}">Kelola Mobil</a>
        <a href="{{ route('input') }}">Input Manual</a>
      </div>
    </div>
    <div class="badge">Online</div>
  </div>

  <div class="dashboard-tabs">
    <button class="dashboard-tab active" data-tab="overview">Overview</button>
    <button class="dashboard-tab" data-tab="users">User Management</button>
    <button class="dashboard-tab" data-tab="categories">Mobil & Kategori</button>
  </div>

  <div id="overview" class="tab-content active">
    <div class="metric-grid">
      <div class="metric-card">
        <small>Mobil Tersedia</small>
        <strong>{{ $availableCars }}</strong>
        <span>{{ $categories->count() }} total mobil</span>
      </div>
      <div class="metric-card is-success">
        <small>Mobil Terjual</small>
        <strong>{{ $soldCars }}</strong>
        <span>{{ $paidTransactions }} transaksi lunas</span>
      </div>
      <div class="metric-card is-warning">
        <small>Menunggu Konfirmasi</small>
        <strong>{{ $pendingTransactions }}</strong>
        <span>{{ $todayTransactions }} transaksi hari ini</span>
      </div>
      <div class="metric-card is-dark">
        <small>Total Penjualan</small>
        <strong>Rp {{ number_format($totalSales, 0, ',', '.') }}</strong>
        <span>Dari transaksi lunas</span>
      </div>
    </div>

    <div class="dashboard-grid">
      <div class="panel">
        <div class="panel-header">
          <div>
            <h3>Ringkasan Stok Mobil</h3>
            <p class="text-muted">Perbandingan mobil yang masih dijual dan yang sudah terjual.</p>
          </div>
          <a href="{{ route('kategori') }}" class="button-secondary" style="text-decoration:none;">Detail</a>
        </div>
        <div class="inventory-bars">
          <div class="inventory-row">
            <header>
              <span>Tersedia</span>
              <span>{{ $availableCars }}</span>
            </header>
            <div class="bar-track">
              <div class="bar-fill" style="width: {{ $categories->count() ? ($availableCars / $categories->count()) * 100 : 0 }}%;"></div>
            </div>
          </div>
          <div class="inventory-row">
            <header>
              <span>Terjual</span>
              <span>{{ $soldCars }}</span>
            </header>
            <div class="bar-track">
              <div class="bar-fill sold" style="width: {{ $categories->count() ? ($soldCars / $categories->count()) * 100 : 0 }}%;"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="panel">
        <div class="panel-header">
          <div>
            <h3>Transaksi Terbaru</h3>
            <p class="text-muted">Bukti transfer terbaru yang perlu dipantau admin.</p>
          </div>
        </div>
        <div class="activity-list">
          @forelse($transactions->take(5) as $transaction)
            <div class="activity-item">
              <div>
                <strong>{{ $transaction->customer_name }}</strong>
                <small>{{ $transaction->category->name ?? 'Produk dihapus' }} - {{ $transaction->payment_status_label }}</small>
              </div>
              <div class="activity-price">Rp {{ number_format($transaction->total_amount, 0, ',', '.') }}</div>
            </div>
          @empty
            <div class="activity-item">
              <div>
                <strong>Belum ada transaksi</strong>
                <small>Transaksi baru akan muncul di sini.</small>
              </div>
            </div>
          @endforelse
        </div>
      </div>
    </div>
  </div>

  <div id="users" class="tab-content">
    <div class="panel">
      <div class="panel-header">
        <div>
          <h3>Manajemen User</h3>
          <p class="text-muted">Kelola data pengguna dan peran mereka di sistem.</p>
        </div>
        <span class="badge">{{ $users->count() }} user</span>
      </div>

      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Data User</th>
              <th>Nama Lengkap</th>
              <th>Role</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            @forelse($users as $user)
              <tr>
                <td class="table-avatar"><span class="avatar">{{ strtoupper(substr($user->username, 0, 1)) }}</span> {{ $user->email }}</td>
                <td>{{ $user->username }}</td>
                <td><span class="tag {{ $user->role === 'admin' ? 'tag-admin' : 'tag-user' }}">{{ ucfirst($user->role) }}</span></td>
                <td><span class="tag tag-active">Aktif</span></td>
              </tr>
            @empty
              <tr>
                <td colspan="4" style="padding:18px 12px; text-align:center; color:#64748b;">Belum ada data user.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div id="categories" class="tab-content">
    <div class="panel">
      <div class="panel-header">
        <div>
          <h3>Manajemen Kategori</h3>
          <p class="text-muted">Daftar mobil yang tersedia dan status penjualannya.</p>
        </div>
        <a href="{{ route('kategori') }}" class="button-primary" style="text-decoration:none;">Tambah Kategori</a>
      </div>

      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Foto</th>
              <th>Nama Kategori</th>
              <th>Harga</th>
              <th>Status</th>
              <th>Tanggal</th>
              <th>Deskripsi</th>
            </tr>
          </thead>
          <tbody>
            @forelse($categories->take(20) as $category)
              <tr>
                <td style="padding:8px;">
                  @if($category->image)
                    <img src="{{ $category->image_url }}" alt="{{ $category->name }}" style="width:80px; height:56px; border-radius:12px; object-fit:cover;" />
                  @else
                    <img src="{{ $category->image_url }}" alt="Gambar default {{ $category->name }}" style="width:80px; height:56px; border-radius:12px; object-fit:cover;" />
                  @endif
                </td>
                <td>{{ $category->name }}</td>
                <td>Rp {{ number_format($category->price, 0, ',', '.') }}</td>
                <td>
                  @if($category->status === 'sold')
                    <span class="tag tag-inactive">{{ $category->status_label }}</span>
                  @else
                    <span class="tag tag-active">{{ $category->status_label }}</span>
                  @endif
                </td>
                <td>{{ $category->created_at ? $category->created_at->format('d/m/Y') : '-' }}</td>
                <td>{{ \Illuminate\Support\Str::limit($category->description, 50) }}</td>
              </tr>
            @empty
              <tr>
                <td colspan="6" style="padding:18px 12px; text-align:center; color:#64748b;">Belum ada kategori.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
      <p style="text-align:center; color:#64748b; margin-top:16px; font-size:0.9rem;">Menampilkan 20 kategori terakhir dari {{ $categories->count() }} total</p>
    </div>
  </div>

  <script>
    document.querySelectorAll('.dashboard-tab').forEach(tab => {
      tab.addEventListener('click', function() {
        const tabName = this.getAttribute('data-tab');

        document.querySelectorAll('.dashboard-tab').forEach(item => item.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));

        this.classList.add('active');
        document.getElementById(tabName).classList.add('active');
      });
    });
  </script>
@endsection