{% 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 "Loot 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 Payout Sessions" %}</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">
                    <h5 class="mb-0">{% translate "Your Pending Payouts" %}</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{% translate "Payout Session" %}</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 %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i> {% translate "No pending payouts at the moment" %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Recent Payout Sessions -->
    {% if recent_fleets %}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5>{% translate "Your Recent Payout Sessions" %}</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{% translate "Payout Name" %}</th>
                                    <th>{% translate "Date" %}</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 %}

    <!-- All Payouts Table -->
    {% if all_payouts %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{% translate "All Payouts" %}</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{% translate "Date" %}</th>
                                    <th>{% translate "Payout Session" %}</th>
                                    <th>{% translate "Loot Pool" %}</th>
                                    <th class="text-end">{% translate "Amount" %}</th>
                                    <th>{% translate "Status" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for payout in all_payouts %}
                                <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 }}
                                        </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>
                                        {% if payout.status == 'pending' %}
                                            <span class="badge bg-warning">{{ payout.get_status_display }}</span>
                                        {% elif payout.status == 'paid' %}
                                            <span class="badge bg-success">{{ payout.get_status_display }}</span>
                                            {% if payout.verified %}
                                                <span class="badge bg-info" title="{% translate 'Verified via ESI' %}">
                                                    <i class="fas fa-shield-alt"></i>
                                                </span>
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="text-center mt-3">
                        <small class="text-muted">{% translate "Showing last 20 payouts" %}</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

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

<!-- Payout 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 Loot Payout" %}</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 "Payout 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 Loot Payout" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}