@extends('layouts.app')
@section('content')

    <div class="page-header">
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <nav aria-label="breadcrumb" role="navigation">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Chat Messages</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <div class="card-box pd-20 height-100-p mb-30">
        <div class="row">
            <div class="col-md-12">
                <div class="card-box pd-20 height-100-p mb-30">
                    @if($messages->isEmpty())
                        <hr>
                        <h1 style="text-align: center; color: #0c84ff">No Message Found</h1>
                    <hr>
                    @else
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th scope="col">Name</th>
                                <th scope="col">Email</th>
                                <th scope="col">Message</th>
                                <th scope="col">View</th>
                            </tr>
                            </thead>

                            @foreach($messages as $message)
                                <tbody>
                                <tr>
                                    <td>{{ $message->name  ?? ''}}</td>
                                    <td>{{ $message->email ?? '' }}</td>
                                    <td>{!! $message->message !!}</td>
                                    <td><a href="{{route('admin.chat.messages.show',$message->id)}}"><i class="fas fa-comment"></i></a></td>

                                </tr>
                                </tbody>

                            @endforeach
                        </table>
                    @endif

                </div>
            </div>
        </div>
    </div>
@endsection