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

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

@section('styles')
<style>
  .info-box {
    background: rgba(23, 190, 187, 0.05);
    border: 1px solid rgba(23, 190, 187, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
  }

  .info-label {
    color: rgba(210, 240, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  .info-value {
    color: #e2f0f7;
    font-size: 1rem;
    font-weight: 500;
  }

  .btn-edit {
    background: linear-gradient(135deg, var(--ocean-cyan), var(--ocean-teal));
    color: var(--ocean-deep);
    font-weight: 700;
    padding: 0.7rem 1.8rem;
    border-radius: 50px;
    font-size: 0.9rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.25s;
    display: inline-block;
  }

  .btn-edit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(23, 190, 187, 0.5);
  }

  .btn-back {
    background: rgba(244, 67, 54, 0.2);
    color: #EF5350;
    border: 1px solid #EF5350;
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-block;
  }

  .btn-back: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;
  }
</style>
@endsection

@section('content')

<div style="margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center;">
  <h1 class="section-title" style="margin: 0;">Detail Progress Update</h1>
  <div style="display: flex; gap: 1rem;">
    <a href="{{ route('admin.progress.edit', $progress->id) }}" class="btn-edit">Edit</a>
    <a href="{{ route('admin.progress.index') }}" class="btn-back">Kembali</a>
  </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <!-- Main Info -->
  <div style="grid-column: 1 / -1; md:grid-column: span 2;">
    <div class="section">
      <h2 class="section-title" style="margin-bottom: 1.5rem;">Informasi Update</h2>

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

      <div class="info-box">
        <div class="info-label">Lokasi</div>
        <div class="info-value">{{ $progress->location ?? '-' }}</div>
      </div>

      <div class="info-box">
        <div class="info-label">Deskripsi</div>
        <div class="info-value" style="line-height: 1.6;">{{ $progress->description ?? '-' }}</div>
      </div>

      <div class="info-box">
        <div class="info-label">Waktu Update</div>
        <div class="info-value">{{ $progress->updated_at->format('d M Y H:i') }}</div>
      </div>
    </div>
  </div>

  <!-- Booking Info -->
  <div>
    <div class="section mb-6">
      <h2 class="section-title" style="margin-bottom: 1.5rem;">Informasi Pemesanan</h2>

      <div class="info-box">
        <div class="info-label">Kode Pemesanan</div>
        <div class="info-value">{{ $progress->booking->booking_code }}</div>
      </div>

      <div class="info-box">
        <div class="info-label">Pelanggan</div>
        <div class="info-value">{{ $progress->booking->user->name }}</div>
      </div>

      <div class="info-box">
        <div class="info-label">Rute</div>
        <div class="info-value">{{ $progress->booking->route_from }} → {{ $progress->booking->route_to }}</div>
      </div>

      <a href="{{ route('admin.bookings.show', $progress->booking->id) }}" class="btn-edit" style="display: block; text-align: center; width: 100%;">Lihat Pemesanan</a>
    </div>

    <!-- Timeline -->
    <div class="section">
      <h2 class="section-title" style="margin-bottom: 1.5rem;">Timeline</h2>

      <div class="info-box">
        <div class="info-label">Dibuat</div>
        <div class="info-value">{{ $progress->created_at->format('d M Y H:i:s') }}</div>
      </div>

      <div class="info-box">
        <div class="info-label">Diperbarui</div>
        <div class="info-value">{{ $progress->updated_at->format('d M Y H:i:s') }}</div>
      </div>
    </div>
  </div>
</div>

@endsection