@extends('layouts.app')

@section('title', 'Rooms Management')

@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">Rooms</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">Rooms</h1>
      <p class="text-slate-600 mt-2">Manage your hotel rooms inventory</p>
    </div>
    <a href="{{ route('rooms.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>Add Room</span>
    </a>
  </div>

  <!-- Filters -->
  <div class="bg-white rounded-lg border border-slate-200 p-6">
    <form method="GET" action="{{ route('rooms.index') }}" class="flex flex-col md:flex-row gap-4 items-end">
      <!-- Status Filter -->
      <div class="flex-1">
        <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="available" {{ request('status') === 'available' ? 'selected' : '' }}>Available</option>
          <option value="occupied" {{ request('status') === 'occupied' ? 'selected' : '' }}>Occupied</option>
          <option value="maintenance" {{ request('status') === 'maintenance' ? 'selected' : '' }}>Maintenance</option>
          <option value="reserved" {{ request('status') === 'reserved' ? 'selected' : '' }}>Reserved</option>
          <option value="cleaning" {{ request('status') === 'cleaning' ? 'selected' : '' }}>Cleaning</option>
        </select>
      </div>

      <!-- Floor Filter -->
      <div class="flex-1">
        <label class="block text-sm font-medium text-slate-700 mb-2">Floor</label>
        <select name="floor" 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 Floors</option>
          @if(isset($floors))
            @foreach($floors as $floor)
              <option value="{{ $floor->id }}" {{ request('floor') == $floor->id ? 'selected' : '' }}>{{ $floor->name }}</option>
            @endforeach
          @endif
        </select>
      </div>

      <!-- Room Type Filter -->
      <div class="flex-1">
        <label class="block text-sm font-medium text-slate-700 mb-2">Room Type</label>
        <select name="room_type" 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 Types</option>
          @if(isset($roomTypes))
            @foreach($roomTypes as $type)
              <option value="{{ $type->id }}" {{ request('room_type') == $type->id ? 'selected' : '' }}>{{ $type->name }}</option>
            @endforeach
          @endif
        </select>
      </div>

      <!-- Search -->
      <div class="flex-1">
        <label class="block text-sm font-medium text-slate-700 mb-2">Search</label>
        <input type="text" name="search" placeholder="Room number..." 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">
        Filter
      </button>
      <a href="{{ route('rooms.index') }}" class="bg-slate-200 text-slate-700 px-6 py-2 rounded-lg hover:bg-slate-300 transition-colors duration-200">
        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">Room No</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Floor</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Type</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Bed Type</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Rate/Night</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">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
          @forelse($rooms as $room)
            <tr class="hover:bg-slate-50 transition-colors duration-200">
              <td class="px-6 py-4 text-sm font-medium text-slate-900">{{ $room->room_number }}</td>
              <td class="px-6 py-4 text-sm text-slate-600">{{ $room->floor->name ?? 'N/A' }}</td>
              <td class="px-6 py-4 text-sm text-slate-600">{{ $room->roomType->name ?? 'N/A' }}</td>
              <td class="px-6 py-4 text-sm text-slate-600">{{ $room->bed_type ?? 'N/A' }}</td>
              <td class="px-6 py-4 text-sm font-medium text-slate-900">${{ number_format($room->rate_per_night ?? 0, 2) }}</td>
              <td class="px-6 py-4 text-sm">
                @switch($room->status)
                  @case('available')
                    <span class="inline-block px-3 py-1 bg-green-100 text-green-800 text-xs font-semibold rounded-full">Available</span>
                    @break
                  @case('occupied')
                    <span class="inline-block px-3 py-1 bg-red-100 text-red-800 text-xs font-semibold rounded-full">Occupied</span>
                    @break
                  @case('maintenance')
                    <span class="inline-block px-3 py-1 bg-yellow-100 text-yellow-800 text-xs font-semibold rounded-full">Maintenance</span>
                    @break
                  @case('reserved')
                    <span class="inline-block px-3 py-1 bg-blue-100 text-blue-800 text-xs font-semibold rounded-full">Reserved</span>
                    @break
                  @case('cleaning')
                    <span class="inline-block px-3 py-1 bg-orange-100 text-orange-800 text-xs font-semibold rounded-full">Cleaning</span>
                    @break
                  @default
                    <span class="inline-block px-3 py-1 bg-slate-100 text-slate-800 text-xs font-semibold rounded-full">{{ $room->status }}</span>
                @endswitch
              </td>
              <td class="px-6 py-4 text-sm">
                <div class="flex items-center space-x-2">
                  <a href="{{ route('rooms.show', $room->id) }}" class="text-primary-600 hover:text-primary-900 font-medium">View</a>
                  <a href="{{ route('rooms.edit', $room->id) }}" class="text-blue-600 hover:text-blue-900 font-medium">Edit</a>
                  <form action="{{ route('rooms.destroy', $room->id) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure?');">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="text-red-600 hover:text-red-900 font-medium">Delete</button>
                  </form>
                </div>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="7" 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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                  </svg>
                  <p class="text-slate-600 font-medium">No rooms found</p>
                  <p class="text-slate-500 text-sm mt-1">Add your first room to get started</p>
                </div>
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

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