@extends('layouts.main')
@section('title', 'Messages')

@section('breadcrumb')
  <li class="breadcrumb-item"><a href="/">Home</a></li>
  <li class="breadcrumb-item active">Messages</li>
@endsection

@section('content')

  <script src="{{ env('APP_PREFIX') }}/js/message.js"></script>

  <div class="row">

    <div class="col-md-12">
      <div class="card-box p-2">

        <div class="table-responsive">
          <table class="table table-sm table-hover mt-3">

            <thead class="thead-light">
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Email</th>
              <th>Subject</th>
              <th>Created At</th>
              <th width="17%">Action</th>
            </tr>
            </thead>

            <tbody id="message_table">

            @foreach($messages as $message)

              <tr class="pointer">
                <td>{{ $loop->index + 1 }}</td>
                <td>{{ $message->name }}</td>
                <td>{{ $message->email }}</td>
                <td>{{ $message->subject }}</td>
                <td>{{ $message->created_at }}</td>
                <td>
                  <button type="button" class="btn btn-xs btn-primary waves-effect waves-light" title="View Message"
                          onclick="viewMessage('{{ $message->message }}')" >
                    <i class="fe-message-circle"></i> View Message
                  </button>
                </td>
              </tr>

            @endforeach


            </tbody>
          </table>

          {{ $messages->links() }}

        </div>

      </div>
    </div>

  </div>



  <div id="view_message_modal" class="modal fade bs-example-modal-lg">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myLargeModalLabel">View Message</h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        </div>
        <div class="modal-body">
          <p id="view_message_span"></p>
        </div>
      </div>
    </div>
  </div>

@endsection