<?php $__env->startSection('css_page_level'); ?>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css')); ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css')); ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/select2/css/select2.css')); ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')); ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.css')); ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/bootstrap-select/bootstrap-select.min.css')); ?>"/>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('page-content-wrapper'); ?>
<div class="page-content-wrapper" id="main">
	<div class="page-content">
		<h3 class="page-title">
		<?php $setting = app('anlutro\LaravelSettings\Facade'); ?>
		<?php echo e($setting::get('system_name','全方位建築智慧化管理系統')); ?> 
		<small><?php echo e($setting::get('company_name','新保科技')); ?></small>
		</h3>
		<div class="page-bar">
			<ul class="page-breadcrumb">
				<li>
					<i class="fa fa-home"></i>
					<a href="<?php echo e(route('manage::index')); ?>"><?php echo app('translator')->get('messages.homepage'); ?></a>
					<i class="fa fa-angle-right"></i>
				</li>
				<li>
					<a href="<?php echo e(route('manage::pccs::index')); ?>">圖形控制系統</a>
					<i class="fa fa-angle-right"></i>
				</li>
				<li>
					<a href="<?php echo e(route('manage::pccs::index')); ?>">基本資料建檔</a>
					<i class="fa fa-angle-right"></i>
				</li>
				<li>
					<a href="<?php echo e(route('manage::pccs::graph')); ?>">圖控畫面編輯</a>
				</li>
			</ul>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div class="portlet light bordered">
					<div class="portlet-body">
						<table style="width: 100%;">
							<tr>
								<td style="width: 1400px;height: 750px;">
									<div 
										id="modal_image" class="portlet light bordered" 
										style="position: relative;width: 1400px;height: 750px;background-repeat: no-repeat;padding: 0px; background-size: contain; background-position: center;"
									>
									</div>
								</td>
								<td style="vertical-align: text-top;">
									<form id="form_query" method="POST">
										<div class="table-toolbar portlet light bordered" style="height: 750px;">
											<div class="row">
												<div class="modal-body">
													<div class="form-group">
														<a id="btn_query" href="javascript:;" class="btn btn-success"> 圖控資料資料載入<i class="fa fa-plus"></i></a>
													</div>
													<div class="form-group">
														<label class="label label-info">類別</label>
														<div class="pull-right">
															<label class="label label-warning" id="label_type">
																尚未載入
															</label>
														</div>
													</div>
													<div class="form-group">
														<label class="label label-info">棟別</label>
														<div class="pull-right">
															<label class="label label-warning" id="label_building">
																尚未載入
															</label>
														</div>
													</div>
													<div class="form-group">
														<label class="label label-info">位置</label>
														<div class="pull-right">
															<label class="label label-warning" id="label_location">
																尚未載入
															</label>
														</div>
													</div>
													<div class="form-group">
														<label class="label label-info">樓別</label>
														<div class="pull-right">
															<label class="label label-warning" id="label_floor">
																尚未載入
															</label>
														</div>
													</div>
												</div>
												<div id="modal_footer" class="modal-footer" style="bottom:0px;display:none;">
													<a id="btn_savegraph" class="btn blue">送出</a>
												</div>
											</div>
										</div>
										<input type="hidden" id="_token" name="_token" value="<?php echo e(csrf_token()); ?>">
									</form>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal fade draggable-modal" id="modal_query" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-blue-madison">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title font-white">載入平面圖資料</h4>
            </div>
            <form id="form_query" action="" method="post" class="form-horizontal">
                <div class="modal-body">
                    <div class="form-body">
                        <div class="form-group">
                            <label class="col-md-3 control-label">設備類別<span class="required" aria-required="true"> * </span></label>
                            <div class="col-md-9">
                                <select id="pccs_type" class="form-control selectpicker" data-live-search="true" data-size="8">
                                	<option value="BA">BA管理</option>
                                	<option value="CCTV">CCTV管理</option>
                                	<option value="access">門禁管理</option>
                                	<option value="intercom">對講機管理</option>
                                	<option value="hosts">主機管理</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">棟別<span class="required" aria-required="true"> * </span></label>
                            <div class="col-md-9">
                                <select id="pccs_building" class="form-control selectpicker" data-live-search="true" data-size="8">
                                	<?php foreach($building as $one): ?>
                                		<option value="<?php echo e($one->id); ?>"><?php echo e($one->name); ?></option>
                                	<?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                        	<label class="col-md-3 control-label">位置<span class="required" aria-required="true"> * </span></label>
                        	<div class="col-md-9">
                        		<select id="pccs_location" class="form-control selectpicker" data-live-search="true" data-size="8">
                        			<option value="地上">地上</option>
                        			<option value="地下">地下</option>
                                </select>
                        	</div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">樓別<span class="required" aria-required="true"> * </span></label>
                            <div class="col-md-9">
                                <select id="pccs_floor" class="form-control selectpicker" data-live-search="true" data-size="8" disabled>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn gray" data-dismiss="modal"><?php echo app('translator')->get('messages.close'); ?></button>
                    <a id="btn_getgraph" class="btn blue">送出</a>
                </div>
            </form>
        </div>
    </div>
</div>
<input type="hidden" id="_token" name="_token" value="<?php echo e(csrf_token()); ?>">
<?php $__env->stopSection(); ?>
<?php $__env->startSection('plugins_page_level'); ?>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/jquery-validation/js/additional-methods.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/datatables/media/js/jquery.dataTables.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/bootbox/bootbox.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-TW.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/bootstrap-fileinput/additional-methods.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/select2/js/select2.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.js')); ?>"></script>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('js_page_level'); ?>
<script>
var graph = '';
var count = '';

