
<h3 style="text-align: center;"> <span style="background-color: #c4eab4 ; padding: 5px;">  الغرف  المتاحة  فى المدة المحددة        </span>  </h3> 


<table class="table table-striped table-hover table-bordered" style="direction: rtl;margin: 2%; width: 96%;">
    <tbody>
        <tr>
            <th class="col-md-1">غرف العمليات  </th>
            <td class="col-md-5">
                <select class="form-control " id="opRoomId"  data-placeholder="Select..." >
                    <option></option>
                    {foreach  $operation_rooms as $data}
                    <option value="{$data->id}">{$data->room_no}</option>
                    {/foreach}
                    <option value="-2" class="deleteoptincompo">حذف</option>
                </select> 
            </td>

            <th class="col-md-1">غرف الإقامة  </th>
            <td class="col-md-5">
                <select class="form-control " id="resRoomId"  data-placeholder="Select..." >
                    <option></option>
                    {foreach  $residence_rooms as $data}
                    <option value="{$data->id}">{$data->room_no}</option>
                    {/foreach}
                    <option value="-2" class="deleteoptincompo">حذف</option>
                </select> 
            </td>
        </tr>
</table>


{literal}
<script type="text/javascript" >
    $('#opRoomId').select2({width: '170px', allowClear: true, });
    $('#resRoomId').select2({width: '170px', allowClear: true, });
</script>
{/literal}
