{% extends "hangarready/base.html" %}
{% load static %}

{% block page_subtitle %}
    - Search Results
{% endblock %}

{% block hangar_content %}
<div class="row mb-3">
    <div class="col-lg-12">
        <a href="{% url 'hangarready:index' %}" class="btn btn-secondary">
            <i class="fa-solid fa-arrow-left"></i> Back to Search
        </a>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">
                    <i class="fa-solid fa-list"></i> Search Results
                    {% if ship_type_name %}
                    - {{ ship_type_name }}
                    {% else %}
                    - All Ships
                    {% endif %}
                    in {{ location_name }}
                </h4>
                <p class="mb-0 text-muted">Found {{ total_results }} result{{ total_results|pluralize }}</p>
            </div>
            <div class="card-body">
                {% if page_obj %}
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Ship</th>
                                <th>Character</th>
                                <th>Corporation</th>
                                <th>Alliance</th>
                                <th>Location</th>
                                <th>Hangar</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in page_obj %}
                            <tr>
                                <td>
                                    <img src="https://images.evetech.net/types/{{ item.type_id }}/icon?size=32"
                                         class="me-2" alt="{{ item.type_name }}">
                                    {{ item.type_name }}
                                </td>
                                <td>
                                    <img src="https://images.evetech.net/characters/{{ item.character_assets.character.character_id }}/portrait?size=32"
                                         class="rounded me-2" alt="{{ item.character_assets.character.character_name }}">
                                    {{ item.character_assets.character.character_name }}
                                </td>
                                <td>
                                    <img src="https://images.evetech.net/corporations/{{ item.character_assets.character.corporation_id }}/logo?size=32"
                                         class="me-2" alt="{{ item.character_assets.character.corporation_name }}">
                                    {{ item.character_assets.character.corporation_name }}
                                </td>
                                <td>
                                    {% if item.character_assets.character.alliance_id %}
                                    <img src="https://images.evetech.net/alliances/{{ item.character_assets.character.alliance_id }}/logo?size=32"
                                         class="me-2" alt="{{ item.character_assets.character.alliance_name }}">
                                    {{ item.character_assets.character.alliance_name }}
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="location-name" data-location-id="{{ item.location_id }}">
                                        {{ item.location_name|default:"Unknown" }}
                                    </span>
                                    {% if item.location_name and "Structure " in item.location_name %}
                                    <button class="btn btn-sm btn-link p-0 ms-1 fetch-structure-btn"
                                            data-structure-id="{{ item.location_id }}"
                                            title="Fetch structure name">
                                        <i class="fa-solid fa-sync-alt"></i>
                                    </button>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge bg-info">{{ item.location_flag }}</span>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if page_obj.has_other_pages %}
                <nav aria-label="Search results pagination">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?type_id={{ type_id }}&location_flag={{ location_flag }}&page=1">First</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?type_id={{ type_id }}&location_flag={{ location_flag }}&page={{ page_obj.previous_page_number }}">Previous</a>
                        </li>
                        {% endif %}

                        <li class="page-item active">
                            <span class="page-link">
                                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                            </span>
                        </li>

                        {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?type_id={{ type_id }}&location_flag={{ location_flag }}&page={{ page_obj.next_page_number }}">Next</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?type_id={{ type_id }}&location_flag={{ location_flag }}&page={{ page_obj.paginator.num_pages }}">Last</a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
                {% else %}
                <div class="alert alert-info">
                    <i class="fa-solid fa-info-circle"></i> No ships found matching your search criteria.
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_script %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('Structure fetch script loaded');

    // Handle structure name fetch buttons
    const buttons = document.querySelectorAll('.fetch-structure-btn');
    console.log('Found ' + buttons.length + ' fetch buttons');

    buttons.forEach(function(button) {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            const structureId = this.getAttribute('data-structure-id');
            console.log('Fetching structure ID:', structureId);

            // Find the location name span (previous sibling)
            const locationNameSpan = this.previousElementSibling;
            const icon = this.querySelector('i');

            // Disable button and add spinning animation
            this.disabled = true;
            icon.classList.add('fa-spin');

            // Build URL
            const url = '/hangarready/fetch-structure/' + structureId + '/';
            console.log('Fetching from URL:', url);

            // Fetch structure name via AJAX
            fetch(url)
                .then(response => {
                    console.log('Response status:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('Response data:', data);
                    if (data.success) {
                        // Update the location name in the span
                        locationNameSpan.textContent = data.name;
                        console.log('Updated ' + data.updated_count + ' asset items in database' +
                                  (data.from_cache ? ' (from cache)' : ' (fetched from ESI)'));
                        // Remove the button since we now have the real name
                        this.remove();
                    } else {
                        // Show error
                        alert('Failed to fetch structure name: ' + (data.error || 'Unknown error'));
                        // Re-enable button
                        this.disabled = false;
                        icon.classList.remove('fa-spin');
                    }
                })
                .catch(error => {
                    console.error('Error fetching structure:', error);
                    alert('Failed to fetch structure name. Please try again.');
                    // Re-enable button
                    this.disabled = false;
                    icon.classList.remove('fa-spin');
                });
        });
    });
});
</script>
{% endblock %}