@extends('layouts.admin')

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between">
        <h4>Contacts</h4>

        <ul style="list-style: none;">
            <li>
                <!-- Search Form -->
             
                 <form action="{{ route('contacts.index') }}" method="GET" class="d-flex">
                    <input type="text" name="search" value="{{ request()->input('search') }}" placeholder="Search by name, email, or message..."  style="width:300px" class="form-control border border-primary ms-2 px-2">
                    <button type="submit" class="btn btn-primary mx-2 mb-0">Search</button>
                </form>
            </li>
        </ul>
    </div>

    <div class="card-body table-responsive">
        <table class="table table-striped table-fixed table-hover align-middle text-center">
            <thead class="table-dark">
                <tr>
                    <th>ID</th>
                    <th>Full Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Message</th>
                    <th>Created At</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($contacts as $contact)
                    <tr>
                        <td>{{ $contact->id }}</td>
                        <td>{{ $contact->fullname }}</td>
                        <td>{{ $contact->email }}</td>
                        <td>{{ $contact->phone }}</td>
                        <td>{{ $contact->message }}</td>
                        <td>{{ $contact->created_at->format('Y-m-d H:i') }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6">No contacts found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        <!-- Pagination Links -->
        <div class="d-flex justify-content-center mt-3 pagination">
            {{ $contacts->appends(request()->query())->links() }}
        </div>
    </div>
</div>
@endsection