@extends('layouts.admin-progress', ['pageTitle' => 'Kelola Progress - Admin'])

@section('title', 'Kelola Progress')

@section('styles')
<style>
  .btn-edit {
    background: rgba(33, 150, 243, 0.2);
    color: #42A5F5;
    border: 1px solid #42A5F5;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-block;
  }

  .btn-edit:hover {
    background: rgba(33, 150, 243, 0.4);
  }

  .btn-show {
    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;
    display: inline-block;
  }

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

  .btn-danger {
    background: rgba(244, 67, 54, 0.2);
    color: #EF5350;
    border: 1px solid #EF5350;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-danger:hover {
    background: rgba(244, 67, 54, 0.4);
  }

  .status-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
  }

  .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')

<div class="section mb-8">
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
    <h1 class="section-title" style="margin: 0;">Kelola Progress</h1>
    <a href="{{ route('admin.progress.create') }}" class="btn-primary">+ Tambah Progress</a>
  </div>

  @if(session('success'))
    <div style="background: rgba(76, 175, 80, 0.1); border: 1px solid rgba(76, 175, 80, 0.3); color: #81C784; padding: 1rem; border-radius: 12px; margin-bottom: 1.5rem;">
      {{ session('success') }}
    </div>
  @endif

  <div style="overflow-x: auto;">
    <table class="table">
      <thead>
        <tr>
          <th>No</th>
          <th>Kode Booking</th>
          <th>Pelanggan</th>
          <th>Status</th>
          <th>Deskripsi</th>
          <th>Lokasi</th>
          <th>Update</th>
          <th style="text-align: center;">Aksi</th>
        </tr>
      </thead>

      <tbody>
        @forelse($progressList as $item)
        <tr style="background:rgba(23,190,187,0.05);">
          <td>
            {{ $loop->iteration + ($progressList->currentPage() - 1) * $progressList->perPage() }}
          </td>

          <td>
            <strong>{{ $item->booking->booking_code ?? 'N/A' }}</strong>
          </td>

          <td>
            {{ $item->booking->user->name ?? 'N/A' }}
          </td>

          <td>
            <span class="status-badge" style="background:
              @if($item->status === 'completed') rgba(76,175,80,0.2); color:#81C784;
              @elseif($item->status === 'cancelled') rgba(244,67,54,0.2); color:#EF5350;
              @elseif($item->status === 'arrived') rgba(33,150,243,0.2); color:#42A5F5;
              @elseif($item->status === 'delayed') rgba(255,152,0,0.2); color:#FFB74D;
              @else rgba(99,102,241,0.2); color:#818CF8;
              @endif">
              {{ ucfirst(str_replace('-', ' ', $item->status)) }}
            </span>
          </td>

          <td>
            {{ \Illuminate\Support\Str::limit($item->description, 40) }}
          </td>

          <td>
            {{ $item->location ?? '-' }}
          </td>

          <td>
            <small style="color:#9ca3af;">
              {{ $item->updated_at->format('d M Y H:i') }}
            </small>
          </td>

          <td style="text-align: center;">
            <a href="{{ route('admin.progress.show', $item->id) }}" class="btn-show" title="Lihat">Lihat</a>
            <a href="{{ route('admin.progress.edit', $item->id) }}" class="btn-edit" title="Edit">Edit</a>
            <form action="{{ route('admin.progress.destroy', $item->id) }}"
                  method="POST"
                  style="display:inline;">
              @csrf
              @method('DELETE')
              <button type="submit"
                      class="btn-danger"
                      title="Hapus"
                      onclick="return confirm('Yakin ingin menghapus progress ini?')">
                Hapus
              </button>
            </form>
          </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 data progress
          </td>
        </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  @if($progressList->hasPages())
    <div style="margin-top: 2rem; display: flex; justify-content: center;">
      {{ $progressList->links() }}
    </div>
  @endif

</div>

@endsection