@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">
    
@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->floor_number }}
                            <span class="badge bg-light text-dark ms-3">{{ $floor->rooms->count() }} Rooms</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)
                                        <div class="col-md-4">
                                            <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>

                                                    <div class="mb-2 d-flex flex-wrap gap-2">
                                                        <span class="badge bg-primary text-white" data-bs-toggle="tooltip" title="Total Bed Spaces">
                                                            <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') }}" 
                                                              data-bs-toggle="tooltip" title="Room Status">
                                                            {{ $room->status }}
                                                        </span>

                                                        <span class="badge {{ $room->ensuite == 'Yes' ? 'bg-info text-dark' : 'bg-secondary' }}" data-bs-toggle="tooltip" title="Ensuite Available">
                                                            {{ $room->ensuite == 'Yes' ? 'Ensuite' : 'No Ensuite' }}
                                                        </span>

                                                        <span class="badge bg-light text-dark" data-bs-toggle="tooltip" title="Available Bed Spaces">
                                                            Available: {{ $room->available_bedspace }}
                                                        </span>
                                                    </div>

                                                    <p class="card-text text-muted small">
                                                        <!-- Optional extra info can go here -->
                                                        Example: Near window, bright room
                                                    </p>
                                                </div>
                                                <div class="card-footer bg-white d-flex justify-content-between align-items-center border-0">
                                                    <a href="#" class="btn btn-sm btn-primary">View Details</a>
                                                    <span class="text-muted small">{{ $room->created_at->format('M d, Y') }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <p class="text-muted text-center py-3">No rooms available on this floor.</p>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <p class="text-center text-muted fs-5">No active floors available for this hostel.</p>
    @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