@extends('admin.layout')
@section('content')
<style>
	#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; 
	}
</style>
<div class="search-list">
	<div class="content-wrapper search-result-list">
	<section class="content-header">
		<h1> {{ trans('Add Services Plan') }} <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 Services Plan') }}</li>
		</ol>
	</section>
	<section class="content"> 
		@php
		$getUserRoleData 			= userRoleData();
		$Package		= explode(",",$getUserRoleData->Package);
		@endphp

		<div class="row">
			<div class="col-md-12">
				<div class="box box-info">
					<div class="box-header">
						<ul  class="list-inline">
							<li class="list-inline-item"><button type="button" id="submit-button" class="btn btn-primary btn-sm">{{ trans('Submit') }}</button></li>
							<li class="list-inline-item"><a href="{{URL('admin/services-plan')}}" type="button" class="btn btn-primary btn-sm">{{ trans('labels.back') }}</a></li>
						</ul>        	
					</div>   
					<div class="box-body">
						<div class="row">
							<div class="col-xs-12">
								<div class="">                        
									<div class="row">
										@if( count((array) $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   
										@if(session()->has('message'))
										<div class="alert alert-success alert-dismissible">
											<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
											<h4><i class="icon fa fa-check"></i> {{ trans('labels.Successlabel') }}</h4>
											{{ session()->get('message') }}
										</div>
										@endif
										@if(session()->has('error'))
										<div class="alert alert-warning alert-dismissible">
											<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
											<h4><i class="icon fa fa-warning"></i> {{ trans('labels.WarningLabel') }}</h4>
											{{ session()->get('error') }}
										</div>
										@endif
									</div>
									<div class="box-body">
										@if(in_array("Add",$Package ))
										{!! Form::open(array('url' =>'admin/add-services-plan-data', 'method'=>'post', 'class' => 'form-horizontal', 'id' => 'addNewPackage', 'enctype'=>'multipart/form-data')) !!}
										<div class="form-group">
											<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Name') }} </label>
											<div class="col-sm-10 col-md-4">
												{!! Form::text('name',  '', array('class'=>'form-control', 'id'=>'name', 'required'=>'required')) !!}
											</div>
										</div>
										<div class="form-group">
											<label for="model_number" class="col-sm-2 col-md-3 control-label">{{ trans('Model Number') }} </label>
											<div class="col-sm-10 col-md-4">
												{!! Form::text('model_number',  '', array('class'=>'form-control', 'id'=>'model_number')) !!}
											</div>
										</div>
										<div class="form-group">
											<label for="existing_customer" class="col-sm-2 col-md-3 control-label">{{ trans('Existing Customer') }} </label>
											<div class="col-sm-10 col-md-4">
												{!! Form::text('existing_customer',  '', array('class'=>'form-control', 'id'=>'existing_customer')) !!}
											</div>
										</div>
										<div class="form-group">
											<label for="price" class="col-sm-2 col-md-3 control-label">{{ trans('Price') }} </label>
											<div class="col-sm-10 col-md-4">
												{!! Form::text('price',  '', array('class'=>'form-control', 'id'=>'price', 'required'=>'required')) !!}
											</div>
										</div>
										<div class="form-group">
											<label for="price" class="col-sm-2 col-md-3 control-label">{{ trans('Currency') }} </label>
											<div class="col-sm-10 col-md-4">
												<select class="form-control"  name="package_currency" id="package_currency" required="">
													<option value="">-- Choose --</option>
													@if(count((array) $result['getCurrency'])>0)
													@foreach($result['getCurrency'] as $key => $iValue)												
													<option value="{{$iValue}}">{{$iValue}}</option>
													@endforeach
													@endif
												</select>
											</div>
										</div>
										<div class="box-footer text-center">
											<button type="submit" class="btn btn-primary">{{ trans('Submit') }}</button>
											<a href="services-plan" type="button" class="btn btn-primary">{{ trans('labels.back') }}</a>
										</div>
										{!! Form::close() !!}											 
										@else
										<p> <strong>Please contact with SuperAdmin</strong></p>
										@endif
									</div>
								</div>
							</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>

	$( function() {

		$( "#customers_dob" ).datepicker({ 
			dateFormat: 'yy-mm-dd',
			minDate: 0,
			autoclose: true,
		}).val();

	} );		

</script>
<script type="text/javascript">
	
	// Alphabets Only
	$.validator.addMethod("alpha", function(value, element) {
		return this.optional(element) || value == value.match(/^[a-zA-Z\s]+$/);
	});	
	
	// Password Check
	$.validator.addMethod("pwcheck", function(value) {
		return /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,16}$/.test(value) // consists of only these
	});
	
	// Email Check
	$.validator.addMethod("email", function(value) {
		return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value) // consists of only these
	});
	
	// File Size Validation
	jQuery.validator.addMethod("filesize_max", function(value, element, param) {
		var isOptional = this.optional(element),
		file;

		if(isOptional) {
			return isOptional;
		}
		if ($(element).attr("type") === "file") {

			if (element.files && element.files.length) {

				file = element.files[0];            
				return ( file.size && file.size <= param ); 
			}
		}
		return false;
	}, "File size is too large.");
	
	var $wCur = $("#addNewPackage");	
	$wCur.validate( {
		rules: {
			name: {
				required: true,
				rangelength: [3, 100],
			},
			price: {
				required: true,
				rangelength: [3, 6],
				number: true,
			},
			package_currency: {
				required: true,
			},
		},
		messages: {
			name: {
				required: "Please enter package name",
				rangelength: "Please enter package name min length 3 & max length 100",
			},
			price: {
				required: "Please enter last name",
				number: "Please enter price in number only",
				rangelength: "Please enter package name min length 3 & max length 6"
			},
			package_currency: {
				required: "Please select currency",
			},
		},
		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" );
			}
		} );

	$("#submit-button").click(function (e) {  
		if($wCur.valid()) {
			$("#addNewPackage").submit();
		} else {            	
			e.preventDefault();
		}
	});		
</script>
<script>
	document.querySelectorAll('#watermarked').forEach(function(el) {
		el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
	});
	$(document).ready(function() {
    function sortProducts(){
			var select = $('#package_currency');
			var options = select.children('option').not('[value=""]').get();
			var selectAnyOption = select.find('option[value=""]');
			options.sort(function(a, b) {
			var textA = $(a).text().toUpperCase(); // Ignore case
			var textB = $(b).text().toUpperCase(); // Ignore case
			return textA.localeCompare(textB); // Compare the text of the options
			});
			select.empty().append(options);
			select.prepend(selectAnyOption);
		}
		sortProducts()
	});
</script>
@endsection