@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('UPS Track') }} <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('UPS Track') }}</li>
    </ol>
  </section>
	@php
		$getUserRoleData 			= userRoleData();
		$UPSTrack				= explode(",",$getUserRoleData->UPSTrack);
		//$UPSTrack				= array("Add", "View", "Edit", "Delete");
	@endphp
  <section class="content"> 
    <div class="row">
      <div class="col-md-12">
        <div class="box box-info">
          <div class="box-header">
            <h3 class="box-title">{{ trans('UPS Track') }} </h3>
          </div>
          <div class="box-body">
            <div class="row">
              <div class="col-xs-12">
                    <div class="">            
                         <div class="box-body">							
							<div class="col-xs-12">
								<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>  
							@if(in_array("View",$UPSTrack ))							
                            {!! Form::open(array('url' =>'admin/ups-track-data', 'method'=>'post', 'class' => 'form-horizontal', 'id'=>'addnewUPSTrack', 'enctype'=>'multipart/form-data')) !!}
								<div class="form-group">
									<label for="track_number" class="col-sm-2 col-md-3 control-label">{{ trans('Track Number') }}<span class="red_star">*</span></label>
									<div class="col-sm-10 col-md-4">
										{!! Form::text('track_number', $result['tracking_number'], array('class'=>'form-control', 'id'=>'track_number', 'required'=>'required')) !!}
									</div>
									<!-- <button type="submit" class="btn btn-primary">{{ trans('Submit') }}</button> -->
								</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 id="tracking_results"></div>
</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 type="text/javascript">
	
	// 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
	});

	// Password Check
	$.validator.addMethod("pwcheck", function(value) {
		return /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,16}$/.test(value) // consists of only these
	});
	
	// Alpthabet Check
	$.validator.addMethod("alpha", function(value, element) {
		return this.optional(element) || value == value.match(/^[a-zA-Z\s]+$/);
	});
	
	// File size validate
	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.");	

	// Product Form Validation
	$( "#addnewUPSTrack" ).validate( {
		rules: {
			track_number: {
				required: true,
				rangelength: [3, 100],
			},
		},
		messages: {
			track_number: {
				required: "Please enter track number",
			},
		},
		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" );
		}
	});
</script>
<script type="text/javascript">	

	function trackShipping() {		
		var formData = $('#addnewUPSTrack').serialize();
		//console.log(formData);
		//return false;
		$.ajax({
			url: '{{URL("admin/ups-track-data")}}',
			type: "POST",
			data: formData,
			success: function (data) {
				$('#tracking_results').html(data);
			},
		});
	}
	$( window ).on( "load", function() {
	//$( '#clicks' ).on( "click", function() {
		if ($('#track_number').val() !='') {
			trackShipping();
		}
	});
	$(document).on('change','#track_number', function() {
		trackShipping();
	});

	$(document).ready(function() {
	  $(window).keydown(function(event){
	  	trackShipping();
	    if( (event.keyCode == 13)) {
	      event.preventDefault();
	      return false;
	    }
	  });
	});
</script>
<script>
	document.querySelectorAll('#watermarked').forEach(function(el) {
			  el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
		  });
  </script>
@endsection