@extends('layouts.admin')
@section('pageTitle')
<title>Best Insurance | Completed Leads</title>
@stop
@section('pageCss')
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/datepicker/datepicker3.css') }}">
<script src="https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js"></script>
@stop
@section('content')
<section class="content">

  <div class="">
   <div class="box-body no-padding">
    <div class="form-group col-md-12" style="padding: 0px">
     <form action="{{url('/account/notes/post')}}" method="post">
     {!!csrf_field()!!}
     <input type="hidden" name="lead_id" value="{{$information->id}}"/>
     <textarea cols="80" id="notes" name="notes" rows="10" data-sample-short></textarea>
     <input type="submit" name="Add notes" value="Add notes" class="addnote-btn" />
     </form>
    </div>
  </div>

  <div class="notes">
  	@if(@count($information->notes)>0)


  	<div class="comment-title">
      <h1>Total Notes : {{@count($information->notes)}}</h1>
    </div>

  		@foreach($information->notes as $note)
      <div class="comment-box">
        <div class="c-left">
          <img class="img-responsive" src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png">
        </div>
        <div class="c-right">
          <div class="cooment-author">
            <b>{!!$note->added_user->profile->first_name!!}</b> Added note on {!!$note->created_at->format('d/m/Y H:i:s')!!}
          </div>
          <div class="cooment-text-box">
            {!!$note->notes!!}
          </div> 
        </div>
      </div>
  		@endforeach
  	@else
  		<h1>No Notes till now</h1>
  	@endif
  </div>


</div>

<!-- </div> -->
</section>
@stop
@section('pageBottomJs')
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/iCheck/all.css') }}">
<!-- iCheck 1.0.1 -->
<script type="text/javascript">
	CKEDITOR.replace('notes', {
	  uiColor: '#3c8dbc'
	});
</script>
@stop

<style type="text/css">
  #notes{
    display: none;
  }
  .addnote-btn{
    margin-top: 10px;
    background-color: #3c8dbc;
    border: none;
    border-radius: 3px;
    color: #FFF;
    padding: 6px 20px;
  }
  .notes .comment-box{
    width: 100%;
    display: inline-block;
    margin-bottom: 20px;
    border-bottom: 1px solid #e3e9f1;
    padding-bottom: 20px;
  }
  .notes .comment-box:last-child{
    border:none !important;
  }
  .comment-box .c-left{
    float: left;
    width: 7%;
  }
  .comment-box .c-right{
    float: right;
    width:92%;
  }
  .c-right .cooment-author{
    color: #333;
    background-color:#f5f5f5;
    padding: 10px 15px;
    border: 1px solid  #ddd ;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    position: relative;
  }
  .c-right .cooment-author:after{
    border-width: 7px !important;
    border-right-color: #f7f7f7 !important;
    margin-top: 1px !important;
    margin-left: 2px !important;
  }
  .c-right .cooment-author:after,
  .c-right .cooment-author:before{
    position: absolute;
    top: 11px;
    left: -16px;
    right: 100%;
    width: 0;
    height: 0;
    display: block;
    content: " ";
    border-color: transparent;
    border-style: solid solid outset;
    pointer-events: none;
    border-right-color: #ddd;
    border-width: 8px;
  }
  .comment-title{
    margin-bottom: 20px;
  }
  .comment-title h1{
    font-size: 24px;
    color: #333;
  }
  .comment-box .img-responsive{
    display: block;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  }
  .cooment-text-box{
    border-color: #ddd;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
  }
  .cooment-text-box p{
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    color:#000;
  }
  @media (max-width: 767px) {
    .comment-box .c-left {
      width: 10%;
    }
    .comment-box .c-right {
      width: 86%;
    }
  }
  @media (max-width: 480px) {
    .comment-box .c-left {
      display: none;
    }
    .comment-box .c-right {
      width: 100%;
    }
  }
</style>