@extends('console_layouts.master')
@section('title')
    聯絡表單訊息
@endsection

@section('content')
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">收到的訊息</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover responsive-table">
                            <thead class="table-light">
                                <tr>
                                    <th scope="col" style="width:5%;">#</th>
                                    <th scope="col" style="width:20%;">收到時間</th>
                                    <th scope="col" style="width:20%;">稱呼</th>
                                    <th scope="col" style="width:55%;">內容</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($messages as $message)
                                    <tr>
                                        <td data-label="#">{{ $loop->iteration + ($messages->currentPage() - 1) * $messages->perPage() }}</td>
                                        <td data-label="收到時間">{{ $message->created_at->format('Y-m-d H:i') }}</td>
                                        <td data-label="稱呼">{{ $message->name }}</td>
                                        <td data-label="內容"><a href="{{ locale_asset('console/messages/'.$message->id) }}">{{ Str::limit($message->message, 20) }}</a></td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center">沒有任何訊息。</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-center">
                        
                        <div class="gridjs-footer">
                            @if ($messages->hasPages())
                                <div class="gridjs-pagination">
                                    <div class="gridjs-pages">
                                        @if (!$messages->onFirstPage())
                                            <button tabindex="0" role="button" title="Previous"
                                                aria-label="Previous" class=""
                                                onclick="window.location='{{ $messages->previousPageUrl() }}';">上一頁</button>
                                        @endif

                                        @for ($i = 0; $i < $messages->lastPage(); $i++)
                                            <button tabindex="0" role="button"
                                                class="{{ $messages->currentPage() == $i + 1 ? 'gridjs-currentPage' : '' }}"
                                                title="Page {{ $i + 1 }}"
                                                aria-label="Page {{ $i + 1 }}"
                                                onclick="window.location='{{ $messages->url($i + 1) }}';">{{ $i + 1 }}</button>
                                        @endfor

                                        @if (!$messages->onLastPage())
                                            <button tabindex="0" role="button" title="Next"
                                                aria-label="Next" class=""
                                                onclick="window.location='{{ $messages->nextPageUrl() }}';">下一頁</button>
                                        @endif
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection