@extends('backend.layout')

@section('content')
<div class="row">
	
	<div class="panel panel-flat">

		<div class="panel-body">
			<fieldset>
				<legend class="text-bold">
					<div class="row">
						<div class="col-md-6">
							<a href="{{ route('backend.box.get', $box->id) }}" data-popup="tooltip" title="Danh sách dịch vụ khách hàng"><i class="icon-arrow-left7 position-left"></i></a>&nbsp;
							Mã hợp đồng: <a href="{{ route('backend.box.get', $box->id) }}">{{ $box->code }}</a>
							&nbsp;&nbsp;- Khách hàng: <b>{{ $box->customer->fullname }}</b>
							&nbsp;&nbsp;- Đại lý: <b>{{ $box->customer->user->name }}</b>
							&nbsp;&nbsp;- Sử dụng: <b>{{ $box->devices->count() }}</b>
						</div>
						<div class="col-md-6">
							<a href="{{ route('backend.box.list') }}" class="pull-right" data-popup="tooltip" title="Danh sách dịch vụ khách hàng"><i class="icon-list position-left"></i></a>
							@if(!$box->canceled)
							<a class="pull-right" data-popup="tooltip" style="margin-right: 20px;" data-target="#modal_animation" data-toggle="modal" title="Gia hạn"  style="color:blue;" ><i class="icon-rotate-cw position-left"></i></a>
							@endif
						</div>
					</div>
				
				</legend>
			</fieldset>

			<div class="table-responsive">
				<div class="tab-pane active @if(@$active == 'logs') in active @endif" id="settings">
					<table class="table">
						<thead>
							<tr>
								<th>STT</th>
								<th>Loại</th>
								<th>Người thực hiện</th>
								<th>Thông tin</th>
								<th class="text-right">Thực hiện lúc</th>	
							</tr>
						</thead>
						<tbody>
							@foreach($logs as $log)
							<tr>
								<td class="tetx-center">
									{{ $loop->index + 1 }}
								</td>
								<td>
									<span class="table-inbox-preview">{{ \Str::title(config('vod.type_log_contract.'.$log->type)) }}</span>
								</td>
								<td>{{ $log->user->name }}</td>
								<td>
									@switch($log->type)
									    @case('new')
									        <ul>
									        	<li>Dịch vụ: <b>{{ @$log->service->name }}</b></li>
									        	<li>Khách hàng: <b>{{ @$log->customer->fullname }}</b></li>
									        	<li>Ngày sử dụng: <b>{{ $log->date_used }}</b></li>
									        	<li>Hạn sử dụng: <b>{{ $log->expired_date }}</b></li>
									        	<li>Limit: <b>{{ $log->limit_device }}</b></li>
									        	<li>DeviceId: <b>{{ $log->deviceId }}</b></li>
									        </ul>
									        @break
									    @case('edit')
									    @case('renew')
									    @case('renew-auto')
									        <ul>
									        	<li>Dịch vụ: <b>{{ @$log->service->name }}</b></li>
									        	<li>Khách hàng: <b>{{ @$log->customer->fullname }}</b></li>
									        	<li>Ngày sử dụng: <b>{{ $log->date_used }}</b></li>
									        	<li>Limit: <b>{{ $log->limit_device }}</b></li>
									        	<li>Hạn sử dụng: <b>{{ $log->expired_date }}</b></li>
									        </ul>
									        @break
									    @case('pause')
									    @case('play')
									    @case('cancel')
									    @case('cancel-renew')
									        @break
									    
									    @case('add-device')
									    @case('remove-device')
									    @case('recovery-device')
									    	<ul>
									    		<li>DeviceId: <b>{{ $log->deviceId }}</b></li>
									    	</ul>
									        @break

									    @default
									        <p>Không xác định</p>
									@endswitch
								</td>
								<td class="text-right">
									{{ $log->created_at }}
								</td>
							</tr>
							@endforeach

						</tbody>
					</table>
				</div>
				<div class="clear-fix" style="border-top:1px solid #ccc;"></div>
			</div>
		</div>
	</div>
</div>

