@extends('layout.base')
@section('title','Etiket')

@section('Content')
<section>
    <div class="container-fluid">
        <h2 class="text-white">Dashboard Room Monitoring</h2>
      <div class="row justify-content-center">
        @foreach ($DashboardRoom as $room)
            <div class="col-lg-3 mb-4">
                <div class="fdb-box fdb-touch p-3">
                    <div class="row justify-content-center">
                        <div class="col-12 mb-3">
                            <h2 style="font-size: 1.5rem;">{{ $room->Ruangan }} <span class="badge badge-primary">{{ $room->ISI +  $room->KOSONG + $room->RUSAK + $room->BOOKING}} Bed</span></h2>
                        </div>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            ISI
                            <span class="badge badge-secondary">{{ $room->ISI }} Bed</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            KOSONG
                            <span class="badge badge-success">{{ $room->KOSONG }} Bed</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            RUSAK
                            <span class="badge badge-danger">{{ $room->RUSAK }} Bed</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            BOOKING
                            <span class="badge badge-warning">{{ $room->BOOKING }} Bed</span>
                        </li>
                    </ul>
                </div>

            </div>
        @endforeach
      </div>
    </div>
</section>
@endsection