<?php $__env->startSection('content'); ?>
	<div class="row">
    	<div class="col-lg-12">
    		<h1 class="page-header">Vehicles</h1>
    	</div>
    </div>
    <div class="row">
            <div class="col-lg-12">
                <?php if(session('status')): ?>
				<div class="alert alert-success">
					<?php echo e(session('status')); ?>

				</div>
				<?php endif; ?>
				<?php if(count($errors) > 0): ?>
					<div class="alert alert-danger">
						<strong>Whoops!</strong> There were some problems with your input.<br><br>
						<ul>
							<?php foreach($errors->all() as $error): ?>
								<li><?php echo e($error); ?></li>
							<?php endforeach; ?>
						</ul>
					</div>
				<?php endif; ?>
			<div class="panel panel-default">
						<div class="panel-heading">
                            <?php echo e(ucfirst($action)); ?> Mileage
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-12">
				                    <form id="theForm" class="form-horizontal" role="form" method="POST" enctype="multipart/form-data" action="<?php echo e(url('admin/mileages/'.$action)); ?>">
										<input type="hidden" name="_token" value="<?php echo e(csrf_token()); ?>">
										<?php if($action == 'edit'): ?>
											<input type="hidden" name="mileageID" value="<?php echo e($mileage->id); ?>">
										<?php endif; ?>
										
										<div class="form-group">
											
											
										</div>
										
										<div class="form-group">
											<div class="col-sm-12 col-md-3 morePadding morePadding2" onclick="inputFocus('vehicle')">
												<select class="form-control" id="vehicle" name="vehicle"  title="Vehicle">
													<?php if(count(\App\Vehicle::where('driver','=',Auth::user()->id)->get()) > 1): ?>
													<option id="vehicle_option" value="">Select One</option>
													<?php endif; ?>
													<?php foreach(\App\Vehicle::where('driver','=',Auth::user()->id)->get() as $vehicle): ?>
													
														<option value="<?php echo e($vehicle->id); ?>"
														<?php if(old('vehicle') == $vehicle->id || (isset($mileage) && $mileage->vehicle == $vehicle->id)): ?> 
															<?php echo e('selected'); ?> 
														<?php endif; ?>
														><?php echo e($vehicle->year); ?> <?php echo e($vehicle->make); ?> <?php echo e($vehicle->model); ?></option>
													
													<?php endforeach; ?>
													
													
												</select>
												<span id="vehicle-label" 
												
												class="xlabel-text hasValue"
												
												>Vehicle</span>	
											</div>
											<div class="col-sm-12 col-md-3 morePadding morePadding2" onclick="inputFocus('month')">

												<select class="form-control" id="month" name="month"  title="Month">

													<option value="">Select Month</option>
													<?php for($i=1;$i<=12;$i++): ?>
													
														<option value="<?php echo e($i); ?>"
														<?php if(old('month') == $i || (isset($mileage) && $mileage->month == $i)): ?> 
															<?php echo e('selected'); ?> 
														<?php endif; ?>
														><?php echo e(date('F', strtotime('2018-'.$i.'-1'))); ?></option>
													
													<?php endfor; ?>
													
													
												</select>
												<span id="month-label" 
												
												class="xlabel-text hasValue"
												
												>Month</span>	
											</div>
											
											<div class="col-sm-12 col-md-3 morePadding morePadding2" onclick="inputFocus('year')">
												<select class="form-control" id="year" name="year"  title="Year">


														<option value="<?php echo e(date('Y', strtotime('last year'))); ?>"
														<?php if(old('year') == date('Y', strtotime('last year')) || (isset($mileage) && $mileage->year == date('Y', strtotime('last year')))): ?> 
															<?php echo e('selected'); ?> 
														<?php endif; ?>
														><?php echo e(date('Y', strtotime('last year'))); ?></option>
														<option value="<?php echo e(date('Y')); ?>"
														<?php if(old('year') == date('Y') || (isset($mileage) && $mileage->year == date('Y'))): ?> 
															<?php echo e('selected'); ?> 
														<?php elseif(old('year') == '' && !isset($mileage)): ?>
															<?php echo e('selected'); ?>

														<?php endif; ?>
														><?php echo e(date('Y')); ?></option>
														<option value="<?php echo e(date('Y', strtotime('next year'))); ?>"
														<?php if(old('year') == date('Y', strtotime('next year')) || (isset($mileage) && $mileage->year == date('Y', strtotime('next year')))): ?> 
															<?php echo e('selected'); ?> 
														<?php endif; ?>
														><?php echo e(date('Y', strtotime('next year'))); ?></option>
													
													
												</select>
												<span id="year-label" 
												
												class="xlabel-text hasValue"
												
												>Year</span>	
											</div>
											<div class="col-sm-12 col-md-3 morePadding morePadding2" onclick="inputFocus('odometer')">
												<input type="number" step=".1" class="form-control" id="odometer" name="odometer" value="<?php echo e(old('odometer') ? old('odometer') : (isset($mileage) ? $mileage->odometer : '')); ?>" title="End of Month Odometer Reading">
												<span id="odometer-label" class="label-text">Month-End Odometer</span>	
											</div>
										</div>
										
										<div class="form-group">
											<label class="control-label col-sm-12 col-md-3 morePadding morePadding2">Commuting Miles</label>
											
											<div class="col-sm-12 col-md-3 morePadding morePadding2" onclick="inputFocus('commute_miles')">
												<input type="number" step=".1" class="form-control" id="commute_miles" name="commute_miles" value="<?php echo e(old('commute_miles')); ?>" title="Daily Commuting Miles" onchange="computeCommute();">
												<span id="commute_miles-label" class="label-text">Daily Commute Miles</span>	
											</div>
											<div class="col-sm-12 col-md-3 morePadding morePadding2" onclick="inputFocus('commute_days')">
												<input type="number" step="1" class="form-control" id="commute_days" name="commute_days" value="<?php echo e(old('commute_days')); ?>" title="Commuting Days" onchange="computeCommute();">
												<span id="commute_days-label" class="label-text">Commuting Days</span>	
											</div>
											<div class="col-sm-12 col-md-3 morePadding morePadding2" onclick="inputFocus('commute_total')">
												<input type="number" step=".1" class="form-control" id="commute_total" name="commute_total" value="<?php echo e(old('commute_total') ? old('commute_total') : (isset($mileage) ? '?' : '')); ?>" title="Month Commuting Total Miles" onchange="clearCommuteCalc();">
												<span id="commute_total-label" class="label-text">Month's Commuting Total</span>	
											</div>
											
										</div>
										<div id="dateContainer">
											<div class="form-group">
												<label class="control-label col-sm-12 col-md-3 morePadding morePadding2">Other Personal Miles</label>
												
												<div class="col-sm-12 col-md-3 morePadding morePadding2" onclick="inputFocus('personal_date1')">
													<input type="text" class="form-control date" id="personal_date1" name="personal_date[1]" value="<?php echo e(old('personal_date.1') ? old('personal_date.1') : (isset($mileage) ? '?' : '')); ?>" title="Date 1">
													<span id="personal_date1-label" class="label-text">Date 1</span>	
												</div>
												
												<div class="col-sm-12 col-md-3 morePadding morePadding2" onclick="inputFocus('personal_miles1')">
													<input type="number" step=".1" class="form-control" id="personal_miles1" name="personal_miles[1]" value="<?php echo e(old('personal_miles.1') ? old('personal_miles.1') : (isset($mileage) ? '?' : '')); ?>" title="Miles 1">
													<span id="personal_miles1-label" class="label-text">Miles 1</span>	
												</div>
												
												<div class="col-sm-12 col-md-3 morePadding morePadding2">
													<a id="plus1" num="1" class="btn btn-primary" onclick="addRow(this);"><i class="fa fa-plus"></i></a>
												</div>
												
											</div>
										
											<?php for($k=2;$k<20;$k++): ?>
											<div class="form-group" id="group<?php echo e($k); ?>" style="display: none;">
												<label class="control-label col-sm-12 col-md-3 morePadding morePadding2">&nbsp;</label>
												
												<div class="col-sm-12 col-md-3 morePadding morePadding2" onclick="inputFocus('personal_date<?php echo e($k); ?>')">
													<input type="text" class="form-control date" id="personal_date<?php echo e($k); ?>" name="personal_date[<?php echo e($k); ?>]" value="<?php echo e(old('personal_date.'.$k) ? old('personal_date.'.$k) : (isset($mileage) ? '?' : '')); ?>" title="Date <?php echo e($k); ?>">
													<span id="personal_date<?php echo e($k); ?>-label" class="label-text">Date <?php echo e($k); ?></span>	
												</div>
												
												<div class="col-sm-12 col-md-3 morePadding morePadding2" onclick="inputFocus('personal_miles<?php echo e($k); ?>')">
													<input type="number" step=".1" class="form-control" id="personal_miles<?php echo e($k); ?>" name="personal_miles[<?php echo e($k); ?>]" value="<?php echo e(old('personal_miles.'.$k) ? old('personal_miles.'.$k) : (isset($mileage) ? '?' : '')); ?>" title="Miles <?php echo e($k); ?>">
													<span id="personal_miles<?php echo e($k); ?>-label" class="label-text">Miles <?php echo e($k); ?></span>	
												</div>
												
												<div class="col-sm-12 col-md-3 morePadding morePadding2">
													<?php if($k < 19): ?>
													<a id="plus<?php echo e($k); ?>" num="<?php echo e($k); ?>" class="btn btn-primary" onclick="addRow(this);"><i class="fa fa-plus"></i></a>
													<?php endif; ?>
												</div>
											</div>
											<?php endfor; ?>
										</div>
										<div class="form-group">

											<div class="col-sm-12 col-md-12 morePadding">
												<button type="submit" class="btn btn-primary" style="float: right;">
													Approve & Submit
												</button>
											</div>
										</div>
										
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('extras'); ?>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.2/css/bootstrap-datepicker3.min.css">
	<style>
			input:focus+.label-text, input:not([value=""])+.label-text, select+.label-text
		    		{
		    font-weight: normal;
		    padding: 0;
		    padding-left: 20px;
		    -webkit-transform: translateY(-2rem) scale(.7);
		    transform: translateY(-2rem) scale(.7);
		}
		input+.label-text, select+.label-text, .hasValue{
		    font-size: 1.5rem;
		    font-weight: 400;
		    position: absolute;
		    top: 0;
		    left: 0;
		    display: block;

		    padding-left: 20px;
		    padding-top: 5px;
		    padding-bottom: 5px;
		    opacity: .8;
		    transition: all .3s ease-out,opacity 150ms ease .3s;
		    -webkit-transform: translateY(0) scale(1);
		    transform: translateY(0) scale(1);
		    -webkit-transform-origin: left top;
		    transform-origin: left top;
		}
		span {
		    font-size: 1rem;
		    font-weight: 600;
		    display: block;
		    padding-top: .25rem;
		    padding-bottom: .25rem;
		    margin-left: 1rem;
		    color: #317aba;
		}
		.hasValue
		{
		    font-weight: normal;
		    padding: 0;
		    padding-left: 20px;
		    -webkit-transform: translateY(-2rem) scale(.7);
		    transform: translateY(-2rem) scale(.7);
		}
		

		@media (max-width: 959px)
		{
			.morePadding {
			    margin-top: 1.5em;
			}
		}

		@media (min-width: 960px)
		{
			.morePadding {
			    margin-top: 1em;
			}
		}
		
	</style>
	 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/bs/pdfmake-0.1.18,dt-1.10.11,b-1.1.2,b-flash-1.1.2,b-html5-1.1.2,b-print-1.1.2/datatables.min.css"/>
    
    
    <style>
    	a:hover{
    		text-decoration: none;
    	}
    	.odd .subBack {
    		background-color: #f0fcff;
    	}
    	.even .subBack {
    		background-color: #ecf7fa;
    	}
    	.floatLeft
    	{
    		float: left;
    	}

    </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('bottom'); ?>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.2/js/bootstrap-datepicker.min.js"></script>
