@extends('layouts.app')

@section('content')
<div class="container" style="padding: 120px 0 80px;">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card" style="border-radius: 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.1);">
                <div class="card-header" style="background: linear-gradient(135deg, #2D4356 0%, #8B7355 100%); color: white; border-radius: 20px 20px 0 0;">
                    <h5 class="mb-0"><i class="fas fa-edit"></i> Edit Reservation</h5>
                </div>

                <div class="card-body" style="padding: 30px;">
                    <div class="p-3 bg-light rounded-lg border mb-4" style="border-radius: 12px;">
                        <h6 class="font-weight-bold text-dark mb-3"><i class="fas fa-receipt"></i> Reservation Details</h6>
                        <div class="row">
                            <div class="col-md-6 mb-2">
                                <small class="text-muted d-block">Guest Name</small>
                                <strong>{{ $reservasi->user->name ?? $reservasi->user->nama ?? '-' }}</strong>
                            </div>
                            <div class="col-md-6 mb-2">
                                <small class="text-muted d-block">Room Type</small>
                                <strong>{{ $reservasi->kamar->tipe_kamar ?? '-' }}</strong>
                            </div>
                            <div class="col-md-6 mb-2">
                                <small class="text-muted d-block">Check-in Date</small>
                                <strong>{{ $reservasi->tanggal_checkin ? $reservasi->tanggal_checkin->format('d M Y') : '-' }}</strong>
                            </div>
                            <div class="col-md-6 mb-2">
                                <small class="text-muted d-block">Check-out Date</small>
                                <strong>{{ $reservasi->tanggal_checkout ? $reservasi->tanggal_checkout->format('d M Y') : '-' }}</strong>
                            </div>
                            <div class="col-md-12 mt-1">
                                <small class="text-muted d-block">Total Amount</small>
                                <span class="font-weight-bold text-success" style="font-size: 1.1rem;">
                                    Rp {{ number_format($reservasi->total_harga, 0, ',', '.') }}
                                </span>
                            </div>
                        </div>
                    </div>

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

                        <div class="form-group">
                            <label for="status" class="font-weight-bold">Reservation Status <span class="text-danger">*</span></label>
                            <select class="form-control @error('status') is-invalid @enderror" id="status" name="status" required>
                                <option value="pending" {{ old('status', $reservasi->status) == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="confirmed" {{ old('status', $reservasi->status) == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                                <option value="checkedin" {{ old('status', $reservasi->status) == 'checkedin' ? 'selected' : '' }}>Checked In</option>
                                <option value="checkedout" {{ old('status', $reservasi->status) == 'checkedout' ? 'selected' : '' }}>Checked Out</option>
                                <option value="cancelled" {{ old('status', $reservasi->status) == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="status_pembayaran" class="font-weight-bold">Payment Status</label>
                            <select class="form-control @error('status_pembayaran') is-invalid @enderror" id="status_pembayaran" name="status_pembayaran">
                                <option value="unpaid" {{ old('status_pembayaran', optional($reservasi->pembayaran)->status_pembayaran) == 'unpaid' ? 'selected' : '' }}>Unpaid</option>
                                <option value="pending" {{ old('status_pembayaran', optional($reservasi->pembayaran)->status_pembayaran) == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="paid" {{ old('status_pembayaran', optional($reservasi->pembayaran)->status_pembayaran) == 'paid' ? 'selected' : '' }}>Paid</option>
                                <option value="failed" {{ old('status_pembayaran', optional($reservasi->pembayaran)->status_pembayaran) == 'failed' ? 'selected' : '' }}>Failed</option>
                                <option value="cancelled" {{ old('status_pembayaran', optional($reservasi->pembayaran)->status_pembayaran) == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                            </select>
                            @error('status_pembayaran')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group mt-4">
                            <button type="submit" class="btn btn-primary" style="background: linear-gradient(135deg, #D4AF37 0%, #c49b2e 100%); border: none; padding: 12px 30px; border-radius: 25px;">
                                <i class="fas fa-save"></i> Update Reservation
                            </button>
                            <a href="{{ route('admin.reservasi.index') }}" class="btn btn-secondary" style="padding: 12px 30px; border-radius: 25px;">
                                <i class="fas fa-times"></i> Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection