<table class="table  table-bordered table-hover" style="direction: rtl;">
    <thead>
        <tr>
            <td colspan="2">ساعات اليوم   </td>
        </tr>
    </thead>
    <tbody>
        {foreach $rooms as $room}
        <tr id="room{$room.room_id}">
            <th>{$room.roomName} </th>
            <td>
                {foreach $room.hours as $hour}
                {foreach $hour.sub_hours as $data}
                {if  $data.reserved == 1 }
                <span class="qBusy col-md-1" data-hour="{$data.res_hour}" data-room="{$room.room_id}"> {$data.showH} </span>
                {else if  $data.reserved == 2 }
                <span class="qSelected col-md-1" data-hour="{$data.res_hour}" data-room="{$room.room_id}"> {$data.showH} </span>
                {else}
                <span class="qFree col-md-1" data-hour="{$data.res_hour}" data-room="{$room.room_id}"> {$data.showH} </span>
                {/if}
                {/foreach}
                {/foreach}
            </td>
        </tr>
        {/foreach}

    </tbody>
</table>
{literal}
<style>
    .qFree  {
        color: black;
        background-color: #a3dfa2;
        text-align: center !important;
        border: 2px solid #000;
        width: max-content;
    }

    .qSelected  {
        color: black;
        background-color: #7ac720;
        text-align: center !important;
        border: 2px solid #000;
        width: max-content;
    }

    .qBusy  {
        color: black;
        background-color: #cccccc;
        text-align: center !important;
        border: 2px solid #000;
        width: max-content;
    }

    .qCancel  {
        color: black;
        background-color: #f36a5a;
        text-align: center !important;
        border: 2px solid #000;
        width: max-content;
    }


</style>
{/literal}