<?php $__env->startSection('content'); ?>
	<div class="row">
    	<div class="col-lg-12">
    		<h1 class="page-header">New Customer</h1>
    	</div>
    </div>
    <div id="app" 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">
                    New Customer
                </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/customers/add')); ?>">
								<input type="hidden" name="_token" value="<?php echo e(csrf_token()); ?>">
								<input type="hidden" name="vueData" :value="allJson">

								<div class="form-group">
									<div class="col-sm-12 col-md-6 input-item" onclick="inputFocus('name')">
										<input type="text" step="1" class="form-control" id="name" name="name" value="<?php echo e(old('name')); ?>" title="name">
										<span id="name-label" class="label-text">Name*</span>
									</div>
								</div>

								<div class="form-group">
									<div class="col-sm-12 col-md-3 input-item" onclick="inputFocus('directory_phone')">
										<input type="text" step="1" class="form-control" id="directory_phone" name="directory_phone" value="<?php echo e(old('directory_phone')); ?>" title="directory_phone">
										<span id="directory_phone-label" class="label-text">Company Phone Number</span>
									</div>
								</div>

								<div class="form-group" style="margin-bottom: 20px;">
									<div class="col-sm-12 col-md-4 input-item" onclick="inputFocus('address')">
										<input type="text" step="1" class="form-control" id="address" name="address" value="<?php echo e(old('address')); ?>" title="address">
										<span id="address-label" class="label-text">Address</span>
									</div>
									<div class="col-sm-12 col-md-3 input-item" onclick="inputFocus('city')">
										<input type="text" step="1" class="form-control" id="city" name="city" value="<?php echo e(old('city')); ?>" title="city">
										<span id="city-label" class="label-text">City</span>
									</div>
									<div class="col-sm-12 col-md-1 input-item" onclick="inputFocus('state')">
										<input type="text" step="1" class="form-control" id="state" name="state" value="<?php echo e(old('state')); ?>" title="state">
										<span id="state-label" class="label-text">State</span>
									</div>
									<div class="col-sm-12 col-md-2 input-item" onclick="inputFocus('zip')">
										<input type="text" step="1" class="form-control" id="zip" name="zip" value="<?php echo e(old('zip')); ?>" title="zip">
										<span id="zip-label" class="label-text">Zip Code</span>
									</div>
								</div>

								<div class="form-group" style="margin-bottom: 25px;">
									
									<div class="col-sm-12 col-md-3 input-item" onclick="inputFocus('primary_name')">
										<input type="text" step="1" class="form-control" id="primary_name" name="primary_name" value="<?php echo e(old('primary_name')); ?>" title="primary_name">
										<span id="primary_name-label" class="label-text">Primary Contact Name</span>
									</div>
									<div class="col-sm-12 col-md-2 input-item" onclick="inputFocus('primary_phone_number')">
										<input type="text" step="1" class="form-control" id="primary_phone_number" name="primary_phone_number" value="<?php echo e(old('primary_phone_number')); ?>" title="primary_phone_number">
										<span id="primary_phone_number-label" class="label-text">Phone Number</span>
									</div>
									<div class="col-sm-12 col-md-3 input-item" onclick="inputFocus('primary_email')">
										<input type="text" step="1" class="form-control" id="primary_email" name="primary_email" value="<?php echo e(old('primary_email')); ?>" title="primary_email">
										<span id="primary_email-label" class="label-text">Email</span>
									</div>
								</div>

								<div class="form-group" style="margin-bottom: 25px;">
									
									<div class="col-sm-12 col-md-3 input-item" onclick="inputFocus('technical_name')">
										<input type="text" step="1" class="form-control" id="technical_name" name="technical_name" value="<?php echo e(old('technical_name')); ?>" title="technical_name">
										<span id="technical_name-label" class="label-text">Technical Contact Name</span>
									</div>
									<div class="col-sm-12 col-md-2 input-item" onclick="inputFocus('technical_phone_number')">
										<input type="text" step="1" class="form-control" id="technical_phone_number" name="technical_phone_number" value="<?php echo e(old('technical_phone_number')); ?>" title="technical_phone_number">
										<span id="technical_phone_number-label" class="label-text">Phone Number</span>
									</div>
									<div class="col-sm-12 col-md-3 input-item" onclick="inputFocus('technical_email')">
										<input type="text" step="1" class="form-control" id="technical_email" name="technical_email" value="<?php echo e(old('technical_email')); ?>" title="technical_email">
										<span id="technical_email-label" class="label-text">Email</span>
									</div>
								</div>

								<div class="form-group">

									<div class="col-sm-12 col-md-2 input-item" onclick="inputFocus('circuit_id')" style="margin-bottom: 10px;">
										<input type="text" step="1" class="form-control" id="circuit_id" name="circuit_id" value="<?php echo e(old('circuit_id')); ?>" title="circuit_id">
										<span id="circuit_id-label" class="label-text">Circuit ID</span>
									</div>

									<div v-for="(circuit,index) in circuits">
										<div class="col-sm-12 col-md-2" style="margin-bottom: 10px;">
											<div class="col-sm-12 col-md-10 input-item">
												<input type="text" step="1" class="form-control"  v-model="circuits[index]" title="Circuit ID">
												<span class="label-text">Circuit ID</span>
											</div>

											<label class="control-label"><i class="fa fa-times-circle" style="float: left; padding-left: 5px; padding-top:15px;" @click="removeCircuit(index)" style="cursor: pointer;" title="Remove"></i></label>
										</div>
									</div>
								</div>
								
								<button type="button" class="btn btn-primary" @click="addCircuit()" style="margin-bottom: 10px; margin-top: -10px;">
									Add Circuit
								</button>

								<hr>

								<div class="form-group">
									<label class="label-control col-sm-12 col-md-12" style="margin-bottom: 20px;">
										Locations
										<i class="fa fa-plus-circle" @click="addLocation()" style='color: #01B300; cursor: pointer; padding-left: 5px;' title="Add Location"></i>
									</label>

									<div v-if="locations.length > 0" class="label-control col-sm-12 col-md-12">
										<div v-for="(location,index) in locations" style="margin-bottom: 40px;">

											<div class="form-group" style="margin-bottom: 15px;">
												<div class="col-sm-12 col-md-3 input-item">
													<input type="text" step="1" class="form-control" v-model="locations[index].name" title="Location Name">
													<span class="label-text">Location Name</span>
												</div>
												<div class="col-sm-12 col-md-5 input-item">
													<input type="text" step="1" class="form-control" v-model="locations[index].address" title="Location Address">
													<span class="label-text">Address</span>
												</div>
												<div class="col-sm-12 col-md-2 input-item">
													<input type="text" step="1" class="form-control" v-model="locations[index].phone" title="Location Phone Number">
													<span class="label-text">Phone Number</span>
												</div>

												<label class="control-label"><i class="fa fa-times-circle" style="float: left; padding-left: 5px; padding-top:15px;" @click="removeLocation(index)" style="cursor: pointer;" title="Remove"></i></label>
											</div>

											<div class="form-group" style="margin-bottom: 15px;">
												<div class="col-sm-12 col-md-11">
													<textarea class="form-control" v-model="locations[index].notes" style="max-width: 100%; height:50px;" title="Notes" placeholder="Notes"></textarea>
												</div>
											</div>

											<div class="form-group" style="margin-bottom: 5px;">
												<div v-for="(circuit,index2) in locations[index].circuits">
													<div class="col-sm-12 col-md-2" style="margin-bottom: 5px; margin-top: 3px;">
														<div class="col-sm-12 col-md-11 input-item">
															<input type="text" step="1" class="form-control"  v-model="locations[index].circuits[index2]" title="Circuit ID">
															<span class="label-text">Circuit ID</span>
														</div>

														<label class="control-label"><i class="fa fa-times-circle" style="float: left; padding-top:15px;" @click="removeCircuitToLocation(index,index2)" style="cursor: pointer;" title="Remove"></i></label>
													</div>
												</div>
											</div>

											<button type="button" class="btn btn-primary" @click="addCircuitToLocation(index)">Add Circuit</button>
										</div>
									</div>
									<div v-else class="label-control col-sm-12 col-md-12" style="color:grey; margin-left: 5px;">
										No Locations
									</div>
								</div>

								<hr>

								<div class="form-group">
									<label class="label-control col-sm-12 col-md-12">Notes</label>
									<div class="col-sm-12 col-md-12" onclick="inputFocus('notes')">
										<textarea class="form-control" style="max-width: 100%; height:150px;" id="notes" name="notes" title="Notes" placeholder=""><?php echo e(old('notes')); ?></textarea>
									</div>
								</div>

								<div class="form-group">
									<div class="col-sm-12 col-md-12">
										<div class="col-sm-12 col-md-12 morePadding"  style="text-align: right;">
											<input type='hidden' value='0' name='another'>
											<input type="checkbox" class="Xform-control" id="another" name="another" value="1" title="another" <?php echo e(old('another') == 1 ? 'checked' : ''); ?>>
											<label class="no-bold" style="padding-right: 10px;" for="another">Add Another?</label>

											<button type="submit" class="btn btn-primary">
												Add Customer
											</button>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('extras'); ?>
	
	<link rel="stylesheet" type="text/css" href="<?php echo e(asset('css/jquery.timepicker.css')); ?>" />
	<link rel="stylesheet" type="text/css" href="<?php echo e(asset('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;
			}
		}
		
    	a:hover{
    		text-decoration: none;
    	}
    	.odd .subBack {
    		background-color: #f0fcff;
    	}
    	.even .subBack {
    		background-color: #ecf7fa;
    	}
    	.floatLeft
    	{
    		float: left;
    	}

    	.checkbox-item{
    		padding-top: 7px;
    	}

    	.no-bold{
    		font-weight: normal;
    	}

    	.input-item{
    		padding-bottom: 0px;
    	}

    	@media (max-width: 991px)
		{
			.input-item{
	    		margin-top: 20px;
	    	}
		}

    	@media (min-width: 992px)
		{
			.input-item{
	    		margin-top: 12px;
	    	}
		}
    </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('bottom'); ?>

	<script src="<?php echo e(asset('js/jquery.datepair.min.js')); ?>"></script>
	<script src="<?php echo e(asset('js/bootstrap-datepicker.min.js')); ?>"></script>
	<script src="<?php echo e(asset('js/jquery.timepicker.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();
	}

	$('#visit_date_container .date').datepicker({
        'format': 'yyyy-m-d',
        'autoclose': true
    });

</script>

<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>

<script>
	var app = new Vue({
		el: '#app',
		data: {
			circuits: [],
			locations: []
		},
		methods: {
			addCircuit: function(){
				this.circuits.push("");
			},
		    removeCircuit: function(index){
		    	this.circuits.splice(index,1);
		    },
		    addLocation: function(){
		    	var location = {"name":"", "address":"", "phone":"", "circuits":[]};
				this.locations.push(location);
			},
		    removeLocation: function(index){
		    	this.locations.splice(index,1);
		    },
		    addCircuitToLocation: function(locationIndex){
				this.locations[locationIndex].circuits.push("");
			},
		    removeCircuitToLocation: function(locationIndex,index){
		    	this.locations[locationIndex].circuits.splice(index,1);
		    },
		    init: function(){

		    }
		},
		mounted(){
			this.init();
		},
		computed: {
			allJson: function () {
				return jQuery.param({circuits:this.circuits, locations:this.locations});
			}
		}
	})
</script>

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