@extends('backend.dashboard')
@section('content')

<div class="container mt-4">


    <div class="card shadow-sm card-primary">
        <div class="card-header position-relative">

        <!-- Center Title -->
        <div class="w-100 text-center p-2">
            <h3
                style="
                    display: inline-block;
                    font-weight: 700;
                    font-size: 30px;
                    padding-bottom: 6px;
                    border-bottom: 3px solid #a74a28;
                    margin: 0;
                ">
                Contact Messages
            </h3>
        </div>


        </div>
        <div class="card-body p-0">
            <table class="table table-hover table-striped mb-0">
                <thead class="table bg-primary py-3">
                    <tr>
                        <th class="text-white p-4">ID</th>
                        <th class="text-white">Name</th>
                        <th class="text-white">Email</th>
                        <th class="text-white">Message</th>
                        <th class="text-white">Received At</th>
                        <th class="text-white">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($contacts as $contact)
                    <tr>
                        <td class="p-4">{{ $contact->id }}</td>
                        <td>{{ $contact->name }}</td>
                        <td>{{ $contact->email }}</td>
                        <td style="max-width: 300px; word-wrap: break-word;">{{ $contact->message }}</td>
                        <td>{{ $contact->created_at->format('d M Y H:i') }}</td>
                        <td>
                            <form action="{{ route('contacts.destroy', $contact->id) }}" method="POST" onsubmit="return confirm('Are you sure?');">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-sm btn-danger">Delete</button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center">No messages found.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection