{% extends 'base/base.html' %}
{% load static humanize %}

{% block title %}Equipment Approval Queue | {{ block.super }}{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="mb-0">Equipment Approval Queue</h1>
        <a href="{% url 'equipment:list' %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back to Equipment
        </a>
    </div>
    
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}
    
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-light">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Pending Approval ({{ pending_equipment|length }})</h5>
                <form method="post" action="{% url 'equipment:bulk_approve' %}" class="d-inline" id="bulk-approve-form">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-success btn-sm" id="bulk-approve-btn" disabled>
                        <i class="fas fa-check-circle me-1"></i> Approve Selected
                    </button>
                </form>
            </div>
        </div>
        
        {% if pending_equipment %}
            <form method="post" action="{% url 'equipment:bulk_approve' %}" id="approval-form">
                {% csrf_token %}
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th width="50">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="select-all">
                                    </div>
                                </th>
                                <th>Equipment</th>
                                <th>Listed By</th>
                                <th>Daily Rate</th>
                                <th>Listed On</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in pending_equipment %}
                            <tr>
                                <td>
                                    <div class="form-check">
                                        <input class="form-check-input item-checkbox" type="checkbox" 
                                               name="equipment_ids" value="{{ item.id }}">
                                    </div>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="{{ item.main_image.url|default:'/static/img/placeholder-equipment.jpg' }}" 
                                             alt="{{ item.name }}" 
                                             class="rounded me-3" 
                                             style="width: 60px; height: 45px; object-fit: cover;">
                                        <div>
                                            <h6 class="mb-0">{{ item.name }}</h6>
                                            <small class="text-muted">{% if item.equipment_model %}{{ item.equipment_model.make.name }} {{ item.equipment_model.name }}{% endif %}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-sm bg-light rounded-circle me-2 d-flex align-items-center justify-content-center">
                                            <i class="fas fa-user text-muted"></i>
                                        </div>
                                        <div>
                                            <div>{{ item.owner.get_full_name|default:item.owner.username }}</div>
                                            <small class="text-muted">{{ item.owner.email }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>${{ item.daily_rate|floatformat:2 }}</td>
                                <td>{{ item.created_at|date:"M d, Y" }}</td>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a href="{% url 'equipment:detail' item.slug %}" 
                                           class="btn btn-outline-primary" 
                                           title="View">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{% url 'equipment:update' item.slug %}" 
                                           class="btn btn-outline-secondary" 
                                           title="Review">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </form>
        {% else %}
            <div class="text-center py-5">
                <div class="mb-4">
                    <i class="fas fa-check-circle fa-4x text-success"></i>
                </div>
                <h5>No pending approvals</h5>
                <p class="text-muted">All equipment listings have been reviewed.</p>
            </div>
        {% endif %}
    </div>
    
    <!-- Recently Approved -->
    <div class="card shadow-sm">
        <div class="card-header bg-light">
            <h5 class="mb-0">Recently Approved</h5>
        </div>
        <div class="card-body">
            {% if recently_approved %}
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Equipment</th>
                                <th>Approved By</th>
                                <th>Approved On</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in recently_approved %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="{{ item.main_image.url|default:'/static/img/placeholder-equipment.jpg' }}" 
                                             alt="{{ item.name }}" 
                                             class="rounded me-2" 
                                             style="width: 40px; height: 30px; object-fit: cover;">
                                        <div>
                                            <div class="fw-medium">{{ item.name }}</div>
                                            <small class="text-muted">{% if item.equipment_model %}{{ item.equipment_model.make.name }} {{ item.equipment_model.name }}{% endif %}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>{{ item.updated_by.get_full_name|default:item.updated_by.username }}</td>
                                <td>{{ item.updated_at|date:"M d, Y" }}</td>
                                <td>
                                    {% if item.is_available %}
                                        <span class="badge bg-success">Available</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Unavailable</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <p class="text-muted text-center mb-0">No recently approved items.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAll = document.getElementById('select-all');
    const checkboxes = document.querySelectorAll('.item-checkbox');
    const bulkApproveBtn = document.getElementById('bulk-approve-btn');
    const bulkApproveForm = document.getElementById('bulk-approve-form');
    
    // Toggle select all checkboxes
    if (selectAll) {
        selectAll.addEventListener('change', function() {
            checkboxes.forEach(checkbox => {
                checkbox.checked = selectAll.checked;
            });
            updateBulkApproveButton();
        });
    }
    
    // Update select all checkbox when individual checkboxes change
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            if (selectAll) {
                selectAll.checked = [...checkboxes].every(cb => cb.checked);
            }
            updateBulkApproveButton();
        });
    });
    
    // Update bulk approve button state
    function updateBulkApproveButton() {
        if (bulkApproveBtn) {
            const checkedBoxes = document.querySelectorAll('.item-checkbox:checked');
            bulkApproveBtn.disabled = checkedBoxes.length === 0;
        }
    }
    
    // Handle bulk approve form submission
    if (bulkApproveForm) {
        bulkApproveForm.addEventListener('submit', function(e) {
            const checkedBoxes = document.querySelectorAll('.item-checkbox:checked');
            if (checkedBoxes.length === 0) {
                e.preventDefault();
                return false;
            }
            return confirm(`Are you sure you want to approve ${checkedBoxes.length} item(s)?`);
        });
    }
    
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});
</script>
{% endblock %}