{% extends "base.html" %}

{% block title %}Report Details - {{ report.sync_id }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1>Report Details</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ url_for('main.reports') }}">Reports</a></li>
                            <li class="breadcrumb-item active">{{ report.sync_id }}</li>
                        </ol>
                    </nav>
                </div>
                <a href="{{ url_for('main.reports') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Back to Reports
                </a>
            </div>

            <!-- Summary Card -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-chart-line"></i> Summary</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="p-3 bg-light rounded">
                                <h6 class="text-muted mb-1">Sync ID</h6>
                                <p class="mb-0"><code>{{ report.sync_id }}</code></p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3 bg-light rounded">
                                <h6 class="text-muted mb-1">Client ID</h6>
                                <p class="mb-0">{{ report.client_id }}</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3 bg-light rounded">
                                <h6 class="text-muted mb-1">Sync Timestamp</h6>
                                <p class="mb-0">{{ report.sync_timestamp.strftime('%Y-%m-%d %H:%M:%S') if report.sync_timestamp else '' }}</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3 bg-light rounded">
                                <h6 class="text-muted mb-1">Date Range</h6>
                                <p class="mb-0">{{ report.date_range }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-3">
                            <div class="p-3 bg-light rounded">
                                <h6 class="text-muted mb-1">Start Date</h6>
                                <p class="mb-0">{{ report.start_date.strftime('%Y-%m-%d') if report.start_date else '' }}</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3 bg-light rounded">
                                <h6 class="text-muted mb-1">End Date</h6>
                                <p class="mb-0">{{ report.end_date.strftime('%Y-%m-%d') if report.end_date else '' }}</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3 bg-light rounded">
                                <h6 class="text-muted mb-1">Total Bets</h6>
                                <p class="mb-0">{{ report.total_bets }}</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3 bg-light rounded">
                                <h6 class="text-muted mb-1">Total Matches</h6>
                                <p class="mb-0">{{ report.total_matches }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-3">
                            <div class="p-3 bg-primary text-white rounded">
                                <h6 class="mb-1">Total Payin</h6>
                                <h3 class="mb-0">{{ "{:,.2f}".format(report.total_payin) if report.total_payin else '0.00' }}</h3>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3 bg-info text-white rounded">
                                <h6 class="mb-1">Total Payout</h6>
                                <h3 class="mb-0">{{ "{:,.2f}".format(report.total_payout) if report.total_payout else '0.00' }}</h3>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3 {% if (report.total_payin - report.total_payout) >= 0 %}bg-success{% else %}bg-danger{% endif %} text-white rounded">
                                <h6 class="mb-1">Balance</h6>
                                <h3 class="mb-0">{{ "{:,.2f}".format(report.total_payin - report.total_payout) if report.total_payin and report.total_payout else '0.00' }}</h3>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3 bg-warning text-white rounded">
                                <h6 class="mb-1">CAP Redistribution Balance</h6>
                                <h3 class="mb-0">{{ "{:,.2f}".format(report.cap_compensation_balance) if report.cap_compensation_balance else '0.00' }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tabs for Bets and Extraction Stats -->
            <ul class="nav nav-tabs mb-3" id="reportTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="bets-tab" data-bs-toggle="tab" data-bs-target="#bets" type="button" role="tab">
                        <i class="fas fa-ticket-alt"></i> Bets ({{ bets|length }})
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="stats-tab" data-bs-toggle="tab" data-bs-target="#stats" type="button" role="tab">
                        <i class="fas fa-chart-bar"></i> Extraction Stats ({{ stats|length }})
                    </button>
                </li>
            </ul>

            <div class="tab-content" id="reportTabsContent">
                <!-- Bets Tab -->
                <div class="tab-pane fade show active" id="bets" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            {% if bets %}
                            <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th>Bet UUID</th>
                                            <th>Fixture ID</th>
                                            <th>Bet DateTime</th>
                                            <th>Total Amount</th>
                                            <th>Bet Count</th>
                                            <th>Paid</th>
                                            <th>Paid Out</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for bet in bets %}
                                        <tr>
                                            <td><code>{{ bet.uuid }}</code></td>
                                            <td>{{ bet.fixture_id }}</td>
                                            <td>{{ bet.bet_datetime.strftime('%Y-%m-%d %H:%M:%S') if bet.bet_datetime else '' }}</td>
                                            <td class="text-end">{{ "{:,.2f}".format(bet.total_amount) if bet.total_amount else '0.00' }}</td>
                                            <td class="text-center">{{ bet.bet_count }}</td>
                                            <td class="text-center">
                                                {% if bet.paid %}
                                                <i class="fas fa-check-circle text-success"></i>
                                                {% else %}
                                                <i class="fas fa-times-circle text-danger"></i>
                                                {% endif %}
                                            </td>
                                            <td class="text-center">
                                                {% if bet.paid_out %}
                                                <i class="fas fa-check-circle text-success"></i>
                                                {% else %}
                                                <i class="fas fa-times-circle text-danger"></i>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-sm btn-info" data-bs-toggle="collapse" data-bs-target="#bet-details-{{ bet.id }}">
                                                    <i class="fas fa-list"></i> Details
                                                </button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="8" class="p-0">
                                                <div class="collapse" id="bet-details-{{ bet.id }}">
                                                    <div class="p-3 bg-light">
                                                        <h6>Bet Details</h6>
                                                        <table class="table table-sm">
                                                            <thead>
                                                                <tr>
                                                                    <th>Match ID</th>
                                                                    <th>Match Number</th>
                                                                    <th>Outcome</th>
                                                                    <th>Amount</th>
                                                                    <th>Win Amount</th>
                                                                    <th>Result</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                {% for detail in bet.details %}
                                                                <tr>
                                                                    <td>{{ detail.match_id }}</td>
                                                                    <td>{{ detail.match_number }}</td>
                                                                    <td>{{ detail.outcome }}</td>
                                                                    <td class="text-end">{{ "{:,.2f}".format(detail.amount) if detail.amount else '0.00' }}</td>
                                                                    <td class="text-end">{{ "{:,.2f}".format(detail.win_amount) if detail.win_amount else '0.00' }}</td>
                                                                    <td>
                                                                        <span class="badge bg-{% if detail.result == 'win' %}success{% elif detail.result == 'lost' %}danger{% elif detail.result == 'pending' %}warning{% else %}secondary{% endif %}">
                                                                            {{ detail.result }}
                                                                        </span>
                                                                    </td>
                                                                </tr>
                                                                {% endfor %}
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {% else %}
                            <div class="text-center py-5">
                                <i class="fas fa-ticket-alt fa-3x text-muted mb-3"></i>
                                <h4 class="text-muted">No bets found</h4>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Extraction Stats Tab -->
                <div class="tab-pane fade" id="stats" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            {% if stats %}
                            <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th>Match ID</th>
                                            <th>Fixture ID</th>
                                            <th>Match DateTime</th>
                                            <th>Total Bets</th>
                                            <th>Total Collected</th>
                                            <th>Total Redistributed</th>
                                            <th>Actual Result</th>
                                            <th>Extraction Result</th>
                                            <th>CAP Applied</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for stat in stats %}
                                        <tr>
                                            <td>{{ stat.match_id }}</td>
                                            <td>{{ stat.fixture_id }}</td>
                                            <td>{{ stat.match_datetime.strftime('%Y-%m-%d %H:%M:%S') if stat.match_datetime else '' }}</td>
                                            <td class="text-center">{{ stat.total_bets }}</td>
                                            <td class="text-end">{{ "{:,.2f}".format(stat.total_amount_collected) if stat.total_amount_collected else '0.00' }}</td>
                                            <td class="text-end">{{ "{:,.2f}".format(stat.total_redistributed) if stat.total_redistributed else '0.00' }}</td>
                                            <td>{{ stat.actual_result }}</td>
                                            <td>{{ stat.extraction_result }}</td>
                                            <td class="text-center">
                                                {% if stat.cap_applied %}
                                                <i class="fas fa-check-circle text-success"></i> {{ stat.cap_percentage }}%
                                                {% else %}
                                                <i class="fas fa-times-circle text-danger"></i>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-sm btn-info" data-bs-toggle="collapse" data-bs-target="#stats-details-{{ stat.id }}">
                                                    <i class="fas fa-list"></i> Details
                                                </button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="10" class="p-0">
                                                <div class="collapse" id="stats-details-{{ stat.id }}">
                                                    <div class="p-3 bg-light">
                                                        <h6>Extraction Details</h6>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <table class="table table-sm">
                                                                    <tr>
                                                                        <th>Under Bets:</th>
                                                                        <td>{{ stat.under_bets }}</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>Under Amount:</th>
                                                                        <td>{{ "{:,.2f}".format(stat.under_amount) if stat.under_amount else '0.00' }}</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>Over Bets:</th>
                                                                        <td>{{ stat.over_bets }}</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>Over Amount:</th>
                                                                        <td>{{ "{:,.2f}".format(stat.over_amount) if stat.over_amount else '0.00' }}</td>
                                                                    </tr>
                                                                </table>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <h6>Result Breakdown</h6>
                                                                {% if stat.result_breakdown %}
                                                                <table class="table table-sm">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>Outcome</th>
                                                                            <th>Bets</th>
                                                                            <th>Amount</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        {% for outcome, data in stat.result_breakdown.items() %}
                                                                        <tr>
                                                                            <td>{{ outcome }}</td>
                                                                            <td>{{ data.bets }}</td>
                                                                            <td>{{ "{:,.2f}".format(data.amount) if data.amount else '0.00' }}</td>
                                                                        </tr>
                                                                        {% endfor %}
                                                                    </tbody>
                                                                </table>
                                                                {% else %}
                                                                <p class="text-muted">No breakdown data available</p>
                                                                {% endif %}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {% else %}
                            <div class="text-center py-5">
                                <i class="fas fa-chart-bar fa-3x text-muted mb-3"></i>
                                <h4 class="text-muted">No extraction stats found</h4>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}