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

{% block details %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h2>{% translate "Fleet Payout Dashboard" %}</h2>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card border-primary">
                <div class="card-body">
                    <h5 class="card-title">{% translate "Pending Payouts" %}</h5>
                    <p class="card-text display-6">{{ pending_payouts|length }}</p>
                    <p class="text-muted">{{ total_pending|isk_format_full }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card border-success">
                <div class="card-body">
                    <h5 class="card-title">{% translate "Recent Fleets" %}</h5>
                    <p class="card-text display-6">{{ recent_fleets|length }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Pending Payouts Table -->
    {% if pending_payouts %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{% translate "Your Pending Payouts" %}</h5>
                    <a href="{% url 'aapayout:payout_history' %}" class="btn btn-sm btn-info">
                        <i class="fas fa-history"></i> {% translate "View All Payouts" %}
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{% translate "Fleet" %}</th>
                                    <th>{% translate "Loot Pool" %}</th>
                                    <th class="text-end">{% translate "Amount" %}</th>
                                    <th>{% translate "Status" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for payout in pending_payouts %}
                                <tr>
                                    <td>
                                        <a href="{% url 'aapayout:fleet_detail' payout.loot_pool.fleet.pk %}">
                                            {{ payout.loot_pool.fleet.name }}
                                        </a>
                                    </td>
                                    <td>
                                        <a href="{% url 'aapayout:loot_detail' payout.loot_pool.pk %}">
                                            {{ payout.loot_pool.name }}
                                        </a>
                                    </td>
                                    <td class="text-end">{{ payout.amount|isk_format_full }}</td>
                                    <td>
                                        <span class="badge bg-warning">{{ payout.get_status_display }}</span>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <!-- Show payout history link even when no pending payouts -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5>{% translate "Your Payouts" %}</h5>
                </div>
                <div class="card-body text-center">
                    <p class="text-muted">{% translate "No pending payouts at the moment" %}</p>
                    <a href="{% url 'aapayout:payout_history' %}" class="btn btn-info">
                        <i class="fas fa-history"></i> {% translate "View Payout History" %}
                    </a>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Recent Fleets -->
    {% if recent_fleets %}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5>{% translate "Your Recent Fleets" %}</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{% translate "Fleet Name" %}</th>
                                    <th>{% translate "Fleet Time" %}</th>
                                    <th>{% translate "Status" %}</th>
                                    <th>{% translate "Participants" %}</th>
                                    <th class="text-end">{% translate "Total Value" %}</th>
                                    <th>{% translate "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for fleet in recent_fleets %}
                                <tr>
                                    <td>
                                        <a href="{% url 'aapayout:fleet_detail' fleet.pk %}">
                                            {{ fleet.name }}
                                        </a>
                                    </td>
                                    <td>{{ fleet.fleet_time|date:"Y-m-d H:i" }}</td>
                                    <td>
                                        {% if fleet.status == 'draft' %}
                                            <span class="badge bg-secondary">{{ fleet.get_status_display }}</span>
                                        {% elif fleet.status == 'active' %}
                                            <span class="badge bg-primary">{{ fleet.get_status_display }}</span>
                                        {% elif fleet.status == 'completed' %}
                                            <span class="badge bg-success">{{ fleet.get_status_display }}</span>
                                        {% elif fleet.status == 'paid' %}
                                            <span class="badge bg-info">{{ fleet.get_status_display }}</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ fleet.get_participant_count }}</td>
                                    <td class="text-end">{{ fleet.get_total_loot_value|isk_format_full }}</td>
                                    <td>
                                        <a href="{% url 'aapayout:fleet_detail' fleet.pk %}" class="btn btn-sm btn-info">
                                            {% translate "View" %}
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    {% if not pending_payouts and not recent_fleets %}
    <div class="row">
        <div class="col-12">
            <div class="alert alert-info">
                <h4>{% translate "Welcome to Fleet Payouts!" %}</h4>
                <p>{% translate "You don't have any pending payouts or fleets yet." %}</p>
                {% if perms.aapayout.create_fleet %}
                <p>{% translate "Click the 'Create Fleet' button in the top navigation bar to create your first fleet." %}</p>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Fleet Creation Modal -->
{% if perms.aapayout.create_fleet %}
<div class="modal fade" id="createFleetModal" tabindex="-1" aria-labelledby="createFleetModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createFleetModalLabel">{% translate "Create New Fleet" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{% url 'aapayout:fleet_create' %}" id="fleet-create-form">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="fleet_name" class="form-label">{% translate "Fleet Name" %} <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="fleet_name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label for="battle_report" class="form-label">{% translate "Battle Report URL" %}</label>
                        <input type="url" name="battle_report" id="battle_report" class="form-control" placeholder="https://">
                    </div>
                    <div class="mb-3">
                        <label for="notes" class="form-label">{% translate "Notes" %}</label>
                        <textarea name="notes" id="notes" class="form-control" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> {% translate "Create Fleet" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}