{% load humanize %}
{% with equipment=booking.equipment %}
<article class="card booking-card h-100" 
         data-booking-number="{{ booking.booking_number }}"
         aria-label="Booking for {{ equipment.name }} - {{ booking.get_status_display }}">
    <div class="card-body p-0 d-flex flex-column h-100">
        <div class="row g-0 h-100">
            <!-- Equipment Image -->
            <div class="col-md-4 position-relative">
                <div class="h-100 w-100">
                    {% if equipment.image %}
                        {% with placeholder_url=STATIC_URL|add:'images/placeholder.jpg' %}
                            <img src="{{ equipment.image.url }}" 
                                 class="img-fluid h-100 w-100" 
                                 alt="{{ equipment.name }}" 
                                 style="object-fit: cover; min-height: 200px;"
                                 loading="lazy"
                                 onerror="this.onerror=null; this.src='{{ placeholder_url }}'"
                                 data-placeholder="{{ placeholder_url }}">
                        {% endwith %}
                    {% else %}
                        <div class="h-100 w-100 d-flex align-items-center justify-content-center bg-light">
                            <i class="fas fa-tools fa-4x text-muted"></i>
                        </div>
                    {% endif %}
                </div>
                
                <!-- Status Badge -->
                <span class="position-absolute top-3 end-3 badge bg-{{ booking.status|default:'secondary' }} bg-opacity-90 text-white">
                    <i class="fas {% if booking.status == 'confirmed' %}fa-check-circle{% elif booking.status == 'pending' %}fa-clock{% elif booking.status == 'cancelled' %}fa-times-circle{% else %}fa-info-circle{% endif %} me-1"></i>
                    {{ booking.get_status_display }}
                </span>
                
                <!-- Booking Dates -->
                <div class="position-absolute bottom-0 start-0 w-100 p-3" style="background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);">
                    <div class="text-white">
                        <div class="d-flex align-items-center mb-1">
                            <i class="far fa-calendar-alt me-2"></i>
                            <div>
                                <strong>{{ booking.start_date|date:"M j" }} - {{ booking.end_date|date:"M j, Y" }}</strong>
                                <div class="small">
                                    {{ booking.total_days }} day{{ booking.total_days|pluralize }}
                                    {% if booking.pickup_time %}
                                        • {{ booking.pickup_time|time:"g:i A" }}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Booking Details -->
            <div class="col-md-8 d-flex flex-column">
                <div class="card-body h-100 d-flex flex-column">
                    <!-- Equipment Info -->
                    <div class="mb-3">
                        <h3 class="h5 card-title mb-1">
                            <a href="{{ equipment.get_absolute_url }}" class="text-dark text-decoration-none hover-text-primary">
                                {{ equipment.name }}
                            </a>
                        </h3>
                        <p class="text-muted small mb-2">
                            <span class="d-inline-block me-2">
                                <i class="fas fa-tag me-1"></i> {{ equipment.category }}
                            </span>
                            <span class="d-inline-block">
                                <i class="fas fa-hashtag me-1"></i> {{ booking.booking_number }}
                            </span>
                        </p>
                    </div>
                    
                    <!-- Booking Summary -->
                    <div class="booking-summary mb-4">
                        <div class="row g-3">
                            <div class="col-6">
                                <div class="bg-light p-3 rounded-2 h-100">
                                    <div class="small text-muted mb-1">Total Amount</div>
                                    <div class="h5 mb-0 text-primary">KSh {{ booking.total_amount|intcomma }}</div>
                                    {% if booking.payment_status %}
                                        <span class="badge bg-{{ booking.payment_status|lower }} bg-opacity-10 text-{{ booking.payment_status|lower }} mt-1">
                                            {{ booking.get_payment_status_display }}
                                        </span>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="bg-light p-3 rounded-2 h-100">
                                    <div class="small text-muted mb-1">Pickup Location</div>
                                    <div class="mb-1">
                                        <i class="fas fa-map-marker-alt text-primary me-1"></i>
                                        {{ booking.pickup_location|default:equipment.location|default:"Not specified" }}
                                    </div>
                                    {% if booking.delivery_required %}
                                        <span class="badge bg-success bg-opacity-10 text-success small">
                                            <i class="fas fa-truck me-1"></i> Delivery Included
                                        </span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Actions -->
                    <div class="mt-auto pt-3 border-top">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted">
                                    Booked on {{ booking.created_at|date:"M j, Y" }}
                                </small>
                            </div>
                            <div class="d-flex gap-2">
                                <a href="{% url 'bookings:booking_detail' booking.booking_number %}" 
                                   class="btn btn-outline-primary btn-sm"
                                   aria-label="View booking details">
                                    <i class="far fa-eye me-1"></i> View
                                </a>
                                {% if booking.status == 'pending' %}
                                    <a href="{% url 'bookings:cancel_booking' booking.booking_number %}" 
                                       class="btn btn-outline-danger btn-sm"
                                       onclick="return confirm('Are you sure you want to cancel this booking?')"
                                       aria-label="Cancel booking">
                                        <i class="far fa-times-circle me-1"></i> Cancel
                                    </a>
                                {% endif %}
                                {% if booking.status == 'confirmed' and not booking.is_past %}
                                    <a href="{% url 'bookings:modify_booking' booking.booking_number %}" 
                                       class="btn btn-outline-secondary btn-sm"
                                       aria-label="Modify booking">
                                        <i class="far fa-edit me-1"></i> Modify
                                    </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Progress Bar -->
    {% if booking.status == 'in_progress' %}
    <div class="progress rounded-0" style="height: 4px;">
        <div class="progress-bar bg-primary" 
             role="progressbar" 
             style="width: {{ booking.progress_percentage|default:0 }}%" 
             aria-valuenow="{{ booking.progress_percentage|default:0 }}" 
             aria-valuemin="0" 
             aria-valuemax="100">
            <span class="visually-hidden">{{ booking.progress_percentage|default:0 }}% complete</span>
        </div>
    </div>
    {% endif %}
</article>

<style>
    .booking-card {
        --card-border-radius: 0.75rem;
        transition: all 0.2s ease-in-out;
    }
    
    .booking-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08) !important;
    }
    
    .booking-summary .bg-light {
        transition: all 0.2s ease;
    }
    
    .booking-card:hover .booking-summary .bg-light {
        background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
    }
    
    .hover-text-primary:hover {
        color: var(--bs-primary) !important;
    }
    
    /* Status badges */
    .bg-confirmed {
        background-color: #198754 !important;
    }
    
    .bg-pending {
        background-color: #ffc107 !important;
        color: #000 !important;
    }
    
    .bg-cancelled {
        background-color: #dc3545 !important;
    }
    
    .bg-completed {
        background-color: #0d6efd !important;
    }
    
    /* Responsive adjustments */
    @media (max-width: 767.98px) {
        .booking-card .col-md-4 {
            height: 200px;
        }
        
        .booking-card .col-md-8 {
            height: auto;
        }
        
        .booking-actions {
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .booking-actions .btn {
            width: 100%;
        }
    }
    
    /* Animation for status changes */
    @keyframes fadeIn {
        from { 
            opacity: 0; 
            transform: translateY(10px); 
        }
        to { 
            opacity: 1; 
            transform: translateY(0); 
        }
    }
    
    .booking-card {
        animation: fadeIn 0.3s ease-out;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl, {
                trigger: 'hover focus'
            });
        });
        
        // Add loading state to action buttons
        document.querySelectorAll('.booking-card .btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                if (this.getAttribute('href') && !this.classList.contains('disabled')) {
                    const card = this.closest('.booking-card');
                    card.classList.add('is-loading');
                    
                    // Remove loading state if navigation is prevented
                    setTimeout(() => {
                        if (card.classList.contains('is-loading')) {
                            card.classList.remove('is-loading');
                        }
                    }, 5000);
                }
            });
        });
    });
</script>
{% endwith %}