$(document).ready(function(){
	$('#modal_image').css('background-image','url("http://www.placehold.it/1400x750/EFEFEF/AAAAAA&amp;text=no+image")');
});

$(document).on('click','#btn_query',function(){
	var uid = $('#pccs_building').val();
	var location = $('#pccs_location').val();
	getfloor(uid,location);
	$('#modal_query').modal('show');
});

$(document).on('change','#pccs_building',function(){
	var uid = $(this).val();
	var location = $('#pccs_location').val();
	getfloor(uid,location);
});
$(document).on('change','#pccs_location',function(){
	var uid = $('#pccs_building').val();
	var location = $(this).val();
	getfloor(uid,location);
});

function getfloor(uid,location){
	$.ajax({
		type : 'POST',
        url  : "<?php echo e(route('manage::pccs::get_floor')); ?>",
        data : {
            'id' : uid,
            'location' : location,
            _token : $('#_token').val(),
        },
        success:function(sendback){
        	$('#pccs_floor').prop('disabled',false);
        	$('#pccs_floor').empty();
        	for(var i = 0;i < sendback.floor.length;i++){
        		$('#pccs_floor').append('<option value="' + sendback.floor[i].floor + '">' + sendback.floor[i].floor + '</option>')
        	}
        	$('#pccs_floor').selectpicker('refresh');
        },
        error  :function(sendback){
			toastr['error']('發生錯誤請重新整理後再次操作。');
        }
	});
}

$(document).on('click','#btn_getgraph',function(){
	$.ajax({
		type : 'POST',
        url  : "<?php echo e(route('manage::pccs::get_graph')); ?>",
        dataType : 'json',
        data : {
            type     : $('#pccs_type').val(),
            building : $('#pccs_building').val(),
            floor    : $('#pccs_floor').val(),
            location : $('#pccs_location').val(),
            _token   : $('#_token').val(),
        },
        success : function(sendback){
			$("#modal_image").empty();		//註銷已產生的物件
        	if(sendback.image != ''){
        		graph = sendback.graph;
				count = (sendback.graph).length;
        		$('#modal_image').css('background-image','url('+sendback.image+')');
        		var html = '';
                for(var i = 0;i < (sendback.graph).length;i++){
                    if(sendback.graph[i].c_image == null){
                        html += '<img id="drag_' + sendback.graph[i].id + '" class="drag-me show-tooltip" data-toggle="tooltip" data-placement="bottom" title="' + sendback.graph[i].b_name + '" src="<?php echo e(asset("assets/images/no_setting.png")); ?>" style="cursor: pointer;left: ' + sendback.graph[i].left + 'px;top: ' + sendback.graph[i].top + 'px;position:absolute;border:solid 1px #AAA;">';
                    }else{
                        html += '<img id="drag_' + sendback.graph[i].id + '" class="drag-me show-tooltip" data-toggle="tooltip" data-placement="bottom" title="' + sendback.graph[i].b_name + '" src="<?php echo e(asset("uploads/image")); ?>' + '/' + sendback.graph[i].c_image + '" style="cursor: pointer;left: ' + sendback.graph[i].left + 'px;top: ' + sendback.graph[i].top + 'px;position:absolute;border:solid 1px #AAA;">';
                    }
                }
        		$('#modal_image').append(html);
        		$('#label_type').text($('#pccs_type :selected').text());
        		$('#label_building').text($('#pccs_building :selected').text());
        		$('#label_floor').text($('#pccs_floor :selected').text() + '樓');
        		$('#label_location').text($('#pccs_location :selected').text());
    		    drag();
    		    $('#modal_footer').css('display','block');
        		$('#modal_query').modal('hide');
        	}else{
        		graph = '';
				count = '';
        		$('#modal_image').css('background-image','url("http://www.placehold.it/1400x750/EFEFEF/AAAAAA&amp;text=no+image")');
        		$('#label_type').text('尚未載入');
        		$('#label_building').text('尚未載入');
        		$('#label_floor').text('尚未載入');
        		$('#label_location').text('尚未載入');
        		$('#modal_footer').css('display','none');
        		$('#modal_query').modal('hide');
        		toastr['warning']('尚未設定圖片');
        	}
        },
        error   : function(sendback){
			toastr['error']('發生錯誤請重新整理後再次操作。');
        }
	});
});

$(document).on('click','#btn_savegraph',function(){
	var uid = [];
    var utop = [];
    var uleft = [];
    for(var i = 0;i < count;i++){
    	uid[i]   = graph[i].id;
        utop[i]  = $('#drag_'+graph[i].id).css('top');
        uleft[i] = $('#drag_'+graph[i].id).css('left');
    }
	$.ajax({
        type : 'POST',
        url: "<?php echo e(route('manage::pccs::save_graph')); ?>",
        data : {
            uid     : uid,
            utop    : utop,
            uleft   : uleft,
            ulengh  : count,
            _token : $('#_token').val(),
        },
        success: function(sendback){
            toastr['success']('修改成功');
            window.location.reload();
        },
        error: function(){
            toastr['error']("<?php echo app('translator')->get('messages.error_need_refresh'); ?>");
        }
    });
});

function drag(){
	$(".drag-me").draggable({containment: "#modal_image"});
    $( "#modal_image img" ).draggable({ stack: "#modal_image img" });
    $('.show-tooltip').tooltip();
}

</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layout.manage', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>