@extends('layouts.main')

@section('container')



    <style>
    	
    	.kv-file-upload{display:none}
    	.file-upload-indicator{display:none}
    	.form-group .btn {margin:0}

    	.krajee-default.file-preview-frame{width:60px}

		
		.file-preview-image .kv-preview-data{height:1px;}
		.fileinput-remove{width:45px;height: 30px;}
		.btn-file{
			padding:0;
		}
    </style>

     <div class="right_col" role="main">
          <div class="">
        	<div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Form validation <small>sub title</small></h2>
                   
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">

                    <form action="{{route('AdminRumawipAction')}}" id="validate-form" method="post" class="form-horizontal" enctype="multipart/form-data" >
                    	{{csrf_field()}}
						<div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Product Name <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="name" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="product_name"  value="{{old('product_name')}}"  required="required" type="text">
                        </div>
                      </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Developer Name<span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="text" id="email" name="developer_name" required="required" class="form-control col-md-7 col-xs-12">
                        </div>
                      </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Header <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="text" id="email2" name="header" data-validate-linked="email" required="required" class="form-control col-md-7 col-xs-12">
                        </div>
                      </div>
                       <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="textarea">Description <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <textarea id="textarea" required="required" name="description"  rows="4" class="form-control col-md-7 col-xs-12"></textarea>
                        </div>
                      </div>
                       <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Project Specifications <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                        <div class="widget-content" style="overflow-x: auto">
			                <table class="table table-bordered" style="width: auto;">
			                  <thead>
			                    <tr><th>
			                      Block
			                    </th>
			                    <th>
			                     Floor
			                    </th>
			                    
			                    <th>
			                    Unit per Floor
			                    </th>
			                    <th>
			                      Total Unit
			                    </th>
			                    <th>
			                     No. Of Lift
			                    </th>
			                    <th>
			                     Completion Year
			                    </th>
			                   
			                    <th class="hidden-xs">
			                    </th>
			                  </tr>
			                 </thead>
			                  <tbody class="field_project">
			                    <tr>
			                      <td>
			                      <input type="text" style="width: 50px;" name="project_block[0][block]" required>
			                      </td>
			                      <td>
			                        <input type="text"  style="width: 50px;" name="project_block[0][floor]" required> 
			                      </td>
			                     
			                      <td>
			                      <input type="text" style="width: 50px;" name="project_block[0][unit]" required>
			                      </td>
			                      <td>
			                      <input type="text" style="width: 50px" onblur="getValue(this.value)" name="project_block[0][total]" id="project_block[0][total]" required>
			                      </td>
			                     <td><input type="text" style="width: 50px" name="project_block[0][lift]" required></td>
			                     
			                      <td> 
			                      	<div class="input-group date datepicker">
			                			<input class="form-control" type="text" name="project_block[0][completion_date]" required><span class="input-group-addon"><i class="fa fa-calendar"></i></span></input>
			             			 </div>
			             		</td>
			             	
			             		 <td class="hidden-xs">
			                        
			                      </td>
			                           
			                   </tr>
			                  </tbody>
			                  <tbody>  <tr><td> <button type="button" class="btn btn-success add_button">Add</button></td></tr>  </tbody>
			                </table>
			              </div>
          
                        </div>
                      </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Unit Specifications <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                         <div class="widget-content" style="overflow-x: auto">
                <table class="table table-bordered" style="width: auto;">
                  <thead>
                    <tr><th>
                      Name(type)
                    </th>
                    <th>
                     Unit Size
                    </th>
                    <th>
                     Bedroom
                    </th>
                    <th>
                    Room
                    </th>
                    <th>
                      Bathroom
                    </th>
                    <th>
                     No. Of Carpark per Unit
                    </th>
                    <th>
                    Images(Max. 5)
                    </th>
                    <th class="hidden-xs">
                    </th>
                  </tr>
                 </thead>
                 
                  <tbody class="field_unit">
                  	 <tr >
                      <td>
                      <input type="text" style="width: 50px;" name="unit[0][name]" required="">
                      </td>
                      <td>
                        <input type="text" style="width: 50px;" name="unit[0][size]" required="">
                      </td>
                      <td>
                        <input type="text" style="width: 50px;" name="unit[0][bedroom]" required="">
                      </td>
                      <td>
                     <input type="text" style="width: 50px;" name="unit[0][room]" required="">
                      </td>
                      <td>
                      <input type="text" style="width: 50px" name="unit[0][bathroom]" required="">
                      </td>
                     
                      <td> 
                      	<input type="text" style="width: 50px;" name="unit[0][carpark]" required="">
                      	<input type="hidden" style="width: 50px;" name="unit[0][images]" value="" >
             		</td>
             		 <td style="overflow-x:auto" width="150px"> 
                   
                        <input id="file-0a0" class="file" type="file"  multiple data-max-file-count="5" name="img[0][images][]" >
                  
             		</td>
             		
             		 <td class="hidden-xs">
                       
                      </td>
                      
                   </tr>
                
                  </tbody>
                	<tbody>  <tr><td> <button type="button" class="btn btn-success unit_button">Add</button></td></tr>  </tbody>
                </table>
              </div>
          
                        </div>
                      </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Total Unit <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                        <div id="total" style="display:none">0</div>
                          <input  name="total" id="total1" type="text" data-validate-linked="email" value="0" readonly="" required="required" class="form-control col-md-7 col-xs-12" required="">
                        </div>
                      </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="textarea">Upload Image <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="file" name="upload[]" id="filer_input" multiple="multiple" required="" accept="image/*">
                        </div>
                      </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="textarea">Floor Plan Image <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="file" name="floorplan_image[]" id="filer_input" multiple="multiple" required="" accept="image/*">
                        </div>
                      </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="textarea">Description <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                             <input type="hidden" id="lat" name="address_lat"/ required="">
						<input type="hidden" id="lon" name="address_long"/>
						<input id="pac-input" class="controls" type="text" placeholder="Search Box">
						<div id="gmap"></div>
						
                        </div>
                      </div>
                       <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Facilities <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                                                  </div>
                      </div>
                      <div class="ln_solid"></div>
                      <div class="form-group">
                        <div class="col-md-6 col-md-offset-3">
                          <button type="submit" class="btn btn-primary">Cancel</button>
                          <button id="send" type="submit" class="btn btn-success">Submit</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>


