@extends('layouts.clinic-admin')

@section('title', 'Appointments Management')

@section('content')
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    
    <!-- Header -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="h-14 w-14 rounded-full bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center shadow-lg">
                        <i class="fas fa-calendar-check text-white text-2xl"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <h1 class="text-3xl font-bold text-gray-900">Appointments Management</h1>
                    <p class="text-gray-600">View and manage all clinic appointments</p>
                </div>
            </div>
            <div class="text-right">
                <p class="text-sm text-gray-600 mb-1">{{ $clinic->name }}</p>
                <p class="text-lg font-semibold text-green-600">
                    <i class="fas fa-calendar-day mr-1"></i>{{ $date->format('l, M d, Y') }}
                </p>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-blue-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600 uppercase">Total</p>
                    <p class="text-3xl font-bold text-gray-900">{{ $stats['total'] }}</p>
                </div>
                <div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center">
                    <i class="fas fa-users text-blue-600 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-green-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600 uppercase">Confirmed</p>
                    <p class="text-3xl font-bold text-green-600">{{ $stats['confirmed'] }}</p>
                </div>
                <div class="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center">
                    <i class="fas fa-check-circle text-green-600 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-purple-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600 uppercase">Completed</p>
                    <p class="text-3xl font-bold text-purple-600">{{ $stats['completed'] }}</p>
                </div>
                <div class="h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center">
                    <i class="fas fa-clipboard-check text-purple-600 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-red-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600 uppercase">Cancelled</p>
                    <p class="text-3xl font-bold text-red-600">{{ $stats['cancelled'] }}</p>
                </div>
                <div class="h-12 w-12 rounded-full bg-red-100 flex items-center justify-center">
                    <i class="fas fa-times-circle text-red-600 text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Export Buttons -->
    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg shadow-md p-6 mb-6 border border-blue-200">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-1">
                    <i class="fas fa-file-pdf text-red-600 mr-2"></i>Export Reports
                </h3>
                <p class="text-sm text-gray-600">Download PDF reports for daily, weekly, or monthly appointments</p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ route('clinic-admin.appointments.export.daily', ['date' => $selectedDate]) }}" 
                   class="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg shadow-sm transition-colors">
                    <i class="fas fa-file-pdf mr-2"></i>
                    Daily PDF
                </a>
                <a href="{{ route('clinic-admin.appointments.export.weekly', ['date' => $selectedDate]) }}" 
                   class="inline-flex items-center px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white font-medium rounded-lg shadow-sm transition-colors">
                    <i class="fas fa-file-pdf mr-2"></i>
                    Weekly PDF
                </a>
                <a href="{{ route('clinic-admin.appointments.export.monthly', ['date' => $selectedDate]) }}" 
                   class="inline-flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg shadow-sm transition-colors">
                    <i class="fas fa-file-pdf mr-2"></i>
                    Monthly PDF
                </a>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <form method="GET" action="{{ route('clinic-admin.appointments.index') }}" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <!-- Date Filter -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-calendar mr-1"></i>Select Date
                    </label>
                    <input type="date" 
                           name="date" 
                           value="{{ $selectedDate }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
                           onchange="this.form.submit()">
                </div>

                <!-- Status Filter -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-filter mr-1"></i>Status
                    </label>
                    <select name="status" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
                            onchange="this.form.submit()">
                        <option value="">All Statuses</option>
                        <option value="confirmed" {{ $filterStatus == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                        <option value="completed" {{ $filterStatus == 'completed' ? 'selected' : '' }}>Completed</option>
                        <option value="cancelled" {{ $filterStatus == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                    </select>
                </div>

                <!-- Time Slot Filter -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-clock mr-1"></i>Time Slot
                    </label>
                    <select name="slot" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
                            onchange="this.form.submit()">
                        <option value="">All Time Slots</option>
                        @foreach(['08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00', '12:00-13:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'] as $slot)
                            <option value="{{ $slot }}" {{ $filterSlot == $slot ? 'selected' : '' }}>{{ $slot }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Search -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-search mr-1"></i>Search Patient
                    </label>
                    <div class="relative">
                        <input type="text" 
                               name="search" 
                               value="{{ $searchTerm }}"
                               placeholder="Name or IC..."
                               class="w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
                        @if($searchTerm)
                            <button type="button" 
                                    onclick="document.querySelector('input[name=search]').value=''; this.form.submit();"
                                    class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                <i class="fas fa-times"></i>
                            </button>
                        @endif
                    </div>
                </div>
            </div>

            <div class="flex justify-between items-center">
                <button type="submit" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors shadow-sm">
                    <i class="fas fa-search mr-2"></i>Search & Filter
                </button>
                <a href="{{ route('clinic-admin.appointments.index') }}" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
                    <i class="fas fa-redo mr-2"></i>Clear All
                </a>
            </div>
        </form>
    </div>

    <!-- Quick Date Navigation -->
    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
        <div class="flex items-center justify-between">
            <a href="?date={{ $date->copy()->subDay()->format('Y-m-d') }}&status={{ $filterStatus }}&slot={{ $filterSlot }}&search={{ $searchTerm }}" 
               class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                <i class="fas fa-chevron-left mr-2"></i>Previous Day
            </a>
            
            <a href="?date={{ \Carbon\Carbon::today()->format('Y-m-d') }}&status={{ $filterStatus }}&slot={{ $filterSlot }}&search={{ $searchTerm }}" 
               class="px-6 py-2 bg-green-600 text-white hover:bg-green-700 rounded-lg transition-colors font-semibold">
                <i class="fas fa-calendar-day mr-2"></i>Today
            </a>
            
            <a href="?date={{ $date->copy()->addDay()->format('Y-m-d') }}&status={{ $filterStatus }}&slot={{ $filterSlot }}&search={{ $searchTerm }}" 
               class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                Next Day<i class="fas fa-chevron-right ml-2"></i>
            </a>
        </div>
    </div>

    <!-- Appointments by Time Slot -->
    <div class="space-y-6">
        @php
            $currentPeriod = null;
        @endphp

        @foreach($timeSlots as $slot => $data)
            @if($currentPeriod !== $data['period'])
                @php $currentPeriod = $data['period']; @endphp
                
                <!-- Period Header -->
                <div class="flex items-center my-6">
                    <div class="flex-grow border-t border-gray-300"></div>
                    <div class="flex-shrink mx-4 flex items-center">
                        @if($currentPeriod === 'Morning')
                            <i class="fas fa-sun text-yellow-500 text-2xl mr-2"></i>
                        @elseif($currentPeriod === 'Afternoon')
                            <i class="fas fa-cloud-sun text-orange-500 text-2xl mr-2"></i>
                        @else
                            <i class="fas fa-moon text-indigo-500 text-2xl mr-2"></i>
                        @endif
                        <span class="text-2xl font-bold text-gray-700">{{ $currentPeriod }} Session</span>
                    </div>
                    <div class="flex-grow border-t border-gray-300"></div>
                </div>
            @endif

            <!-- Time Slot Card -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <div class="bg-gradient-to-r {{ $data['period'] === 'Morning' ? 'from-yellow-50 to-orange-50' : ($data['period'] === 'Afternoon' ? 'from-orange-50 to-red-50' : 'from-indigo-50 to-purple-50') }} p-4 border-l-4 {{ $data['period'] === 'Morning' ? 'border-yellow-500' : ($data['period'] === 'Afternoon' ? 'border-orange-500' : 'border-indigo-500') }}">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <i class="fas fa-clock text-2xl {{ $data['period'] === 'Morning' ? 'text-yellow-600' : ($data['period'] === 'Afternoon' ? 'text-orange-600' : 'text-indigo-600') }} mr-3"></i>
                            <div>
                                <h3 class="text-xl font-bold text-gray-900">{{ $slot }}</h3>
                                <p class="text-sm text-gray-600">{{ $data['period'] }} Session</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold
                                {{ count($data['appointments']) > 0 ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600' }}">
                                <i class="fas fa-users mr-2"></i>
                                {{ count($data['appointments']) }} {{ count($data['appointments']) == 1 ? 'Patient' : 'Patients' }}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="p-6">
                    @if(count($data['appointments']) > 0)
                        <div class="space-y-4">
                            @foreach($data['appointments'] as $appointment)
                                <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-4 flex-1">
                                            <!-- Patient Avatar -->
                                            <div class="flex-shrink-0">
                                                @php
                                                    $avatarUrl = null;
                                                    if ($appointment->mother->expectantMother && $appointment->mother->expectantMother->avatar_url) {
                                                        $avatarUrl = asset('storage/' . $appointment->mother->expectantMother->avatar_url);
                                                    } elseif ($appointment->mother->profile_picture) {
                                                        $avatarUrl = asset('storage/' . $appointment->mother->profile_picture);
                                                    } else {
                                                        $avatarUrl = 'https://ui-avatars.com/api/?name=' . urlencode($appointment->mother->name) . '&background=FB97AE&color=fff&size=200';
                                                    }
                                                @endphp
                                                <img src="{{ $avatarUrl }}"
                                                     alt="{{ $appointment->mother->name }}"
                                                     class="w-14 h-14 rounded-full object-cover border-2 border-pink-200 shadow-sm"
                                                     onerror="this.src='https://ui-avatars.com/api/?name={{ urlencode($appointment->mother->name) }}&background=FB97AE&color=fff&size=200'">
                                            </div>

                                            <!-- Patient Info -->
                                            <div class="flex-1">
                                                <h4 class="text-lg font-semibold text-gray-900">
                                                    {{ $appointment->mother->name }}
                                                </h4>
                                                <div class="flex items-center space-x-4 mt-1 text-sm text-gray-600">
                                                    <span>
                                                        <i class="fas fa-id-card mr-1"></i>
                                                        {{ $appointment->mother->expectantMother->ic_number ?? 'N/A' }}
                                                    </span>
                                                    <span>
                                                        <i class="fas fa-phone mr-1"></i>
                                                        {{ $appointment->mother->expectantMother->phone_number ?? $appointment->mother->phone_number ?? 'N/A' }}
                                                    </span>
                                                    @if($appointment->assignedNurse)
                                                        <span>
                                                            <i class="fas fa-user-nurse mr-1"></i>
                                                            {{ $appointment->assignedNurse->name }}
                                                        </span>
                                                    @endif
                                                </div>
                                            </div>

                                            <!-- Status Badge -->
                                            <div class="flex-shrink-0">
                                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold
                                                    {{ $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' : '' }}">
                                                    @if($appointment->status === 'confirmed')
                                                        <i class="fas fa-check-circle mr-1"></i>
                                                    @elseif($appointment->status === 'completed')
                                                        <i class="fas fa-clipboard-check mr-1"></i>
                                                    @else
                                                        <i class="fas fa-times-circle mr-1"></i>
                                                    @endif
                                                    {{ ucfirst($appointment->status) }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-8 text-gray-500">
                            <i class="fas fa-inbox text-4xl mb-2"></i>
                            <p>No appointments for this time slot</p>
                        </div>
                    @endif
                </div>
            </div>
        @endforeach
    </div>

    <!-- Empty State -->
    @if($appointments->isEmpty())
        <div class="bg-white rounded-lg shadow-md p-12 text-center">
            <i class="fas fa-calendar-times text-6xl text-gray-300 mb-4"></i>
            <h3 class="text-2xl font-semibold text-gray-900 mb-2">No Appointments Found</h3>
            <p class="text-gray-600 mb-4">There are no appointments for the selected date and filters.</p>
            <a href="{{ route('clinic-admin.appointments.index') }}" 
               class="inline-block px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                <i class="fas fa-redo mr-2"></i>View All Appointments
            </a>
        </div>
    @endif

</div>
@endsection