@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 Agent</h3>
				</div>
				<div class="form-container">
					<form action="{{url('post-add-agent')}}" method="POST">
						{{ csrf_field() }}
						<div class="form-group">
							<label for="agent_title">Agent Title</label>
							<input type="text" class="form-control"  name="agent_title">
							@if ($errors->has('agent_title'))
							<div class="alert alert-danger">
								<span class="error">{{ $errors->first('agent_title') }}</span>
							</div>
							@endif
						</div>
						<div class="form-group">
							<label for="agent_desc">Agent Description</label>
							<input type="text" class="form-control"  name="agent_desc">
							@if ($errors->has('agent_desc'))
							<div class="alert alert-danger">
								<span class="error">{{ $errors->first('agent_desc') }}</span>
							</div>
							@endif
						</div>
						<div class="form-group">
                            <label for="server_id">Select Server </label>
                            <select class="form-control" name="server_id">
                                <option selected disabled hidden>Choose here</option>
                                @foreach($servers as $server)
                                <option value='{{$server->server_id}}' >{{$server->server_name}}</option>
                                @endforeach
                            </select>
                            @if ($errors->has('server_id'))
                            <div class="alert alert-danger">
                                <span class="error">{{ $errors->first('server_id') }}</span>
                            </div>
                            @endif
                        </div>
						<div class="form-group">
							<label for="agent_ip">Agent IP</label>
							<input type="text" class="form-control"  name="agent_ip">
							@if ($errors->has('agent_ip'))
							<div class="alert alert-danger">
								<span class="error">{{ $errors->first('agent_ip') }}</span>
							</div>
							@endif
						</div>
						<div class="form-group">
							<label for="agent_port">Agent Port</label>
							<input type="text" class="form-control"  name="agent_port">
							@if ($errors->has('agent_port'))
							<div class="alert alert-danger">
								<span class="error">{{ $errors->first('agent_port') }}</span>
							</div>
							@endif
						</div>
						<div class="form-group">
							<label for="agent_type">Agent Type</label>
							<select class="form-control" id="agent_type" name="agent_type" >
                                <option selected disabled hidden>Choose here</option>
                                <option value='logging agent' >Logging Agent</option>
                                <option value='backup agent' >Backup Agent</option>
                                <option value='action agent'>Action Agent</option>
                            </select>
							@if ($errors->has('agent_type'))
							<div class="alert alert-danger">
								<span class="error">{{ $errors->first('agent_type') }}</span>
							</div>
							@endif
						</div>
						<div class="form-group agent_path" id="agent_path" style="display:none">
							<label for="agent_paths">Agent Paths</label>
                                <div>
                                    <input type="text" name="agent_paths[]" value=""/>
                                    <button type="button"class="btn btn-success btn-sm add_button"><span class="glyphicon glyphicon-plus"></span></button>
                                </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 = 10; //Input fields increment limitation
    var fieldHTML = '<div><input type="text" name="agent_paths[]" value=""/> <button type="button"class="btn btn-danger btn-sm remove_button"><span class="glyphicon glyphicon-remove"></span></button></div>'; //New input field html 
    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
            $('.agent_path').append(fieldHTML); //Add field html
        }
    });
    
    //Once remove button is clicked
    $('.agent_path').on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });

    //
    $('#agent_type').change(function(){
        if($('#agent_type').val() == 'logging agent'){
            $('#agent_path').css("display",'block');
        }else{
            $('#agent_path').css("display",'none');
        }
        console.log($('#agent_type').val());
    })
});
</script>
@endsection