@extends('backend.layout')

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

		<div class="navbar navbar-default navbar-xs fillter" style="padding-left:20px;padding-right:0px;">
			<ul class="nav navbar-nav no-border visible-xs-block">
				<li><a class="text-center collapsed" data-toggle="collapse" data-target="#navbar-filter"><i class="icon-menu7"></i></a></li>
			</ul>

			<div class="navbar-collapse collapse" id="navbar-filter">
				<form action="" method="GET">
					<p class="navbar-text">Bộ lọc:</p>
					<ul class="nav navbar-nav">
						<li>
							<input class="form-control" style="margin-top: 3px;" name="name" placeholder="Tên chương trình hoặc kênh" value="{{ @$_GET['name'] }}">
						</li>
						<li style="margin-left:5px;">
							<input style="margin-top: 3px;"  type="text" class="form-control date" id="date"  placeholder="Chọn ngày" name="date" value="{{ @$_GET['date']  }}">
						</li>
						<li>
							<select name="content" style="margin-top: 3px;margin-left:5px;"  class="form-control select2 select-size-xs" data-placeholder="Chọn kênh">
								<option value="">Chọn kênh</option>
								@foreach($contents as $content)
								<option value="{{ $content->id }}" @if($content->id ==  @$_GET['content'] ) selected="selected" @endif>{{ $content->name }} </option>
								@endforeach
							</select>
						</li>
					</ul>
					<div class="navbar-right">
						<ul class="nav navbar-nav">
							<li><button type="submit" class="btn btn-sucess" style="padding:10px 12px;border-right:1px solid #ccc;"><i class="icon-search4 position-left"></i>Lọc</button></li>
							<li><a href="{{ route('backend.broad.list') }}" class="btn btn-sucess" style="padding:10px 12px;border-right:1px solid #ccc;"><i class="icon-rotate-ccw3 position-left"></i>Huỷ lọc</a></li>
							<li class="pull-right"><a href="{{ route('backend.broad.new') }}"><i class="icon-plus3 position-left"></i> Thêm mới</a></li>
						</ul>
					</div>
				</form>
			</div>
		</div>
		<p class="pull-right"><span class="text-semibold">{{ ($users->currentPage() - 1)*10 + 1 }}-{{ ($users->currentPage() - 1)*10 + count($users) }}</span> trong <span class="text-semibold">{{ number_format($users->total(),0,'.','.') }}</span> bản ghi</p>
		<div class="clearfix"></div>
		<div class="table-responsive">
			<table class="table">
				<thead>
					<tr>
						<th>STT</th>
						<th style="width: 200px;">Kênh</th>
						<th style="width: 250px;">Chương trình</th>
						<th>Bắt đầu</th>
						<th>Kết thúc</th>
						<th>Xem lại</th>
						<th>Vod</th>
						<th>Get link</th>
						<th>Action</th>
					</tr>
				</thead>
				<tbody>
					@if($users != null)
					@foreach($users as $stt => $user)
					<tr>
						<td>{{ ($users->currentPage() - 1)*$users->perPage() + $stt + 1  }}</td>
						<td><a href="{{ route('backend.chanel.get',$user->chanel->id) }}?type=live" class="text-blue">{{ $user->chanel->name }}</a></td>
						<td>{{ $user->program }}</td>
						<td>{{ $user->start_time }}</td>
						<td>{{ $user->end_time }}</td>
						<td> 
							@if(time() > strtotime($user->end_time))
							<a target="_blank" href="{{ @$user->chanel->streamsCathup[0]->link.$user->time.@$user->chanel->streamsCathup[0]->link_stream }}" />Xem</a>
							@endif	
						</td>
						<td>
							@if(time() > strtotime($user->end_time))
							<a  href="javascript:void(0);" class="vod" data-id="{{ $user->id }}">
								Tạo vod
							</a>
							@endif
						</td>

						<td>
							@if(time() > strtotime($user->end_time))
							<a href="javascript:void(0);" class="getLink"  data-id="{{ $user->id }}">
								Get link
							</a>
							@endif
						</td>

						<td class="text-center">
							<ul class="icons-list">
								<li style="margin-right:10px;"><a href="{{ route('backend.broad.get',$user->id) }}" class="text-blue"><i class="icon-pencil7"></i></a></li> 
								<li><a onclick="return confirm('Bạn có chắc chắn muốn xoá chương trình này {{ $user->program }}?');" style="color:red;" href="{{ route('backend.broad.delete',$user->id) }}"><i class="icon-trash"></i></a></li>
							</ul>
						</td>

					</tr>
					@endforeach
					@endif
				</tbody>
			</table>
			<div class="clear-fix" style="border-top:1px solid #ccc;"></div>
			<div style="padding:10px 15px;text-align:center;">
				{{ $users->appends($appends)->links() }}	
			</div>
		</div>
	</div>
</div>

<div id="modal_animation" class="modal" tabindex="-1" 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">Cập nhật link</h5>
			</div>

			<div class="modal-body">
				<div class="form-group has-feedback">
					<label class="control-label col-lg-2 text-semibold">Link</label>
					<div class="col-lg-10">
						<input type="hidden" id="idbroad" value="">
						<input type="text" required class="form-control" id="link">
					</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">Cập nhật</button>
			</div>
		</div>
	</div>
</div>

<div id="get_link" class="modal" tabindex="-1" 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">Get link</h5>
			</div>

			<div class="modal-body">
				<div class="form-group has-feedback">
					<p >Link stream: <b id="linkId"></b></p>
				</div>
			</div>

			<div class="modal-footer">
				<button type="button" class="btn btn-link" data-dismiss="modal">Đóng</button>
			</div>
		</div>
	</div>
</div>

@push('styles')
	<style>
		.pnotify-center {
		   right: calc(50% - 150px) !important;
		   top: calc(50% - 150px) !important;
		}
		.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;
		}
		.fillter li{
			margin-left:5px;
		}
		.fillter li>span{
			margin-top:3px !important;
		}
		.select-xs.select2-selection--single{
			height:36px;
		}
		.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;
		}
		.select2-container--open.select2-container--below .select2-selection--multiple, .select2-container--open.select2-container--below .select2-selection--single{
			min-width:200px;
		}
		.select-xs.select2-selection--multiple .select2-search--inline .select2-search__field{
			min-width:200px;
		}
	</style>
@endpush
	<!-- /invoice grid options -->
@endsection

@push('scripts')
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{ URL::asset('backend/global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
	<script src="{{ URL::asset('backend/global_assets/js/plugins/pickers/anytime.min.js')}}"></script>
	<script>
		var urlVod = "{{ route('backend.broad.vod') }}";

		$("#date").AnyTime_picker({
	        format: "%Z-%m-%d"
	    });
	    $('.select2').select2();

	    $('.broad').click(function() {
	    	var id = $(this).attr('data-id');
	    	$('#idbroad').val(id);
	    	$('body').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'
	            }
	        });
	    });

	    $('#modal_animation').on('hidden.bs.modal', function () {
			$('body').unblock();
		})

	    // Tạo vod từ catchUp
	    var url = "{{route('backend.broad.cacthup')}}";
	    var urlCreatVod = "{{route('backend.content.new')}}";

	    $('.vod').click(function() {
	    	var id = $(this).attr('data-id');
	    	$('body').LoadingOverlay("show");
	    	$.post(urlVod, {_token: _token, id: id}, function(result){
	    		$('body').LoadingOverlay("hide");
	    		if(result.status == "true"){
	    			window.open(urlCreatVod+'?broad_id='+result.broad_id+'&file='+result.file, '_blank');
	    			// window.location.href = urlCreatVod+'?broad_id='+result.broad_id+'&file='+result.file;
	    		}else {
	    			alert('Không thể khởi tạo VOD');
	    		}
             	// location.reload();
            });
	    	// urlVod
	    });

	    // Get Link

	    $('.getLink').click(function() {
	    	var id = $(this).attr('data-id');
	    	$('body').LoadingOverlay("show");
	    	$.post(urlVod, {_token: _token, id: id}, function(result){
	    		$('body').LoadingOverlay("hide");
	    		if(result.status == "true"){
	    			$('#linkId').text(result.file);
	    			$('#get_link').modal('show');
	    		}else {
	    			alert('Không thể khởi tạo VOD');
	    		}
             	// location.reload();
            });
	    	// urlVod
	    });

	    // gì gì đó

		$('#add').click(function() {
			var id		= $('#idbroad').val();
			var link 	= $('#link').val();

			if(link == '')
			{
				alert('Bạn chưa nhập link m3u8');
				$('#link').focus();
			}else {
				data = {id: id, link: link, _token: _token};
			  	$.post(url, data, function(result){
	             	location.reload();
	            });
			}
			
		});
	</script>
@endpush