@extends('layout.masters')
@section('content')


<!-- ===================================== -->
<div id="page-wrapper">
	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-12 col-md-6 col-md-offset-3">
				<div class="page-title">
					<h3>Add New Build Properties</h3>
				</div>
				<div class="form-container">
					<form action="{{url('post-add-build-properties')}}" method="POST">
						{{ csrf_field() }}
						<div class="form-group">
							<label for="app_id">Choose App</label>
                            <select class="form-control" name="app_id">
								<option selected disabled hidden>Choose here</option>
                                @foreach($apps as $app)
									<option value='{{$app->app_id}}' >{{$app->app_title}}</option>
								@endforeach
							</select>
							@if ($errors->has('app_id'))
							<div class="alert alert-danger">
								<span class="error">{{ $errors->first('app_id') }}</span>
							</div>
							@endif
						</div>
						<div class="form-group">
							<label for="prop_file_name">Properties File Name</label>
                            <input type="text" class="form-control"  name="prop_file_name">
							@if ($errors->has('prop_file_name'))
							<div class="alert alert-danger">
								<span class="error">{{ $errors->first('prop_file_name') }}</span>
							</div>
							@endif
						</div>
						<div class="form-group key_value">
                            <div class="row">
								<div class="col-sm-4">
							    	<label for="data_key">Key</label>
								</div>
								<div class="col-sm-4">
							    	<label for="data_value">Value</label>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-4">
                                	<input type="text" name="data_key[]" value=""/>
								</div>
								<div class="col-sm-4">
                                	<input type="text" name="data_value[]" value=""/>
								</div>
								<!-- <span> -->
                                	<button type="button"class="btn btn-success btn-sm add_button"><span class="glyphicon glyphicon-plus"></span></button>
								<!-- </span> -->
                            </div>
							@if ($errors->has('agent_paths'))
							<div class="alert alert-danger">
								<span class="error">{{ $errors->first('agent_paths') }}</span>
							</div>
							@endif
						</div>
						<!--ends custom checkboxes-->
						<div class="buttons-container">
							<a class="btn btn-cancel" type="button" href="{{ url()->previous() }}">Cancel</a>
							<button class="btn btn-formSubmit" type="submit">Submit</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- /#page-wrapper -->
<!-- ===================================== -->
<script type="text/javascript">
$(document).ready(function(){
    console.log('Inside the script');
    var maxField = 5; //Input fields increment limitation
    var fieldHTML = '<div class="row"><div class="col-sm-4"><input type="text" name="data_key[]" value=""/></div><div class="col-sm-4"><input type="text" name="data_value[]" value=""/></div><button type="button"class="btn btn-danger btn-sm remove_button"><span class="glyphicon glyphicon-remove"></span></button></div>';
    var x = 1; //Initial field counter is 1
    
    //Once add button is clicked
    $('.add_button').click(function(e){
        e.preventDefault();
        console.log('Inside the button click');
        //Check maximum number of input fields
        if(x < maxField){ 
            x++; //Increment field counter
            $('.key_value').append(fieldHTML); //Add field html
        }
    });
    
    //Once remove button is clicked
    $('.key_value').on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
</script>
@endsection