<script>
	$('.form-control').each(function() {
	   var elem = $(this);

	   // Save current value of element
	   elem.data('oldVal', elem.val());

	   // Look for changes in the value
	   elem.bind("propertychange change click keyup input paste", function(event){
	      // If value has changed...
	      if (elem.data('oldVal') != elem.val()) {
	       // Updated stored value
	       elem.data('oldVal', elem.val());
	       var elem2 = $('#'+elem.attr('id')+"-label");
	       elem2.addClass('hasValue');
	       elem2.removeClass('label-text');
	       if(elem.val() == "")
	       {
		       
	    	   elem2.addClass('label-text');
		       elem2.removeClass('hasValue');
	       }
	     }
	   });
	 });

	function inputFocus(id)
	{
		document.getElementById(id).focus();
	}

	function addRow(btn)
	{
		btn.style.display = "none";
		num = Number(btn.getAttribute('num')) + 1;
		if(num < 20)
		{
			group = document.getElementById('group'+num);
			group.style.display = "";
		}
		
	}

	function computeCommute()
	{
		miles = document.getElementById('commute_miles');
		days = document.getElementById('commute_days');
		total = document.getElementById('commute_total');

		if(miles.value != '' && days.value != '')
		{
			total.value = miles.value * days.value;
			document.getElementById('commute_total-label').className = "hasValue";
		}
	}

	function clearCommuteCalc()
	{
		miles = document.getElementById('commute_miles');
		days = document.getElementById('commute_days');
		total = document.getElementById('commute_total');

		if((miles.value * days.value) != total.value)
		{
			miles.value = '';
			days.value = '';
		}
		

	}
	
	var highest = false;
	for(var i=19;i>1;i--)
	{
		if(document.getElementById('personal_miles'+i).value != '' || document.getElementById('personal_date'+i).value != '' || highest)
		{
			document.getElementById('group'+i).style.display = "";
			if(highest)
			{
				document.getElementById('plus'+i).style.display = "none";
				
			}
			else
			{
				document.getElementById('plus1').style.display = "none";
			}
			
			highest = true;
		}
	}


	$('#dateContainer .date').datepicker({
        'format': 'yyyy-m-d',
        'autoclose': true,
    });
</script>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('residential.templates.uadmin', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>