@extends('layouts.portal')

@section('title', 'My Appointments')
@section('page_title', 'My Appointments')
@section('page_subtitle', 'View your scheduled appointments')

@section('sidebar')
    @include('client.partials.sidebar', ['active' => 'appointments'])
@endsection

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-gray-800">My Appointments</h1>
        <p class="text-gray-600 mt-1">View your scheduled appointments with your lawyer</p>
    </div>

    <!-- Upcoming Appointments -->
    <div class="mb-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
            <i class="fas fa-calendar-alt text-red-600 mr-2"></i>
            Upcoming Appointments
        </h2>
        
        @if($upcoming->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @foreach($upcoming as $appointment)
                    <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-green-500">
                        <div class="flex justify-between items-start mb-4">
                            <div class="flex items-center">
                                <div class="bg-red-100 rounded-xl p-3 text-center min-w-[70px] mr-4">
                                    <div class="text-xs text-red-600 font-semibold uppercase">{{ $appointment->appointment_date->format('M') }}</div>
                                    <div class="text-2xl font-bold text-red-600">{{ $appointment->appointment_date->format('d') }}</div>
                                    <div class="text-xs text-gray-500">{{ $appointment->appointment_date->format('Y') }}</div>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-800 text-lg">{{ $appointment->appointment_date->format('l') }}</h3>
                                    <p class="text-red-600 font-medium">{{ $appointment->appointment_date->format('h:i A') }}</p>
                                </div>
                            </div>
                            <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                {{ ucfirst($appointment->status) }}
                            </span>
                        </div>
                        
                        <div class="border-t pt-4">
                            <h4 class="font-semibold text-gray-700 mb-2">Lawyer</h4>
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
                                    <i class="fas fa-user-tie text-red-600"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-800">{{ $appointment->lawyer->name }}</p>
                                    <p class="text-sm text-gray-500">{{ $appointment->lawyer->email }}</p>
                                </div>
                            </div>
                        </div>
                        
                        @if($appointment->notes)
                            <div class="mt-4 bg-gray-50 rounded-lg p-3">
                                <p class="text-sm text-gray-600">
                                    <i class="fas fa-sticky-note mr-1"></i>
                                    {{ $appointment->notes }}
                                </p>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        @else
            <div class="bg-gray-50 rounded-xl p-8 text-center">
                <i class="fas fa-calendar-times text-4xl text-gray-400 mb-3"></i>
                <p class="text-gray-500">No upcoming appointments</p>
            </div>
        @endif
    </div>

    <!-- Past Appointments -->
    <div>
        <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
            <i class="fas fa-history text-gray-600 mr-2"></i>
            Past Appointments
        </h2>
        
        @if($past->count() > 0)
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">Date</th>
                            <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">Lawyer</th>
                            <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($past as $appointment)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4">
                                    <div class="font-medium text-gray-800">{{ $appointment->appointment_date->format('M d, Y') }}</div>
                                    <div class="text-sm text-gray-500">{{ $appointment->appointment_date->format('h:i A') }}</div>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
                                            <i class="fas fa-user text-gray-600 text-sm"></i>
                                        </div>
                                        <span class="text-gray-800">{{ $appointment->lawyer->name }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <span class="px-3 py-1 rounded-full text-xs font-medium 
                                        {{ $appointment->status === 'completed' ? 'bg-purple-100 text-purple-800' : 
                                           ($appointment->status === 'cancelled' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800') }}">
                                        {{ ucfirst($appointment->status) }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="bg-gray-50 rounded-xl p-8 text-center">
                <p class="text-gray-500">No past appointments</p>
            </div>
        @endif
    </div>
</div>
@endsection