@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>Edit Project</h2>
                   
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">

                    <form action="{{url('panel/update_buy')}}" id="validate-form" method="post" class="form-horizontal" enctype="multipart/form-data" >
                      {{csrf_field()}}
                      @foreach($datas as $data)
						        <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Project Name <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="hidden" value="{{$data->id}}" name="id">
                          <input class="form-control col-md-7 col-xs-12" name="project_name"  required="required" type="text" value="{{$data->project_name}}">
                        </div>
                      </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">Credit Cost<span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="number" name="cost" required="required" class="form-control col-md-7 col-xs-12" value="{{$data->cost}}">
                        </div>
                      </div>
                      	<div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12"  id="a">Area</label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                            <select class="form-control" name="area" required>
                                @foreach($areas as $area)
                                <option @if($area->id==$data->area) Selected @endif value="{{$area->id}}">{{$area->area}}</option>
                                @endforeach
                            </select>
                            </div>
                        </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="textarea">Upload File <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">

                          <input type="file" name="upload" multiple="multiple">
                        </div>
                      </div>

                      <div class="ln_solid"></div>
                      <div class="form-group">
                        <div class="col-md-6 col-md-offset-3">
                          <a type="button" href="{{url('panel/view_buy')}}" class="btn btn-primary">Back</a>
                          <button type="submit" class="btn btn-success">Submit</button>
                        </div>
                      </div>
                      @endforeach
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>


<!-- Add Map for Get Address of the Project -->
<!--    @include('layouts.scripts') -->
   
      <script src="{{ URL::asset('upload-master/js/fileinput.js') }}" type="text/javascript"></script>
    <link rel="stylesheet" href="{{ URL::asset('upload-master/css/fileinput.css') }}">

<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 src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <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>

    /*
     $(".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>

@if(Session::has('update_fail'))
<script>
    swal({
        title: 'Try Again!',
        text: 'Fail to update!!',
        type: 'error',
        timer: 2500,
        showConfirmButton: false
     });
</script>