@if($diff)
    <div class="collapse" id="collapseExample">
        <div class="card">
            <div class="card-header {{config('adminlte.bg-card-header', 'bg-info-gradient')}}">
                <div class="row">
                    <div class="col-md-12">
                        <h4 class="card-title">@lang('Changes')</h4>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-10 ml-2">
                        <ul class="timeline">
                            @foreach($diff as $change)
                                @switch($change['event'])
                                    @case('created')
                                    @case('deleted')
                                    @case('restored')
                                        <li>
                                            <i class="fa fa-envelope bg-blue"></i>
                                            <div class="timeline-item" style="width: 100%">
                                                <span class="time">
                                                    <i class="fa fa-clock-o"></i> {{\Carbon\Carbon::parse($change['created_at'])->diffForHumans()}}&nbsp;&nbsp;
                                                </span>
                                                <h4 class="timeline-header"><a href="#">{{$change['user']['name']}}</a></h4>
                                                <div class="timeline-body" style="width: 100%">
                                                    <div style="color:darkblue">{{ucfirst($change['event'])}}</div>
                                                </div>
                                            </div>
                                        </li>
                                        @break
                                    @case('updated')
                                        @foreach($change['old_values'] as $field => $value)
                                            <li>
                                                <i class="fa fa-envelope"></i>
                                                <div class="timeline-item" style="width: 100%">
                                                    <span class="time">
                                                        <i class="fa fa-clock-o"></i> {{\Carbon\Carbon::parse($change['created_at'])->diffForHumans()}}&nbsp;&nbsp;
                                                    </span>
                                                    <h4 class="timeline-header"><a href="#">{{$change['user']['name']}}</a></h4>
                                                    <div class="timeline-body" style="width: 100%">
                                                        {{-- <div style="color:darkblue">{{ucfirst($change['event'])}}</div> --}}
                                                        {{ucfirst($field)}}: 
                                                            <span style="font-weight:bold">(antes)</span> {{$change['old_values'][$field]}} 
                                                            <span style="font-weight:bold">=></span> 
                                                            <span style="font-weight:bold">(ahora)</span> {{$change['new_values'][$field]}}
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach
                                        @break
                                @endswitch
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif