{% extends "base.html" %}

{% block title %}Reports{% 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;
    }
</style>
{% endblock %}

{% block content %}
    <!-- Print button -->
    <button class="print-btn" onclick="window.print()">
        <i class="fas fa-print"></i> Print Page
    </button>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1>Reports</h1>
                <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.reports', export='csv', **filters) }}">Export as CSV</a></li>
                        <li><a class="dropdown-item" href="{{ url_for('main.reports', export='xlsx', **filters) }}">Export as Excel</a></li>
                        <li><a class="dropdown-item" href="{{ url_for('main.reports', export='pdf', **filters) }}">Export as PDF</a></li>
                    </ul>
                </div>
            </div>

            <!-- Summary Cards - First Row (3 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">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="icon-box bg-white bg-opacity-25 rounded-circle p-2">
                                        <i class="fas fa-arrow-down fa-lg"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-2">
                                    <h6 class="card-title mb-1 text-white-50">Total Payin</h6>
                                    <h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(totals.total_payin) }}</h3>
                                </div>
                            </div>
                        </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">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="icon-box bg-white bg-opacity-25 rounded-circle p-2">
                                        <i class="fas fa-arrow-up fa-lg"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-2">
                                    <h6 class="card-title mb-1 text-white-50">Total Payout</h6>
                                    <h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(totals.total_payout) }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card {% if totals.total_balance >= 0 %}bg-gradient-success{% else %}bg-gradient-danger{% endif %} text-white mb-3 shadow-sm border-0 h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="icon-box bg-white bg-opacity-25 rounded-circle p-2">
                                        <i class="fas fa-balance-scale fa-lg"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-2">
                                    <h6 class="card-title mb-1 text-white-50">Total Balance</h6>
                                    <h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(totals.total_balance) }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Summary Cards - Second Row (2 cards) -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <div class="card bg-gradient-warning text-white mb-3 shadow-sm border-0 h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="icon-box bg-white bg-opacity-25 rounded-circle p-2">
                                        <i class="fas fa-exchange-alt fa-lg"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-2">
                                    <h6 class="card-title mb-1 text-white-50">CAP Redistribution</h6>
                                    <h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(totals.cap_balance) }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card bg-gradient-info text-white mb-3 shadow-sm border-0 h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="icon-box bg-white bg-opacity-25 rounded-circle p-2">
                                        <i class="fas fa-chart-line fa-lg"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-2">
                                    <h6 class="card-title mb-1 text-white-50">Accumulated Shortfall</h6>
                                    <h3 class="mb-0 fw-bold">{{ "{:,.2f}".format(totals.accumulated_shortfall or 0) }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filters -->
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-white">
                    <button class="btn btn-link text-decoration-none w-100 text-start p-0" type="button" data-bs-toggle="collapse" data-bs-target="#filterCollapse" aria-expanded="true" aria-controls="filterCollapse">
                        <h5 class="mb-0 d-flex align-items-center">
                            <i class="fas fa-filter me-2 text-primary"></i>
                            Filters
                            <i class="fas fa-chevron-down ms-auto" id="filterIcon"></i>
                        </h5>
                    </button>
                </div>
                <div class="collapse show" id="filterCollapse">
                    <div class="card-body">
                        <form method="GET" action="{{ url_for('main.reports') }}">
                            <div class="row">
                                <!-- Column 1: Client Selection -->
                                <div class="col-md-4 mb-3">
                                    <label for="client_id" class="form-label fw-semibold">
                                        <i class="fas fa-user me-1"></i> Client
                                    </label>
                                    <select class="form-select" id="client_id" name="client_id">
                                        <option value="">All Clients</option>
                                        {% for client in client_data %}
                                        <option value="{{ client.client_id }}" {% if filters.client_id == client.client_id %}selected{% endif %}>{{ client.token_name }} ({{ client.client_id }})</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <!-- Column 2: Date Range Selection -->
                                <div class="col-md-4 mb-3">
                                    <label for="date_range" class="form-label fw-semibold">
                                        <i class="fas fa-calendar me-1"></i> 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>

                                <!-- Column 3: Sort By -->
                                <div class="col-md-4 mb-3">
                                    <label for="sort_by" class="form-label fw-semibold">
                                        <i class="fas fa-sort me-1"></i> Sort By
                                    </label>
                                    <select class="form-select" id="sort_by" name="sort_by">
                                        <option value="last_match_timestamp" {% if filters.sort_by == 'last_match_timestamp' %}selected{% endif %}>Last Match</option>
                                        <option value="token_name" {% if filters.sort_by == 'token_name' %}selected{% endif %}>Client Name</option>
                                        <option value="total_payin" {% if filters.sort_by == 'total_payin' %}selected{% endif %}>Total Payin</option>
                                        <option value="total_payout" {% if filters.sort_by == 'total_payout' %}selected{% endif %}>Total Payout</option>
                                        <option value="net_profit" {% if filters.sort_by == 'net_profit' %}selected{% endif %}>Net Profit</option>
                                        <option value="total_bets" {% if filters.sort_by == 'total_bets' %}selected{% endif %}>Total Bets</option>
                                        <option value="total_matches" {% if filters.sort_by == 'total_matches' %}selected{% endif %}>Total Matches</option>
                                        <option value="cap_balance" {% if filters.sort_by == 'cap_balance' %}selected{% endif %}>CAP Balance</option>
                                        <option value="accumulated_shortfall" {% if filters.sort_by == 'accumulated_shortfall' %}selected{% endif %}>Accumulated Shortfall</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Timezone Selection -->
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="timezone" class="form-label fw-semibold">
                                        <i class="fas fa-globe me-1"></i> Timezone
                                    </label>
                                    <select class="form-select" id="timezone" name="timezone">
                                        {% include 'main/_timezone_options.html' %}
                                    </select>
                                </div>
                            </div>

                            <!-- Time Filters (Always Visible) -->
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="start_time" class="form-label fw-semibold">
                                        <i class="fas fa-clock me-1"></i> Start Time
                                    </label>
                                    <input type="time" class="form-control" id="start_time" name="start_time" value="{{ filters.start_time }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="end_time" class="form-label fw-semibold">
                                        <i class="fas fa-clock me-1"></i> End Time
                                    </label>
                                    <input type="time" class="form-control" id="end_time" name="end_time" value="{{ filters.end_time }}">
                                </div>
                            </div>

                            <!-- Custom Date Range (Only visible when Custom is selected) -->
                            <div class="row mb-3" id="customDateRange" style="display: {% if filters.date_range == 'custom' %}block{% else %}none{% endif %};">
                                <div class="col-md-6">
                                    <label for="start_date" class="form-label fw-semibold">
                                        <i class="fas fa-play me-1"></i> Start Date
                                    </label>
                                    <input type="date" class="form-control" id="start_date" name="start_date" value="{{ filters.start_date }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="end_date" class="form-label fw-semibold">
                                        <i class="fas fa-stop me-1"></i> End Date
                                    </label>
                                    <input type="date" class="form-control" id="end_date" name="end_date" value="{{ filters.end_date }}">
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="row">
                                <div class="col-12 text-end">
                                    <button type="button" class="btn btn-outline-secondary me-2" onclick="resetFilters()">
                                        <i class="fas fa-undo me-1"></i> Reset Filters
                                    </button>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-search me-1"></i> Apply Filters
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Clients Table -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-semibold">
                        <i class="fas fa-users me-2 text-primary"></i>Client Reports
                    </h5>
                    <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>
                <div class="card-body">
                    {% if clients %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Client</th>
                                    <th>ID</th>
                                    <th>Matches</th>
                                    <th>Bets</th>
                                    <th>Payin</th>
                                    <th>Payout</th>
                                    <th>Balance</th>
                                    <th>CAP</th>
                                    <th>Short</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for client in clients %}
                                <tr>
                                    <td><strong>{{ client.token_name }}</strong></td>
                                    <td><code>{{ client.client_id }}</code></td>
                                    <td class="text-center">{{ client.total_matches }}</td>
                                    <td class="text-center">{{ client.total_bets }}</td>
                                    <td class="text-end">{{ "{:,.2f}".format(client.total_payin) }}</td>
                                    <td class="text-end">{{ "{:,.2f}".format(client.total_payout) }}</td>
                                    <td class="text-end {% if client.balance >= 0 %}text-success{% else %}text-danger{% endif %}">
                                        {{ "{:,.2f}".format(client.balance) }}
                                    </td>
                                    <td class="text-end">{{ "{:,.2f}".format(client.cap_balance) }}</td>
                                    <td class="text-end">{{ "{:,.2f}".format(client.accumulated_shortfall) }}</td>
                                    <td>
                                        <a href="{{ url_for('main.client_report_detail', client_id=client.client_id) }}" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i>
                                        </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.reports', 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.reports', 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.reports', 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 }} clients
                        </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-file-alt fa-3x text-muted mb-3"></i>
                        <h4 class="text-muted">No 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>
{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const filterCollapse = document.getElementById('filterCollapse');
    const filterIcon = document.getElementById('filterIcon');
    const dateRangeSelect = document.getElementById('date_range');
    const customDateRange = document.getElementById('customDateRange');
    
    // Handle collapsible filter animation
    if (filterCollapse && filterIcon) {
        filterCollapse.addEventListener('show.bs.collapse', function() {
            filterIcon.classList.remove('fa-chevron-up');
            filterIcon.classList.add('fa-chevron-down');
        });
        
        filterCollapse.addEventListener('hide.bs.collapse', function() {
            filterIcon.classList.remove('fa-chevron-down');
            filterIcon.classList.add('fa-chevron-up');
        });
    }
    
    // Handle date range selection - show/hide custom date inputs
    if (dateRangeSelect && customDateRange) {
        dateRangeSelect.addEventListener('change', function() {
            if (this.value === 'custom') {
                customDateRange.style.display = 'block';
            } else {
                customDateRange.style.display = 'none';
            }
        });
    }
});

