@extends('layouts.app')

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

@section('breadcrumbs')
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="flex items-center space-x-4">
      <li><a href="{{ route('dashboard') }}" class="text-slate-600 hover:text-slate-900">Dashboard</a></li>
      <li class="flex items-center">
        <svg class="w-5 h-5 text-slate-400 mx-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <a href="{{ route('reservations.index') }}" class="text-slate-600 hover:text-slate-900">Reservations</a>
      </li>
      <li class="flex items-center">
        <svg class="w-5 h-5 text-slate-400 mx-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <span class="text-slate-900 font-medium">Edit Reservation</span>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div class="max-w-7xl mx-auto">
  <div class="mb-6">
    <h1 class="text-3xl font-bold text-slate-900">Edit Reservation #{{ str_pad($reservation->id, 6, '0', STR_PAD_LEFT) }}</h1>
    <p class="text-slate-600 mt-2">Update the booking details</p>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Main Form -->
    <div class="lg:col-span-2 space-y-6">
      <form action="{{ route('reservations.update', $reservation->id) }}" method="POST" id="reservationForm" class="space-y-6">
        @csrf
        @method('PUT')

        <!-- Guest Information -->
        <div class="bg-white rounded-lg border border-slate-200 p-6">
          <h2 class="text-xl font-semibold text-slate-900 mb-6">Guest Information</h2>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Guest Name -->
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Guest Name <span class="text-red-600">*</span></label>
              <input type="text" name="guest_name" value="{{ old('guest_name', $reservation->guest_name) }}" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('guest_name') border-red-500 @enderror" required>
              @error('guest_name')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
              @enderror
            </div>

            <!-- Email -->
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Email <span class="text-red-600">*</span></label>
              <input type="email" name="email" value="{{ old('email', $reservation->email) }}" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('email') border-red-500 @enderror" required>
              @error('email')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
              @enderror
            </div>

            <!-- Phone -->
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Phone <span class="text-red-600">*</span></label>
              <input type="text" name="phone" value="{{ old('phone', $reservation->phone) }}" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('phone') border-red-500 @enderror" required>
              @error('phone')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
              @enderror
            </div>

            <!-- Nationality -->
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Nationality</label>
              <input type="text" name="nationality" value="{{ old('nationality', $reservation->nationality) }}" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
            </div>
          </div>
        </div>

        <!-- Booking Details -->
        <div class="bg-white rounded-lg border border-slate-200 p-6">
          <h2 class="text-xl font-semibold text-slate-900 mb-6">Booking Details</h2>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <!-- Room Selection -->
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Select Room <span class="text-red-600">*</span></label>
              <select name="room_id" id="roomSelect" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('room_id') border-red-500 @enderror" required onchange="updateRoomRate()">
                <option value="">Select a Room</option>
                @if(isset($availableRooms))
                  @foreach($availableRooms as $room)
                    <option value="{{ $room->id }}" data-rate="{{ $room->rate_per_night }}" {{ old('room_id', $reservation->room_id) == $room->id ? 'selected' : '' }}>
                      Room {{ $room->room_number }} ({{ $room->roomType->name ?? 'N/A' }}) - ${{ number_format($room->rate_per_night, 2) }}/night
                    </option>
                  @endforeach
                @endif
              </select>
              @error('room_id')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
              @enderror
            </div>

            <!-- Check-in Date -->
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Check-in Date <span class="text-red-600">*</span></label>
              <input type="date" name="check_in_date" id="checkInDate" value="{{ old('check_in_date', $reservation->check_in_date->format('Y-m-d')) }}" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('check_in_date') border-red-500 @enderror" required onchange="calculateTotal()">
              @error('check_in_date')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
              @enderror
            </div>

            <!-- Check-out Date -->
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Check-out Date <span class="text-red-600">*</span></label>
              <input type="date" name="check_out_date" id="checkOutDate" value="{{ old('check_out_date', $reservation->check_out_date->format('Y-m-d')) }}" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('check_out_date') border-red-500 @enderror" required onchange="calculateTotal()">
              @error('check_out_date')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
              @enderror
            </div>

            <!-- Adults -->
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Adults <span class="text-red-600">*</span></label>
              <input type="number" name="adults" value="{{ old('adults', $reservation->adults) }}" min="1" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('adults') border-red-500 @enderror" required>
              @error('adults')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
              @enderror
            </div>

            <!-- Children -->
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Children</label>
              <input type="number" name="children" value="{{ old('children', $reservation->children ?? 0) }}" min="0" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
            </div>

            <!-- Booking Source -->
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Booking Source <span class="text-red-600">*</span></label>
              <select name="booking_source" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('booking_source') border-red-500 @enderror" required>
                <option value="">Select Source</option>
                <option value="direct" {{ old('booking_source', $reservation->booking_source) === 'direct' ? 'selected' : '' }}>Direct</option>
                <option value="booking.com" {{ old('booking_source', $reservation->booking_source) === 'booking.com' ? 'selected' : '' }}>Booking.com</option>
                <option value="agoda" {{ old('booking_source', $reservation->booking_source) === 'agoda' ? 'selected' : '' }}>Agoda</option>
                <option value="airbnb" {{ old('booking_source', $reservation->booking_source) === 'airbnb' ? 'selected' : '' }}>Airbnb</option>
                <option value="other" {{ old('booking_source', $reservation->booking_source) === 'other' ? 'selected' : '' }}>Other</option>
              </select>
              @error('booking_source')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
              @enderror
            </div>

            <!-- Status -->
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Status <span class="text-red-600">*</span></label>
              <select name="status" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('status') border-red-500 @enderror" required>
                <option value="">Select Status</option>
                <option value="pending" {{ old('status', $reservation->status) === 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="confirmed" {{ old('status', $reservation->status) === 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                <option value="checked_in" {{ old('status', $reservation->status) === 'checked_in' ? 'selected' : '' }}>Checked In</option>
                <option value="checked_out" {{ old('status', $reservation->status) === 'checked_out' ? 'selected' : '' }}>Checked Out</option>
                <option value="cancelled" {{ old('status', $reservation->status) === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
              </select>
              @error('status')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <!-- Special Requests -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Special Requests</label>
            <textarea name="special_requests" rows="4" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('special_requests') border-red-500 @enderror" placeholder="Late checkout, high floor, etc.">{{ old('special_requests', $reservation->special_requests) }}</textarea>
            @error('special_requests')
              <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
          </div>
        </div>

        <!-- Payment Information -->
        <div class="bg-white rounded-lg border border-slate-200 p-6">
          <h2 class="text-xl font-semibold text-slate-900 mb-6">Payment Information</h2>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Payment Method -->
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Payment Method <span class="text-red-600">*</span></label>
              <select name="payment_method" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('payment_method') border-red-500 @enderror" required>
                <option value="">Select Method</option>
                <option value="cash" {{ old('payment_method', $reservation->payment_method) === 'cash' ? 'selected' : '' }}>Cash</option>
                <option value="card" {{ old('payment_method', $reservation->payment_method) === 'card' ? 'selected' : '' }}>Credit/Debit Card</option>
                <option value="bank_transfer" {{ old('payment_method', $reservation->payment_method) === 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                <option value="online" {{ old('payment_method', $reservation->payment_method) === 'online' ? 'selected' : '' }}>Online Payment</option>
              </select>
              @error('payment_method')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
              @enderror
            </div>

            <!-- Payment Status -->
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Payment Status <span class="text-red-600">*</span></label>
              <select name="payment_status" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('payment_status') border-red-500 @enderror" required>
                <option value="">Select Payment Status</option>
                <option value="pending" {{ old('payment_status', $reservation->payment_status) === 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="paid" {{ old('payment_status', $reservation->payment_status) === 'paid' ? 'selected' : '' }}>Paid</option>
                <option value="cancelled" {{ old('payment_status', $reservation->payment_status) === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
              </select>
              @error('payment_status')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
              @enderror
            </div>

            <!-- Paid Amount -->
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Paid Amount ($)</label>
              <input type="number" name="paid_amount" id="paidAmount" value="{{ old('paid_amount', $reservation->paid_amount) }}" step="0.01" min="0" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('paid_amount') border-red-500 @enderror">
              @error('paid_amount')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
              @enderror
            </div>

            <!-- Total Amount -->
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Total Amount ($)</label>
              <input type="number" name="total_amount" id="totalAmount" value="{{ old('total_amount', $reservation->total_amount) }}" step="0.01" min="0" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('total_amount') border-red-500 @enderror">
              @error('total_amount')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
              @enderror
            </div>
          </div>
        </div>

        <!-- Form Actions -->
        <div class="flex justify-end space-x-4">
          <a href="{{ route('reservations.index') }}" class="px-6 py-2 border border-slate-300 rounded-lg text-slate-700 hover:bg-slate-50 transition-colors duration-200 font-medium">
            Cancel
          </a>
          <button type="submit" class="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium">
            Update Reservation
          </button>
        </div>
      </form>
    </div>

    <!-- Booking Summary Card -->
    <div class="space-y-6">
      <div class="bg-gradient-to-br from-primary-50 to-blue-50 rounded-lg border border-primary-200 p-6 sticky top-24">
        <h2 class="text-xl font-semibold text-slate-900 mb-6">Booking Summary</h2>

        <div class="space-y-4 text-sm mb-6">
          <div class="flex justify-between items-center pb-3 border-b border-primary-200">
            <span class="text-slate-600">Room:</span>
            <span class="font-medium text-slate-900" id="summaryRoom">Room {{ $reservation->room->room_number }}</span>
          </div>

          <div class="flex justify-between items-center pb-3 border-b border-primary-200">
            <span class="text-slate-600">Check-in:</span>
            <span class="font-medium text-slate-900" id="summaryCheckIn">{{ $reservation->check_in_date->format('M d, Y') }}</span>
          </div>

          <div class="flex justify-between items-center pb-3 border-b border-primary-200">
            <span class="text-slate-600">Check-out:</span>
            <span class="font-medium text-slate-900" id="summaryCheckOut">{{ $reservation->check_out_date->format('M d, Y') }}</span>
          </div>

          <div class="flex justify-between items-center pb-3 border-b border-primary-200">
            <span class="text-slate-600">Number of Nights:</span>
            <span class="font-medium text-slate-900" id="summaryNights">{{ $reservation->check_out_date->diffInDays($reservation->check_in_date) }}</span>
          </div>

          <div class="flex justify-between items-center pb-3 border-b border-primary-200">
            <span class="text-slate-600">Rate per Night:</span>
            <span class="font-medium text-slate-900" id="summaryRate">${{ number_format($reservation->room->rate_per_night ?? 0, 2) }}</span>
          </div>

          <div class="flex justify-between items-center pt-3">
            <span class="text-slate-900 font-semibold">Total Amount:</span>
            <span class="text-2xl font-bold text-primary-600" id="summaryTotal">${{ number_format($reservation->total_amount ?? 0, 2) }}</span>
          </div>

          <div class="flex justify-between items-center pt-3 border-t border-primary-200">
            <span class="text-slate-900 font-semibold">Paid Amount:</span>
            <span class="text-lg font-semibold text-green-600">${{ number_format($reservation->paid_amount ?? 0, 2) }}</span>
          </div>

          <div class="flex justify-between items-center">
            <span class="text-slate-900 font-semibold">Remaining:</span>
            <span class="text-lg font-semibold text-orange-600">${{ number_format(($reservation->total_amount ?? 0) - ($reservation->paid_amount ?? 0), 2) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  function updateRoomRate() {
    const roomSelect = document.getElementById('roomSelect');
    const selectedOption = roomSelect.options[roomSelect.selectedIndex];
    if (selectedOption.value) {
      document.getElementById('summaryRoom').textContent = selectedOption.text.split(' - ')[0];
    }
  }

  function calculateTotal() {
    // Can be used to auto-calculate totals if needed
  }

  // Initialize on load
  document.addEventListener('DOMContentLoaded', function() {
    updateRoomRate();
  });
</script>
@endsection