@extends('layouts.app')

@section('title', 'Client Inquiries - Admin Portal')

@section('content')
<div class="bg-slate-900 text-white py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="font-heading font-extrabold text-2xl">Customer Inquiries & Messages</h1>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="bg-white rounded-3xl shadow-lg border border-slate-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm text-slate-700">
                <thead class="bg-slate-50 text-xs font-bold text-slate-500 uppercase border-b border-slate-100">
                    <tr>
                        <th class="px-6 py-4">Client Name</th>
                        <th class="px-6 py-4">Contact</th>
                        <th class="px-6 py-4">Subject</th>
                        <th class="px-6 py-4">Message</th>
                        <th class="px-6 py-4">Date Received</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @foreach($inquiries as $inquiry)
                        <tr class="hover:bg-slate-50">
                            <td class="px-6 py-4 font-bold text-slate-900">{{ $inquiry->name }}</td>
                            <td class="px-6 py-4">
                                <div>{{ $inquiry->email }}</div>
                                <div class="text-xs text-slate-500"><i class="fa-solid fa-phone"></i> {{ $inquiry->phone }}</div>
                            </td>
                            <td class="px-6 py-4 font-semibold text-brand-blue">{{ $inquiry->subject }}</td>
                            <td class="px-6 py-4 text-xs max-w-xs">{{ $inquiry->message }}</td>
                            <td class="px-6 py-4 text-xs text-slate-500">{{ $inquiry->created_at->format('M d, Y H:i') }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="p-4 border-t border-slate-100">
            {{ $inquiries->links() }}
        </div>
    </div>
</div>
@endsection
