@extends('layouts.app')

@section('title', 'Create 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">Create 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">Create New Reservation</h1>
    <p class="text-slate-600 mt-2">Fill in the form to create a new booking</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.store') }}" method="POST" id="reservationForm" class="space-y-6">
        @csrf

        <!-- 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>

          <!-- Guest Selection -->
          <div class="mb-6">
            <label class="block text-sm font-medium text-slate-700 mb-2">Select Existing Guest or Add New <span class="text-red-600">*</span></label>
            <div class="flex gap-4 items-end">
              <div class="flex-1">
                <select name="guest_id" id="guestSelect" 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_id') border-red-500 @enderror">
                  <option value="">-- Add as New Guest --</option>
                  @if(isset($guests))
                    @foreach($guests as $guest)
                      <option value="{{ $guest->id }}" data-email="{{ $guest->email }}" data-phone="{{ $guest->phone }}">
                        {{ $guest->name }} ({{ $guest->email }})
                      </option>
                    @endforeach
                  @endif
                </select>
              </div>
            </div>
            @error('guest_id')
              <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
          </div>

          <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" id="guestName" value="{{ old('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" id="guestEmail" value="{{ old('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" id="guestPhone" value="{{ old('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') }}" 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 }}">
                      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') }}" 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') }}" 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', 1) }}" 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', 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') === 'direct' ? 'selected' : '' }}>Direct</option>
                <option value="booking.com" {{ old('booking_source') === 'booking.com' ? 'selected' : '' }}>Booking.com</option>
                <option value="agoda" {{ old('booking_source') === 'agoda' ? 'selected' : '' }}>Agoda</option>
                <option value="airbnb" {{ old('booking_source') === 'airbnb' ? 'selected' : '' }}>Airbnb</option>
                <option value="other" {{ old('booking_source') === 'other' ? 'selected' : '' }}>Other</option>
              </select>
              @error('booking_source')
                <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') }}</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') === 'cash' ? 'selected' : '' }}>Cash</option>
                <option value="card" {{ old('payment_method') === 'card' ? 'selected' : '' }}>Credit/Debit Card</option>
                <option value="bank_transfer" {{ old('payment_method') === 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                <option value="online" {{ old('payment_method') === 'online' ? 'selected' : '' }}>Online Payment</option>
              </select>
              @error('payment_method')
                <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', 0) }}" 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>
          </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">
            Create 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">-</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">-</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">-</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">0</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">$0.00</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">$0.00</span>
          </div>
        </div>

        <input type="hidden" name="total_amount" id="totalAmount" value="0">
      </div>
    </div>
  </div>
</div>

<script>
  const guestSelect = document.getElementById('guestSelect');
  const guestName = document.getElementById('guestName');
  const guestEmail = document.getElementById('guestEmail');
  const guestPhone = document.getElementById('guestPhone');

  guestSelect.addEventListener('change', function() {
    if (this.value) {
      const selectedOption = this.options[this.selectedIndex];
      guestName.value = selectedOption.text.split(' (')[0];
      guestEmail.value = selectedOption.dataset.email;
      guestPhone.value = selectedOption.dataset.phone;
    } else {
      guestName.value = '';
      guestEmail.value = '';
      guestPhone.value = '';
    }
  });

  function updateRoomRate() {
    calculateTotal();
    const roomSelect = document.getElementById('roomSelect');
    const selectedOption = roomSelect.options[roomSelect.selectedIndex];
    if (selectedOption.value) {
      document.getElementById('summaryRoom').textContent = selectedOption.text;
    } else {
      document.getElementById('summaryRoom').textContent = '-';
    }
  }

  function calculateTotal() {
    const roomSelect = document.getElementById('roomSelect');
    const checkInDate = document.getElementById('checkInDate');
    const checkOutDate = document.getElementById('checkOutDate');

    if (roomSelect.value && checkInDate.value && checkOutDate.value) {
      const selectedOption = roomSelect.options[roomSelect.selectedIndex];
      const rate = parseFloat(selectedOption.dataset.rate) || 0;
      const checkIn = new Date(checkInDate.value);
      const checkOut = new Date(checkOutDate.value);
      const nights = Math.ceil((checkOut - checkIn) / (1000 * 60 * 60 * 24));

      if (nights > 0) {
        const total = rate * nights;
        document.getElementById('summaryNights').textContent = nights;
        document.getElementById('summaryRate').textContent = '$' + rate.toFixed(2);
        document.getElementById('summaryTotal').textContent = '$' + total.toFixed(2);
        document.getElementById('totalAmount').value = total.toFixed(2);
        document.getElementById('summaryCheckIn').textContent = checkInDate.value;
        document.getElementById('summaryCheckOut').textContent = checkOutDate.value;
      }
    }
  }
</script>
@endsection