{{-- Approval History Component --}}
<div class="approval-history-section mb-3">
    @php
        $timelineColor = $history['status'] === 'approve' ? 'success' : 'danger';
        $bgColor = $history['status'] === 'approve' ? '#d4edda' : '#f8d7da';
    @endphp
    
    {{-- Timeline style approval card --}}
    <div class="bg-light border-start border-3 border-{{ $timelineColor }} p-3 position-relative rounded">
        {{-- Timeline dot --}}
        <div class="position-absolute" style="left: -8px; top: 50%; transform: translateY(-50%);">
            <div class="bg-{{ $timelineColor }} rounded-circle shadow-sm d-flex align-items-center justify-content-center"
                style="width: 16px; height: 16px;">
                <div class="bg-white rounded-circle" style="width: 6px; height: 6px;"></div>
            </div>
        </div>

        {{-- Content --}}
        <div class="row align-items-start">
            <div class="col-12">
                {{-- Header with admin name and badge --}}
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <div>
                        <h6 class="text-sm font-weight-bold mb-1 text-{{ $timelineColor }}">
                            {{ $history['admin_name'] }}
                        </h6>
                        <p class="text-xs text-muted mb-0">
                            <i class="far fa-clock me-1"></i>
                            {{ $history['formatted_date'] }}
                        </p>
                    </div>
                    <span class="badge bg-{{ $timelineColor }} badge-sm">
                        {{ $history['badge_text'] }}
                    </span>
                </div>

                {{-- Catatan section --}}
                @if ($history['status'] === 'rejected')
                    @if ($history['catatan'])
                        <div class="mt-3 p-2 rounded" style="background-color: {{ $bgColor }};">
                            <small class="text-muted d-block mb-1">
                                <i class="fas fa-comment-dots me-1"></i>
                                Catatan Penolakan:
                            </small>
                            <p class="text-sm text-{{ $timelineColor }} mb-0">
                                <i class="fas fa-quote-left me-1"></i>
                                <em>{{ $history['catatan'] }}</em>
                            </p>
                        </div>
                    @else
                        <div class="mt-3 p-2 rounded" style="background-color: {{ $bgColor }};">
                            <p class="text-xs text-muted mb-0">
                                <i class="fas fa-info-circle me-1"></i>
                                Tidak ada catatan penolakan
                            </p>
                        </div>
                    @endif
                @elseif ($history['status'] === 'approve' && $history['catatan'])
                    <div class="mt-3 p-2 rounded" style="background-color: {{ $bgColor }};">
                        <small class="text-muted d-block mb-1">
                            <i class="fas fa-comment-dots me-1"></i>
                            Catatan:
                        </small>
                        <p class="text-sm text-{{ $timelineColor }} mb-0">
                            <i class="fas fa-quote-left me-1"></i>
                            <em>{{ $history['catatan'] }}</em>
                        </p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Custom CSS for responsive adjustments --}}
<style>
/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .approval-history-section .badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
    
    .approval-history-section h6 {
        font-size: 0.9rem;
    }
    
    .approval-history-section .p-3 {
        padding: 0.75rem !important;
    }
}

/* Small mobile adjustments */
@media (max-width: 576px) {
    .approval-history-section .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }
    
    .approval-history-section .badge {
        margin-top: 0.5rem;
    }
}
</style>