{% load tz %}

<div class="card mb-4">
    <div class="card-header bg-light d-flex justify-content-between align-items-center">
        <h5 class="mb-0">
            <i class="fas fa-history me-2"></i>Status History
        </h5>
        <span class="badge bg-primary">{{ booking.status_logs.count }} update{{ booking.status_logs.count|pluralize }}</span>
    </div>
    <div class="card-body p-0">
        {% if booking.status_logs.exists %}
            <div class="list-group list-group-flush">
                {% for log in booking.status_logs.all %}
                    <div class="list-group-item">
                        <div class="d-flex align-items-start">
                            <div class="flex-shrink-0 me-3">
                                <div class="avatar-sm">
                                    <span class="avatar-title rounded-circle bg-soft-{{ log.status_badge }} text-{{ log.status_badge }} fw-bold">
                                        {{ log.new_status|slice:":1"|upper }}
                                    </span>
                                </div>
                            </div>
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <h6 class="mb-0">
                                        <span class="badge bg-{{ log.status_badge }}">
                                            {{ log.get_new_status_display }}
                                        </span>
                                        {% if log.old_status %}
                                            <small class="text-muted ms-2">
                                                <i class="fas fa-arrow-right"></i>
                                                <span class="text-{{ log.status_badge }}">
                                                    {{ log.get_old_status_display }}
                                                </span>
                                            </small>
                                        {% endif %}
                                    </h6>
                                    <small class="text-muted" data-bs-toggle="tooltip" title="{{ log.timestamp|localtime|date:'M j, Y g:i A' }}">
                                        <i class="far fa-clock me-1"></i>
                                        {{ log.timestamp|timesince }} ago
                                    </small>
                                </div>
                                
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <small class="text-muted">
                                            <i class="fas fa-user-edit me-1"></i>
                                            {{ log.changed_by.get_full_name|default:log.changed_by.email }}
                                        </small>
                                    </div>
                                </div>
                                
                                {% if log.notes %}
                                    <div class="mt-2 p-2 bg-light rounded small">
                                        <i class="fas fa-sticky-note me-1 text-muted"></i>
                                        {{ log.notes|linebreaksbr }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="text-center p-4">
                <div class="avatar-lg mx-auto mb-3">
                    <div class="avatar-title bg-soft-primary text-primary rounded-circle">
                        <i class="fas fa-info-circle fa-2x"></i>
                    </div>
                </div>
                <h5>No status history yet</h5>
                <p class="text-muted mb-0">
                    This booking was created on {{ booking.created_at|date:"M j, Y" }}. Status updates will appear here.
                </p>
            </div>
        {% endif %}
    </div>
    {% if booking.notes %}
        <div class="card-footer bg-light">
            <h6 class="mb-2">
                <i class="fas fa-sticky-note me-1"></i> Additional Notes
            </h6>
            <p class="mb-0">{{ booking.notes|linebreaksbr }}</p>
        </div>
    {% endif %}
</div>

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Format relative time
    function formatRelativeTime() {
        document.querySelectorAll('time[datetime]').forEach(function(time) {
            const date = new Date(time.getAttribute('datetime'));
            const now = new Date();
            const diffInSeconds = Math.floor((now - date) / 1000);
            
            let formattedTime;
            
            if (diffInSeconds < 60) {
                formattedTime = 'just now';
            } else if (diffInSeconds < 3600) {
                const minutes = Math.floor(diffInSeconds / 60);
                formattedTime = `${minutes} minute${minutes === 1 ? '' : 's'} ago`;
            } else if (diffInSeconds < 86400) {
                const hours = Math.floor(diffInSeconds / 3600);
                formattedTime = `${hours} hour${hours === 1 ? '' : 's'} ago`;
            } else if (diffInSeconds < 604800) {
                const days = Math.floor(diffInSeconds / 86400);
                formattedTime = `${days} day${days === 1 ? '' : 's'} ago`;
            } else {
                formattedTime = date.toLocaleDateString(undefined, { 
                    year: 'numeric', 
                    month: 'short', 
                    day: 'numeric' 
                });
            }
            
            time.textContent = formattedTime;
        });
    }
    
    // Initialize relative time formatting
    formatRelativeTime();
    
    // Update relative time every minute
    setInterval(formatRelativeTime, 60000);
});
</script>
{% endblock %}