@extends('layouts.master')
@section('page_title', 'Website Messages')
@section('content')

<div class="card">
    <div class="card-header"><h6 class="card-title font-weight-semibold"><i class="icon-envelop3 mr-2"></i>Messages from the Contact form</h6></div>
    <div class="table-responsive">
        <table class="table table-striped">
            <thead><tr><th>Received</th><th>From</th><th>Message</th><th></th></tr></thead>
            <tbody>
            @forelse($items as $m)
                <tr class="{{ $m->is_read ? '' : 'font-weight-semibold' }}">
                    <td class="text-nowrap">{{ $m->created_at ? $m->created_at->format('j M Y, g:ia') : '' }}
                        @if(!$m->is_read)<br><span class="badge badge-danger">new</span>@endif</td>
                    <td>{{ $m->name }}<br><small>
                        @if($m->email)<a href="mailto:{{ $m->email }}">{{ $m->email }}</a><br>@endif
                        @if($m->phone)<a href="tel:{{ $m->phone }}">{{ $m->phone }}</a>@endif</small></td>
                    <td>@if($m->subject)<strong>{{ $m->subject }}</strong><br>@endif{!! nl2br(e($m->message)) !!}</td>
                    <td class="text-nowrap">
                        <form method="post" action="{{ route('site_admin.messages.toggle', $m->id) }}" class="d-inline">
                            @csrf @method('PUT')<button class="btn btn-sm btn-light">{{ $m->is_read ? 'Mark unread' : 'Mark read' }}</button>
                        </form>
                        <form method="post" action="{{ route('site_admin.messages.destroy', $m->id) }}" class="d-inline" onsubmit="return confirm('Delete this message?');">
                            @csrf @method('DELETE')<button class="btn btn-sm btn-danger"><i class="icon-trash"></i></button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr><td colspan="4" class="text-center text-muted p-4">No messages yet.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection