<div class="layout-app"><!-- row-app -->
<div class="row row-app">
  <div class="col-md-12">
    <div class="col-separator col-separator-first box col-unscrollable">
      <div class="col-table" style='padding-left: 13px;padding-right: 13px;'>

<div class="innerAll" style='background: #fff;'>
  <label class="task_legend" style="margin-left:40%">Notes</label>

<!-- <form action="{{'/notesupdate'}}" method="POST"> -->
<div class="col-xs-1">
<input type="button" onclick="updateNotes();" class="btn btn-danger btn-md" style="margin:10px 25px 25px 30px" value="Save" id='submit'>
</div>

<br><br>
@for($i=1;$i<=50;$i++)


<table border='1'>
<tr>
<td width="10%">
@if($notesDetails == null)
                <input type='date' name='date{{$i}}'  id='date{{$i}}' value=''/>
@else
		<input type='date' name='date{{$i}}'  id='date{{$i}}' value='{{$fieldDetails[$i][1]}}'/>
@endif
</td>

<td width="90%" rowspan="3">

@if($notesDetails == null)
<textarea class="form-control" name='field-{{$i}}' id='field{{$i}}' maxlength="300" style="border:solid 1px #dddddd;" rows='3'></textarea>
@else
<textarea class="form-control" name='field-{{$i}}' id='field{{$i}}' value="{{$fieldDetails[$i][0]}}" maxlength="300" style="background:{{$fieldDetails[$i][2]}}"  rows='3'>{{$fieldDetails[$i][0]}}</textarea>
@endif
</td>
</tr>

<tr>
<td>
<table>
<tr>
@if($notesDetails == null)
<td>
<input type='radio' name='color{{$i}}' id='green{{$i}}' data='Green'><label style='color:Green'>G</label>
<input type='hidden' id='colorVal{{$i}}' value=''>
</td>
<td><input type='radio' name='color{{$i}}' id='red{{$i}}' data='Red'><label style='color:Red'>R</label>
</td>
<td><input type='radio' name='color{{$i}}' id='yellow{{$i}}' data='Yellow'><label style='color:Yellow'>Y</label>
</td>
<td><input type='radio' name='color{{$i}}' id='blue{{$i}}' data='Blue'><label style='color:Blue'>B</label>
</td>
<td><input type='radio' name='color{{$i}}' id='noColor{{$i}}' data='NO-color'><label style='color:#dddddd'>N</label>
</td>
@else
<td>
@if($fieldDetails[$i][2] == "#C0F62E")
<input type='radio' name='color{{$i}}' id='green{{$i}}' data='Green' checked='checked'><label style='color:Green' checked>G</label>
@else
<input type='radio' name='color{{$i}}' id='green{{$i}}' data='Green'><label style='color:Green'>G</label>
@endif
<input type='hidden' id='colorVal{{$i}}' value='{{$fieldDetails[$i][2]}}'>
</td>
<td>
@if($fieldDetails[$i][2] == "#F7B783")
<input type='radio' name='color{{$i}}' id='red{{$i}}' data='Red' checked='checked'><label style='color:Red'>R</label>
@else
<input type='radio' name='color{{$i}}' id='red{{$i}}' data='Red'><label style='color:Red'>R</label>
@endif
</td>
<td>
@if($fieldDetails[$i][2] == "#FFFF00")
<input type='radio' name='color{{$i}}' id='yellow{{$i}}' data='Yellow' checked='checked'><label style='color:Yellow'>Y</label>
@else
<input type='radio' name='color{{$i}}' id='yellow{{$i}}' data='Yellow'><label style='color:Yellow'>Y</label>
@endif
</td>
<td>
@if($fieldDetails[$i][2] == "#8ADAED")
<input type='radio' name='color{{$i}}' id='blue{{$i}}' data='Blue' checked='checked'><label style='color:Blue'>B</label>
@else
<input type='radio' name='color{{$i}}' id='blue{{$i}}' data='Blue'><label style='color:Blue'>B</label>
@endif
</td>
<td>
@if($fieldDetails[$i][2] == "#FFFFFF")
<input type='radio' name='color{{$i}}' id='noColor{{$i}}' data='No-color' checked='checked'><label>N</label>
@else
<input type='radio' name='color{{$i}}' id='noColor{{$i}}' data='No-color'><label>N</label>
@endif
</td>
@endif
</tr>
</table>

</td>
</tr>

<tr>
<td>
<p id="textarea_feedback{{$i}}" style="float:left;"></p>
</td>

</tr>
</table>


<script>
	
    var text_max = 300-$('#field{{$i}}').val().length;
    $("#textarea_feedback{{$i}}").html(text_max + ' chars remain');

    $('#field{{$i}}').keyup(function() {
        var text_length = $('#field{{$i}}').val().length;
        var text_remaining = text_max - text_length;

        $("#textarea_feedback{{$i}}").html(text_remaining + ' chars remain');
  });

$('#green{{$i}}').change(function(){
		document.getElementById('field{{$i}}').style.background='#C0F62E';
		document.getElementById('colorVal{{$i}}').value='#C0F62E';
});

$('#red{{$i}}').change(function(){
                document.getElementById('field{{$i}}').style.background='#F7B783';
                document.getElementById('colorVal{{$i}}').value='#F7B783';
});

$('#yellow{{$i}}').change(function(){
                document.getElementById('field{{$i}}').style.background='#FFFF00';
                document.getElementById('colorVal{{$i}}').value='#FFFF00';
});

$('#blue{{$i}}').change(function(){
                document.getElementById('field{{$i}}').style.background='#8ADAED';
                document.getElementById('colorVal{{$i}}').value='#8ADAED';
});

$('#noColor{{$i}}').change(function(){
                document.getElementById('field{{$i}}').style.background='#FFFFFF';
                document.getElementById('colorVal{{$i}}').value='#FFFFFF';
});
</script>

@endfor
 

<input type='hidden' id='userId' value='{{$userId}}'>
<script>

function updateNotes()
{
var arr = [];

for(var i=1;i<=50;i++)
{
	arr.splice(i,0,$("#field"+i).val()+':'+$("#date"+i).val()+':'+$("#colorVal"+i).val());

}

        doAjax("notes?action=save","user_id="+$("#userId").val()+"&fieldVal="+arr,'', 'ajax_manualdial','singlefail','POST',function(retstr){
alert('Notes saved Successfully');
});
}
</script>


<!-- </form> -->
       </div>      
      </div>
     </div>
   </div>
  </div>
</div>