@extends('layouts.portal')
@section('title', 'Dashboard | Anywhere Phone Repair')
@section('content')
<h1 class="text-2xl font-black text-zinc-900 mb-6">Welcome back, {{ auth()->user()->name }}</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
    <div class="bg-white border border-zinc-200 rounded-3xl p-6 shadow-sm">
        <h2 class="font-bold text-zinc-900 mb-4 flex items-center gap-2">
            Recent Orders
        </h2>
        @if($orders->count() > 0)
            <div class="space-y-4">
                @foreach($orders as $order)
                    <a href="{{ route('portal.orders.show', $order->id) }}" class="block bg-zinc-50 rounded-xl p-4 hover:bg-zinc-100 transition-colors">
                        <div class="flex justify-between items-center mb-2">
                            <span class="font-bold text-zinc-900 text-sm">#{{ substr($order->tracking_code, 0, 8) }}</span>
                            <span class="text-xs font-bold px-2.5 py-1 rounded-full bg-blue-100 text-blue-700">{{ str_replace('_', ' ', Str::title($order->status)) }}</span>
                        </div>
                        <p class="text-sm text-zinc-500 font-medium">{{ $order->device_description }}</p>
                    </a>
                @endforeach
            </div>
            <a href="{{ route('portal.orders') }}" class="block text-center text-sm font-bold text-primary mt-4 hover:underline">View all orders</a>
        @else
            <div class="text-center py-8">
                <p class="text-zinc-500 text-sm">No recent orders found.</p>
                <a href="{{ url('/book') }}" class="inline-block mt-4 text-sm font-bold text-primary">Book a repair</a>
            </div>
        @endif
    </div>
    
    <div class="bg-white border border-zinc-200 rounded-3xl p-6 shadow-sm">
        <h2 class="font-bold text-zinc-900 mb-4 flex items-center gap-2">
            Upcoming Appointments
        </h2>
        @if($appointments->count() > 0)
            <div class="space-y-4">
                @foreach($appointments as $apt)
                    <div class="bg-zinc-50 rounded-xl p-4 flex gap-4">
                        <div class="bg-primary/10 text-primary w-12 h-12 rounded-xl flex flex-col items-center justify-center shrink-0">
                            <span class="text-xs font-bold">{{ \Carbon\Carbon::parse($apt->scheduled_at)->format('M') }}</span>
                            <span class="text-lg font-black leading-none">{{ \Carbon\Carbon::parse($apt->scheduled_at)->format('d') }}</span>
                        </div>
                        <div>
                            <p class="font-bold text-zinc-900 text-sm">{{ \Carbon\Carbon::parse($apt->scheduled_at)->format('g:i A') }}</p>
                            <p class="text-xs text-zinc-500 font-medium mt-1">{{ $apt->notes ?? 'Repair Appointment' }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-8">
                <p class="text-zinc-500 text-sm">No upcoming appointments.</p>
            </div>
        @endif
    </div>
</div>
@endsection