function resetFilters() {
    window.location.href = "{{ url_for('main.reports') }}";
}

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();
}

// Convert UTC datetime string to selected timezone
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;
    }
}

// Update all datetime displays to selected timezone
function updateTimezoneDisplays() {
    const timezoneSelect = document.getElementById('timezone');
    if (!timezoneSelect) return;
    
    let timezone = timezoneSelect.value;
    
    // If 'auto', use browser timezone
    if (timezone === 'auto') {
        try {
            timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        } catch (e) {
            console.log('Could not detect browser timezone:', e);
            timezone = 'UTC';
        }
    }
    
    // Store timezone in localStorage for persistence
    localStorage.setItem('selectedTimezone', timezone);
    
    // Find all elements with data-utc-datetime attribute and convert them
    const datetimeElements = document.querySelectorAll('[data-utc-datetime]');
    datetimeElements.forEach(element => {
        const utcString = element.getAttribute('data-utc-datetime');
        if (utcString) {
            element.textContent = convertToTimezone(utcString, timezone);
        }
    });
}

// Auto-detect and set browser timezone on page load
document.addEventListener('DOMContentLoaded', function() {
    const timezoneSelect = document.getElementById('timezone');
    if (timezoneSelect) {
        // Try to get the browser's timezone
        try {
            const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
            // Check if the browser timezone is in our options
            const options = Array.from(timezoneSelect.options).map(opt => opt.value);
            if (options.includes(browserTimezone)) {
                // Only set to browser timezone if current selection is 'auto' or empty
                if (timezoneSelect.value === 'auto' || !timezoneSelect.value) {
                    timezoneSelect.value = browserTimezone;
                }
            }
        } catch (e) {
            console.log('Could not detect browser timezone:', e);
        }
        
        // Add event listener for timezone change
        timezoneSelect.addEventListener('change', function() {
            updateTimezoneDisplays();
        });
        
        // Update timezone displays on page load
        updateTimezoneDisplays();
    }
});
</script>
{% endblock %}
{% endblock %}