@extends('layouts/layoutMaster')
@section('title', 'Hostel Floors & Rooms')
@section('vendor-style')
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css')}}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
  <style>
    .cursor-pointer{cursor:pointer;}
    .card:hover {
      transform: translateY(-5px);
      transition: all 0.3s ease-in-out;
    }
  </style>
@endsection

@section('content')

  <h4 class="py-3 breadcrumb-wrapper mb-4">
    <span class="text-muted fw-light">Dashboard /</span> Hostel Floors & Rooms
  </h4>
  <div class="card shadow">
    <div class="card-body">
<!---->
<div class="mb-4">
    <form method="post" action={{route('floors')}} class="row g-3 align-items-end">
        @csrf
        <input type="hidden" name="hostelId" value="{{ request('hostelId') }}">
        
        <div class="col-md-2">
            <label>Status</label>
            <select name="status" class="form-select">
                <option value="">All</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>
            </select>
        </div>
        
        <div class="col-md-2">
            <label>Air-Condition</label>
            <select name="ac" class="form-select">
                <option value="">All</option>
                <option value="Yes" {{ request('ac')=='Yes'?'selected':'' }}>Yes</option>
                <option value="No" {{ request('ac')=='No'?'selected':'' }}>No</option>
            </select>
        </div>
        
        <div class="col-md-2">
            <label>Water</label>
            <select name="water" class="form-select">
                <option value="">All</option>
                <option value="Yes" {{ request('water')=='Yes'?'selected':'' }}>Yes</option>
                <option value="No" {{ request('water')=='No'?'selected':'' }}>No</option>
            </select>
        </div>
        
        <div class="col-md-2">
            <label>Light</label>
            <select name="light" class="form-select">
                <option value="">All</option>
                <option value="Yes" {{ request('light')=='Yes'?'selected':'' }}>Yes</option>
                <option value="No" {{ request('light')=='No'?'selected':'' }}>No</option>
            </select>
        </div>
        
        <div class="col-md-2">
            <button class="btn btn-primary w-100">Filter</button>
        </div>
    </form>
</div>
<!---->
    
@if($floors->count())
<div class="accordion" id="floorsAccordion">
    @foreach($floors as $floor)
        <div class="accordion-item mb-4 shadow-sm rounded">
            <h2 class="accordion-header" id="heading{{ $floor->id }}">
                <button class="accordion-button collapsed bg-info text-white fs-5 fw-bold" 
                        type="button" 
                        data-bs-toggle="collapse" 
                        data-bs-target="#collapse{{ $floor->id }}" 
                        aria-expanded="false" 
                        aria-controls="collapse{{ $floor->id }}">
                    <i class="bi bi-layers-fill me-2"></i> Floor {!! $floor->name !!}
                    <span class="badge bg-light text-dark ms-3">{{ $floor->rooms->count() }} Room{{ $floor->rooms->count() > 1 ?'s' : '' }}</span>
                </button>
            </h2>
            <div id="collapse{{ $floor->id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ $floor->id }}" data-bs-parent="#floorsAccordion">
                <div class="accordion-body">
                    @if($floor->rooms->count())
                        <div class="row g-4">
                            @foreach($floor->rooms as $room)
                                <!-- Room card with facility icons -->
                                <div class="col-md-4 mt-3">
                                    <div class="card h-100 border-0 shadow-lg rounded-3">
                                        <div class="card-body">
                                            <h5 class="card-title fw-bold">{{ $room->room_name }}</h5>

                                            <!-- Bed & Status badges -->
                                            <div class="mb-2 d-flex flex-wrap gap-2">
                                                <span class="badge bg-primary text-white"><i class="bi bi-bed-fill me-1"></i>{{ $room->number_of_bedspace }} Beds</span>
                                                <span class="badge {{ $room->status == 'Available' ? 'bg-success' : ($room->status == 'Occupied' ? 'bg-warning text-dark' : 'bg-secondary') }}">{{ $room->status }}</span>
                                                <span class="badge {{ $room->ensuite=='Yes'?'bg-info text-dark':'bg-secondary' }}">{{ $room->ensuite=='Yes'?'Ensuite':'No Ensuite' }}</span>
                                            </div>

                                            <!-- Facilities badges -->
                                            <div class="d-flex flex-wrap gap-2">
                                                <span class="badge {{ $room->aircondition=='Yes'?'bg-info text-dark':'bg-secondary' }}"><i class="bi bi-snow me-1"></i> {{ $room->aircondition=='Yes'?'AC':'No AC' }}</span>
                                                <span class="badge {{ $room->water=='Yes'?'bg-primary text-white':'bg-secondary' }}"><i class="bi bi-droplet-fill me-1"></i> {{ $room->water=='Yes'?'Water':'No Water' }}</span>
                                                <span class="badge {{ $room->light=='Yes'?'bg-warning text-dark':'bg-secondary' }}"><i class="bi bi-lightbulb-fill me-1"></i> {{ $room->light=='Yes'?'Light':'No Light' }}</span>
                                            </div>
                                        </div>
                                        <div class="card-footer bg-white d-flex justify-content-end align-items-center border-0">
                                          <form class="" method="post" action="">
                                            @csrf
                                            <input type="hidden" name="roomId" value="{{$room->id}}">
                                            <input type="hidden" name="roomId" value="{{$room->id}}">
                                            <button type="submit" class="btn btn-sm btn-primary"><i class="bi bi-bed-fill"></i> Choose Bedspace</button>
                                          </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                      <div class="container d-flex justify-content-center align-items-center" style="height: 60vh;">
                        <div class="text-center">
                          <i class="bi bi-building-x display-1 text-secondary"></i>
                          <h3 class="mt-3">No rooms match the filter criteria.</h3>
                          <p class="text-muted">Please check back later or make another choice.</p>
                          <a href="{{route('hostel')}}" class="btn btn-sm btn-primary">Show Hostels</a>
                        </div>
                      </div>
                    @endif
                </div>
            </div>
        </div>
    @endforeach
</div>

<!-- Pagination -->
<div class="my-4">
    {{ $floors->links() }}
</div>
  @else
    <div class="container d-flex justify-content-center align-items-center" style="height: 60vh;">
    <div class="text-center">
    <i class="bi bi-building-x display-1 text-secondary"></i>
    <h3 class="mt-3">No active floors available for this hostel.</h3>
    <p class="text-muted">Please check back later or make another choice.</p>
    <a href="{{route('hostel')}}" class="btn btn-sm btn-primary">Show Hostels</a>
    </div>
    </div>
  @endif
  
</div>
  </div>
@section('vendor-script')
  <script src="{{asset('assets/vendor/libs/moment/moment.js')}}"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    });
</script>
@endsection
@endsection