@if($patient)
    <div class="space-y-4" x-data="{
        activeTab: 'all',
        showTab(tab) {
            this.activeTab = tab;
        },
        saveNote(appointmentId, noteContent, onSuccess) {
            const errorDiv = document.getElementById(`note-error-${appointmentId}`);

            if (!noteContent || !noteContent.trim()) {
                this.showError(errorDiv, 'Lütfen bir not yazın.');
                return;
            }

            // Livewire emit kullanarak backend'e gönder
            Livewire.dispatch('saveAppointmentNote', {
                appointmentId: appointmentId,
                noteContent: noteContent.trim()
            });

            // Not ekleme event'ini dinle
            const listener = (event) => {
                if (event.detail && event.detail[0].appointmentId === appointmentId) {
                    this.addNoteToDOM(appointmentId, event.detail[0].note);
                    if (onSuccess) onSuccess();
                    this.showSuccess(errorDiv, 'Not başarıyla kaydedildi!');
                    setTimeout(() => errorDiv.classList.add('hidden'), 3000);
                    window.removeEventListener('noteAdded', listener);
                }
            };

            window.addEventListener('noteAdded', listener);

            // 5 saniye sonra listener'ı temizle (timeout için)
            setTimeout(() => {
                window.removeEventListener('noteAdded', listener);
            }, 5000);
        },
        addNoteToDOM(appointmentId, noteData) {
            const notesContainer = document.getElementById(`existing-notes-${appointmentId}`);
            const noteHTML = `
                <div class='p-3 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-600 rounded-lg' style='animation: fadeIn 0.3s ease-out'>
                    <div class='flex justify-between items-start mb-1'>
                        <h5 class='font-medium text-sm text-blue-800 dark:text-blue-200 flex items-center'>📝 Not #${noteData.index}</h5>
                        <span class='text-xs text-blue-600 dark:text-blue-400'>${noteData.created_at}</span>
                    </div>
                    <p class='text-sm text-gray-700 dark:text-gray-300 leading-relaxed'>${noteData.note}</p>
                </div>
            `;
            notesContainer.insertAdjacentHTML('beforeend', noteHTML);
        },
        showError(element, message) {
            element.textContent = message;
            element.classList.remove('hidden', 'text-green-600');
            element.classList.add('text-red-600');
        },
        showSuccess(element, message) {
            element.textContent = message;
            element.classList.remove('hidden', 'text-red-600');
            element.classList.add('text-green-600');
        }
    }">
        @php
            $appointments = \App\Models\Clinic\Appointment::where('patient_id', $patient->id)
                ->with(['appointmentUserServices.payment', 'doctor', 'services'])
                ->orderBy('start', 'desc')
                ->get();

            $groupedAppointments = $appointments->groupBy('status');

            $statusLabels = [
                'all' => 'Tümü',
                'scheduled' => 'Planlandı',
                'completed' => 'Tamamlandı',
                'cancelled' => 'İptal Edildi',
                'no_show' => 'Gelmedi',
                'rescheduled' => 'Yeniden Planlandı',
                'offer_was_made' => 'Teklif Yapıldı',
                'no_action' => 'İşlem Yapılmadı',
                'waiting' => 'Beklemede',
            ];
        @endphp

        <style>
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(-10px); }
                to { opacity: 1; transform: translateY(0); }
            }
        </style>

        @if ($appointments->isEmpty())
            <div class="text-center py-8 text-gray-500 dark:text-gray-400">
                <p>Henüz randevu kaydı bulunmamaktadır.</p>
            </div>
        @else
            <div class="border-b border-gray-200 dark:border-gray-600">
                <nav class="-mb-px flex space-x-8 overflow-x-auto">
                    @foreach($statusLabels as $status => $label)
                        <button
                            type="button"
                            @click="showTab('{{ $status }}')"
                            x-bind:class="activeTab === '{{ $status }}' ? 'border-blue-500 text-blue-600 dark:text-blue-400 dark:border-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400'"
                            class="whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm transition-colors duration-200 hover:text-gray-700 hover:border-gray-300 dark:hover:text-gray-300"
                        >
                            {{ $label }}
                            <span class="ml-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 py-1 px-2 rounded-full text-xs">
                                @if($status === 'all')
                                    {{ $appointments->count() }}
                                @else
                                    {{ $groupedAppointments->has($status) ? $groupedAppointments[$status]->count() : 0 }}
                                @endif
                            </span>
                        </button>
                    @endforeach
                </nav>
            </div>

            @foreach($statusLabels as $status => $label)
                <div x-show="activeTab === '{{ $status }}'" x-transition class="mt-4">
                    <div class="space-y-4 max-h-[600px] overflow-y-auto pr-2">
                        @php
                            $displayAppointments = $status === 'all' ? $appointments : ($groupedAppointments->get($status) ?? collect());
                        @endphp

                        @if($displayAppointments->count() > 0)
                            @foreach($displayAppointments as $appointment)
                                @php
                                    $statusColor = match($appointment->status) {
                                        'completed' => 'text-green-600',
                                        'scheduled' => 'text-blue-600',
                                        'pending' => 'text-yellow-600',
                                        'cancelled' => 'text-red-600',
                                        'no_show' => 'text-red-600',
                                        'rescheduled' => 'text-orange-600',
                                        'no_action' => 'text-gray-600',
                                        default => 'text-gray-600'
                                    };

                                    $descriptions = [];
                                    if (!empty($appointment->description)) {
                                        if (is_string($appointment->description)) {
                                            $decoded = json_decode($appointment->description, true);
                                            $descriptions = $decoded && is_array($decoded) ? $decoded : [];
                                        } elseif (is_array($appointment->description)) {
                                            $descriptions = $appointment->description;
                                        }
                                    }
                                @endphp

                                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-gray-50 dark:bg-gray-800">
                                    <div class="flex justify-between items-start mb-2">
                                        <div class="flex-1 mr-4">
                                            <h4 class="font-semibold text-lg text-gray-900 dark:text-white">{{ $appointment->title }}</h4>
                                            <p class="text-sm text-gray-600 dark:text-gray-400">Tarih: {{ $appointment->start->format('d.m.Y H:i') }}</p>
                                            @if ($appointment->doctor)
                                                <p class="text-sm text-gray-600 dark:text-gray-400">Doktor: {{ $appointment->doctor->name }}</p>
                                            @endif
                                            <p class="text-sm {{ $statusColor }}">Durum: {{ $statusLabels[$appointment->status] ?? ucfirst($appointment->status) }}</p>
                                        </div>
                                    </div>

                                    <div id="existing-notes-{{ $appointment->id }}" class="mt-3 space-y-2">
                                        @if (!empty($descriptions) && count($descriptions) > 0)
                                            @foreach($descriptions as $index => $desc)
                                                @if(isset($desc['note']) && !empty($desc['note']))
                                                    <div class="p-3 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-600 rounded-lg">
                                                        <div class="flex justify-between items-start mb-1">
                                                            <h5 class="font-medium text-sm text-blue-800 dark:text-blue-200 flex items-center">📝 Not #{{ $index + 1 }}</h5>
                                                            @if(isset($desc['created_at']))
                                                                <span class="text-xs text-blue-600 dark:text-blue-400">
                                                                    {{ \Carbon\Carbon::parse($desc['created_at'])->format('d.m.Y H:i') }}
                                                                </span>
                                                            @endif
                                                        </div>
                                                        <p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">{{ $desc['note'] }}</p>
                                                    </div>
                                                @endif
                                            @endforeach
                                        @endif
                                    </div>

                                    <div class="mt-4 border-t border-gray-200 dark:border-gray-600 pt-4">
                                        <div class="flex items-center justify-between mb-3">
                                            <h5 class="font-medium text-sm text-gray-700 dark:text-gray-300">Yeni Not Ekle</h5>
                                        </div>

                                        <div x-data="{ noteFields: [{ id: Date.now(), value: '' }] }">
                                            <template x-for="(field, index) in noteFields" :key="field.id">
                                                <div class="space-y-3 mb-3 p-3 bg-white dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
                                                    <div class="flex justify-between items-center">
                                                        <span class="text-xs font-medium text-gray-500 dark:text-gray-400" x-text="'Not #' + (index + 1)"></span>
                                                        <button
                                                            type="button"
                                                            @click="noteFields = noteFields.filter((_, i) => i !== index)"
                                                            x-show="noteFields.length > 1"
                                                            class="text-red-600 hover:text-red-700 text-xs"
                                                        >
                                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                                            </svg>
                                                        </button>
                                                    </div>
                                                    <textarea
                                                        x-model="field.value"
                                                        rows="3"
                                                        placeholder="Not içeriğini yazın..."
                                                        class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 resize-none"
                                                    ></textarea>
                                                    <button
                                                        type="button"
                                                        @click="saveNote({{ $appointment->id }}, field.value, () => {
                                                            field.value = '';
                                                            if (noteFields.length > 1) noteFields = noteFields.filter((_, i) => i !== index);
                                                        })"
                                                        :disabled="!field.value.trim()"
                                                        class="w-full flex items-center justify-center gap-2 px-4 py-2.5 border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 rounded-lg text-sm font-medium transition-all duration-200"
                                                    >
                                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                                        </svg>
                                                        <span>Kaydet ve Başka Bir Not Ekle</span>
                                                    </button>
                                                </div>
                                            </template>
                                        </div>

                                        <div id="note-error-{{ $appointment->id }}" class="hidden mt-2 text-sm text-red-600 dark:text-red-400"></div>
                                    </div>

                                    @if ($appointment->appointmentUserServices->isNotEmpty())
                                        <div class="mt-3 border-t border-gray-200 dark:border-gray-600 pt-3">
                                            <h5 class="font-medium text-sm mb-3 text-gray-700 dark:text-gray-300">Alınan Hizmetler:</h5>
                                            <div class="overflow-x-auto">
                                                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600 border border-gray-300 dark:border-gray-600 rounded-lg">
                                                    <thead class="bg-gray-50 dark:bg-gray-700">
                                                    <tr>
                                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border-b dark:border-gray-600">Hizmet Adı</th>
                                                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border-b dark:border-gray-600">Miktar</th>
                                                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border-b dark:border-gray-600">Birim Fiyat</th>
                                                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border-b dark:border-gray-600">Toplam</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-600">
                                                    @foreach($appointment->appointmentUserServices as $index => $service)
                                                        @if ($service->service)
                                                            @php
                                                                $bgColor = $index % 2 == 0 ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-700';
                                                                $quantity = $service->quantity ?? 1;
                                                                $unitPrice = $quantity > 0 ? ($service->total / $quantity) : $service->total;
                                                            @endphp
                                                            <tr class="{{ $bgColor }}">
                                                                <td class="px-4 py-3 text-sm text-gray-900 dark:text-white border-r dark:border-gray-600">{{ $service->service->name }}</td>
                                                                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400 text-right border-r dark:border-gray-600">{{ $quantity }}</td>
                                                                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400 text-right border-r dark:border-gray-600">₺{{ number_format($unitPrice, 2) }}</td>
                                                                <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white text-right">₺{{ number_format($service->total, 2) }}</td>
                                                            </tr>
                                                        @endif
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        @else
                            <div class="text-center py-8 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                @switch($status)
                                    @case('scheduled')
                                        <p class="text-blue-600 dark:text-blue-400 font-medium">📅 Planlanmış randevu bulunamadı</p>
                                        <p class="text-sm mt-1">Henüz planlanmış bir randevu bulunmamaktadır.</p>
                                        @break
                                    @case('completed')
                                        <p class="text-green-600 dark:text-green-400 font-medium">✅ Tamamlanmış randevu bulunamadı</p>
                                        <p class="text-sm mt-1">Henüz tamamlanmış bir randevu bulunmamaktadır.</p>
                                        @break
                                    @default
                                        <p class="font-medium">Bu kategoride randevu bulunamadı</p>
                                @endswitch
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        @endif
    </div>
@else
    <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
        <p class="text-yellow-800 dark:text-yellow-200">Danışan bilgileri yüklenemedi.</p>
    </div>
@endif