@extends('layouts.admin')
@section('header', 'Appointments')
@section('content')
<div class="bg-white rounded shadow overflow-x-auto">
    <table class="w-full whitespace-nowrap">
        <thead>
            <tr class="text-left font-bold bg-gray-50 border-b">
                <th class="px-6 py-3">Date</th>
                <th class="px-6 py-3">Patient Name</th>
                <th class="px-6 py-3">Phone</th>
                <th class="px-6 py-3">Pref. Date</th>
                <th class="px-6 py-3">Status</th>
                <th class="px-6 py-3">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($appointments as $appointment)
            <tr class="border-b focus-within:bg-gray-100 hover:bg-gray-100">
                <td class="px-6 py-4">{{ $appointment->created_at->format('M d, Y') }}</td>
                <td class="px-6 py-4">{{ $appointment->name }}</td>
                <td class="px-6 py-4">{{ $appointment->phone }}</td>
                <td class="px-6 py-4">{{ $appointment->preferred_date ? \Carbon\Carbon::parse($appointment->preferred_date)->format('M d, Y') : 'Anytime' }}</td>
                <td class="px-6 py-4">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                        {{ $appointment->status === 'pending' ? 'bg-yellow-100 text-yellow-800' : '' }}
                        {{ $appointment->status === 'confirmed' ? 'bg-blue-100 text-blue-800' : '' }}
                        {{ $appointment->status === 'completed' ? 'bg-green-100 text-green-800' : '' }}
                        {{ $appointment->status === 'cancelled' ? 'bg-red-100 text-red-800' : '' }}
                    ">
                        {{ ucfirst($appointment->status) }}
                    </span>
                </td>
                <td class="px-6 py-4 flex space-x-2">
                    <a href="{{ route('admin.appointments.show', $appointment) }}" class="text-teal-600 hover:text-teal-900">View / Update</a>
                    <form action="{{ route('admin.appointments.destroy', $appointment) }}" method="POST" onsubmit="return confirm('Delete this appointment?');">
                        @csrf @method('DELETE')
                        <button type="submit" class="text-red-600 hover:text-red-900 ml-4">Delete</button>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="6" class="px-6 py-4 text-center text-gray-500">No appointments found.</td>
            </tr>
            @endforelse
        </tbody>
    </table>
    <div class="p-4">
        {{ $appointments->links() }}
    </div>
</div>
@endsection
