{% extends 'aapayout/base.html' %}
{% load i18n %}
{% load humanize %}
{% load aapayout_filters %}

{% block page_title %}{% trans "Payout History" %}{% endblock %}

{% block extra_css %}
<style>
.filter-card {
    background-color: #f8f9fa;
}

.summary-card {
    transition: transform 0.2s;
}

.summary-card:hover {
    transform: translateY(-5px);
}

.table-responsive {
    overflow-x: auto;
}

@media (max-width: 768px) {
    .summary-card {
        margin-bottom: 1rem;
    }

    .filter-row {
        margin-bottom: 0.5rem;
    }
}

.badge-verified {
    background-color: #28a745;
}

.badge-scout {
    background-color: #17a2b8;
}
</style>
{% endblock %}

{% block aapayout_content %}
<div class="row mb-3">
    <div class="col-md-9">
        <h2>
            <i class="fas fa-history"></i> {% trans "Payout History" %}
        </h2>
        {% if can_view_all %}
            <p class="text-muted">
                {% trans "Showing all payouts across all fleets" %}
            </p>
        {% else %}
            <p class="text-muted">
                {% trans "Showing your personal payout history" %}
            </p>
        {% endif %}
    </div>
    <div class="col-md-3 text-end">
        <a href="{% url 'aapayout:dashboard' %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> {% trans "Back to Dashboard" %}
        </a>
    </div>
</div>

