@extends('layouts.admin_panel')

@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="container">
      <div class="row mb-2">
        <div class="col-sm-6">

        </div><!-- /.col -->

      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->

  <!-- Main content -->
  <div class="content">
    <div class="container">
      <table id="example1" class="table table-bordered table-striped">
        <thead class="thead-dark">
          <tr>
            <th>User Type</th>
            <th>Name</th>
            <th>Email</th>
            <th>Subject</th>
            <th>Message</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>
          @foreach($contacts as $contact)
          <tr>
            <td>
              @if($contact->user_id)
                User ID : {{ $contact->user_id }}
              @else
                Unregistered
              @endif
            </td>
            <td>{{ $contact->name }}</td>
            <td><a href="mailto:{{ $contact->email }}">{{ $contact->email }}</a></td>
            <td>{{ $contact->subject }}</td>
            <td>{{ $contact->message }}</td>
            <td>
              <form method="post" id="delete_contact_form" action="contacts/">
                {{ method_field('DELETE') }}
                {{ csrf_field() }}
              </form>
              <a class="btn btn-block btn-sm btn-danger" href="javascript:delete_contact()" form="delete_contact_form"><i class="nav-icon fas fa-trash"></i> Delete</a>
            </td>
          </tr>
          @endforeach
          </tfoot>
      </table>
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content -->
</div>
<!-- /.content-wrapper -->
@endsection

@section('bottom-scripts')
<script>
  function delete_contact(x) {
    if (confirm('Are you sure?')) {
      var form_name = "delete_contact_form" + x;
      document.getElementById(form_name).submit();
    }
  }
</script>
@endsection