{% extends "base.html" %}

{% block title %}Match Report - Match {{ match_id }}{% endblock %}

{% block extra_css %}
<style>
    /* Override container max-width for full-width layout */
    .container {
        max-width: 100% !important;
        padding: 0 1rem !important;
    }
    
    /* Enhanced table styling */
    .table {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
    }
    
    .table thead th {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
        border: none;
        padding: 12px 16px;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .table thead th:first-child {
        border-top-left-radius: 8px;
    }
    
    .table thead th:last-child {
        border-top-right-radius: 8px;
    }
    
    .table tbody tr {
        transition: all 0.2s ease;
        border-bottom: 1px solid #e9ecef;
    }
    
    .table tbody tr:hover {
        background-color: #f8f9fa;
        transform: scale(1.005);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .table tbody td {
        padding: 14px 16px;
        vertical-align: middle;
    }
    
    .table tbody tr:last-child td:first-child {
        border-bottom-left-radius: 8px;
    }
    
    .table tbody tr:last-child td:last-child {
        border-bottom-right-radius: 8px;
    }
    
    /* Enhanced card styling */
    .card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
        transition: all 0.3s ease;
    }
    
    .card:hover {
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }
    
    .card-header {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        border-bottom: 1px solid #e9ecef;
        border-radius: 12px 12px 0 0 !important;
        padding: 16px 20px;
    }
    
    /* Enhanced button styling */
    .btn-info {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        color: white;
        padding: 8px 16px;
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .btn-info:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        color: white;
    }
    
    /* Enhanced pagination styling */
    .pagination .page-link {
        color: #667eea;
        border: 1px solid #dee2e6;
        margin: 0 4px;
        border-radius: 6px;
        padding: 8px 14px;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .pagination .page-link:hover {
        background-color: #667eea;
        color: white;
        border-color: #667eea;
    }
    
    .pagination .page-item.active .page-link {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-color: #667eea;
        color: white;
    }
    
    /* Per page selector styling */
    .per-page-selector {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9rem;
        color: #495057;
    }
    
    .per-page-selector select {
        padding: 6px 12px;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        font-size: 0.9rem;
        background-color: white;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .per-page-selector select:hover {
        border-color: #667eea;
    }
    
    .per-page-selector select:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    
    /* Table info text */
    .table-info {
        color: #6c757d;
        font-size: 0.9rem;
        margin-top: 12px;
    }
    
    /* Summary card styling */
    .summary-card {
        border-radius: 8px;
        padding: 1rem;
        transition: all 0.3s ease;
    }
    
    .summary-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
</style>
{% 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>Match Report Details</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ url_for('main.reports', **filters) }}">Reports</a></li>
                            <li class="breadcrumb-item"><a href="{{ url_for('main.client_report_detail', client_id=client_id, **filters) }}">{{ token_name }} ({{ client_id }})</a></li>
                            <li class="breadcrumb-item active">Match {{ match_id }}</li>
                        </ol>
                    </nav>
                </div>
                <div class="d-flex gap-2">
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                            <i class="fas fa-download"></i> Export
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ url_for('main.match_report_detail', client_id=client_id, match_id=match_id, export='csv', **filters) }}">Export as CSV</a></li>
                            <li><a class="dropdown-item" href="{{ url_for('main.match_report_detail', client_id=client_id, match_id=match_id, export='xlsx', **filters) }}">Export as Excel</a></li>
                            <li><a class="dropdown-item" href="{{ url_for('main.match_report_detail', client_id=client_id, match_id=match_id, export='pdf', **filters) }}">Export as PDF</a></li>
                        </ul>
                    </div>
                    <a href="{{ url_for('main.client_report_detail', client_id=client_id, **filters) }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back to Client
                    </a>
                </div>
            </div>

            <!-- Match Summary Cards -->
            <div class="row mb-3">
                <div class="col-md-3">
                    <div class="card bg-gradient-primary text-white mb-3 shadow-sm border-0 h-100">
                        <div class="card-body">
                            <h6 class="card-title mb-1 text-white-50">Match ID</h6>
                            <h3 class="mb-0 fw-bold">{{ match_report.match_id }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-gradient-info text-white mb-3 shadow-sm border-0 h-100">
                        <div class="card-body">
                            <h6 class="card-title mb-1 text-white-50">Match Number</h6>
                            <h3 class="mb-0 fw-bold">{{ match_report.match_number }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-gradient-success text-white mb-3 shadow-sm border-0 h-100">
                        <div class="card-body">
                            <h6 class="card-title mb-1 text-white-50">Total Bets</h6>
                            <h3 class="mb-0 fw-bold">{{ match_report.total_bets }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-gradient-warning text-white mb-3 shadow-sm border-0 h-100">
                        <div class="card-body">
                            <h6 class="card-title mb-1 text-white-50">Balance</h6>
                            <h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(match_report.balance) if match_report.balance else '0.00' }}</h3>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-md-4">
                    <div class="card bg-gradient-primary text-white mb-3 shadow-sm border-0 h-100">
                        <div class="card-body">
                            <h6 class="card-title mb-1 text-white-50">Total Payin</h6>
                            <h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(match_report.total_payin) if match_report.total_payin else '0.00' }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card bg-gradient-info text-white mb-3 shadow-sm border-0 h-100">
                        <div class="card-body">
                            <h6 class="card-title mb-1 text-white-50">Total Payout</h6>
                            <h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(match_report.total_payout) if match_report.total_payout else '0.00' }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card bg-gradient-warning text-white mb-3 shadow-sm border-0 h-100">
                        <div class="card-body">
                            <h6 class="card-title mb-1 text-white-50">CAP Balance</h6>
                            <h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(match_report.cap_compensation_balance) if match_report.cap_compensation_balance else '0.00' }}</h3>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Match Details Card -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Match Information</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <strong>Fixture ID:</strong> <code>{{ match_report.fixture_id }}</code>
                        </div>
                        <div class="col-md-6 mb-3">
                            <strong>Match DateTime:</strong>
                            <span class="datetime-display" data-utc-datetime="{{ match_report.match_datetime.isoformat() if match_report.match_datetime else '' }}">
                                {{ match_report.match_datetime.strftime('%Y-%m-%d %H:%M:%S') if match_report.match_datetime else '' }}
                            </span>
                        </div>
                        <div class="col-md-6 mb-3">
                            <strong>Actual Result:</strong> {{ match_report.actual_result }}
                        </div>
                        <div class="col-md-6 mb-3">
                            <strong>Extraction Result:</strong> {{ match_report.extraction_result }}
                        </div>
                        <div class="col-md-6 mb-3">
                            <strong>CAP Applied:</strong> 
                            {% if match_report.cap_applied %}
                            <span class="text-success"><i class="fas fa-check-circle"></i> {{ match_report.cap_percentage }}%</span>
                            {% else %}
                            <span class="text-danger"><i class="fas fa-times-circle"></i> No</span>
                            {% endif %}
                        </div>
                        <div class="col-md-6 mb-3">
                            <strong>Accumulated Shortfall:</strong> {{ "{:,.2f}".format(match_report.accumulated_shortfall) if match_report.accumulated_shortfall else '0.00' }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bets Table -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <h5 class="mb-0 fw-semibold">
                        <i class="fas fa-list me-2 text-primary"></i>Bets for this Match
                    </h5>
                    <div class="d-flex gap-3 align-items-center flex-wrap">
                        <div class="per-page-selector">
                            <span>Show:</span>
                            <select id="perPage" onchange="changePerPage()">
                                <option value="10" {% if filters.per_page == 10 %}selected{% endif %}>10</option>
                                <option value="20" {% if filters.per_page == 20 %}selected{% endif %}>20</option>
                                <option value="50" {% if filters.per_page == 50 or not filters.per_page %}selected{% endif %}>50</option>
                                <option value="100" {% if filters.per_page == 100 %}selected{% endif %}>100</option>
                            </select>
                            <span>per page</span>
                        </div>
                        <div class="timezone-selector">
                            <span>Timezone:</span>
                            <select id="timezone" onchange="changeTimezone()">
                                {% include 'main/_timezone_options.html' %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    {% if bets %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Bet UUID</th>
                                    <th>Bet DateTime</th>
                                    <th>Match Number</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 class="datetime-display" data-utc-datetime="{{ bet.bet_datetime.isoformat() if bet.bet_datetime else '' }}">
                                        {{ bet.bet_datetime.strftime('%Y-%m-%d %H:%M:%S') if bet.bet_datetime else '' }}
                                    </td>
                                    <td>{{ bet.match_number }}</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>
                                        <a href="{{ url_for('main.bet_detail', client_id=client_id, match_id=match_id, bet_uuid=bet.uuid, **filters) }}" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> View Details
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    {% if pagination and pagination.pages > 1 %}
                    <nav aria-label="Page navigation">
                        <ul class="pagination justify-content-center">
                            {% if pagination.has_prev %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('main.match_report_detail', client_id=client_id, match_id=match_id, page=pagination.prev_num, **filters) }}">Previous</a>
                            </li>
                            {% endif %}
                            
                            {% for page_num in pagination.iter_pages() %}
                                {% if page_num %}
                                    {% if page_num == pagination.page %}
                                    <li class="page-item active"><span class="page-link">{{ page_num }}</span></li>
                                    {% else %}
                                    <li class="page-item">
                                        <a class="page-link" href="{{ url_for('main.match_report_detail', client_id=client_id, match_id=match_id, page=page_num, **filters) }}">{{ page_num }}</a>
                                    </li>
                                    {% endif %}
                                {% else %}
                                <li class="page-item disabled"><span class="page-link">...</span></li>
                                {% endif %}
                            {% endfor %}
                            
                            {% if pagination.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('main.match_report_detail', client_id=client_id, match_id=match_id, page=pagination.next_num, **filters) }}">Next</a>
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <p class="table-info mb-0">
                            Showing {{ pagination.per_page * (pagination.page - 1) + 1 }} to
                            {{ min(pagination.per_page * pagination.page, pagination.total) }} of
                            {{ pagination.total }} bets
                        </p>
                        <div class="per-page-selector">
                            <span>Page {{ pagination.page }} of {{ pagination.pages }}</span>
                        </div>
                    </div>
                    {% endif %}
                    {% else %}
                    <div class="text-center py-5">
                        <i class="fas fa-coins fa-3x text-muted mb-3"></i>
                        <h4 class="text-muted">No bets found for this match</h4>
                        <p class="text-muted">Try adjusting your filters or wait for clients to sync reports.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% block extra_js %}
