@extends('layouts.app')

@section('content')
    <div class="vstack gap-4">
        <!-- Page Header -->
        <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-md-between gap-3">
            <div>
                <h2 class="fs-2 fw-bold text-dark mb-0">Activity Logs</h2>
                <p class="text-secondary small mb-0">Clinical actions and patient timeline</p>
            </div>
            
            <!-- Filter Options (Future Enhancement) -->
            <div class="d-flex gap-2">
                <select class="form-select form-select-sm" style="width: auto;">
                    <option selected>All Actions</option>
                    <option>Prescriptions</option>
                    <option>Lab Reviews</option>
                    <option>Consultations</option>
                    <option>Intake Updates</option>
                </select>
                <select class="form-select form-select-sm" style="width: auto;">
                    <option selected>All Status</option>
                    <option>Approved</option>
                    <option>Pending</option>
                    <option>Completed</option>
                    <option>Cancelled</option>
                </select>
            </div>
        </div>

        <!-- Activity Timeline -->
        <div class="card border shadow-sm">
            <div class="card-header bg-white border-bottom d-flex align-items-center justify-content-between">
                <h3 class="fw-semibold mb-0">Patient Timeline</h3>
                <span class="small text-secondary">Showing {{ $activityLogs->count() }} recent activities</span>
            </div>
            <div class="card-body p-0">
                @if($activityLogs && $activityLogs->count() > 0)
                    <div class="list-group list-group-flush">
                        @foreach($activityLogs as $log)
                            <div class="list-group-item py-3 hover-bg-light">
                                <div class="d-flex align-items-start gap-3">
                                    <!-- Patient Initials Avatar -->
                                    <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary bg-opacity-10 text-primary fw-bold flex-shrink-0" style="width: 2.5rem; height: 2.5rem; font-size: 0.75rem;">
                                        {{ $log->patient_initials ?? substr($log->patient_name, 0, 2) }}
                                    </div>
                                    
                                    <!-- Activity Content -->
                                    <div class="flex-grow-1 min-w-0">
                                        <p class="mb-1 fw-medium text-dark">{{ $log->description }}</p>
                                        <p class="mb-1 small text-secondary">
                                            <span class="fw-medium">{{ $log->patient_name }}</span>
                                            @if($log->reference_number)
                                                <span class="text-muted mx-1">•</span>
                                                <span>{{ $log->reference_number }}</span>
                                            @endif
                                        </p>
                                        @if($log->details)
                                            <p class="mb-1 small text-muted">{{ $log->details }}</p>
                                        @endif
                                        <p class="mb-0 small text-muted">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="14" height="14" class="d-inline-block me-1">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                                            </svg>
                                            {{ $log->performed_at->format('M j, g:i A') }}
                                            <span class="text-muted mx-1">•</span>
                                            {{ $log->time_since }}
                                            @if($log->performed_by)
                                                <span class="text-muted mx-1">•</span>
                                                <span>{{ $log->performed_by }}</span>
                                            @endif
                                        </p>
                                    </div>
                                    
                                    <!-- Status Badge -->
                                    @if($log->status)
                                        <div class="flex-shrink-0">
                                            <span class="badge bg-{{ $log->status_color }} bg-opacity-25 text-{{ $log->status_color }} text-capitalize">
                                                {{ $log->status }}
                                            </span>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="p-5 text-center text-secondary">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="48" height="48" class="mx-auto mb-3 opacity-50">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
                        </svg>
                        <p class="mb-0">No activity recorded yet</p>
                    </div>
                @endif
            </div>
        </div>

        <!-- Activity Stats (Optional) -->
        <div class="row g-3">
            <div class="col-md-3">
                <div class="card border shadow-sm">
                    <div class="card-body text-center">
                        <div class="fs-3 fw-bold text-success">{{ $stats['approved'] ?? 0 }}</div>
                        <div class="small text-secondary">Approved</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card border shadow-sm">
                    <div class="card-body text-center">
                        <div class="fs-3 fw-bold text-warning">{{ $stats['pending'] ?? 0 }}</div>
                        <div class="small text-secondary">Pending</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card border shadow-sm">
                    <div class="card-body text-center">
                        <div class="fs-3 fw-bold text-info">{{ $stats['completed'] ?? 0 }}</div>
                        <div class="small text-secondary">Completed</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card border shadow-sm">
                    <div class="card-body text-center">
                        <div class="fs-3 fw-bold text-danger">{{ $stats['cancelled'] ?? 0 }}</div>
                        <div class="small text-secondary">Cancelled</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .hover-bg-light:hover {
            background-color: rgba(0, 0, 0, 0.02);
            cursor: pointer;
        }
    </style>
@endsection