@extends('layouts.portal')
@section('title', 'Appointments | Anywhere Phone Repair')
@section('content')
<div class="mb-6 flex items-center justify-between">
    <h1 class="text-2xl font-black text-zinc-900">Appointments</h1>
    <a href="{{ url('/book') }}" class="bg-zinc-900 hover:bg-zinc-800 text-white text-sm font-bold px-4 py-2 rounded-xl transition-colors">Book New</a>
</div>

<div class="bg-white border border-zinc-200 rounded-3xl overflow-hidden shadow-sm">
    <div class="overflow-x-auto">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="border-b border-zinc-200 bg-zinc-50">
                    <th class="py-4 px-6 text-xs font-black text-zinc-500 uppercase tracking-wider">Date & Time</th>
                    <th class="py-4 px-6 text-xs font-black text-zinc-500 uppercase tracking-wider">Order</th>
                    <th class="py-4 px-6 text-xs font-black text-zinc-500 uppercase tracking-wider">Status</th>
                    <th class="py-4 px-6 text-xs font-black text-zinc-500 uppercase tracking-wider">Notes</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-zinc-100">
                @forelse($appointments as $apt)
                    <tr class="hover:bg-zinc-50/50 transition-colors">
                        <td class="py-4 px-6">
                            <p class="font-bold text-zinc-900 text-sm">{{ \Carbon\Carbon::parse($apt->scheduled_at)->format('M d, Y') }}</p>
                            <p class="text-xs text-zinc-500 font-medium">{{ \Carbon\Carbon::parse($apt->scheduled_at)->format('g:i A') }}</p>
                        </td>
                        <td class="py-4 px-6 text-sm">
                            @if($apt->order_id)
                                <a href="{{ route('portal.orders.show', $apt->order_id) }}" class="font-bold text-primary hover:underline">View Order</a>
                            @else
                                <span class="text-zinc-500 font-medium">N/A</span>
                            @endif
                        </td>
                        <td class="py-4 px-6">
                            <span class="text-xs font-bold px-2.5 py-1 rounded-full {{ $apt->status === 'scheduled' ? 'bg-blue-100 text-blue-700' : ($apt->status === 'completed' ? 'bg-green-100 text-green-700' : 'bg-zinc-100 text-zinc-700') }}">
                                {{ ucfirst($apt->status) }}
                            </span>
                        </td>
                        <td class="py-4 px-6 text-sm text-zinc-600 font-medium">
                            {{ Str::limit($apt->notes, 40) }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="py-8 text-center text-zinc-500 text-sm">No appointments scheduled.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
<div class="mt-6">
    {{ $appointments->links() }}
</div>
@endsection