@include('links.header')
<b>Contacts List</b>
<br>
@if(Auth::user()->role_id==1)
<!-- <a href="{{url('seedmagic/states/create')}}" class="btn btn-primary pull-right" >Add Contact</a> -->
@endif
<br><br>
@if (Session::has('msg'))
<div class="alert bg-green alert-dismissible" role="alert"><strong>Success! </strong>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    {!! session('msg') !!}
</div>
  @endif
  @if (Session::has('msg_e'))
  <div class="alert bg-red alert-dismissible" role="alert"><strong>Danger! </strong>
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      {!! session('msg_e') !!}
  </div>
    @endif
<div class="table-responsive">

<table class="table table-bordered table-striped table-hover js-basic-example dataTable">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Email</th>
            <th>Mobile</th>
            <th>Comment</th>
            <th>Date</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
             <th>#</th>
            <th>Name</th>
            <th>Email</th>
            <th>Mobile</th>
            <th>Comments</th>
            <th>Date</th>
        </tr>
    </tfoot>
    <tbody>
    @if(!empty($contacts))
        @foreach($contacts AS $index=>$contact)
            <tr>
                <td> {{ $index+1 }} </td>
                <td> {{ $contact->name }} </td>
                <td> {{ $contact->email }} </td>
                <td> {{ $contact->mobile }} </td>
                <td> {{ str_limit($contact->comments, 5,'...') }} 
                    @if(strlen ($contact->comments)>5)<div onclick="showModal('{{$contact->comments}}')"><i class="material-icons">info</i></div>
                    @endif 
                </td>
                <td> {{ $contact->created_at->format('d/m/Y  H:i')  }}   </td>
              
            </tr>
        @endforeach
    @endif
    </tbody>
</table>
</div>
<div class="modal fade" id="showUserComments" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="defaultModalLabel">Message</h4>
            </div>
            <div class="modal-body" id="msg-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CLOSE</button>
            </div>
        </div>
    </div>
</div>
<script>
    function showModal(data){
        $("#msg-body").text(data)
        $('#showUserComments').modal({
            show: 'true'
        });
        
    }
</script>
@include('links.footer')