<!doctype html>
<html lang="id">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <title>Daftar Permintaan Peminjaman - {{ config('app.name', 'Laravel') }}</title>

  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

  <style>
    :root {
      --bg: #f8fafc;
      --panel: #ffffff;
      --muted: #64748b;
      --heading: #0f172a;
      --card-border: #e2e8f0;
      --radius: 12px;
      --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: var(--font-main);
      background: var(--bg);
      color: #1e293b;
      -webkit-font-smoothing: antialiased;
    }

    .app {
      display: flex;
      min-height: 100vh;
    }

    /* Main content area */
    .content {
      flex: 1;
      padding: 32px;
      width: 100%;
      max-width: 1600px;
      margin: 0 auto;
      transition: all 0.3s ease;
    }

    /* Header Section */
    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 24px;
      flex-wrap: wrap;
      gap: 16px;
    }

    .page-header h1 {
      margin: 0;
      font-size: 24px;
      font-weight: 800;
      color: var(--heading);
      letter-spacing: -0.5px;
    }

    .page-header p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 14px;
    }

    /* Card Style */
    .card {
      background: var(--panel);
      border-radius: var(--radius);
      border: 1px solid var(--card-border);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
      overflow: hidden;
    }

    /* Table Styles */
    .table-container {
      width: 100%;
      overflow-x: auto;
      /* Horizontal scroll for mobile */
    }

    table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }

    th {
      background-color: #f8fafc;
      color: var(--muted);
      font-weight: 600;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 12px 24px;
      border-bottom: 1px solid var(--card-border);
      white-space: nowrap;
    }

    td {
      padding: 16px 24px;
      border-bottom: 1px solid #f1f5f9;
      color: #334155;
      font-size: 14px;
      vertical-align: middle;
    }

    tr:last-child td {
      border-bottom: none;
    }

    tr:hover td {
      background-color: #f8fafc;
    }

    /* Badges */
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 99px;
      font-weight: 600;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .badge-pending {
      background: #fff7ed;
      color: #c2410c;
      border: 1px solid #ffedd5;
    }

    .badge-staff {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #dbeafe;
    }

    .badge-success {
      background: #f0fdf4;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }

    .badge-danger {
      background: #fef2f2;
      color: #b91c1c;
      border: 1px solid #fecaca;
    }

    .badge-gray {
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #e2e8f0;
    }

    /* Button */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: #2563eb;
      color: white;
      font-weight: 600;
      font-size: 14px;
      padding: 10px 18px;
      border-radius: 8px;
      transition: background-color 0.2s;
      text-decoration: none;
    }

    .btn-primary:hover {
      background-color: #1d4ed8;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .app {
        display: block;
      }

      .content {
        padding: 20px;
        padding-top: 80px;
      }
    }

    @media (max-width: 640px) {
      .page-header {
        flex-direction: column;
        align-items: stretch;
      }

      .btn-primary {
        width: 100%;
        justify-content: center;
      }

      th,
      td {
        padding: 12px 16px;
      }
    }
  </style>
</head>

<body>

  <div class="app">
    @include('partials.sidebar')

    <main class="content">

      {{-- Header & Action --}}
      <div class="page-header">
        <div>
          <h1>Permintaan Peminjaman</h1>
          <p>Kelola dan pantau status peminjaman barang Anda.</p>
        </div>
        <div>
          <a href="{{ route('borrow.select') }}" class="btn-primary shadow-sm">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            Buat Peminjaman Baru
          </a>
        </div>
      </div>

      {{-- Alerts --}}
      @if (session('success'))
      <div class="mb-6 p-4 rounded-lg bg-green-50 border border-green-200 text-green-700 flex items-center gap-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
          <polyline points="22 4 12 14.01 9 11.01"></polyline>
        </svg>
        {{ session('success') }}
      </div>
      @endif

      {{-- Table Card --}}
      <div class="card">
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>Barang</th>
                <th>Peminjam</th>
                <th>Tgl Pinjam</th>
                <th>Tgl Kembali</th>
                <th>Dikembalikan</th>
                <th>Jumlah</th>
                <th>Status</th>
                <th style="text-align:right">Aksi</th>
              </tr>
            </thead>

            <tbody>
              @forelse ($requests as $request)
              <tr>
                <td>
                  <div class="font-semibold text-gray-900">{{ $request->item->nama ?? '-' }}</div>
                  <div class="text-xs text-gray-500">{{ $request->item->divisi->nama ?? 'Umum' }}</div>
                </td>
                <td>
                  <div class="text-gray-900">{{ $request->user->name ?? '-' }}</div>
                </td>
                <td>
                  <span class="text-gray-600">
                    {{ \Carbon\Carbon::parse($request->tanggal_pinjam)->format('d M Y, H:i') }}
                  </span>
                </td>
                <td>
                  <span class="text-gray-600">
                    {{ \Carbon\Carbon::parse($request->tanggal_kembali)->format('d M Y, H:i') }}
                  </span>
                </td>
                <td>
                  <span class="text-gray-600">
                    {{ \Carbon\Carbon::parse($request->actual_return_date)->format('d M Y, H:i') }}
                  </span>
                </td>
                <td>
                  <span class="font-medium">{{ $request->jumlah ?? 0 }}</span>
                </td>
                <td>
                  @php
                  $status = strtolower($request->status ?? '');
                  $badgeClass = 'badge-gray';
                  $label = ucfirst(str_replace('_', ' ', $status));

                  if ($status === 'pending') {
                  $badgeClass = 'badge-pending';
                  $label = 'Menunggu';
                  } elseif (in_array($status, ['staff_approved', 'kepala_approved'])) {
                  $badgeClass = 'badge-staff';
                  $label = 'Proses';
                  } elseif (in_array($status, ['final_approved', 'approved'])) {
                  $badgeClass = 'badge-success';
                  $label = 'Disetujui';
                  } elseif ($status === 'rejected') {
                  $badgeClass = 'badge-danger';
                  $label = 'Ditolak';
                  } elseif ($status === 'returned') {
                  $badgeClass = 'badge-gray';
                  $label = 'Dikembalikan';
                  } elseif ($status === 'revision_requested') {
                  $badgeClass = 'badge-pending';
                  $label = 'Revisi';
                  }
                  @endphp
                  <span class="badge {{ $badgeClass }}">{{ $label }}</span>
                </td>
                <td style="text-align: right;">
                  <a href="{{ route('borrow.show', $request->id) }}" class="text-sm font-medium text-blue-600 hover:text-blue-800 hover:underline">
                    Detail
                  </a>
                </td>
              </tr>
              @empty
              <tr>
                <td colspan="6" class="p-8 text-center text-gray-500">
                  <div class="flex flex-col items-center justify-center">
                    <svg class="w-12 h-12 text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    <p>Belum ada data permintaan peminjaman.</p>
                  </div>
                </td>
              </tr>
              @endforelse
            </tbody>
          </table>
        </div>

        {{-- Pagination --}}
        @if($requests->hasPages())
        <div class="p-4 border-t border-gray-100 bg-gray-50">
          {{ $requests->links() }}
        </div>
        @endif
      </div>

    </main>
  </div>

</body>

</html>