<div id="modal_animation" class="modal" data-backdrop="false">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h5 class="modal-title">Gia hạn hợp đồng: <b>#{{ $box->code }} </b></h5>
			</div>

			<div class="modal-body">
				<table class="table table-bordered">
						<tr>
							<td>Khách hàng : <b>{{ $box->customer->fullname }} - {{ $box->customer->address }}</b></td>
							<td>Dịch vụ : <b>{{$box->service->name}} - {{ number_format($box->service->price,0,'.','.') }} đ </b></td>
						</tr>
						<tr>
							<td>Địa chỉ lắp đặt : </b>{{$box->address}}</b>.</td>
							<td> Ngày hết hạn: <b>{{$box->expired_date}}</b></td>
						</tr>
				</table>
				<hr>
				<div class="clearfix"></div>
				<div class="form-group has-feedback @if( @$errors->first('service_id') != null ) has-error  @endif ">
					<label class="control-label col-lg-3 text-semibold">Chọn dịch vụ</label>
					<input type="hidden" name="canceled" id="canceled" value="{{ $box->canceled }}">
					<div class="col-lg-9">
						<select name="service_id" class="form-control select2"   id="service" data-placeholder="Chọn dịch vụ">
							<option value="">Chọn dịch vụ</option>
							@foreach($services as $groups)
							<optgroup label="{{ $groups['name'] }}">
								@foreach($groups['val'] as $ser)
								<option value="{{ $ser->id }}" group="{{ $groups['name'] }}" dayused="{{$ser->using_day}}" @if($ser->id == $box->service_id ) selected="selected" @endif>{{ $ser->name }}</option>
								@endforeach
							</optgroup>
							@endforeach
						</select>
						<div class="form-control-feedback">
							@if( @$errors->first('service_id') != null )<i class="icon-notification2"></i> @endif
						</div>
						<span class="help-block">{{ @$errors->first('service_id') }}</span>
					</div>
				</div>

				<div class="clearfix"></div>
				<div class="form-group has-feedback">
					<label class="control-label col-lg-3 text-semibold">Ngày hết hạn mới</label>
					<div class="col-lg-9">
						<input type="date" class="form-control date" id="expired_date" placeholder="Y-m-d" name="" value="{{ old('expired_date',$expired_date)}}">
						<div class="form-control-feedback">
							@if( @$errors->first('expired_date') != null )<i class="icon-notification2"></i> @endif
						</div>
						<input type="hidden" id="cur_date" value="{{ $box->expired_date }}">
						<span class="help-block">{{ @$errors->first('expired_date') }}</span>
					</div>
				</div>

				<div class="clearfix"></div>
				<div class="form-group has-feedback @if( @$errors->first('payment') != null ) has-error  @endif ">
					<label class="control-label col-lg-3 text-semibold">Ghi chú</label>
					<div class="col-lg-9">
						<textarea class="form-control" name="note" id="note">{{ $box->note }}</textarea>
						<div class="form-control-feedback">
							@if( @$errors->first('payment') != null )<i class="icon-notification2"></i> @endif
						</div>
						<span class="help-block">{{ @$errors->first('payment') }}</span>
					</div>
				</div>

			</div>

			<div class="modal-footer">
				<button type="button" class="btn btn-link" data-dismiss="modal">Huỷ</button>
				<button type="button" class="btn btn-primary" id="add">Gia hạn</button>
			</div>
		</div>
	</div>
</div>

@endsection

@push('styles')
	<style type="text/css">
		.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
			padding:10px 10px;
		}
		.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
			padding: 5px 5px;
			white-space: normal !important;
		}
	</style>
@endpush

@push('scripts')
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>

	<script type="text/javascript">

		$(document).ready(function() {
			$('.select2').select2();

			$('#service').change(function() {
				var group = $('#service :selected').parent().attr('label');
				var using_day = parseInt($('#service :selected').attr('dayused'));

				var dateString = $('#cur_date').val();
				var cur_date = new Date(...dateString.split(/[- :]/).map(Number));
				
				var next_date = new Date(cur_date);

				if(using_day == 0) {
					next_date.setDate(next_date.getDate() + 7);
				}else {
					next_date.setMonth(next_date.getMonth() + using_day);
				}

				$('#expired_date').val(next_date.toISOString().slice(0,10));
			});

			$('#add').click(function(e) {
				e.preventDefault();
				
				var service		= $('#service').val();
				var expired_date = $('#expired_date').val();
				var note  		= $('#note').val();

				if( service == '' ){
					alert('Bạn chưa chọn dịch vụ!');
					return false;
				}

				if(expired_date == ''){
					alert('Bạn chưa chọn ngày hết hạn mới!');
					return false;
				}

				$('#modal_animation').block({
		            message: '<i class="icon-spinner4 spinner"></i>',
		            overlayCSS: {
		                backgroundColor: '#1B2024',
		                opacity: 0.85,
		                cursor: 'wait'
		            },
		            css: {
		                border: 0,
		                padding: 0,
		                backgroundColor: 'none',
		                color: '#fff'
		            }
		        });

				var url = '{{ route("backend.box.postRenewed",$box->id) }}';
		        data = {service: service, expired_date : expired_date, note :note, _token: _token};

			  	$.post(url, data, function(result){
	                $('#modal_animation').modal('toggle');
	                location.reload();
                });

			});
		});

		function copyText() {
			/* Get the text field */
			var copyText = $("#copyText");
			window.prompt("Copy to clipboard: Ctrl+C, Enter", copyText.html());
		}
	</script>
@endpush