@extends('layouts.admin')

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

@section('styles')
<style>
  .stat-card {
    background: rgba(10, 37, 64, 0.4);
    border-radius: 16px;
    border: 1px solid rgba(23, 190, 187, 0.1);
    padding: 1.5rem;
    text-align: center;
  }

  .stat-number {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--ocean-cyan);
    margin-bottom: 0.5rem;
  }

  .stat-label {
    color: rgba(210, 240, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 600;
  }

  .btn-sm {
    background: rgba(23, 190, 187, 0.2);
    color: var(--ocean-cyan);
    border: 1px solid rgba(23, 190, 187, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-sm:hover {
    background: rgba(23, 190, 187, 0.3);
  }

  .table {
    width: 100%;
    border-collapse: collapse;
  }

  .table thead tr {
    background: rgba(23, 190, 187, 0.1);
    border-bottom: 2px solid rgba(23, 190, 187, 0.2);
  }

  .table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--ocean-cyan);
  }

  .table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(23, 190, 187, 0.1);
  }
</style>
@endsection

@section('content')

  {{-- ADMIN GREETING --}}
  <div class="mb-8">
    <h1 style="font-family:'Playfair Display',serif; font-size:2.5rem; font-weight:900; color:#fff; margin-bottom:0.5rem;">
      Selamat Datang, {{ Auth::user()->name }}! 👋
    </h1>
    <p style="color:rgba(210,240,255,0.6);">
      Kelola sistem pemesanan tiket kapal dan monitor operasional bisnis Oceango.
    </p>
  </div>

  {{-- QUICK ACTIONS --}}
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <div class="section" style="text-align:center; padding:2rem;">
      <div style="font-size:3rem; margin-bottom:1rem;">👥</div>
      <h3 class="section-title" style="margin-bottom:1rem;">Kelola Pengguna</h3>
      <p style="color:rgba(210,240,255,0.6); margin-bottom:1.5rem; font-size:0.9rem;">
        Tambah, edit, atau hapus pengguna sistem
      </p>
      <a href="{{ route('admin.users.index') }}" class="btn-primary">👥 Kelola Pengguna</a>
    </div>

    <div class="section" style="text-align:center; padding:2rem;">
      <div style="font-size:3rem; margin-bottom:1rem;">🎫</div>
      <h3 class="section-title" style="margin-bottom:1rem;">Kelola Pemesanan</h3>
      <p style="color:rgba(210,240,255,0.6); margin-bottom:1.5rem; font-size:0.9rem;">
        Lihat, ubah status, atau kelola pemesanan
      </p>
      <a href="{{ route('admin.bookings.index') }}" class="btn-primary">🎫 Kelola Pemesanan</a>
    </div>

    <div class="section" style="text-align:center; padding:2rem;">
      <div style="font-size:3rem; margin-bottom:1rem;">📊</div>
      <h3 class="section-title" style="margin-bottom:1rem;">Kelola Progress</h3>
      <p style="color:rgba(210,240,255,0.6); margin-bottom:1.5rem; font-size:0.9rem;">
        Update status perjalanan dan tracking kapal
      </p>
      <a href="{{ route('admin.progress.index') }}" class="btn-primary">📊 Kelola Progress</a>
    </div>
  </div>

  {{-- STATS GRID --}}
  <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
    <div class="stat-card">
      <div class="stat-number">{{ $totalUsers ?? 0 }}</div>
      <div class="stat-label">Total Pengguna</div>
    </div>
    <div class="stat-card">
      <div class="stat-number">{{ $totalBookings ?? 0 }}</div>
      <div class="stat-label">Total Pemesanan</div>
    </div>
    <div class="stat-card">
      <div class="stat-number">Rp {{ number_format($totalRevenue ?? 0, 0, ',', '.') }}</div>
      <div class="stat-label">Total Pendapatan</div>
    </div>
    <div class="stat-card">
      <div class="stat-number">{{ $pendingBookings ?? 0 }}</div>
      <div class="stat-label">Pemesanan Pending</div>
    </div>
  </div>

  {{-- BOOKING STATS --}}
  <div class="section mb-8">
    <h2 class="section-title" style="margin-bottom:1.5rem;">Statistik Pemesanan</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div style="background:rgba(23,190,187,0.1); border:1px solid rgba(23,190,187,0.3); border-radius:12px; padding:1.5rem;">
        <h3 style="color:var(--ocean-cyan); margin-bottom:1rem; font-weight:600;">Berdasarkan Status</h3>
        <table class="table">
          <tbody>
            <tr>
              <td style="padding:0.5rem;">Pending</td>
              <td style="padding:0.5rem; text-align:right; font-weight:700; color:var(--ocean-cyan);">{{ $pendingBookings ?? 0 }}</td>
            </tr>
            <tr>
              <td style="padding:0.5rem;">Konfirmasi</td>
              <td style="padding:0.5rem; text-align:right; font-weight:700; color:var(--ocean-cyan);">{{ $confirmedBookings ?? 0 }}</td>
            </tr>
            <tr>
              <td style="padding:0.5rem;">Selesai</td>
              <td style="padding:0.5rem; text-align:right; font-weight:700; color:var(--ocean-cyan);">{{ $completedBookings ?? 0 }}</td>
            </tr>
            <tr>
              <td style="padding:0.5rem;">Dibatalkan</td>
              <td style="padding:0.5rem; text-align:right; font-weight:700; color:var(--ocean-cyan);">{{ $cancelledBookings ?? 0 }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div style="background:rgba(23,190,187,0.1); border:1px solid rgba(23,190,187,0.3); border-radius:12px; padding:1.5rem;">
        <h3 style="color:var(--ocean-cyan); margin-bottom:1rem; font-weight:600;">Berdasarkan Kelas</h3>
        <table class="table">
          <tbody>
            @forelse($bookingsByClass ?? [] as $booking)
              <tr>
                <td style="padding:0.5rem; text-transform:capitalize;">{{ $booking->class }}</td>
                <td style="padding:0.5rem; text-align:right; font-weight:700; color:var(--ocean-cyan);">{{ $booking->total }}</td>
              </tr>
            @empty
              <tr>
                <td colspan="2" style="padding:1rem; text-align:center; color:rgba(210,240,255,0.5);">Belum ada data</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {{-- RECENT BOOKINGS --}}
  <div class="section mb-8">
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem;">
      <h2 class="section-title" style="margin:0;">Pemesanan Terbaru</h2>
      <a href="{{ route('admin.bookings.index') }}" class="btn-sm">Lihat Semua</a>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th>Kode</th>
          <th>Pelanggan</th>
          <th>Rute</th>
          <th>Tanggal</th>
          <th>Kelas</th>
          <th>Status</th>
          <th>Harga</th>
          <th>Aksi</th>
        </tr>
      </thead>
      <tbody>
        @forelse($recentBookings ?? [] as $booking)
          <tr style="background:rgba(23,190,187,0.05);">
            <td><strong>{{ $booking->booking_code }}</strong></td>
            <td>{{ $booking->user->name ?? 'N/A' }}</td>
            <td>{{ $booking->route_from }} → {{ $booking->route_to }}</td>
            <td>{{ $booking->departure_date->format('d/m/Y') ?? 'N/A' }}</td>
            <td style="text-transform:capitalize;">{{ $booking->class }}</td>
            <td>
              <span style="background:
                @if($booking->status === 'pending') rgba(255,152,0,0.2); color:#FFB74D;
                @elseif($booking->status === 'confirmed') rgba(76,175,80,0.2); color:#81C784;
                @elseif($booking->status === 'completed') rgba(76,175,80,0.2); color:#81C784;
                @else rgba(244,67,54,0.2); color:#EF5350;
                @endif
                padding:0.4rem 0.8rem; border-radius:20px; font-size:0.8rem; font-weight:600;">
                {{ ucfirst($booking->status) }}
              </span>
            </td>
            <td>Rp {{ number_format($booking->price, 0, ',', '.') }}</td>
            <td style="text-align:center;">
              <a href="{{ route('admin.bookings.show', $booking) }}" class="btn-sm" style="font-size:0.8rem;">Lihat</a>
            </td>
          </tr>
        @empty
          <tr style="background:rgba(23,190,187,0.05);">
            <td colspan="8" style="text-align:center; color:rgba(210,240,255,0.5); padding:2rem;">
              Belum ada pemesanan.
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  {{-- RECENT PROGRESS --}}
  <div class="section">
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem;">
      <h2 class="section-title" style="margin:0;">Update Progress Terbaru</h2>
      <a href="{{ route('admin.progress.index') }}" class="btn-sm">Lihat Semua</a>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th>Pemesanan</th>
          <th>Status</th>
          <th>Lokasi</th>
          <th>Deskripsi</th>
          <th>Waktu Update</th>
          <th>Aksi</th>
        </tr>
      </thead>
      <tbody>
        @forelse($recentProgress ?? [] as $progress)
          <tr style="background:rgba(23,190,187,0.05);">
            <td><strong>{{ $progress->booking->booking_code ?? 'N/A' }}</strong></td>
            <td style="text-transform:capitalize;">{{ $progress->status ?? 'N/A' }}</td>
            <td>{{ $progress->location ?? 'N/A' }}</td>
            <td>{{ Str::limit($progress->description, 50) }}</td>
            <td>{{ $progress->created_at->format('d/m/Y H:i') }}</td>
            <td style="text-align:center;">
              <a href="{{ route('admin.progress.edit', $progress) }}" class="btn-sm" style="font-size:0.8rem;">Edit</a>
            </td>
          </tr>
        @empty
          <tr style="background:rgba(23,190,187,0.05);">
            <td colspan="6" style="text-align:center; color:rgba(210,240,255,0.5); padding:2rem;">
              Belum ada progress update.
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

@endsection