@extends('admin.layout')
@section('content')	
<style type="text/css">
    #watermarked::before {
	position: fixed;
	top: -75%;
	left: -75%;
	display: block;
	width: 300%;
	height: 300%;
	transform: rotate(-45deg);
	content: attr(data-watermark);
	font-size: 30px;
	opacity: 0.15;
	line-height: 4em;
	letter-spacing: 2px;
	color: #ff0523;
	z-index:0;
	}
	.content-wrapper, .right-side{
		background: #FFF;
	}
	.box {
		background: transparent;
		z-index: 1; 
	}
	.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
		border: 1px solid #b4aaaa;
		vertical-align: middle;
	}
	.required-mark
	{
		color: red;
	}
</style>
<div class="search-list">
	<div class="content-wrapper search-result-list">
	<section class="content-header">
		<h1> {{ trans('Add Channel Provider') }} <small></small> </h1>
		<ol class="breadcrumb">
			<li><a href="{{ URL::to('admin/dashboard/this_month') }}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
			<li class="active">{{ trans('Add Channel Provider') }}</li>
		</ol>
	</section>
	<section class="content"> 
		<div class="row">
			<div class="col-md-12">
				<div class="box box-info">
					<div class="box-body">
						<div class="row">
							@if( count($errors) > 0)
							@foreach($errors->all() as $error)
							<div class="alert alert-success" role="alert">
								<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
								<span class="sr-only">{{ trans('labels.Error') }}:</span>
								{{ $error }}
							</div>
							@endforeach
							@endif	
							<div class="row">
								<form action="{{ route('addChannelProviderData') }}" id="addChannelProviderData" method="post">
									{{ csrf_field() }}
									<div class="col-md-4">
										<div class="form-group">
											<div class="col-sm-12 col-md-12">
												<label for="chnannel_id" class="control-label">{{ trans('Channel ID') }} <span class="required-mark">*</span></label>
											</div>
											<div class="col-sm-12 col-md-12">
												{!! Form::text('chnannel_id', '', array('class'=>'form-control', 'id'=>'chnannel_id', 'required'=>'required', 'minlength'=>'1', 'maxlength'=>'4')) !!}
											</div>
										</div>
									</div>
									<div class="col-md-4">
										<div class="form-group">
											<div class="col-sm-12 col-md-12">
												<label for="chnannel_name" class="control-label">{{ trans('Channel name') }} <span class="required-mark">*</span></label>
											</div>
											<div class="col-sm-12 col-md-12">
												{!! Form::text('chnannel_name', '', array('class'=>'form-control', 'id'=>'chnannel_name', 'required'=>'required')) !!}
											</div>
										</div>
									</div>
									<div class="col-md-4">
										<div class="form-group">
											<div class="col-sm-12 col-md-12">
												<label for="chnannel_provider" class="control-label">{{ trans('Channel Provider') }} <span class="required-mark">*</span></label>
											</div>
											<div class="col-sm-12 col-md-12">
												{!! Form::text('chnannel_provider', '', array('class'=>'form-control', 'id'=>'chnannel_provider', 'required'=>'required')) !!}
											</div>
										</div>
									</div>
									<div class="clearfix"></div>
									<div class="col-md-4">
										<div class="form-group">
											<div class="col-sm-12 col-md-12">
												<label for="chnannel_comments" class="control-label">{{ trans('Comments') }}</label>
											</div>
											<div class="col-sm-12 col-md-12">
												{!! Form::text('chnannel_comments', '', array('class'=>'form-control', 'id'=>'chnannel_comments')) !!}
											</div>
										</div>
									</div>	
									
									<div class="col-md-4">
										<div class="form-group">
											<div class="col-sm-12 col-md-12">
												<label for="channel_language" class="control-label">{{ trans('Language') }}</label>
											</div>
											<div class="col-sm-12 col-md-12">
												{!! Form::text('channel_language', '', array('class'=>'form-control', 'id'=>'channel_language')) !!}
											</div>
										</div>
									</div>
									<div class="col-md-12">
										<div class="form-group">
											<div class="col-sm-12 col-md-12">
												<label for="submit" class="control-label">&nbsp;</label>
											</div>
											<div class="col-sm-12 col-md-12">
												<button type="submit" class="btn btn-primary">Submit</button>
												<a href="{{URL('admin/epg/channel-provider')}}" class="btn btn-primary">Back</a>
											</div>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>

				<div id="watermarked" data-watermark="{{ auth()->guard('admin')->user()->first_name }} {{ auth()->guard('admin')->user()->last_name }}" class="row listing">        
				</div>

			</div>
		</div>
	</section>
</div>
</div>
<script src="{!! asset('assets/admin/plugins/jQuery/jQuery-2.2.0.min.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/jquery.validate.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/additional-methods.js') !!}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
<script type="text/javascript">
	
	// Alphabets Only
	$.validator.addMethod("alpha", function(value, element) {
		return this.optional(element) || value == value.match(/^[a-zA-Z\s]+$/);
	});	

	$( "#addChannelProviderData" ).validate( {
			rules: {				
				chnannel_id: {
					required: true,
      				number: true,
      				min: 1,				
					remote: {
		                url: "{{URL('admin/epg/check-channel-id-provider-add')}}",
		                data: {
		                    chnannel_id: function () {
		                        //you need to read this value when the validation is executed, so pass the value as a function which will be called
		                        return $('#chnannel_id').val();
		                    }
		                },
		                type: "GET"
		            },
				},
				chnannel_name: {
					required: true,
				},
				chnannel_provider: {
					required: true,
				},
			},
			messages: {
				chnannel_id: {
					required: "Please enter chnannel id",
					number: "Please enter chnannel id numbers only",
					min: "Please enter a value greater than or equal to 1.",
					remote: "The chnannel id already exit. Please use another.",
				},
				chnannel_name: {
					required: "Please enter chnannel name",
				},
				chnannel_provider: {					
					required: "Please enter chnannel provider",
				},
			},
			errorElement: "em",
			errorPlacement: function ( error, element ) {
				// Add the `help-block` class to the error element
				error.addClass( "help-block" );

				// Add `has-feedback` class to the parent div.form-group
				// in order to add icons to inputs
				element.parents( ".col-sm-5" ).addClass( "has-feedback" );

				if ( element.prop( "type" ) === "checkbox" ) {
					error.insertAfter( element.parent( "label" ) );
				} else {
					error.insertAfter( element );
				}

				// Add the span element, if doesn't exists, and apply the icon classes to it.
				if ( !element.next( "span" )[ 0 ] ) {
					$( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
				}
			},
			success: function ( label, element ) {
				// Add the span element, if doesn't exists, and apply the icon classes to it.
				if ( !$( element ).next( "span" )[ 0 ] ) {
					$( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
				}
			},
			highlight: function ( element, errorClass, validClass ) {
				$( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
				$( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
			},
			unhighlight: function ( element, errorClass, validClass ) {
				$( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
				$( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
			}
		} );


	$("#chnannel_id").keypress(function (e){
		var charCode = (e.which) ? e.which : e.keyCode;
		if (charCode > 31 && (charCode < 48 || charCode > 57)) {
			return false;
		}
	});	
</script>
<script>
    document.querySelectorAll('#watermarked').forEach(function(el) {
              el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
          });
  </script>
@endsection