@extends('admin.layout')

@section('title', 'Doctor Consultation Appointments')

@section('content')
<div class="bg-white rounded-3xl border border-slate-200 overflow-hidden shadow-xs">
    <div class="p-4 border-b border-slate-100 font-extrabold text-slate-900 text-sm">
        Appointment Booking Requests
    </div>

    <div class="overflow-x-auto">
        <table class="w-full text-left text-xs">
            <thead>
                <tr class="bg-slate-50/80 text-slate-500 border-b border-slate-200">
                    <th class="p-4 font-bold">Patient Name</th>
                    <th class="p-4 font-bold">Contact</th>
                    <th class="p-4 font-bold">Date &amp; Time</th>
                    <th class="p-4 font-bold">Symptoms / Message</th>
                    <th class="p-4 font-bold text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse($appointments as $app)
                    <tr class="hover:bg-slate-50/60 transition-colors">
                        <td class="p-4 font-bold text-slate-900">{{ $app->name }}</td>
                        <td class="p-4 text-slate-600">
                            <div><i class="fa-solid fa-phone text-emerald-600 mr-1"></i> <a href="tel:{{ $app->phone }}" class="hover:text-emerald-700">{{ $app->phone }}</a></div>
                            @if($app->email)
                                <div class="text-[10px] text-slate-400">{{ $app->email }}</div>
                            @endif
                        </td>
                        <td class="p-4 text-slate-600">
                            <div>{{ $app->date }}</div>
                            <div class="text-[10px] text-slate-400">{{ $app->time }}</div>
                        </td>
                        <td class="p-4 text-slate-600 max-w-xs">
                            <p class="line-clamp-2">{{ $app->message ?? 'No details provided' }}</p>
                        </td>
                        <td class="p-4 text-right whitespace-nowrap">
                            <a href="{{ route('admin.appointments.delete', ['id' => $app->id]) }}" onclick="return confirm('Delete this appointment?');" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-red-50 hover:bg-red-100 text-red-600 font-bold transition-all text-xs">
                                <i class="fa-solid fa-trash-can text-[11px]"></i> Delete
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="p-8 text-center text-slate-400">No appointment requests found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($appointments->hasPages())
        <div class="p-4 border-t border-slate-100">
            {{ $appointments->links() }}
        </div>
    @endif
</div>
@endsection