@extends('admin.layout')

@section('content')
<div class="relative pt-5 text-gray-900 dark:text-white xl:max-w-[95%] 2xl:max-w-[90%]">
    <div class="flex items-center justify-center">
        <div class="relative overflow-x-auto rounded-lg w-3/6">
            <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-white">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-pink-700 dark:text-neutral-200">
                    <tr>
                        <th class="px-6 py-3">Name</th>
                        <th class="px-6 py-3">Subject</th>
                        <th class="px-6 py-3">Message</th>
                        <th class="px-6 py-3">Date</th>
                        <th class="px-6 py-3">Action</th>
                    </tr>
                </thead>
                <tbody>
                @foreach($contacts as $contact)
                <tr class="bg-white border-t dark:bg-neutral-800 dark:border-pink-700">
                    <td class="px-6 py-4">
                        {{ $contact->name }}
                        <br>
                        {{ $contact->email }}
                    </td>
                    <td class="px-6 py-4">{{ $contact->subject }}</td>
                    <td class="px-6 py-4">{{ $contact->message }}</td>
                    <td class="px-6 py-4">{{ $contact->created_at->format('Y/m/d') }}</td>
                    <td class="px-6 py-4">
                        <form method="POST" action="{{ route('admin.contact.delete', $contact->id) }}">
                            @csrf
                            @method('delete')
                            <button type="submit" class="inline-block rounded bg-rose-600 pl-[4px] pr-[4px] p-[1px] text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
                                Delete
                            </button>
                        </form>
                    </td>
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection