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

	<div id="root">
		<div class="row">
	    	<div class="col-lg-12">
	    		<h1 class="page-header">Builder</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">
	                    Edit Set Fields <a href="<?php echo e(url('uadmin/builder/data/'.$set->id)); ?>" target="_blank"> <i class="fa fa-pencil fa-fw" style="float: right;"></i> </a>
	                </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/builder/fields')); ?>" @submit.prevent="validateBeforeSubmit">
									<input type="hidden" name="_token" value="<?php echo e(csrf_token()); ?>">
									<input type="hidden" name="setID" value="" v-model="setID">
									<input type="hidden" name="vueData" :value="allJson">

									<draggable :list="builder_fields" class="dragArea" :options="{handle:'.handle'}">
						                <div v-for="field in builder_fields">
						                	<div class="form-group">
						                		<label class="control-label col-sm-12 col-md-1 morePadding morePadding2 handle"><i class="fa fa-bars"></i></label>
						                		<div class="col-sm-12 col-md-2 morePadding morePadding2">
													<input type="text" class="form-control" :id="'name'+field.id" :name="'name['+field.id+']'" :value="field.name" title="Name" v-model="field.name" v-validate="'required|alpha_dash'">
													<span :id="'name'+field.id+'-label'" class="hasValue">Name</span>
													<span v-show="errors.has('name['+field.id+']')" style="color: red;">{{ errors.first('name['+field.id+']') }}</span>	
												</div>
												<div class="col-sm-12 col-md-3 morePadding morePadding2">
													<input type="text" class="form-control" :id="'title'+field.id" :name="'title['+field.id+']'":value="field.title" title="Title" v-model="field.title" v-validate="'required'">
													<span :id="'title'+field.id+'-label'" class="hasValue">Title</span>	
													<span v-show="errors.has('title['+field.id+']')" style="color: red;">{{ errors.first('title['+field.id+']') }}</span>
												</div>
												<div class="col-sm-12 col-md-2 morePadding morePadding2">
													<select class="form-control" :id="'type'+field.id" :name="'type['+field.id+']'" :value="field.type" title="Type" v-model="field.type" v-validate="'required'">
														<option value="">Select One</option>
														<option value="string">STRING</option>
														<option value="text">TEXT</option>
														<option value="integer">INTEGER</option>
														<option value="decimal">DECIMAL</option>
														<!--
														<option value="filename">FILENAME</option>
														-->
														<option value="timestamp">TIMESTAMP</option>
													</select>
													<span :id="'type'+field.id+'-label'" class="hasValue">Type</span>
													<span v-show="errors.has('type['+field.id+']')" style="color: red;">{{ errors.first('type['+field.id+']') }}</span>	
												</div>
												<div class="col-sm-12 col-md-3 morePadding morePadding2">
													<input type="text" class="form-control" :id="'validation'+field.id" :name="'validation['+field.id+']'" :value="field.validation" title="Validation" v-model="field.validation">
													<span :id="'validation'+field.id+'-label'" class="hasValue"><a href="https://laravel.com/docs/5.0/validation#available-validation-rules" target="_blank">Validation</a></span>	
												</div>
												<label class="control-label col-sm-12 col-md-1 morePadding morePadding2"><i class="fa fa-times-circle" @click="remove(field)" style="cursor: pointer;" title="Remove"></i></label>
						                	</div>
						                </div>
						            </draggable>
									<div class="form-group">
										<div class="col-sm-12 col-md-6 morePadding">
											<span class="btn btn-primary" @click="add">
												Add Field
											</span>
										</div>
										<div class="col-sm-12 col-md-6 morePadding">
											<button type="submit" class="btn btn-primary" style="float: right;">
												Save
											</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
	

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

<?php $__env->startSection('extras'); ?>
	<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;
			}
		}

		.handle {
			color: lightgray;
			cursor: move;
		}
		
	</style>
<?php $__env->stopSection(); ?>

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

	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/sortable/1.4.2/Sortable.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
	<script src="https://cdn.rawgit.com/David-Desmaisons/Vue.Draggable/master/dist/vuedraggable.min.js"></script>
	<script src="https://unpkg.com/vee-validate@2.0.0-rc.19/dist/vee-validate.js"></script>


	<script>

		
		Vue.use(VeeValidate);

		var fCount = 1;
		var app = new Vue({
			el: "#root",
			data: {
				builder_fields:[
						
					],
				setID:<?php echo e($set->id); ?>

			},
			methods: {
				add: function(){
					this.builder_fields.push({
						id:fCount,
						name:'',
						title:'',
						type:'',
						validation:'',
						db_id:''
					});
					fCount++;
				},
				inputFocus: function(id){
					document.getElementById(id).focus();
				},
				validateBeforeSubmit() {
			      this.$validator.validateAll().then((result) => {
			        if (result) {
			          // eslint-disable-next-line
			          document.getElementById('theForm').submit();
			          return true;
			        }

			        alert('Please correct validation errors!');
			        return false;
			      });
			    },
			    remove: function(field){
			    	this.builder_fields.splice(this.builder_fields.indexOf(field),1);
			    }
			},
			mounted() {
				axios.get("<?php echo e(url('admin/builder/getfields/'.$set->id)); ?>")
					.then(response => {

						response.data.forEach((ind) => {

							this.builder_fields.push({
								id:fCount,
								name: ind.name,
								title: ind.title,
								type: ind.type,
								validation: ind.validation,
								db_id: ind.id
							});
							fCount++;
							
						});
					})
					.catch(e => {
						
						alert(e);
					});
			},
			computed: {
				allJson: function () {
					return JSON.stringify(this.builder_fields);
				}
			}

			
		});
	</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();
		}
	</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('residential.templates.uadmin', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>