<!-- Add Map for Get Address of the Project -->
   
   
      <script src="{{ URL::asset('upload-master/js/fileinput.js') }}" type="text/javascript"></script>
    <link rel="stylesheet" href="{{ URL::asset('upload-master/css/fileinput.css') }}">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0N5pbJN10Y1oYFRd0MJ_v2g8W2QT74JE&libraries=places&callback=initAutocomplete" async defer></script>
<script>
  // This example adds a search box to a map, using the Google Place Autocomplete
  // feature. People can enter geographical searches. The search box will return a
  // pick list containing a mix of places and predicted search terms.

  // This example requires the Places library. Include the libraries=places
  // parameter when you first load the API. For example:
  // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

  function initAutocomplete() {
    var map = new google.maps.Map(document.getElementById('gmap'), {
  center: {lat: 4.2105, lng: 101.9758},
  zoom: 7,
  mapTypeId: 'roadmap'
});

// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

google.maps.event.addListener(map, "click", function(event) {
	// get lat/lon of click
	var clickLat = event.latLng.lat();
	var clickLon = event.latLng.lng();
	document.getElementById('lat').value = clickLat;
	document.getElementById('lon').value = clickLon;
	for(i=0; i<markers.length; i++){
	    markers[i].setMap(null);
	}
	markers = [];
	markers.push(new google.maps.Marker({
		map: map,
		position: new google.maps.LatLng(clickLat,clickLon)
		
	}));
});

// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
  searchBox.setBounds(map.getBounds());
});