<!-- Summary Cards -->
<div class="row mb-4">
    <div class="col-md-3 col-sm-6">
        <div class="card border-success summary-card">
            <div class="card-body">
                <h6 class="card-subtitle mb-2 text-muted">
                    <i class="fas fa-check-circle"></i> {% trans "Paid" %}
                </h6>
                <h4 class="card-title text-success">{{ count_paid|default:0 }}</h4>
                <p class="small text-muted mb-0">{{ total_paid|isk_format_full }}</p>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card border-warning summary-card">
            <div class="card-body">
                <h6 class="card-subtitle mb-2 text-muted">
                    <i class="fas fa-clock"></i> {% trans "Pending" %}
                </h6>
                <h4 class="card-title text-warning">{{ count_pending|default:0 }}</h4>
                <p class="small text-muted mb-0">{{ total_pending|isk_format_full }}</p>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card border-primary summary-card">
            <div class="card-body">
                <h6 class="card-subtitle mb-2 text-muted">
                    <i class="fas fa-coins"></i> {% trans "Total" %}
                </h6>
                <h4 class="card-title text-primary">{{ count_paid|add:count_pending }}</h4>
                <p class="small text-muted mb-0">{% trans "Total Payouts" %}</p>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card border-info summary-card">
            <div class="card-body">
                <h6 class="card-subtitle mb-2 text-muted">
                    <i class="fas fa-chart-line"></i> {% trans "Combined" %}
                </h6>
                <h4 class="card-title text-info">
                    {{ total_paid|add:total_pending|floatformat:0|intcomma }}
                </h4>
                <p class="small text-muted mb-0">{% trans "ISK Total" %}</p>
            </div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card filter-card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-filter"></i> {% trans "Filter & Search" %}
                </h5>
            </div>
            <div class="card-body">
                <form method="get" action="{% url 'aapayout:payout_history' %}">
                    <div class="row g-3">
                        <!-- Search -->
                        <div class="col-md-4">
                            <label for="search" class="form-label">
                                <i class="fas fa-search"></i> {% trans "Search" %}
                            </label>
                            <input type="text" class="form-control" id="search" name="search"
                                   placeholder="{% trans 'Character or fleet name...' %}"
                                   value="{{ filter_search|default:'' }}">
                            <small class="form-text text-muted">
                                {% trans "Search by character or fleet name" %}
                            </small>
                        </div>

                        <!-- Fleet Filter (only for admins/FCs) -->
                        {% if can_view_all and fleet_list %}
                        <div class="col-md-4">
                            <label for="fleet" class="form-label">
                                <i class="fas fa-users"></i> {% trans "Fleet" %}
                            </label>
                            <select class="form-select" id="fleet" name="fleet">
                                <option value="">{% trans "All Fleets" %}</option>
                                {% for fleet in fleet_list %}
                                    <option value="{{ fleet.pk }}"
                                            {% if filter_fleet == fleet.pk|stringformat:"s" %}selected{% endif %}>
                                        {{ fleet.name }} ({{ fleet.fleet_time|date:"Y-m-d" }})
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        {% endif %}

                        <!-- Status Filter -->
                        <div class="col-md-4">
                            <label for="status" class="form-label">
                                <i class="fas fa-info-circle"></i> {% trans "Status" %}
                            </label>
                            <select class="form-select" id="status" name="status">
                                <option value="">{% trans "All Statuses" %}</option>
                                {% for value, label in status_choices %}
                                    <option value="{{ value }}"
                                            {% if filter_status == value %}selected{% endif %}>
                                        {{ label }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Date From -->
                        <div class="col-md-4">
                            <label for="date_from" class="form-label">
                                <i class="fas fa-calendar"></i> {% trans "From Date" %}
                            </label>
                            <input type="date" class="form-control" id="date_from" name="date_from"
                                   value="{{ filter_date_from|default:'' }}">
                        </div>

                        <!-- Date To -->
                        <div class="col-md-4">
                            <label for="date_to" class="form-label">
                                <i class="fas fa-calendar"></i> {% trans "To Date" %}
                            </label>
                            <input type="date" class="form-control" id="date_to" name="date_to"
                                   value="{{ filter_date_to|default:'' }}">
                        </div>

                        <!-- Buttons -->
                        <div class="col-md-4 d-flex align-items-end gap-2">
                            <button type="submit" class="btn btn-primary flex-grow-1">
                                <i class="fas fa-filter"></i> {% trans "Apply Filters" %}
                            </button>
                            <a href="{% url 'aapayout:payout_history' %}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> {% trans "Clear" %}
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Payout History Table -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-list"></i> {% trans "Payout List" %}
                </h5>
                <span class="badge bg-secondary">
                    {{ page_obj.paginator.count }} {% trans "total" %}
                </span>
            </div>
            <div class="card-body">
                {% if page_obj %}
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>{% trans "Date" %}</th>
                                    <th>{% trans "Fleet" %}</th>
                                    <th>{% trans "Recipient" %}</th>
                                    <th class="text-end">{% trans "Amount" %}</th>
                                    <th>{% trans "Status" %}</th>
                                    <th>{% trans "Paid At" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for payout in page_obj %}
                                <tr>
                                    <td>
                                        <small>{{ payout.created_at|date:"Y-m-d H:i" }}</small>
                                    </td>
                                    <td>
                                        <a href="{% url 'aapayout:fleet_detail' payout.loot_pool.fleet.pk %}">
                                            {{ payout.loot_pool.fleet.name|truncatechars:30 }}
                                        </a>
                                    </td>
                                    <td>
                                        <i class="fas fa-user"></i> {{ payout.recipient.name }}
                                        {% if payout.is_scout_payout %}
                                            <span class="badge bg-info badge-scout">
                                                <i class="fas fa-eye"></i> Scout
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">
                                        <strong>{{ payout.amount|isk_format_full }}</strong>
                                    </td>
                                    <td>
                                        {% if payout.status == 'pending' %}
                                            <span class="badge bg-warning text-dark">
                                                <i class="fas fa-clock"></i> {{ payout.get_status_display }}
                                            </span>
                                        {% elif payout.status == 'paid' %}
                                            <span class="badge bg-success">
                                                <i class="fas fa-check"></i> {{ payout.get_status_display }}
                                            </span>
                                            {% if payout.verified %}
                                                <span class="badge bg-success badge-verified" title="{% trans 'Verified via ESI' %}">
                                                    <i class="fas fa-shield-alt"></i> Verified
                                                </span>
                                            {% endif %}
                                        {% elif payout.status == 'failed' %}
                                            <span class="badge bg-danger">
                                                <i class="fas fa-times"></i> {{ payout.get_status_display }}
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if payout.paid_at %}
                                            <small>{{ payout.paid_at|date:"Y-m-d H:i" }}</small>
                                            {% if payout.paid_by %}
                                                <br><small class="text-muted">by {{ payout.paid_by.username }}</small>
                                            {% endif %}
                                        {% else %}
                                            <span class="text-muted">—</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    {% if page_obj.has_other_pages %}
                    <nav aria-label="Payout pagination" class="mt-4">
                        <ul class="pagination justify-content-center">
                            {% if page_obj.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?page=1{% if filter_search %}&search={{ filter_search }}{% endif %}{% if filter_fleet %}&fleet={{ filter_fleet }}{% endif %}{% if filter_status %}&status={{ filter_status }}{% endif %}{% if filter_date_from %}&date_from={{ filter_date_from }}{% endif %}{% if filter_date_to %}&date_to={{ filter_date_to }}{% endif %}">
                                        <i class="fas fa-angle-double-left"></i> {% trans "First" %}
                                    </a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if filter_search %}&search={{ filter_search }}{% endif %}{% if filter_fleet %}&fleet={{ filter_fleet }}{% endif %}{% if filter_status %}&status={{ filter_status }}{% endif %}{% if filter_date_from %}&date_from={{ filter_date_from }}{% endif %}{% if filter_date_to %}&date_to={{ filter_date_to }}{% endif %}">
                                        <i class="fas fa-angle-left"></i> {% trans "Previous" %}
                                    </a>
                                </li>
                            {% endif %}

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

                            {% if page_obj.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if filter_search %}&search={{ filter_search }}{% endif %}{% if filter_fleet %}&fleet={{ filter_fleet }}{% endif %}{% if filter_status %}&status={{ filter_status }}{% endif %}{% if filter_date_from %}&date_from={{ filter_date_from }}{% endif %}{% if filter_date_to %}&date_to={{ filter_date_to }}{% endif %}">
                                        {% trans "Next" %} <i class="fas fa-angle-right"></i>
                                    </a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if filter_search %}&search={{ filter_search }}{% endif %}{% if filter_fleet %}&fleet={{ filter_fleet }}{% endif %}{% if filter_status %}&status={{ filter_status }}{% endif %}{% if filter_date_from %}&date_from={{ filter_date_from }}{% endif %}{% if filter_date_to %}&date_to={{ filter_date_to }}{% endif %}">
                                        {% trans "Last" %} <i class="fas fa-angle-double-right"></i>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                    {% endif %}

                {% else %}
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        {% trans "No payouts found matching your criteria. Try adjusting your filters." %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}