{% extends 'base.html.twig' %}

{% block title %}Head2Head Karera{% endblock %}

{% block body %}
<div class="container-fluid page-container px-3" style="padding-top: 16px; padding-bottom: 100px; max-width: 600px; margin: 0 auto;">

    {% if playBlocked %}
        <div class="alert alert-warning text-center" role="alert">
            <strong>Play Blocked</strong><br>
            Your account is restricted from playing this game.
        </div>
    {% elseif event is null %}
        <div class="text-center py-5">
            <h2>No Races Today</h2>
            <p style="color: #ffffff;">Check back later for today's races.</p>
        </div>
    {% else %}
        <div class="mb-3">
            <h2 class="mb-1 fs-4">Head2Head Karera</h2>
            <p class="mb-0 small" style="color: #ffffff;">{{ event.eventDate|date('l, F j, Y') }}</p>
        </div>

        {% if event.videoUrl %}
            <div class="mb-3">
                <div class="ratio ratio-16x9 rounded overflow-hidden">
                    <iframe src="{{ event.videoUrl }}?autoplay=1&controls=0&mute=1" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                </div>
            </div>
        {% endif %}

        {% if event.races|length == 0 %}
            <div class="text-center py-5">
                <h3>No Races Available</h3>
                <p style="color: #ffffff;">Races will be added soon.</p>
            </div>
        {% else %}
            {# Race Tabs Navigation - Scrollable on mobile #}
            <div class="mb-3" style="overflow-x: auto; -webkit-overflow-scrolling: touch;">
                <ul class="nav nav-tabs flex-nowrap" id="raceTabs" role="tablist" style="min-width: max-content;">
                    {% for race in event.races %}
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {% if loop.first %}active{% endif %} px-3 py-2" 
                                    id="race-{{ race.id }}-tab" 
                                    data-bs-toggle="tab" 
                                    data-bs-target="#race-{{ race.id }}" 
                                    type="button" 
                                    role="tab" 
                                    aria-controls="race-{{ race.id }}" 
                                    aria-selected="{% if loop.first %}true{% else %}false{% endif %}"
                                    style="white-space: nowrap; {% if loop.first %}color: #fff;{% endif %}">
                                Race {{ race.raceNo }}
                                {% if race.bettingStatus == 'open' %}
                                    <span class="badge bg-success ms-1" style="font-size: 0.65rem;">Open</span>
                                {% elseif race.bettingStatus == 'closed' %}
                                    <span class="badge bg-secondary ms-1" style="font-size: 0.65rem;">Closed</span>
                                {% else %}
                                    <span class="badge bg-dark ms-1" style="font-size: 0.65rem;">Cancelled</span>
                                {% endif %}
                            </button>
                        </li>
                    {% endfor %}
                </ul>
            </div>

            <style>
                #raceTabs .nav-link.active {
                    color: #fff !important;
                }
                
                /* Mobile optimizations */
                @media (max-width: 576px) {
                    .horse-card {
                        min-height: 140px !important;
                        padding: 0.75rem !important;
                    }
                    .horse-card .badge {
                        font-size: 0.875rem !important;
                        padding: 0.375rem 0.75rem !important;
                    }
                    .horse-card h6 {
                        font-size: 0.875rem !important;
                    }
                    .horse-card small {
                        font-size: 0.75rem !important;
                    }
                    .bet-button {
                        height: 48px !important;
                        font-size: 0.9375rem !important;
                    }
                    .quick-amount {
                        flex: 1 1 calc(50% - 0.5rem) !important;
                        min-height: 44px !important;
                        font-size: 1rem !important;
                    }
                }
            </style>

            {# Race Tab Content #}
            <div class="tab-content" id="raceTabsContent">
                {% for race in event.races %}
                    <div class="tab-pane fade {% if loop.first %}show active{% endif %}" 
                         id="race-{{ race.id }}" 
                         role="tabpanel" 
                         aria-labelledby="race-{{ race.id }}-tab">
                        <div class="card" data-race-id="{{ race.id }}" data-betting-status="{{ race.bettingStatus }}" data-winner="{{ race.winner|default('') }}">
                            <div class="card-body p-2 p-sm-3">
                                {# Calculate user's bets for this race first #}
                                {% set userBets = [] %}
                                {% set betOnHorseA = false %}
                                {% set betOnHorseB = false %}
                                {% for bet in bets|default([]) %}
                                    {% if bet.race.id == race.id %}
                                        {% set userBets = userBets|merge([bet]) %}
                                        {% if bet.horse == 'A' %}
                                            {% set betOnHorseA = true %}
                                        {% elseif bet.horse == 'B' %}
                                            {% set betOnHorseB = true %}
                                        {% endif %}
                                    {% endif %}
                                {% endfor %}

                                <div class="row g-2 g-sm-3">
                                    {# Horse A #}
                                    <div class="col-6">
                                        <div class="horse-card text-center p-2 p-sm-3 border rounded {% if race.winner == 'A' %}border-success border-3{% endif %}" style="background: #e3f2fd; min-height: 160px; display: flex; flex-direction: column; justify-content: center;">
                                            <div class="badge bg-info text-dark mb-2" style="font-size: 0.9375rem; padding: 0.4rem 0.9rem;">#{{ race.horseANumber }}</div>
                                            <h6 class="mb-1 text-dark fw-bold" style="font-size: 0.875rem; line-height: 1.2;">{{ race.horseAName }}</h6>
                                            <small class="text-muted" style="font-size: 0.75rem;">{{ race.horseAJockey }}</small>
                                            {% if race.winner == 'A' %}
                                                <div class="mt-2">
                                                    <span class="badge bg-success" style="font-size: 0.75rem;">WINNER</span>
                                                </div>
                                            {% endif %}
                                        </div>
                                        {% if race.bettingStatus == 'open' and not playBlocked %}
                                            {% if betOnHorseA %}
                                                <button class="bet-button btn w-100 mt-2 btn-add-bet" data-horse="A" data-race-id="{{ race.id }}" style="background-color: #198754; border-color: #198754; color: #fff; height: 48px; font-weight: 600; border-radius: 0.375rem; font-size: 0.9375rem;">
                                                    Add More Bet
                                                </button>
                                            {% elseif not betOnHorseA and not betOnHorseB %}
                                                <button class="bet-button btn w-100 mt-2 btn-bet" data-horse="A" data-race-id="{{ race.id }}" style="background-color: #0d6efd; border-color: #0d6efd; color: #fff; height: 48px; font-weight: 600; border-radius: 0.375rem; font-size: 0.9375rem;">
                                                    Bet on Horse A
                                                </button>
                                            {% endif %}
                                        {% endif %}
                                    </div>

                                    {# Horse B #}
                                    <div class="col-6">
                                        <div class="horse-card text-center p-2 p-sm-3 border rounded {% if race.winner == 'B' %}border-success border-3{% endif %}" style="background: #ffebee; min-height: 160px; display: flex; flex-direction: column; justify-content: center;">
                                            <div class="badge bg-danger mb-2" style="font-size: 0.9375rem; padding: 0.4rem 0.9rem;">#{{ race.horseBNumber }}</div>
                                            <h6 class="mb-1 text-dark fw-bold" style="font-size: 0.875rem; line-height: 1.2;">{{ race.horseBName }}</h6>
                                            <small class="text-muted" style="font-size: 0.75rem;">{{ race.horseBJockey }}</small>
                                            {% if race.winner == 'B' %}
                                                <div class="mt-2">
                                                    <span class="badge bg-success" style="font-size: 0.75rem;">WINNER</span>
                                                </div>
                                            {% endif %}
                                        </div>
                                        {% if race.bettingStatus == 'open' and not playBlocked %}
                                            {% if betOnHorseB %}
                                                <button class="bet-button btn w-100 mt-2 btn-add-bet" data-horse="B" data-race-id="{{ race.id }}" style="background-color: #198754; border-color: #198754; color: #fff; height: 48px; font-weight: 600; border-radius: 0.375rem; font-size: 0.9375rem;">
                                                    Add More Bet
                                                </button>
                                            {% elseif not betOnHorseA and not betOnHorseB %}
                                                <button class="bet-button btn w-100 mt-2 btn-bet" data-horse="B" data-race-id="{{ race.id }}" style="background-color: #dc3545; border-color: #dc3545; color: #fff; height: 48px; font-weight: 600; border-radius: 0.375rem; font-size: 0.9375rem;">
                                                    Bet on Horse B
                                                </button>
                                            {% endif %}
                                        {% endif %}
                                    </div>
                                </div>

                                {# User's bets for this race #}
                                {% if userBets|length > 0 %}
                                    <div class="mt-3">
                                        <h6 class="mt-2 mb-2 small fw-bold">Your Bets:</h6>
                                        <div class="list-group list-group-flush">
                                            {% for bet in userBets %}
                                                <div class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
                                                    <div>
                                                        <span class="badge {% if bet.horse == 'A' %}bg-info text-dark{% else %}bg-danger{% endif %} me-2" style="font-size: 0.75rem;">
                                                            Horse {{ bet.horse }}
                                                        </span>
                                                        <span style="font-size: 0.875rem;">₱{{ bet.amount|number_format(2) }}</span>
                                                    </div>
                                                    <div>
                                                        {% if bet.status == 'pending' %}
                                                            <span class="badge bg-warning text-dark" style="font-size: 0.75rem;">Pending</span>
                                                        {% elseif bet.status == 'won' %}
                                                            <span class="badge bg-success" style="font-size: 0.75rem;">Won ₱{{ bet.payout|number_format(2) }}</span>
                                                        {% else %}
                                                            <span class="badge bg-secondary" style="font-size: 0.75rem;">Lost</span>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    {% endif %}

</div>

{# Bet Modal - Mobile optimized #}
<div class="modal fade" id="betModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fs-6">Place Bet</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="betForm">
                    <input type="hidden" id="betRaceId" name="race_id">
                    <input type="hidden" id="betHorse" name="horse">
                    <input type="hidden" name="_token" value="{{ csrf_token('h2h_bet') }}">

                    <div class="mb-3">
                        <label class="form-label small fw-bold">Selected Horse</label>
                        <div id="selectedHorse" class="fw-bold fs-5"></div>
                    </div>

                    <div class="mb-3">
                        <label for="betAmount" class="form-label small fw-bold">Bet Amount (₱)</label>
                        <input type="number" inputmode="decimal" class="form-control form-control-lg" id="betAmount" name="amount" min="1" step="0.01" required style="font-size: 1.125rem;">
                        <div class="form-text" style="color: #fff; font-size: 0.875rem;">Your balance: ₱<span id="userBalance">{{ app.user.walletBalance|number_format(2) }}</span></div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label small fw-bold">Quick Select</label>
                        <div class="d-flex gap-2 flex-wrap">
                            <button type="button" class="btn btn-outline-secondary quick-amount" data-amount="10" style="min-height: 44px; flex: 1 1 calc(50% - 0.5rem);">₱10</button>
                            <button type="button" class="btn btn-outline-secondary quick-amount" data-amount="50" style="min-height: 44px; flex: 1 1 calc(50% - 0.5rem);">₱50</button>
                            <button type="button" class="btn btn-outline-secondary quick-amount" data-amount="100" style="min-height: 44px; flex: 1 1 calc(50% - 0.5rem);">₱100</button>
                            <button type="button" class="btn btn-outline-secondary quick-amount" data-amount="500" style="min-height: 44px; flex: 1 1 calc(50% - 0.5rem);">₱500</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="min-height: 44px;">Cancel</button>
                <button type="button" class="btn btn-primary" id="submitBet" style="min-height: 44px;">Place Bet</button>
            </div>
        </div>
    </div>
</div>

{# Wallet Bar #}
<div class="wallet-bar" data-testid="wallet-bar">
    <div class="wallet-bar__balance"
         data-controller="balance-counter"
         data-balance-counter-amount-value="{{ app.user.walletBalance }}">
        <p class="wallet-bar__label">Balance</p>
        <p class="wallet-bar__amount" data-testid="wallet-bar-amount"
           data-balance-counter-target="display">₱{{ app.user.walletBalance|number_format(2) }}</p>
    </div>
    <div class="wallet-bar__actions">
        <a href="{{ path('app_deposit') }}"
           class="pill-link--ghost"
           style="font-size: 12px; padding: 7px 14px;"
           data-testid="wallet-bar-add-funds">+ Add Funds</a>
    </div>
</div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        const BET_URL = '{{ path('app_play_head2head_karera_bet') }}';
        const STATE_URL = '{{ path('app_play_head2head_karera_state') }}';
        let currentBalance = parseFloat('{{ app.user.walletBalance }}');

        document.addEventListener('DOMContentLoaded', function() {
            const betModal = new bootstrap.Modal(document.getElementById('betModal'));

            // Bet button click (both regular bet and add bet buttons)
            document.querySelectorAll('.btn-bet, .btn-add-bet').forEach(btn => {
                btn.addEventListener('click', function() {
                    const horse = this.dataset.horse;
                    const raceId = this.dataset.raceId;

                    document.getElementById('betRaceId').value = raceId;
                    document.getElementById('betHorse').value = horse;
                    document.getElementById('selectedHorse').textContent = `Horse ${horse}`;
                    document.getElementById('betAmount').value = '';

                    betModal.show();
                });
            });

            // Quick amount buttons
            document.querySelectorAll('.quick-amount').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.getElementById('betAmount').value = this.dataset.amount;
                });
            });

            // Submit bet
            document.getElementById('submitBet').addEventListener('click', function() {
                const form = document.getElementById('betForm');
                const formData = new FormData(form);

                fetch(BET_URL, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        betModal.hide();
                        // Update balance
                        currentBalance = parseFloat(data.walletBalance);
                        document.getElementById('userBalance').textContent = currentBalance.toFixed(2);
                        // Reload page to show updated bets
                        location.reload();
                    } else {
                        alert(data.error || 'Failed to place bet');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred while placing your bet');
                });
            });
        });
    </script>
{% endblock %}