<script>
function changePerPage() {
    const perPage = document.getElementById('perPage').value;
    const url = new URL(window.location.href);
    url.searchParams.set('per_page', perPage);
    url.searchParams.set('page', '1');
    window.location.href = url.toString();
}

function changeTimezone() {
    const timezone = document.getElementById('timezone').value;
    const url = new URL(window.location.href);
    url.searchParams.set('timezone', timezone);
    window.location.href = url.toString();
}

function convertToTimezone(utcString, timezone) {
    if (!utcString) return '';
    try {
        const date = new Date(utcString);
        const options = {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false,
            timeZone: timezone
        };
        return new Intl.DateTimeFormat('en-US', options).format(date);
    } catch (e) {
        console.error('Error converting timezone:', e);
        return utcString;
    }
}

function updateTimezoneDisplays() {
    const timezoneSelect = document.getElementById('timezone');
    let timezone = timezoneSelect ? timezoneSelect.value : 'auto';
    
    // If auto, use browser's local timezone
    if (timezone === 'auto') {
        try {
            timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        } catch (e) {
            console.error('Error detecting timezone:', e);
            timezone = 'UTC';
        }
    }
    
    // Update all datetime displays
    const datetimeDisplays = document.querySelectorAll('.datetime-display');
    datetimeDisplays.forEach(display => {
        const utcDatetime = display.getAttribute('data-utc-datetime');
        if (utcDatetime) {
            const converted = convertToTimezone(utcDatetime, timezone);
            display.textContent = converted;
        }
    });
}

// Run on page load
document.addEventListener('DOMContentLoaded', function() {
    updateTimezoneDisplays();
});
</script>
{% endblock %}
{% endblock %}