@forelse($sale->activities->sortByDesc('created_at') as $activity)
    @php
        $iconClass = $activity->activity_type_icon;
        $typeLabel = $activity->activity_type_label;
    @endphp

    <div class="sqv-feed-item {{ $activity->is_pinned ? 'pinned' : '' }} {{ $activity->is_important ? 'important' : '' }} d-flex gap-3" data-id="{{ $activity->id }}">
        
        {{-- Left Timeline Icon --}}
        <div class="sqv-feed-icon-wrapper d-flex flex-column align-items-center">
            <div class="sqv-feed-icon-circle bg-white border d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.05); z-index: 2;">
                <i class="fas {{ strtok($iconClass, ' ') }} {{ strstr($iconClass, ' ') }}" style="font-size: 1.1rem;"></i>
            </div>
            <div class="sqv-feed-line flex-grow-1" style="width: 2px; background: #e2e8f0; margin-top: 5px; margin-bottom: 5px;"></div>
        </div>

        {{-- Feed Card Body --}}
        <div class="sqv-feed-card flex-grow-1 bg-white border p-3 mb-3" style="border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.02);">
            <div class="sqv-feed-card-header d-flex justify-content-between align-items-center border-bottom pb-2">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    @if($activity->is_pinned)
                        <span class="badge bg-warning text-dark" style="font-size: 0.65rem; font-weight: 800; border-radius: 6px;">
                            <i class="fas fa-thumbtack me-1"></i> Sabitlendi
                        </span>
                    @endif
                    <span class="sqv-feed-type-label fw-bold" style="font-size: 0.85rem; color: #0f172a;">{{ $typeLabel }}</span>
                    <span class="sqv-feed-time text-muted" style="font-size: 0.75rem;">{{ $activity->created_at->translatedFormat('d F Y, H:i') }}</span>
                    @if($activity->due_date)
                        <span class="badge bg-light text-danger border ms-1" style="font-size: 0.7rem; border-radius: 6px;">
                            <i class="fas fa-clock me-1"></i> Bitiş: {{ $activity->due_date->translatedFormat('d M H:i') }}
                        </span>
                    @endif
                </div>
                
                {{-- Right Actions & Performer --}}
                <div class="d-flex align-items-center gap-2">
                    <span class="sqv-feed-performer text-muted" style="font-size: 0.75rem; font-weight: 600; background: #f1f5f9; padding: 2px 8px; border-radius: 6px;">
                        {{ $activity->performer->full_name ?? 'Sistem' }}
                    </span>
                    
                    {{-- Dropdown Actions --}}
                    <div class="dropdown">
                        <button class="btn btn-link btn-sm text-muted p-0 border-0 shadow-none" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end shadow-sm border" style="font-size: 0.82rem; border-radius: 10px;">
                            <li>
                                <a class="dropdown-item py-2" href="javascript:void(0)" onclick="togglePinActivity({{ $activity->id }})">
                                    <i class="fas fa-thumbtack me-2 text-warning"></i> {{ $activity->is_pinned ? 'Sabitlemeyi Kaldır' : 'Sabitle' }}
                                </a>
                            </li>
                            <li>
                                <hr class="dropdown-divider m-0">
                            </li>
                            <li>
                                <a class="dropdown-item py-2 text-danger" href="javascript:void(0)" onclick="deleteActivity({{ $activity->id }})">
                                    <i class="fas fa-trash me-2"></i> Sil
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="sqv-feed-card-body mt-2">
                @if($activity->subject)
                    <h6 class="sqv-feed-subject fw-bold mb-2" style="font-size: 0.9rem; color: #1e293b;">
                        {{ $activity->subject }}
                    </h6>
                @endif
                
                @if($activity->description)
                    <div class="sqv-feed-desc text-muted" style="font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap;">{{ $activity->description }}</div>
                @endif

                {{-- Attachments --}}
                @if($activity->attachments && is_array($activity->attachments))
                    <div class="sqv-feed-attachments mt-3 pt-2 border-top">
                        <span class="d-block mb-2 text-muted fw-bold" style="font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;">Dosyalar:</span>
                        <div class="d-flex flex-column gap-2">
                            @foreach($activity->attachments as $file)
                                <div class="sqv-attachment-item d-flex align-items-center justify-content-between p-2 rounded bg-light border" style="font-size: 0.8rem; border-radius: 10px !important;">
                                    <div class="d-flex align-items-center gap-2 overflow-hidden">
                                        @php
                                            $ext = pathinfo($file['name'], PATHINFO_EXTENSION);
                                            $isExcel = in_array(strtolower($ext), ['xls', 'xlsx', 'csv']);
                                            $fileIcon = $isExcel ? 'fa-file-excel text-success' : 'fa-file-alt text-primary';
                                        @endphp
                                        <i class="far {{ $fileIcon }}" style="font-size: 1.1rem;"></i>
                                        <a href="/storage/{{ $file['path'] }}" target="_blank" class="text-decoration-none text-primary fw-bold text-truncate" title="{{ $file['name'] }}" style="max-width: 250px;">
                                            {{ $file['name'] }}
                                        </a>
                                        <span class="text-muted small" style="font-size: 0.7rem;">({{ number_format(($file['size'] ?? 0) / 1024, 2) }} KB)</span>
                                    </div>
                                    <a href="/storage/{{ $file['path'] }}" download class="btn btn-link btn-sm text-secondary p-0 border-0 shadow-none"><i class="fas fa-download"></i></a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>

            {{-- Pin status toggle action button under card (like the screenshot "SABİTLEMEYİ KALDIR") --}}
            @if($activity->is_pinned)
                <div class="sqv-feed-card-footer mt-2 pt-2 border-top d-flex justify-content-start">
                    <button class="btn btn-light border btn-sm py-1 px-3 d-flex align-items-center gap-2 text-warning" style="font-size: 0.72rem; font-weight: 800; border-radius: 8px;" onclick="togglePinActivity({{ $activity->id }})">
                        <i class="fas fa-thumbtack"></i> SABİTLEMEYİ KALDIR
                    </button>
                </div>
            @endif
        </div>
    </div>
@empty
    <div class="text-center py-5 text-muted bg-white border rounded-3 p-4" style="border-radius: 16px !important;">
        <i class="far fa-comments mb-3" style="font-size: 2.5rem; opacity: 0.4;"></i>
        <p class="mb-1 fw-bold">Henüz bir aktivite kaydı bulunmuyor.</p>
        <p class="small text-muted mb-0">Yandaki panelden yeni bir yorum, görev veya etkinlik ekleyebilirsiniz.</p>
    </div>
@endforelse