@props(['logs'])

@php
    $classArray = ['success', 'danger', 'warning', 'primary', 'info', 'muted'];
@endphp

<style>
    .timeline {
        position: relative;
        margin: 1rem 0;
    }

    .timeline::before {
        content: '';
        position: absolute;
        left: 120px; /* Position the vertical line away from the left edge */
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: #dee2e6;
    }

    .timeline-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 2rem;
        position: relative;
    }

    .timeline-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 110px; /* Align marker with the timeline line */
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        border: 3px solid;
        z-index: 1;
    }

    .timeline-date {
        width: 120px;
        text-align: left;
        font-size: 0.9rem;
        color: #6c757d;
        padding-left: 10px;
    }

    .timeline-content {
	    flex-grow: 1;
	    padding-left: 2rem;
	    font-size: 0.95rem; /* Adjust this value as needed */
	}

    @media (max-width: 768px) {
        .timeline::before {
            left: 20px;
        }

        .timeline-item {
            flex-direction: column;
        }

        .timeline-item::before {
            left: 20px;
        }

        .timeline-date,
        .timeline-content {
            width: 100%;
            padding-left: 0;
        }

        .timeline-content {
            margin-top: 0.5rem;
        }
    }
</style>

<div class="activity-log-section">
    <h5 class="mb-3">
        <i class="bi bi-briefcase-fill text-success"></i>&nbsp;Activity Log
    </h5>
    <hr/>

    <div class="timeline">
       @forelse($logs as $index => $data)
    @php
        $classText = $classArray[$index % count($classArray)] ?? 'primary';
        $createdAt = $data->created_at ?? null;
    @endphp

    <div class="timeline-item">
        <style>
            .timeline-item:nth-child({{ $index + 1 }})::before {
                border-color: var(--bs-{{ $classText }});
            }
        </style>

        <div class="timeline-date">
            {{ $createdAt ? date('d M Y', strtotime($createdAt)) : '-' }}<br>
            {{ $createdAt ? date('h:i A', strtotime($createdAt)) : '-' }}
        </div>

        <div class="timeline-content">
            <div class="fw-bold">
                {{ $data->activity ?? 'No activity' }}
            </div>
            <div class="text-muted small">
                <div><strong>User:</strong> {{ $data->user->name ?? 'Unknown' }}</div>
                <div><strong>IP Address:</strong> {{ $data->user_ip ?? 'N/A' }}</div>
                <div><strong>Logged At:</strong> 
                    {{ $createdAt ? date('m/d/Y h:i:s A', strtotime($createdAt)) : '-' }}
                </div>
            </div>
        </div>
    </div>
@empty
    <div class="alert alert-info">No activity logs found.</div>
@endforelse

    </div>
</div>