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

{% block title %}My Equipment Listings | {{ 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">My Equipment Listings</h1>
        <a href="{% url 'equipment:list_equipment' %}" class="btn btn-primary">
            <i class="fas fa-plus me-2"></i>List New Equipment
        </a>
    </div>
    
    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-md-4 mb-3">
            <div class="card h-100 border-primary">
                <div class="card-body text-center">
                    <h2 class="display-4 text-primary">{{ stats.total }}</h2>
                    <p class="card-text">Total Listings</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card h-100 border-success">
                <div class="card-body text-center">
                    <h2 class="display-4 text-success">{{ stats.approved }}</h2>
                    <p class="card-text">Approved</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card h-100 border-warning">
                <div class="card-body text-center">
                    <h2 class="display-4 text-warning">{{ stats.pending }}</h2>
                    <p class="card-text">Pending Review</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Equipment List -->
    <div class="card shadow-sm">
        <div class="card-header bg-light">
            <h5 class="mb-0">My Equipment</h5>
        </div>
        <div class="card-body p-0">
            {% if listings %}
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Equipment</th>
                                <th>Status</th>
                                <th>Daily Rate</th>
                                <th>Listed On</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in listings %}
                            <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-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>
                                    {% if item.listing_status == 'approved' %}
                                        {% if item.is_available %}
                                            <span class="badge bg-success">Available</span>
                                        {% else %}
                                            <span class="badge bg-secondary">Unavailable</span>
                                        {% endif %}
                                    {% elif item.listing_status == 'pending' %}
                                        <span class="badge bg-warning">Pending Review</span>
                                    {% elif item.listing_status == 'rejected' %}
                                        <span class="badge bg-danger">Rejected</span>
                                    {% endif %}
                                </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="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        {% if item.listing_status == 'approved' %}
                                            <button type="button" 
                                                    class="btn btn-outline-{% if item.is_available %}warning{% else %}success{% endif %} toggle-availability" 
                                                    data-url="{% url 'equipment:toggle_availability' item.pk %}"
                                                    title="{% if item.is_available %}Mark as Unavailable{% else %}Mark as Available{% endif %}">
                                                <i class="fas fa-{% if item.is_available %}times{% else %}check{% endif %}"></i>
                                            </button>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="text-center py-5">
                    <div class="mb-4">
                        <i class="fas fa-camera fa-4x text-muted"></i>
                    </div>
                    <h5>No equipment listings found</h5>
                    <p class="text-muted">You haven't listed any equipment for rent yet.</p>
                    <a href="{% url 'equipment:list_equipment' %}" class="btn btn-primary mt-2">
                        <i class="fas fa-plus me-2"></i>List Your First Item
                    </a>
                </div>
            {% endif %}
        </div>
        {% if is_paginated %}
            <div class="card-footer bg-white">
                <nav aria-label="Equipment pagination">
                    <ul class="pagination justify-content-center mb-0">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">&laquo;</span>
                            </li>
                        {% endif %}
                        
                        {% for i in paginator.page_range %}
                            {% if page_obj.number == i %}
                                <li class="page-item active">
                                    <span class="page-link">{{ i }}</span>
                                </li>
                            {% else %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ i }}">{{ i }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">&raquo;</span>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle availability with AJAX
    document.querySelectorAll('.toggle-availability').forEach(button => {
        button.addEventListener('click', function() {
            const url = this.getAttribute('data-url');
            const icon = this.querySelector('i');
            const isAvailable = icon.classList.contains('fa-times');
            
            fetch(url, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRFTTOKEN': '{{ csrf_token }}'
                },
                body: new URLSearchParams({
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    // Toggle button appearance
                    if (data.is_available) {
                        this.classList.remove('btn-outline-success');
                        this.classList.add('btn-outline-warning');
                        this.setAttribute('title', 'Mark as Unavailable');
                        icon.className = 'fas fa-times';
                    } else {
                        this.classList.remove('btn-outline-warning');
                        this.classList.add('btn-outline-success');
                        this.setAttribute('title', 'Mark as Available');
                        icon.className = 'fas fa-check';
                    }
                    
                    // Show success message
                    const toast = document.createElement('div');
                    toast.className = 'toast align-items-center text-white bg-success border-0 position-fixed bottom-0 end-0 m-3';
                    toast.setAttribute('role',alert);
                    toast.setAttribute('aria-live', 'assertive');
                    toast.setAttribute('aria-atomic', 'true');
                    toast.innerHTML = `
                        <div class="d-flex">
                            <div class="toast-body">
                                <i class="fas fa-check-circle me-2"></i>
                                Equipment is now marked as ${data.status_display}.
                            </div>
                            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                        </div>
                    `;
                    document.body.appendChild(toast);
                    
                    const bsToast = new bootstrap.Toast(toast);
                    bsToast.show();
                    
                    // Remove toast after it's hidden
                    toast.addEventListener('hidden.bs.toast', function() {
                        document.body.removeChild(toast);
                    });
                }
            })
            .catch(error => console.error('Error:', error));
        });
    });
});
</script>
{% endblock %}