<!-- Main content -->
                <section class="content">

                    <!-- Small boxes (Stat box) -->
                    <div class="row">
				
						
                                <form role="form" action="<?php echo site_url('aqadmin/add_service');?>" method="post" enctype="multipart/form-data" id="myForm">
                       <div class="col-md-6">
                            <!-- general form elements -->
                            <div class="box box-primary">
                                <div class="box-header">
                                    <h3 class="box-title">
                                        <?php

                                        if(empty($service_row))
                                        {
                                            echo "Add Service";
                                        }
                                        else
                                        {
                                            echo "Edit Service";
                                        }
                                        ?>
                                    </h3>
                                </div><!-- /.box-header -->
                                <!-- form start -->
                                <?php 
   if($this->session->flashdata('success_msg')){?>
     <div style="color:green"><?php echo $this->session->flashdata('success_msg');?></div>    
    <?php  } ?>
                                    <div class="box-body">
                                    <div class="form-group">
                                            <label for="exampleInputEmail1">Service Type</label>
                                            <input type="text" name="service_type" class="form-control" placeholder="Service Type" value="<?php if(empty($service_row)) { echo set_value('service_type'); } else{ echo $service_row->service_type; } ?>" data-validation="required alphanumeric" data-validation-allowing=" " autocomplete="off">
                                            <?php if(form_error('service_type') != ""){?>     
     <div style="color:red"><?php echo "Enter Service Type.";?></div>
       <?php } ?> 
                                        </div>
                                        
                                    
          
										
										<div class="form-group" >
										 <label for="exampleInputEmail1">Booking Type </label>
										<!--<div class="row" style="padding-left:15px;" id="readroot">-->
                                           
                                             
											<input type="text" name="booking_type" id = "booking_type" class="form-control" placeholder="Booking Type" value="<?php if(empty($service_row)) { echo set_value('booking_type'); } else{ echo $service_row->main_caption; } ?>" data-validation="required alphanumeric" data-validation-allowing=" " autocomplete="off">
                                            <?php if(form_error('booking_type') != ""){?>     
											<div style="color:red"><?php echo "Enter Booking Type.";?></div>
												<?php } ?> 
	  
	   
	    
                                       
										<div class="row" id="writeroot"></div>		
										 <a id="moreFields" class=" moreFields btn btn-sm btn-primary waves-effect waves-light">Add more booking</a>
										 </div>
								
								<input type="button" class="btn btn-sm btn-danger waves-effect waves-light " value="Remove" onclick="this.parentNode.removeChild(this.parentNode);">
										
          
                                        
                                    </div><!-- /.box-body -->
<div class="box-footer">
    <input type="hidden" name="id" value="<?php if(!empty($service_row)) { echo $service_row->id; } ?>">
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </div>
                                    
                                
                            </div><!-- /.box -->

                            

                        
                    
                        </div>
                         
                               
                              
                                    
                                    
                                </form>
                            </div><!-- /.box -->

                            

                        </div>
                    
                        </div>
                    </div><!-- /.row -->

                    <!-- top row -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
        <script>
        var counter = 0;

//document.getElementById('moreFields').onclick = moreFields;

window.onload = loadEventListener();

function loadEventListener() {
  let addRowAnchorTags = document.getElementsByClassName('moreFields');

  for(i=0;i<addRowAnchorTags.length; i++) {
      addRowAnchorTags[i].onclick = moreFields;
  }
}

function moreFields() {
  counter++;
  var newFields = document.getElementById('booking_type').cloneNode(true);
  //newFields.id = '';
  newFields.style.display = 'form-control';
  var newField = newFields.childNodes;
  for (var i = 0; i < newField.length; i++) {
	
	//var newbooking = document.getElementById('booking_type'); 
	//var bookingName = newbooking.name;
	//if (bookingName){
	//newbooking.name = bookingName + counter;}

    var theName = newField[i].name;
	//alert(theName);
    if (theName)
	newField[i].name = theName + counter;
	
	
  }
  var insertHere = document.getElementById('writeroot');
  insertHere.cloneNode.insertBefore(newFields, insertHere);
  setTimeout(function() {loadEventListener();})
}




        $(window).on("beforeunload", function() {
            return "Are you sure? You didn't finish the form!";
        });
        
        $(document).ready(function() {
            $("#myForm").on("submit", function(e) {
                
                $(window).off("beforeunload");
                return true;
            });
        });
        </script>             
                                        
                     
                    
                    
