{% extends "base.html" %}

{% block title %}Client Report - {{ token_name }}{% 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>Client 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">{{ token_name }} ({{ client_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">Client ID</h6>
                                <p class="mb-0"><code>{{ client_id }}</code></p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3 bg-light rounded">
                                <h6 class="text-muted mb-1">Token Name</h6>
                                <p class="mb-0">{{ token_name }}</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">{{ totals.total_matches }}</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">{{ totals.total_bets }}</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(totals.total_payin) }}</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(totals.total_payout) }}</h3>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3 {% if totals.total_balance >= 0 %}bg-success{% else %}bg-danger{% endif %} text-white rounded">
                                <h6 class="mb-1">Balance</h6>
                                <h3 class="mb-0">{{ "{:,.2f}".format(totals.total_balance) }}</h3>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3 bg-warning text-white rounded">
                                <h6 class="mb-1">CAP Compensation Balance</h6>
                                <h3 class="mb-0">{{ "{:,.2f}".format(totals.cap_balance) }}</h3>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="p-3 bg-info text-white rounded">
                                <h6 class="mb-1">Accumulated Shortfall</h6>
                                <h3 class="mb-0">{{ "{:,.2f}".format(totals.accumulated_shortfall) }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <div class="p-3 bg-success text-white rounded">
                                <h6 class="mb-1">Winning Bets</h6>
                                <h3 class="mb-0">{{ totals.winning_bets }}</h3>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 bg-danger text-white rounded">
                                <h6 class="mb-1">Losing Bets</h6>
                                <h3 class="mb-0">{{ totals.losing_bets }}</h3>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 bg-secondary text-white rounded">
                                <h6 class="mb-1">Pending Bets</h6>
                                <h3 class="mb-0">{{ totals.pending_bets }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filters -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-filter"></i> Filters</h5>
                </div>
                <div class="card-body">
                    <form method="GET" action="{{ url_for('main.client_report_detail', client_id=client_id) }}" class="row g-3">
                        <div class="col-md-3">
                            <label for="date_range" class="form-label">Date Range</label>
                            <select class="form-select" id="date_range" name="date_range">
                                <option value="today" {% if filters.date_range == 'today' %}selected{% endif %}>Today</option>
                                <option value="yesterday" {% if filters.date_range == 'yesterday' %}selected{% endif %}>Yesterday</option>
                                <option value="this_week" {% if filters.date_range == 'this_week' %}selected{% endif %}>This Week</option>
                                <option value="last_week" {% if filters.date_range == 'last_week' %}selected{% endif %}>Last Week</option>
                                <option value="this_month" {% if filters.date_range == 'this_month' %}selected{% endif %}>This Month</option>
                                <option value="all" {% if filters.date_range == 'all' %}selected{% endif %}>All</option>
                                <option value="custom" {% if filters.date_range == 'custom' %}selected{% endif %}>Custom</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="start_date" class="form-label">Start Date</label>
                            <input type="date" class="form-control" id="start_date" name="start_date" value="{{ filters.start_date }}">
                        </div>
                        <div class="col-md-2">
                            <label for="start_time" class="form-label">Start Time</label>
                            <input type="time" class="form-control" id="start_time" name="start_time" value="{{ filters.start_time }}">
                        </div>
                        <div class="col-md-2">
                            <label for="end_date" class="form-label">End Date</label>
                            <input type="date" class="form-control" id="end_date" name="end_date" value="{{ filters.end_date }}">
                        </div>
                        <div class="col-md-2">
                            <label for="end_time" class="form-label">End Time</label>
                            <input type="time" class="form-control" id="end_time" name="end_time" value="{{ filters.end_time }}">
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-search"></i> Apply Filters
                            </button>
                            <a href="{{ url_for('main.client_report_detail', client_id=client_id) }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Clear Filters
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Match Reports Table -->
            <div class="card">
                <div class="card-body">
                    {% if match_reports %}
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>Match ID</th>
                                    <th>Match Number</th>
                                    <th>Fixture ID</th>
                                    <th>Match DateTime</th>
                                    <th>Total Bets</th>
                                    <th>Winning</th>
                                    <th>Losing</th>
                                    <th>Pending</th>
                                    <th>Total Payin</th>
                                    <th>Total Payout</th>
                                    <th>Balance</th>
                                    <th>Actual Result</th>
                                    <th>Extraction Result</th>
                                    <th>CAP Applied</th>
                                    <th>CAP Balance</th>
                                    <th>Accumulated Shortfall</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for report in match_reports %}
                                <tr>
                                    <td>{{ report.match_id }}</td>
                                    <td>{{ report.match_number }}</td>
                                    <td><code>{{ report.fixture_id }}</code></td>
                                    <td>{{ report.match_datetime.strftime('%Y-%m-%d %H:%M:%S') if report.match_datetime else '' }}</td>
                                    <td class="text-center">{{ report.total_bets }}</td>
                                    <td class="text-center text-success">{{ report.winning_bets }}</td>
                                    <td class="text-center text-danger">{{ report.losing_bets }}</td>
                                    <td class="text-center text-secondary">{{ report.pending_bets }}</td>
                                    <td class="text-end">{{ "{:,.2f}".format(report.total_payin) if report.total_payin else '0.00' }}</td>
                                    <td class="text-end">{{ "{:,.2f}".format(report.total_payout) if report.total_payout else '0.00' }}</td>
                                    <td class="text-end {% if report.balance >= 0 %}text-success{% else %}text-danger{% endif %}">
                                        {{ "{:,.2f}".format(report.balance) if report.balance else '0.00' }}
                                    </td>
                                    <td>{{ report.actual_result }}</td>
                                    <td>{{ report.extraction_result }}</td>
                                    <td class="text-center">
                                        {% if report.cap_applied %}
                                        <i class="fas fa-check-circle text-success"></i> {{ report.cap_percentage }}%
                                        {% else %}
                                        <i class="fas fa-times-circle text-danger"></i>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">{{ "{:,.2f}".format(report.cap_compensation_balance) if report.cap_compensation_balance else '0.00' }}</td>
                                    <td class="text-end">{{ "{:,.2f}".format(report.accumulated_shortfall) if report.accumulated_shortfall else '0.00' }}</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 match reports found</h4>
                        <p class="text-muted">Try adjusting your filters or wait for clients to sync reports.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}