@extends('layout.manage')

@section('css_page_level')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-select/bootstrap-select.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2-bootstrap.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css') }}" />
@endsection

@section('page-content-wrapper')
	<div class="page-content-wrapper" id="main">
		<div class="page-content">
			<!-- BEGIN PAGE HEADER-->
			<h3 class="page-title">
			@inject('setting','anlutro\LaravelSettings\Facade')
			{{ $setting::get('system_name','全方位建築智慧化管理系統') }} <small>{{ $setting::get('company_name','新保科技') }}</small>
			</h3>
			<div class="page-bar">
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa-home"></i>
						<a href="{{route('manage::index')}}">首頁</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="javascript:;">@lang('messages.charge_system')</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="{{route('manage::charge::order::index')}}">@lang('messages.many_table')</a>
					</li>
				</ul>
			</div>
			<!-- END PAGE HEADER-->
			<!-- BEGIN DASHBOARD STATS -->
			<div class="row">
				<div class="col-md-12">
					<!-- BEGIN EXAMPLE TABLE PORTLET-->
					<div class="portlet light bordered">
						<div class="portlet-body">
							<div class="table-toolbar">
								<div class="row">
									<div class="col-md-6">
										<div class="btn-group">
											
										</div>
									</div>
									<div class="col-md-6">
										<div class="btn-group pull-right">
                                           
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="{{ action('ChargeOrderController@index')}}">@lang('messages.all')</a>
                                                </li>
                                                <li>
                                                    <a href="{{ action('ChargeOrderController@index')}}?status[]=0">@lang('messages.not_approved')</a>
                                                </li>
                                                <li>
                                                    <a href="{{ action('ChargeOrderController@index')}}?status[]=1">@lang('messages.approved')</a>
                                                </li>
                                                <li>
                                                    <a href="{{ action('ChargeOrderController@index')}}?status[]=2">@lang('messages.cancel_return')</a>
                                                </li>
                                                <li>
                                                    <a href="{{ action('ChargeOrderController@index')}}?status[]=3">@lang('messages.minus_point')</a>
                                                </li>
                                                <li class="divider"></li>
                                                <li>
                                                    <a href="javascript:;" id="btn_query"> @lang('messages.search_') </a>
                                                </li>
                                            </ul>
                                        </div>
									</div>
								</div>
							</div>

							<table class="table table-striped table-bordered table-hover" id="table_one_list">
							<thead>
							<tr>
								<th>
									流水號
								</th>
								<th>
									裝置代碼
								</th>
								<th>
									裝置狀態
								</th>
								<th>
									千瓦小時
								</th>
								<th>
									發生時間
								</th>
								
							</tr>
							</thead>
							<tbody>
							@foreach ($charge_log as $one)
							<tr class="odd gradeX">
								<td>
									{{$one->id}}
								</td>
								<td>
									{{$one->device_code}}
								</td>
								<td>
									{{$one->device_status}}
								</td>
								<td>
									{{$one->charge_watt}}
								</td>
								<td>
									{{$one->created_at}}
								</td>
							</tr>
							@endforeach
							</tbody>
							</table>
						</div>
						<div class="row">
                     		<div class="col-md-5 col-xs-5">
                        		<div class="dataTables_info" id="table_list_info" role="status" aria-live="polite">
                           			<p></p>
                        		</div>
                     		</div>
                     		<div class="col-md-7 col-xs-7">
                        		<div class="pull-right" id="table_list_paginate">
	                           		
                        		</div>
							</div>
						</div>
					</div>
					<!-- END EXAMPLE TABLE PORTLET-->
				</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">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">@lang('messages.reserve_query_filter')</h4>
            </div>
            <form action="{{action('InstOrderController@index')}}" class="form-horizontal">
            <div class="modal-body">
            	
                    <div class="form-body">
                    	<div class="form-group">
							<label class="col-md-4 control-label">@lang('messages.facility')</label>
							<div class="col-md-8">
								<select id="inst_id" name="inst_id" class="form-control select2me" data-placeholder="@lang('messages.select_facility')">
									<option value=""></option>
									
								</select>
							</div>
						</div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">@lang('messages.liver_name')</label>
                            <div class="col-md-8">
                                <input type="text" name="name" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">@lang('messages.liver_acount')</label>
                            <div class="col-md-8">
                                <input type="text" name="username" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">@lang('messages.reservation_form_status')</label>
                            <div class="col-md-8">
                                <div class="checkbox-list">
                                    <label><input type="checkbox" name="status[]" value="0"> @lang('messages.not_approved') </label>
                                    <label><input type="checkbox" name="status[]" value="1"> @lang('messages.approved') </label>
                                    <label><input type="checkbox" name="status[]" value="2"> @lang('messages.cancel_return') </label>
                                    <label><input type="checkbox" name="status[]" value="3"> @lang('messages.minus_point') </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">@lang('messages.service_reserve_num')</label>
                            <div class="col-md-8">
                                <input type="text" name="order_no" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">@lang('messages.reserve_date')</label>
                            <div class="col-md-8">
                                <div class="input-group input-large date-picker input-daterange" data-date="" data-date-format="yyyy-mm-dd">
                                    <input type="text" class="form-control" name="from">
                                    <span class="input-group-addon"> @lang('messages.arrived') </span>
                                    <input type="text" class="form-control" name="to">
                                </div>
                            </div>
                        </div>

                    </div>
                

            </div>
            <div class="modal-footer">
                <button type="button" class="btn dark btn-outline" data-dismiss="modal">@lang('messages.close')</button>
                <button type="submit" class="btn green">@lang('messages.query')</button>
            </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="modal_tag" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <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">
                <form id="form_type" class="form-horizontal form-bordered ">
                    <div class="form-body">
                        <div class="form-group">
                            <label class="control-label col-md-3">抵押物</label>
                            <div class="col-md-9">
                                
                            </div>
                        </div>
                        <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                    </div>
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-offset-3 col-md-9">
                                <button id="btn_type_submit" type="button" class="btn green">
                                    <i class="fa fa-check"></i> 儲存</button>
                                <button type="button" class="btn default" data-dismiss="modal">關閉</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

	<input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
@endsection

@section('plugins_page_level')
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/additional-methods.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/media/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootbox/bootbox.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/moment.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/select2/js/select2.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js') }}"></script>
@endsection

@section('js_page_level')
<script>
$(document).ready(function(){

	$('.show-tooltip').tooltip();

	$('.date-picker').datepicker({
        orientation: "left",
        autoclose: true
    });

	$(document).on('click','.btn_delete_one',function(){
		var url = $(this).attr('url');
		bootbox.confirm("@lang('messages.sure_del_neighberhood_party')", function(result) {
			if(result == true){
				$.ajax({
					type : 'DELETE',
					dataType : 'json',
					url  : url,
					data : {
						_token   : $('#_token').val(),
					},
					success : function(sendback){
						window.location.reload();
					},
					error : function(sendback){
						bootbox.alert('@lang('messages.del_fail')');
					}
				})
			}
		}); 
	});

});


$(document).on('click','.btn_cancel',function(){
	var uid = $(this).attr('uid');
	bootbox.prompt("@lang('messages.reservation_form_cancel_reason')", function(result) {                
		if (result === null) {
			toastr['error']('@lang('messages.enter_reservation_form_cancel_reason')');
		}else{
			$.ajax({
				type  : 'POST',
				url   : '{{action('InstOrderController@action')}}',
				dataType:'json',
				data  : {
					order_id : uid,
					mode : 'cancel',
					_token   : $('#_token').val(),
					memo : result
				},
				success : function(sendback){
					if(sendback.success === true){
						toastr['success']('@lang('messages.reservation_return_success')');
						window.location.reload();
					}else{
						toastr['error'](sendback.message);
					}
				},
				error : function(sendback){
					toastr['error']('@lang('messages.reservation_return_fail')');
				}
			})
			
		}
	});
});

$(document).on('click','.btn_verify',function(){
	var uid = $(this).attr('uid');
	bootbox.confirm("@lang('messages.sure_approve_reservation')?", function(result) {
		$.ajax({
			type  : 'POST',
			url   : '{{action('InstOrderController@action')}}',
			dataType:'json',
			data  : {
				order_id : uid,
				mode : 'verify',
				_token   : $('#_token').val(),
			},
			success : function(sendback){
				if(sendback.success === true){
					toastr['success']('@lang('messages.approve_reservation_form')');
					window.location.reload();
				}else{
					toastr['error'](sendback.message);
				}
			},
			error : function(sendback){
				toastr['error']('@lang('messages.fail_to_approve_reservation')');
			}
		});	
	}); 
});

$(document).on('click','.btn_cost',function(){
	var uid = $(this).attr('uid');
	bootbox.confirm("@lang('messages.long_desc1')", function(result) {
		$.ajax({
			type  : 'POST',
			url   : '{{action('InstOrderController@action')}}',
			dataType:'json',
			data  : {
				order_id : uid,
				mode : 'cost',
				_token   : $('#_token').val(),
			},
			success : function(sendback){
				if(sendback.success === true){
					toastr['success']('@lang('messages.complete_reservation_deduct_pt')');
					window.location.reload();
				}else{
					toastr['error'](sendback.message);
				}
			},
			error : function(sendback){
				toastr['error']('@lang('messages.fail_reservation_deduct_pt')');
			}
		});	
	}); 
});

$(document).on('click','#btn_tag',function(){
    $('#modal_tag').modal('show');
});
$(document).on('click','#btn_type_submit',function(){
    $.ajax({
        type : 'POST',
        dataType: 'json',
        url  : '{{action('InstOrderController@updateType')}}',
        data : $('#form_type').serialize(),
        success : function(sendback){
            toastr['success']('更新成功!');
        },
        error : function(sendback){
            toastr['error']('更新失敗，請重新整理後再嘗試');
        }
    })
});

$(document).on('click','#btn_query',function(){
	$('#modal_query').modal('show');
});

</script>
@endsection