var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
  var places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach(function(marker) {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  var bounds = new google.maps.LatLngBounds();
  places.forEach(function(place) {
    if (!place.geometry) {
      console.log("Returned place contains no geometry");
  return;
}
var icon = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

// Create a marker for each place.
markers.push(new google.maps.Marker({
  map: map,
  icon: icon,
  title: place.name,
  position: place.geometry.location
}));

if (place.geometry.viewport) {
  // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });
      map.fitBounds(bounds);
    });
  }

</script>
<style>
div#gmap
{
	width: 100%;
	height: 300px;
	border:double;
}
#c
{
	text-align:left;
}
.controls 
{
   margin-top: 10px;
   border: 1px solid transparent;
   border-radius: 2px 0 0 2px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   height: 32px;
   outline: none;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input 
{
	background-color: #fff;
	font-family: Roboto;
	font-size: 15px;
	font-weight: 300;
	margin-left: 12px;
	padding: 0 11px 0 13px;
	text-overflow: ellipsis;
	width: 300px;
}
#pac-input:focus {
	border-color: #4d90fe;
}
.pac-container {
	font-family: Roboto;
}
#type-selector 
{
	color: #fff;
	background-color: #4d90fe;
	padding: 5px 11px 0px 11px;
}
#type-selector label 
{
	font-family: Roboto;
	font-size: 13px;
	font-weight: 300;
}
#target 
{
	width: 345px;
}
</style>
<style>
        .container{
    margin-top:20px;
}
.image-preview-input {
    position: relative;
	overflow: hidden;
	margin: 0px;    
    color: #333;
    background-color: #fff;
    border-color: #ccc;    
}
.image-preview-input input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
}
.image-preview-input-title {
    margin-left:2px;
}
        </style>

        <script type="text/javascript">
jQuery(document).ready(function(){
	var maxField = 5; //Input fields increment limitation
	var addButton = jQuery('.add_button'); //Add button selector
	var wrapper = jQuery('.field_project'); //Input field wrapper
	var x=0;
	 
	$(addButton).click(function(){ //Once add button is clicked
		if(x < maxField){ //Check maximum number of input fields
			x++; //Increment field counter
		var fieldHTML='<tr id="work'+x+'"><td><input type="text" style="width: 50px;" name="project_block[' + x +'][block]" required></td><td><input type="text" required  style="width: 50px;" name="project_block[' + x +'][floor]"></td><td><input type="text" style="width: 50px;" name="project_block[' + x +'][unit]" required></td><td><input type="text" style="width: 50px" name="project_block[' + x +'][total]" id="project_block[' + x +'][total]" onblur="getValue(this.value)"  required></td><td><input type="text" style="width: 50px" name="project_block[' + x +'][lift]" required></td><td><div class="input-group date datepicker"><input class="form-control" type="text" name="project_block[' + x +'][completion_date]" required><span class="input-group-addon"><i class="fa fa-calendar"></i></span></input></div></td><td class="hidden-xs"><button class="btn btn-xs btn-danger remove_button" onclick=doit('+x+') type="button">Delete</button></td></tr>'; 
	
			jQuery(wrapper).append(fieldHTML); // Add field html
		$('.datepicker').datepicker({
     autoclose: true
  });
 
		}
	});
	  $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
       $(this).parent().parent().remove(); //Remove field html
        
    });
});
</script>
<!--getting value of totle unit-->
<script>
	function getValue(x){
				
		var t=document.getElementById("total").innerHTML;
		var x=parseFloat(x);
		var t=parseFloat(t);
		var total=(t+x);
		
		document.getElementById("total").innerHTML =total;
		document.getElementById("total1").value =total;

		
		//var totalVal=document.getElementById("project_block[""][total]").value;	
		
	}

</script>  
<script type="text/javascript">
jQuery(document).ready(function(){
	var maxField = 5	; //Input fields increment limitation
	var unitButton = jQuery('.unit_button'); //Add button selector
	var wrapper1 = jQuery('.field_unit'); //Input field wrapper
	var x=0;
	
	jQuery(unitButton).click(function(){ //Once add button is clicked
		if(x < maxField){ //Check maximum number of input fields
			x++; //Increment field counter
		 var fieldHTML = '<tr id="tr-id' + x +'"><td><input type="text" style="width: 50px;" name="unit[' + x +'][name]" required ><input type="hidden" style="width: 50px;" name="unit[' + x +'][images]" value="" ></td><td><input type="text" style="width: 50px;" name="unit[' + x +'][size]" required></td><td><input type="text" style="width: 50px;" name="unit[' + x +'][bedroom]" required></td><td><input type="text" style="width: 50px;" name="unit[' + x +'][room]" required></td><td><input type="text" required style="width: 50px" name="unit[' + x +'][bathroom]"></td><td><input type="text" style="width: 50px;" name="unit[' + x +'][carpark]" required></td><td><input id="file-0a' + x +'" class="file" type="file"  multiple data-max-file-count="5" name="img[' + x +'][images][]" ><input type="hidden" style="width: 50px;" name="unit[' + x +'][images]" value="" ></td><td class="hidden-xs"><button class="btn btn-xs btn-danger unit_remove" type="button">Delete</button></td></tr>';
		 
		jQuery(wrapper1).append(fieldHTML); // Add field html
		$("#file-0a"+x+"").fileinput({
        showUpload: false,
        showCaption: false,
		overwriteInitial: false,
        initialPreviewAsData: true,
        allowedFileExtensions: ['jpg', 'png', 'gif']
        
    }); 
		}
	});
	  jQuery(wrapper1).on('click', '.unit_remove', function(e)
	  { 
	  	//Once remove button is clicked
        e.preventDefault();
       
         $(this).parent().parent().remove(); //Remove field html
    });

});
</script>

<script>

    /*
     $(".file").on('fileselect', function(event, n, l) {
     alert('File Selected. Name: ' + l + ', Num: ' + n);
     });
     */
    $("#file-0a0").fileinput({
        showUpload: false,
        showCaption: false,
		overwriteInitial: false,
        initialPreviewAsData: true,
        allowedFileExtensions: ['jpg', 'png', 'gif']
        
    });

</script>

@stop