@extends('layouts.app')

@section('title', 'Reservations')

@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>
        <span class="text-slate-900 font-medium">Reservations</span>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div class="space-y-6">
  <!-- Header -->
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-3xl font-bold text-slate-900">Reservations</h1>
      <p class="text-slate-600 mt-2">Manage your hotel bookings</p>
    </div>
    <a href="{{ route('reservations.create') }}" class="flex items-center space-x-2 bg-primary-600 text-white px-6 py-3 rounded-lg hover:bg-primary-700 transition-colors duration-200">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
      </svg>
      <span>New Reservation</span>
    </a>
  </div>

  <!-- Filters -->
  <div class="bg-white rounded-lg border border-slate-200 p-6">
    <form method="GET" action="{{ route('reservations.index') }}" class="grid grid-cols-1 md:grid-cols-5 gap-4 items-end">
      <!-- Status Filter -->
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">Status</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">
          <option value="">All Statuses</option>
          <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
          <option value="confirmed" {{ request('status') === 'confirmed' ? 'selected' : '' }}>Confirmed</option>
          <option value="checked_in" {{ request('status') === 'checked_in' ? 'selected' : '' }}>Checked In</option>
          <option value="checked_out" {{ request('status') === 'checked_out' ? 'selected' : '' }}>Checked Out</option>
          <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
        </select>
      </div>

      <!-- Check-in From -->
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">Check-in From</label>
        <input type="date" name="check_in_from" value="{{ request('check_in_from') }}" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
      </div>

      <!-- Check-in To -->
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">Check-in To</label>
        <input type="date" name="check_in_to" value="{{ request('check_in_to') }}" 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</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">
          <option value="">All Sources</option>
          <option value="direct" {{ request('booking_source') === 'direct' ? 'selected' : '' }}>Direct</option>
          <option value="booking.com" {{ request('booking_source') === 'booking.com' ? 'selected' : '' }}>Booking.com</option>
          <option value="agoda" {{ request('booking_source') === 'agoda' ? 'selected' : '' }}>Agoda</option>
          <option value="airbnb" {{ request('booking_source') === 'airbnb' ? 'selected' : '' }}>Airbnb</option>
          <option value="other" {{ request('booking_source') === 'other' ? 'selected' : '' }}>Other</option>
        </select>
      </div>

      <!-- Search -->
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">Search</label>
        <input type="text" name="search" placeholder="Guest name, email, room..." value="{{ request('search') }}" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
      </div>

      <!-- Filter Button -->
      <button type="submit" class="bg-primary-600 text-white px-6 py-2 rounded-lg hover:bg-primary-700 transition-colors duration-200 md:col-span-5">
        Filter
      </button>
      <a href="{{ route('reservations.index') }}" class="block text-center bg-slate-200 text-slate-700 px-6 py-2 rounded-lg hover:bg-slate-300 transition-colors duration-200 md:col-span-5">
        Reset
      </a>
    </form>
  </div>

  <!-- Table -->
  <div class="bg-white rounded-lg border border-slate-200 overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead class="bg-slate-50 border-b border-slate-200">
          <tr>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Reservation No</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Guest Name</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Room</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Check-in</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Check-out</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Payment</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Amount</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
          @forelse($reservations as $reservation)
            <tr class="hover:bg-slate-50 transition-colors duration-200">
              <td class="px-6 py-4 text-sm font-medium text-slate-900">#{{ str_pad($reservation->id, 6, '0', STR_PAD_LEFT) }}</td>
              <td class="px-6 py-4 text-sm text-slate-600">{{ $reservation->guest_name ?? 'N/A' }}</td>
              <td class="px-6 py-4 text-sm font-medium text-slate-900">{{ $reservation->room->room_number ?? 'N/A' }}</td>
              <td class="px-6 py-4 text-sm text-slate-600">{{ $reservation->check_in_date->format('M d, Y') ?? 'N/A' }}</td>
              <td class="px-6 py-4 text-sm text-slate-600">{{ $reservation->check_out_date->format('M d, Y') ?? 'N/A' }}</td>
              <td class="px-6 py-4 text-sm">
                @switch($reservation->status)
                  @case('pending')
                    <span class="inline-block px-3 py-1 bg-slate-100 text-slate-800 text-xs font-semibold rounded-full">Pending</span>
                    @break
                  @case('confirmed')
                    <span class="inline-block px-3 py-1 bg-blue-100 text-blue-800 text-xs font-semibold rounded-full">Confirmed</span>
                    @break
                  @case('checked_in')
                    <span class="inline-block px-3 py-1 bg-green-100 text-green-800 text-xs font-semibold rounded-full">Checked In</span>
                    @break
                  @case('checked_out')
                    <span class="inline-block px-3 py-1 bg-slate-100 text-slate-800 text-xs font-semibold rounded-full">Checked Out</span>
                    @break
                  @case('cancelled')
                    <span class="inline-block px-3 py-1 bg-red-100 text-red-800 text-xs font-semibold rounded-full">Cancelled</span>
                    @break
                  @default
                    <span class="inline-block px-3 py-1 bg-slate-100 text-slate-800 text-xs font-semibold rounded-full">{{ $reservation->status }}</span>
                @endswitch
              </td>
              <td class="px-6 py-4 text-sm">
                @switch($reservation->payment_status)
                  @case('paid')
                    <span class="inline-block px-3 py-1 bg-green-100 text-green-800 text-xs font-semibold rounded-full">Paid</span>
                    @break
                  @case('pending')
                    <span class="inline-block px-3 py-1 bg-yellow-100 text-yellow-800 text-xs font-semibold rounded-full">Pending</span>
                    @break
                  @case('cancelled')
                    <span class="inline-block px-3 py-1 bg-red-100 text-red-800 text-xs font-semibold rounded-full">Cancelled</span>
                    @break
                  @default
                    <span class="inline-block px-3 py-1 bg-slate-100 text-slate-800 text-xs font-semibold rounded-full">{{ $reservation->payment_status }}</span>
                @endswitch
              </td>
              <td class="px-6 py-4 text-sm font-medium text-slate-900">${{ number_format($reservation->total_amount ?? 0, 2) }}</td>
              <td class="px-6 py-4 text-sm">
                <div class="flex items-center space-x-2">
                  <a href="{{ route('reservations.show', $reservation->id) }}" class="text-primary-600 hover:text-primary-900 font-medium text-xs">View</a>
                  <a href="{{ route('reservations.edit', $reservation->id) }}" class="text-blue-600 hover:text-blue-900 font-medium text-xs">Edit</a>
                  @if($reservation->status === 'confirmed')
                    <button class="text-green-600 hover:text-green-900 font-medium text-xs" title="Check-in">Check-in</button>
                  @endif
                  @if($reservation->status === 'checked_in')
                    <button class="text-orange-600 hover:text-orange-900 font-medium text-xs" title="Check-out">Check-out</button>
                  @endif
                </div>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="9" class="px-6 py-12 text-center">
                <div class="flex flex-col items-center justify-center">
                  <svg class="w-12 h-12 text-slate-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                  </svg>
                  <p class="text-slate-600 font-medium">No reservations found</p>
                  <p class="text-slate-500 text-sm mt-1">Create your first reservation to get started</p>
                </div>
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

  <!-- Pagination -->
  @if(isset($reservations) && $reservations->hasPages())
    <div class="flex justify-center">
      {{ $reservations->links() }}
    </div>
  @endif
</div>
@endsection