<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="false" data-backdrop="static" data-keyboard="false"   id="operationModal" style="min-width:1000px;">
    <div class="modal-dialog  modal-lg wds95">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">  </h4>
            </div>

            <div class="modal-body">
                <div class="portlet-body form">
                    <form class="form-horizontal" role="form" action="" method="post" id="operationResForm" enctype="multipart/form-data">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="portlet blue-hoki box">
                                    <div class="portlet-body  scroll_y showNum isheight">

                                        <h3 style="color: red;text-align: center;"> For Test Only  please close it </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="opId"  data-placeholder="Select..." >
                                                            <option></option>
                                                            {foreach  $operations as $one}
                                                            <option value="{$one->id}" >{$one->name}</option>
                                                            {/foreach}
                                                            <option value="-2" class="deleteoptincompo">حذف</option>
                                                        </select> 
                                                    </td>

                                                    <th class="col-md-1">غرف العمليات  </th>
                                                    <td class="col-md-2"  id="operationRoomTd">
                                                        <select class="form-control " id="opRoomId"  data-placeholder="Select..." >
                                                        </select> 
                                                    </td>

                                                    <th class="col-md-1">غرف الإقامة  </th>
                                                    <td class="col-md-2"  id="residenceRoomTd">
                                                        <select class="form-control " id="resRoomId"  data-placeholder="Select..." >
                                                        </select> 
                                                    </td>
                                                </tr>
                                        </table>

                                        <table class="table table-striped table-hover table-bordered" style=" width: 100%;">
                                            <caption style="text-align: center;"><span> {$visitdate} </span>  المواعيد المتاحة يوم    </caption>
                                            <tbody>
                                                <tr>
                                                    <th style="text-align: center;width: 50%;">
                                                        <span> لغرفة الإقامة  </span> 
                                                    </th>
                                                    <th style="text-align: center;width: 50%;">
                                                        <span> لغرفة العمليات </span> 
                                                    </th>

                                                </tr>

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

                                                    <td style="  border: 4px solid #000 !important;">
                                                        <div id="operationDates"></div>
                                                    </td>

                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn default" id="addVisitInvs"> Save </button>
                <button type="button" class="btn default" id="closemodel" data-dismiss="modal"> Close</button>
            </div>
        </div>
    </div>
</div>

{literal}
<script type="text/javascript" >

    var hosturl = $('#hosturl').val();

    $('#operationId').select2({
        width: '170px',
        allowClear: true,
        formatNoMatches: function (term) {
            /* customize the no matches output */
            return "<input class='form-control' id='newoperation_followTerm' value='" + term + "'  ><a href='#' id='addoperation_followNew'  class='btn btn-default addoperation_followselected'>إضافة </a>"
        }
    }).parent().find('.select2-with-searchbox').on('click', '.addoperation_followselected', function () {

        var newitem = $('#newoperation_followTerm').val();
        $.post(hosturl + '/controllers/ovumpickupembryotrans.php?ac=addnewoperation', {selectedoperation: newitem, inline: 0}, function (data) {
            $('#operationId > .deleteoptincompo').before('<option value="' + Number(data) + '" >' + newitem + '</option>');
            //$('<option value="' + Number(data) + '" >' + newitem + '</option>').appendTo('#operationId');
            $('#operationId').select2('val', Number(data)); // select the new term
            $('#operationId').select2('close'); // close the dropdown
        });
    });
    $('#operationRoomId').select2({width: '170px', allowClear: true, });
    $('#residenceRoomId').select2({width: '170px', allowClear: true, });

</script>
{/literal}