
<h3 style="text-align: center;"> <span style="background-color: #c4eab4 ; padding: 5px;">  المواعيد المتاحة يوم    {$visitdate} </span>  </h3> 

<table class="table table-striped table-hover table-bordered" style=" width: 100%;direction: rtl;">
    <tbody >
        <tr>
            <th class="col-md-1">غرف العمليات  </th>
            <td class="col-md-5">
                <select class="form-control " id="operationRoomId"  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="residenceRoomId"  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>


        <tr>
            <td style="  border: 4px solid #000 !important;" colspan="2">
                <div id="operationDates"></div>
            </td>
            <td style="  border: 4px solid #000 !important;" colspan="2">
                <div id="residenceDates"></div>
            </td>
        </tr>
    </tbody>
</table>



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