@props([
    'logs' => collect(),
])

<div class="fluent-timeline">

    @php
        $grouped = $logs->groupBy(function ($log) {
            return \Carbon\Carbon::parse($log->created_at)->isToday()
                ? 'Hari ini'
                : (\Carbon\Carbon::parse($log->created_at)->isYesterday() ? 'Kemarin' : $log->created_at->format('d M Y'));
        });
    @endphp

    @foreach($grouped as $date => $items)
        <div class="fluent-timeline__group">

            <div class="fluent-timeline__date">
                {{ $date }}
            </div>

            @foreach($items as $log)
                <div class="fluent-timeline__item">

                    <div class="fluent-timeline__dot 
                        @switch($log->action)
                            @case('create') is-success @break
                            @case('update') is-primary @break
                            @case('delete') is-danger @break
                            @default is-default
                        @endswitch
                    ">
                    </div>

                    <div class="fluent-timeline__content">

                        <div class="fluent-timeline__title">
                            <strong>{{ $log->user?->name }}</strong>
                            {{ $log->action }}
                            <span class="text-muted">{{ $log->model }}</span>
                        </div>

                        <div class="fluent-timeline__meta">
                            <span class="fluent-timeline__url" title="{{ $log->request_url }}">
                                {{ $log->request_url }}
                            </span>

                            <span class="fluent-timeline__time">
                                {{ $log->created_at->diffForHumans() }}
                            </span>
                        </div>

                    </div>

                </div>
            @endforeach

        </div>
    @endforeach

</div>