{% extends "base.html" %}

{% block title %}Bet Detail - {{ bet.uuid }}{% 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;
    }
    
    /* 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>Bet 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"><a href="{{ url_for('main.match_report_detail', client_id=client_id, match_id=match_id, **filters) }}">Match {{ match_id }}</a></li>
                            <li class="breadcrumb-item active">Bet {{ bet.uuid }}</li>
                        </ol>
                    </nav>
                </div>
                <a href="{{ url_for('main.match_report_detail', client_id=client_id, match_id=match_id, **filters) }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Back to Match
                </a>
            </div>

            <!-- Bet Summary Cards -->
            <div class="row mb-3">
                <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">Bet UUID</h6>
                            <h4 class="mb-0 fw-bold"><code>{{ bet.uuid }}</code></h4>
                        </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 Amount</h6>
                            <h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(bet.total_amount) if bet.total_amount else '0.00' }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <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">Bet Count</h6>
                            <h3 class="mb-0 fw-bold">{{ bet.bet_count }}</h3>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <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 Number</h6>
                            <h3 class="mb-0 fw-bold">{{ bet.match_number }}</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">Paid</h6>
                            <h3 class="mb-0 fw-bold">
                                {% if bet.paid %}
                                <i class="fas fa-check-circle"></i> Yes
                                {% else %}
                                <i class="fas fa-times-circle"></i> No
                                {% endif %}
                            </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">Paid Out</h6>
                            <h3 class="mb-0 fw-bold">
                                {% if bet.paid_out %}
                                <i class="fas fa-check-circle"></i> Yes
                                {% else %}
                                <i class="fas fa-times-circle"></i> No
                                {% endif %}
                            </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">Bet DateTime</h6>
                            <h5 class="mb-0 fw-bold 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 '' }}
                            </h5>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bet Details Table -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <h5 class="mb-0"><i class="fas fa-list me-2"></i>Bet Details</h5>
                    <div class="timezone-selector">
                        <span>Timezone:</span>
                        <select id="timezone" onchange="changeTimezone()">
                            {% include 'main/_timezone_options.html' %}
                        </select>
                    </div>
                </div>
                <div class="card-body">
                    {% if bet_details %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <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><strong>{{ detail.outcome }}</strong></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>
                                        {% if detail.result == 'win' %}
                                        <span class="badge bg-success">Win</span>
                                        {% elif detail.result == 'lose' %}
                                        <span class="badge bg-danger">Lose</span>
                                        {% elif detail.result == 'pending' %}
                                        <span class="badge bg-secondary">Pending</span>
                                        {% else %}
                                        <span class="badge bg-info">{{ detail.result }}</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-5">
                        <i class="fas fa-list fa-3x text-muted mb-3"></i>
                        <h4 class="text-muted">No bet details found</h4>
                        <p class="text-muted">This bet has no detailed breakdown.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% block extra_js %}
<script>
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 %}