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

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

@section('styles')
<style>
  .form-group {
    margin-bottom: 1.5rem;
  }

  .form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #e2f0f7;
  }

  .form-control {
    width: 100%;
    padding: 0.8rem;
    background: rgba(23, 190, 187, 0.05);
    border: 1px solid rgba(23, 190, 187, 0.2);
    border-radius: 8px;
    color: #e2f0f7;
    font-family: 'DM Sans', sans-serif;
  }

  .form-control:focus {
    background: rgba(23, 190, 187, 0.1);
    border-color: rgba(23, 190, 187, 0.4);
    outline: none;
  }

  /* FIX: teks option dropdown tidak putih */
  .form-control option {
    background-color: #0a2540;
    color: #e2f0f7;
  }

  .btn-submit {
    background: linear-gradient(135deg, var(--ocean-cyan), var(--ocean-teal));
    color: var(--ocean-deep);
    font-weight: 700;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    width: 100%;
    font-size: 0.95rem;
    transition: all 0.25s;
  }

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

  .btn-cancel {
    background: rgba(244, 67, 54, 0.2);
    color: #EF5350;
    border: 1px solid #EF5350;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-block;
    text-align: center;
  }

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

  .btn-group {
    display: flex;
    gap: 1rem;
  }

  .error-message {
    color: #EF5350;
    font-size: 0.85rem;
    margin-top: 0.25rem;
  }
</style>
@endsection

@section('content')

<div class="section" style="max-width: 700px; margin: 0 auto;">
  <h1 class="section-title" style="margin-bottom: 2rem;">Edit Progress Update</h1>

  <form action="{{ route('admin.progress.update', $progress) }}" method="POST">
    @csrf
    @method('PUT')

    <div class="form-group">
      <label class="form-label">Pemesanan *</label>
      <select name="booking_id" class="form-control @error('booking_id') is-invalid @enderror" required>
        @foreach($bookings as $id => $label)
          <option value="{{ $id }}" {{ old('booking_id', $progress->booking_id) == $id ? 'selected' : '' }}>
            {{ $label }}
          </option>
        @endforeach
      </select>
      @error('booking_id')
        <div class="error-message">{{ $message }}</div>
      @enderror
    </div>

    <div class="form-group">
      <label class="form-label">Status *</label>
      <select name="status" class="form-control @error('status') is-invalid @enderror" required>
        <option value="pending"   {{ old('status', $progress->status) === 'pending'   ? 'selected' : '' }}>Pending</option>
        <option value="boarding"  {{ old('status', $progress->status) === 'boarding'  ? 'selected' : '' }}>Boarding</option>
        <option value="sailing"   {{ old('status', $progress->status) === 'sailing'   ? 'selected' : '' }}>Sailing</option>
        <option value="arrived"   {{ old('status', $progress->status) === 'arrived'   ? 'selected' : '' }}>Arrived</option>
        <option value="completed" {{ old('status', $progress->status) === 'completed' ? 'selected' : '' }}>Completed</option>
        <option value="cancelled" {{ old('status', $progress->status) === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
      </select>
      @error('status')
        <div class="error-message">{{ $message }}</div>
      @enderror
    </div>

    <div class="form-group">
      <label class="form-label">Lokasi *</label>
      <input type="text" name="location" value="{{ old('location', $progress->location) }}" class="form-control @error('location') is-invalid @enderror" required>
      @error('location')
        <div class="error-message">{{ $message }}</div>
      @enderror
    </div>

    <div class="form-group">
      <label class="form-label">Deskripsi</label>
      <textarea name="description" rows="4" class="form-control @error('description') is-invalid @enderror">{{ old('description', $progress->description) }}</textarea>
      @error('description')
        <div class="error-message">{{ $message }}</div>
      @enderror
    </div>

    <div class="btn-group">
      <button type="submit" class="btn-submit">Update Progress</button>
      <a href="{{ route('admin.progress.index') }}" class="btn-cancel">Batal</a>
    </div>
  </form>
</div>

@endsection