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

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

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

  .form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--ocean-cyan);
    font-size: 0.95rem;
    letter-spacing: 0.5px;
  }

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

  .form-control option {
    background: var(--ocean-deep);
    color: #e2f0f7;
    padding: 0.5rem;
  }

  .form-control option:checked {
    background: var(--ocean-teal);
    color: var(--ocean-deep);
  }

  .form-control:focus {
    background: rgba(23, 190, 187, 0.1);
    border-color: rgba(23, 190, 187, 0.6);
    outline: none;
    box-shadow: 0 0 0 3px rgba(23, 190, 187, 0.15);
  }

  .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;">Tambah Progress Update</h1>

  <form action="{{ route('admin.progress.store') }}" method="POST">
    @csrf

    <div class="form-group">
      <label class="form-label">Pemesanan *</label>
      <select name="booking_id" class="form-control @error('booking_id') is-invalid @enderror" required>
        <option value="">-- Pilih Pemesanan --</option>
        @foreach($bookings as $id => $code)
          <option value="{{ $id }}" {{ old('booking_id') == $id ? 'selected' : '' }}>{{ $code }}</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="">-- Pilih Status --</option>
        <option value="pending" {{ old('status') === 'pending' ? 'selected' : '' }}>Pending</option>
        <option value="boarding" {{ old('status') === 'boarding' ? 'selected' : '' }}>Boarding</option>
        <option value="sailing" {{ old('status') === 'sailing' ? 'selected' : '' }}>Sailing</option>
        <option value="arrived" {{ old('status') === 'arrived' ? 'selected' : '' }}>Arrived</option>
        <option value="completed" {{ old('status') === 'completed' ? 'selected' : '' }}>Completed</option>
        <option value="cancelled" {{ old('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') }}" placeholder="e.g. Pelabuhan Tanjung Priok" 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" placeholder="Detail update perjalanan..." class="form-control @error('description') is-invalid @enderror">{{ old('description') }}</textarea>
      @error('description')
        <div class="error-message">{{ $message }}</div>
      @enderror
    </div>

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

@endsection