@extends('layouts.admin')

@section('title', 'Edit Booking')
@section('content')
<style>
  select option {
    background: #0a2540;
    color: #e2f0f7;
    padding: 0.5rem;
  }
  select option:checked {
    background: rgba(23,190,187,0.4);
    color: #ffffff;
  }
  select option:hover {
    background: rgba(23,190,187,0.3);
  }
</style>
<div style="background-color: #020c1b; color: #e2f0f7; min-height: 100vh; padding: 2rem;">
  <div style="max-width: 800px; margin: 0 auto; background: rgba(10, 37, 64, 0.4); border-radius: 16px; padding: 2rem; border: 1px solid rgba(23, 190, 187, 0.1);">
    <h1 style="font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 900; margin-bottom: 2rem;">Edit Pemesanan</h1>

    @if($errors->any())
    <div style="background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.5); border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; color: #f08080;">
      <strong>Error!</strong>
      <ul style="margin: 0; padding-left: 1.5rem;">
        @foreach($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
    @endif

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

      <div style="margin-bottom: 1.5rem;">
        <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Pelanggan *</label>
        <select name="user_id" style="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;" required>
          <option value="">-- Pilih Pelanggan --</option>
          @foreach($users as $user)
            <option value="{{ $user->id }}" {{ old('user_id', $booking->user_id) == $user->id ? 'selected' : '' }}>{{ $user->name }} ({{ $user->email }})</option>
          @endforeach
        </select>
      </div>

      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;">
        <div>
          <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Dari *</label>
          <input type="text" name="route_from" value="{{ old('route_from', $booking->route_from) }}" style="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;" required>
        </div>
        <div>
          <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Ke *</label>
          <input type="text" name="route_to" value="{{ old('route_to', $booking->route_to) }}" style="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;" required>
        </div>
      </div>

      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;">
        <div>
          <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Tanggal Berangkat *</label>
          <input type="datetime-local" name="departure_date" value="{{ old('departure_date', $booking->departure_date->format('Y-m-d\TH:i')) }}" style="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;" required>
        </div>
        <div>
          <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Penumpang *</label>
          <input type="number" name="passengers" value="{{ old('passengers', $booking->passengers) }}" style="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;" required>
        </div>
      </div>

      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;">
        <div>
          <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Kelas *</label>
          <select name="class" style="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;" required>
            <option value="">-- Pilih Kelas --</option>
            <option value="ekonomi" {{ old('class', $booking->class) === 'ekonomi' ? 'selected' : '' }}>Ekonomi</option>
            <option value="bisnis" {{ old('class', $booking->class) === 'bisnis' ? 'selected' : '' }}>Bisnis</option>
            <option value="vip" {{ old('class', $booking->class) === 'vip' ? 'selected' : '' }}>VIP</option>
            <option value="suite" {{ old('class', $booking->class) === 'suite' ? 'selected' : '' }}>Suite</option>
          </select>
        </div>
        <div>
          <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Harga (Rp) *</label>
          <input type="number" name="price" value="{{ old('price', $booking->price) }}" style="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;" required>
        </div>
      </div>

      <div style="margin-bottom: 1.5rem;">
        <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Status *</label>
        <select name="status" style="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;" required>
          <option value="">-- Pilih Status --</option>
          <option value="pending" {{ old('status', $booking->status) === 'pending' ? 'selected' : '' }}>Pending</option>
          <option value="confirmed" {{ old('status', $booking->status) === 'confirmed' ? 'selected' : '' }}>Confirmed</option>
          <option value="completed" {{ old('status', $booking->status) === 'completed' ? 'selected' : '' }}>Completed</option>
          <option value="cancelled" {{ old('status', $booking->status) === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
        </select>
      </div>

      <div style="margin-bottom: 1.5rem;">
        <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Catatan</label>
        <textarea name="notes" rows="3" style="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;">{{ old('notes', $booking->notes) }}</textarea>
      </div>

      <div style="display: flex; gap: 1rem;">
        <button type="submit" style="background: linear-gradient(135deg, #17bebb, #0e6e8c); color: #020c1b; font-weight: 700; padding: 0.8rem 2rem; border-radius: 8px; border: none; cursor: pointer; flex: 1; font-size: 0.95rem;">Update Pemesanan</button>
        <a href="{{ route('admin.bookings.index') }}" style="background: rgba(23, 190, 187, 0.1); color: #17bebb; font-weight: 700; padding: 0.8rem 2rem; border-radius: 8px; border: 1px solid rgba(23, 190, 187, 0.3); cursor: pointer; text-decoration: none; text-align: center;">Batal</a>
      </div>
    </form>

    <div style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(23, 190, 187, 0.2);">
      <h6 style="font-size: 0.9rem; color: rgba(226, 240, 247, 0.7); margin-bottom: 1rem;">Informasi Pemesanan</h6>
      <p style="margin: 0.5rem 0; font-size: 0.9rem;"><strong>ID Pemesanan:</strong> {{ $booking->id }}</p>
      <p style="margin: 0.5rem 0; font-size: 0.9rem;"><strong>Kode Pemesanan:</strong> {{ $booking->booking_code }}</p>
      <p style="margin: 0.5rem 0; font-size: 0.9rem;"><strong>Dibuat:</strong> {{ $booking->created_at->format('d M Y H:i') }}</p>
      <p style="margin: 0.5rem 0; font-size: 0.9rem;"><strong>Diperbarui:</strong> {{ $booking->updated_at->format('d M Y H:i') }}</p>
    </div>
  </div>
</div>
@endsection