<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 isheight580">

                                        <h3 style="color: red;text-align: center;"> For Test Only  please close it </h3> 

                                        <table class="table  table-hover table-bordered" style="direction: rtl;margin: 2%; width: 96%;">
                                            <tbody>
                                                <tr>
                                                    <th class="col-md-1">العملية </th>
                                                    <td class="col-md-4">
                                                        <select class="form-control " id="operationId"  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-1">
                                                        <input type="text" class="form-control"  name="operation_time_start" id="operation_time_start">
                                                    </td>

                                                    <th class="col-md-1">مدة العملية  </th>
                                                    <td class="col-md-1">
                                                        <input type="text" class="form-control"  value="{$operationDuration}" id="operation_duration">
                                                    </td>
                                                    <td style="width: 1%;">ساعة </td>

                                                    <th class="col-md-1">مدة الإقامة   </th>
                                                    <td class="col-md-1">
                                                        <input type="text" class="form-control"  value="{$residenceDuration}" id="residence_duration">
                                                    </td>
                                                    <td style="width: 1%;">ساعة </td>


                                                    <td>
                                                        <button type="button" class="btn btn-sm blue" id="searchRooms"> الغرف المتاحة  </button>
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn  btn-sm blue" id="searchDates">  المواعيد  المتاحة بالغرف    </button>
                                                    </td>
                                                </tr>
                                        </table>

                                        <div id="searchRoomsResult">

                                        </div>

                                        <div id="searchDatesResult">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn default" id="addOperationRooms"> 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();

    $(".positivefloat").forcepositivefloat();
    $("#operation_time_start").timepicker({autoclose: !0, minuteStep: 5, showSeconds: !1, showMeridian: !1});
    $("#operation_duration").timepicker({autoclose: !0, minuteStep: 15, showSeconds: !1, showMeridian: !1});
    $("#residence_duration").timepicker({autoclose: !0, minuteStep: 15, showSeconds: !1, showMeridian: !1});

    $('#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
        });
    });

</script>
{/literal}