@extends('layouts.app')

@section('title', 'Viewing Appointments - 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">Property Inspection Appointments</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">Target Property</th>
                        <th class="px-6 py-4">Preferred Schedule</th>
                        <th class="px-6 py-4">Contact Phone</th>
                        <th class="px-6 py-4">Notes</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @foreach($appointments as $apt)
                        <tr class="hover:bg-slate-50">
                            <td class="px-6 py-4 font-bold text-slate-900">{{ $apt->name }}</td>
                            <td class="px-6 py-4 text-xs font-semibold text-brand-blue">{{ $apt->property->title ?? 'General' }}</td>
                            <td class="px-6 py-4 font-bold text-emerald-600">{{ $apt->preferred_date->format('M d, Y') }} @ {{ $apt->preferred_time }}</td>
                            <td class="px-6 py-4">{{ $apt->phone }}</td>
                            <td class="px-6 py-4 text-xs text-slate-500 max-w-xs">{{ $apt->notes ?? 'N/A' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="p-4 border-t border-slate-100">
            {{ $appointments->links() }}
        </div>
    </div>
</div>
@endsection
