@extends('layouts.app')

@section('title', 'Room Status Board')

@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">Room Status</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">Room Status Board</h1>
      <p class="text-slate-600 mt-2">Visual overview of all room statuses</p>
    </div>
    <button onclick="location.reload()" class="flex items-center space-x-2 bg-slate-600 text-white px-6 py-3 rounded-lg hover:bg-slate-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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
      </svg>
      <span>Refresh</span>
    </button>
  </div>

  <!-- Legend -->
  <div class="bg-white rounded-lg border border-slate-200 p-6">
    <h2 class="text-lg font-semibold text-slate-900 mb-4">Legend</h2>
    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
      <div class="flex items-center space-x-3">
        <div class="w-6 h-6 bg-green-500 rounded"></div>
        <span class="text-sm text-slate-700">Available</span>
      </div>
      <div class="flex items-center space-x-3">
        <div class="w-6 h-6 bg-red-500 rounded"></div>
        <span class="text-sm text-slate-700">Occupied</span>
      </div>
      <div class="flex items-center space-x-3">
        <div class="w-6 h-6 bg-yellow-500 rounded"></div>
        <span class="text-sm text-slate-700">Maintenance</span>
      </div>
      <div class="flex items-center space-x-3">
        <div class="w-6 h-6 bg-blue-500 rounded"></div>
        <span class="text-sm text-slate-700">Reserved</span>
      </div>
      <div class="flex items-center space-x-3">
        <div class="w-6 h-6 bg-orange-500 rounded"></div>
        <span class="text-sm text-slate-700">Cleaning</span>
      </div>
    </div>
  </div>

  <!-- Floor Filters -->
  <div class="bg-white rounded-lg border border-slate-200 p-4">
    <div class="flex flex-wrap gap-2">
      <button onclick="filterFloor('all')" class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 text-sm font-medium floor-filter" data-floor="all">
        All Floors
      </button>
      @if(isset($floors))
        @foreach($floors as $floor)
          <button onclick="filterFloor({{ $floor->id }})" class="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors duration-200 text-sm font-medium floor-filter" data-floor="{{ $floor->id }}">
            {{ $floor->name }}
          </button>
        @endforeach
      @endif
    </div>
  </div>

  <!-- Rooms Grid by Floor -->
  <div class="space-y-6" x-data="roomBoard()">
    @if(isset($roomsByFloor))
      @foreach($roomsByFloor as $floor => $rooms)
        <div class="floor-section" data-floor-id="{{ $floor }}">
          <div class="mb-4">
            <h2 class="text-2xl font-bold text-slate-900">{{ $rooms->first()->floor->name ?? 'Floor ' . $floor }}</h2>
          </div>

          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
            @foreach($rooms as $room)
              <div class="room-card" @click="selectRoom({{ $room->id }})"
                   :class="selectedRoom === {{ $room->id }} ? 'ring-4 ring-primary-600' : ''"
                   class="cursor-pointer rounded-lg border-2 p-4 transition-all duration-200 hover:shadow-lg
                   @switch($room->status)
                     @case('available')
                       bg-green-50 border-green-300 hover:border-green-400
                       @break
                     @case('occupied')
                       bg-red-50 border-red-300 hover:border-red-400
                       @break
                     @case('maintenance')
                       bg-yellow-50 border-yellow-300 hover:border-yellow-400
                       @break
                     @case('reserved')
                       bg-blue-50 border-blue-300 hover:border-blue-400
                       @break
                     @case('cleaning')
                       bg-orange-50 border-orange-300 hover:border-orange-400
                       @break
                   @endswitch">

                <!-- Room Number -->
                <div class="text-center mb-3">
                  <p class="text-2xl font-bold text-slate-900">{{ $room->room_number }}</p>
                </div>

                <!-- Room Type -->
                <div class="text-center mb-3">
                  <p class="text-xs font-medium text-slate-600">{{ $room->roomType->name ?? 'N/A' }}</p>
                </div>

                <!-- Status Badge -->
                <div class="text-center mb-3">
                  <div class="inline-block px-2 py-1 bg-white rounded text-xs font-semibold
                  @switch($room->status)
                    @case('available')
                      text-green-800
                      @break
                    @case('occupied')
                      text-red-800
                      @break
                    @case('maintenance')
                      text-yellow-800
                      @break
                    @case('reserved')
                      text-blue-800
                      @break
                    @case('cleaning')
                      text-orange-800
                      @break
                  @endswitch">
                    {{ ucfirst($room->status) }}
                  </div>
                </div>

                <!-- Current Guest or Info -->
                @if($room->status === 'occupied')
                  <div class="text-center border-t pt-2">
                    <p class="text-xs text-slate-600 truncate">
                      {{ $room->currentReservation?->guest_name ?? 'Guest' }}
                    </p>
                    <p class="text-xs text-slate-500">
                      Check-out: {{ $room->currentReservation?->check_out_date->format('M d') ?? 'N/A' }}
                    </p>
                  </div>
                @endif

                <!-- Rate Info -->
                <div class="text-center border-t pt-2 mt-2">
                  <p class="text-xs text-slate-600">${{ number_format($room->rate_per_night, 2) }}/night</p>
                </div>
              </div>
            @endforeach
          </div>
        </div>
      @endforeach
    @else
      <div class="bg-slate-100 rounded-lg border border-slate-200 p-12 text-center">
        <svg class="w-16 h-16 text-slate-400 mx-auto 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>
      </div>
    @endif
  </div>

  <!-- Room Details Modal/Sidebar -->
  <div x-show="selectedRoom" @click.away="selectedRoom = null" x-transition
       class="fixed right-0 top-0 bottom-0 w-96 bg-white shadow-2xl z-50 overflow-y-auto"
       style="display: none;">
    <div class="p-6">
      <!-- Close Button -->
      <button @click="selectedRoom = null" class="absolute top-4 right-4 text-slate-400 hover:text-slate-600">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>

      <template x-if="roomDetails">
        <div class="space-y-6">
          <div>
            <h2 class="text-2xl font-bold text-slate-900">Room <span x-text="roomDetails.room_number"></span></h2>
            <p class="text-slate-600 mt-1" x-text="roomDetails.roomType"></p>
          </div>

          <!-- Room Status -->
          <div class="bg-slate-50 rounded-lg p-4">
            <p class="text-sm text-slate-600 mb-2">Current Status</p>
            <p class="text-lg font-semibold" :class="getStatusColor(roomDetails.status)" x-text="roomDetails.status"></p>
          </div>

          <!-- Room Info -->
          <div class="space-y-3">
            <div class="flex justify-between">
              <span class="text-slate-600">Bed Type:</span>
              <span class="font-medium text-slate-900" x-text="roomDetails.bed_type"></span>
            </div>
            <div class="flex justify-between">
              <span class="text-slate-600">Capacity:</span>
              <span class="font-medium text-slate-900" x-text="roomDetails.max_occupancy + ' guests'"></span>
            </div>
            <div class="flex justify-between">
              <span class="text-slate-600">Rate per Night:</span>
              <span class="font-medium text-slate-900" x-text="'$' + roomDetails.rate_per_night"></span>
            </div>
          </div>

          <!-- Current Reservation (if occupied) -->
          <template x-if="roomDetails.status === 'occupied' && roomDetails.currentReservation">
            <div class="border-t pt-4">
              <p class="font-semibold text-slate-900 mb-3">Current Guest</p>
              <div class="space-y-2 text-sm">
                <p><span class="text-slate-600">Name:</span> <span class="font-medium" x-text="roomDetails.currentReservation.guest_name"></span></p>
                <p><span class="text-slate-600">Email:</span> <span class="font-medium" x-text="roomDetails.currentReservation.email"></span></p>
                <p><span class="text-slate-600">Phone:</span> <span class="font-medium" x-text="roomDetails.currentReservation.phone"></span></p>
                <p><span class="text-slate-600">Check-out:</span> <span class="font-medium" x-text="roomDetails.currentReservation.check_out_date"></span></p>
              </div>
            </div>
          </template>

          <!-- Action Buttons -->
          <div class="pt-4 border-t space-y-2">
            <a :href="'/rooms/' + selectedRoom" class="block w-full text-center bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium">
              View Room Details
            </a>
            <a href="{{ route('reservations.create') }}" class="block w-full text-center bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium">
              Create Reservation
            </a>
          </div>
        </div>
      </template>
    </div>
  </div>

  <!-- Overlay -->
  <div x-show="selectedRoom" @click="selectedRoom = null" class="fixed inset-0 bg-black opacity-50 z-40" style="display: none;"></div>
</div>

<script>
  function filterFloor(floorId) {
    const sections = document.querySelectorAll('.floor-section');
    const buttons = document.querySelectorAll('.floor-filter');

    buttons.forEach(btn => {
      btn.classList.toggle('bg-primary-600');
      btn.classList.toggle('text-white');
      btn.classList.toggle('border-slate-300');
      btn.classList.toggle('text-slate-700');
      btn.classList.toggle('hover:bg-slate-50');
    });

    if (floorId === 'all') {
      sections.forEach(s => s.style.display = 'block');
      buttons[0].classList.add('bg-primary-600', 'text-white');
      buttons[0].classList.remove('border-slate-300', 'text-slate-700', 'hover:bg-slate-50');
    } else {
      sections.forEach(s => {
        s.style.display = s.dataset.floorId == floorId ? 'block' : 'none';
      });
      Array.from(buttons).forEach((btn, idx) => {
        if (parseInt(btn.dataset.floor) === floorId) {
          btn.classList.add('bg-primary-600', 'text-white');
          btn.classList.remove('border-slate-300', 'text-slate-700', 'hover:bg-slate-50');
        }
      });
    }
  }

  function roomBoard() {
    return {
      selectedRoom: null,
      roomDetails: null,
      selectRoom(roomId) {
        this.selectedRoom = roomId;
        this.fetchRoomDetails(roomId);
      },
      fetchRoomDetails(roomId) {
        // In a real app, this would fetch from the server
        // For now, we'll extract data from the card
        const card = document.querySelector(`[data-room-id="${roomId}"]`);
        if (card) {
          this.roomDetails = {
            id: roomId,
            room_number: card.querySelector('.room-number')?.textContent || 'N/A',
            status: card.dataset.status || 'unknown'
          };
        }
      },
      getStatusColor(status) {
        const colors = {
          'available': 'text-green-600',
          'occupied': 'text-red-600',
          'maintenance': 'text-yellow-600',
          'reserved': 'text-blue-600',
          'cleaning': 'text-orange-600'
        };
        return colors[status] || 'text-slate-600';
      }
    };
  }
</script>
@endsection