@extends('layouts.app')

@section('content')

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-success panel-border">
            <div class="panel-heading">
                <h3 class="panel-title">SMS Activity</h3>
            </div>

            <div class="panel-body row">
                <div class="col-md-12 table-responsive">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th style="width:140px;">Sent</th>
                                <th style="width:135px;">To</th>
                                <th>Message</th>
                                <th style="width:145px;">Type</th>
                            </tr>
                        </thead>
                        <tbody>
                        @forelse($logs as $log)
                            <tr style="vertical-align:top;">
                                <td style="vertical-align:top;">
                                    {{ \Carbon\Carbon::parse($log->created_at)->format('m/d/Y') }}
                                    <div style="font-size:11px;color:#98a4b0;">
                                        {{ \Carbon\Carbon::parse($log->created_at)->format('h:i:s A') }}
                                    </div>
                                </td>
                                <td style="vertical-align:top;">
                                    {{ $log->to ?: '—' }}
                                    @if($log->to_raw && $log->to_raw !== $log->to)
                                        <div style="font-size:11px;color:#98a4b0;">on file: {{ $log->to_raw }}</div>
                                    @endif
                                </td>
                                <td style="vertical-align:top;">
                                    <div style="white-space:pre-wrap;word-break:break-word;font-family:Menlo,Consolas,monospace;font-size:11.5px;line-height:1.55;color:#26333c;max-width:560px;">{{ $log->body }}</div>
                                </td>
                                <td style="vertical-align:top;">{{ $log->type ?: '—' }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center" style="padding:26px;color:#8a97a5;">
                                    No messages recorded yet. Rows appear here as the services send them.
                                </td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="col-md-12">
                    {{-- Bootstrap 3 numbered pagination, matching Leads; the default
                         template is Tailwind, which this panel does not load. --}}
                    {{ $logs->links('pagination::default') }}
                </div>
            </div>
        </div>
    </div>
</div>

@endsection