{% extends "base.html" %}

{% block title %}
{{ _('Covered Call ITM') }} - {{ _('BackTestingMarket') }}
{% endblock %}

{% block extra_head %}

<link rel="stylesheet" href="{{ url_for('static', filename='css/styles-ccitm.css') }}">

{% endblock %}

{% block content %}

<div class="container-fluid">
    <div class="row">
        <!-- Columna izquierda: 3 de 12 columnas -->
        <div class="col-md-3 left-column">
            <!-- Contenedor para buscar el ticker -->
            <div class="custom-container">
                <form id="tickerForm" onsubmit="return false;">
                    <div class="mb-3">
                        <label for="ticker" class="form-label">{{ _('Ticker Symbol:') }}</label>
                        <input type="text" class="form-control" id="ticker" name="ticker" oninput="toUpperCase(this)"
                            required>
                    </div>
                    <button type="button" class="btn btn-success w-100" onclick="fetchLastPrice()">{{ _('Obtener Precio')
                        }}</button>
                </form>
                <div id="priceDisplay" class="mt-2 text-center">
                    <span id="priceValue" class="fw-bold">-</span>
                </div>

            </div>

            <!-- Contenedor para los detalles de la opción -->
            <div class="custom-container">
                <form>
                    <div class="mb-3">
                        <label for="date" class="form-label">{{ _('Fecha:') }}</label>
                        <input type="date" class="form-control" id="date" name="date">
                    </div>
                    <div class="row g-2 mb-3">
                        <div class="col">
                            <label for="strike" class="form-label">{{ _('Strike:') }}</label>
                            <input type="number" class="form-control" id="strike" name="strike" step="1">
                        </div>
                        <div class="col">
                            <label for="cantidad" class="form-label">{{ _('Cantidad:') }}</label>
                            <input type="number" class="form-control" id="cantidad" name="cantidad" value="100"
                                min="100" step="100" onkeydown="return false;">
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary w-100" onclick="fetchOptionDetails()">
                        {{ _('Obtener Opción') }}
                    </button>
                </form>
            </div>

            <!-- Contenedor para mostrar los resultados -->
            <div class="custom-container results-container">
                <!-- Primera fila: BID y ASK -->
                <div class="row mb-2">
                    <div class="col text-end">
                        <label class="form-label">{{ _('BID') }}</label>
                        <div id="resultBid" class="result-box">-</div>
                    </div>
                    <div class="col text-end">
                        <label class="form-label">{{ _('ASK') }}</label>
                        <div id="resultAsk" class="result-box">-</div>
                    </div>
                </div>
                <!-- Segunda fila: Volume y Crédito -->
                <div class="row mb-2">
                    <div class="col text-end">
                        <label class="form-label">{{ _('Volumen') }}</label>
                        <div id="resultVolume" class="result-box">-</div>
                    </div>
                    <div class="col text-end">
                        <label class="form-label">{{ _('Crédito') }}</label>
                        <div id="resultCredito" class="result-box">-</div>
                    </div>
                </div>
                <!-- Tercera fila: Breakeven y % to Breakeven -->
                <div class="row mb-2">
                    <div class="col text-end">
                        <label class="form-label">{{ _('Breakeven') }}</label>
                        <div id="resultBreakeven" class="result-box">-</div>
                    </div>
                    <div class="col text-end">
                        <label class="form-label">{{ _('% al Breakeven') }}</label>
                        <div id="resultPercentageToBreakeven" class="result-box">-</div>
                    </div>
                </div>
                <!-- Fila para MAX PROFIT -->
                <div class="row py-3">
                    <div class="col text-center">
                        <label class="form-label">{{ _('MAX GANANCIA') }}</label>
                        <div id="resultMaxProfit" class="result-box display-6">-</div>
                    </div>
                </div>
            </div>

        </div>

        <!-- Columna derecha: 9 de 12 columnas -->
        <div class="col-md-9">
            <div class="table-container">
                <h5 class="mb-3">High IV Rank Stocks</h5>
                <div class="table-responsive" style="height: 820px;">
                    <table class="table table-striped table-bordered table-hover table-custom">
                        <thead>
                            <tr>
                                {% for header in headers %}
                                <th>{{ header }}</th>
                                {% endfor %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in data %}
                            <tr>
                                {% for header in headers %}
                                {% if loop.index0 == 0 %}
                                <td>
                                    <a href="#" onclick="setTicker('{{ row[header] }}'); return false;">
                                        {{ row[header] }}
                                    </a>
                                </td>
                                {% else %}
                                <td>{{ row[header] }}</td>
                                {% endif %}
                                {% endfor %}
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>



            </div>
        </div>
    </div>
</div>

<!-- Widget de TradingView -->
<div id="tradingview-container" style="height: 600px; margin: 20px;">
</div>
{% endblock %}

{% block scripts %}
{{ super() }}

<script>
    document.addEventListener('DOMContentLoaded', () => {
        initThemeToggle(); // 👈 Esta línea es clave

    });

    window.onload = function () {
        const dateInput = document.getElementById('date');
        if (dateInput) {
            const today = new Date();
            const currentDay = today.getDay(); // 0 (domingo) a 6 (sábado)
            // El viernes es 5. Calcula días hasta el próximo viernes.
            let daysUntilFriday = (5 - currentDay + 7) % 7;
            // Si hoy es viernes, queremos el siguiente viernes (7 días después)
            if (daysUntilFriday === 0) {
                daysUntilFriday = 7;
            }
            const nextFriday = new Date(today.getFullYear(), today.getMonth(), today.getDate() + daysUntilFriday);
            // Formatear a YYYY-MM-DD
            const nextFridayStr = nextFriday.toISOString().split('T')[0];
            dateInput.value = nextFridayStr;
        }
    };
    let lastPrice = 0;

    function toUpperCase(input) {
        input.value = input.value.toUpperCase();
    }

    function setTicker(symbol) {
        // Actualiza el valor del input
        const tickerInput = document.getElementById('ticker');
        tickerInput.value = symbol;
        // Convertir a mayúsculas (si es necesario)
        toUpperCase(tickerInput);
        // Llama a la función que obtiene el precio
        fetchLastPrice();
    }

    function fetchLastPrice() {
        const ticker = document.getElementById('ticker').value;
        if (!ticker) {
            showFlashMessage("{{ _('Por favor, ingrese un símbolo.') }}", "warning");
            return;
        }
        fetch('/ccitm/get_last_price', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ ticker: ticker })
        })
            .then(response => response.json())
            .then(data => {
                // Actualiza la variable global lastPrice (sin "let")
                lastPrice = parseFloat(data.last_price);
                const priceDisplay = document.getElementById('priceValue');
                if (!isNaN(lastPrice)) {
                    priceDisplay.innerText = `$${lastPrice.toFixed(2)}`;
                    // Asigna al campo "strike" el entero más cercano a (lastPrice - 1)
                    const strikeInput = document.getElementById('strike');
                    if (strikeInput) {
                        strikeInput.value = Math.round(lastPrice - 1);
                    }
                } else {
                    priceDisplay.innerText = "Precio no disponible";
                }
                updateTradingViewWidget(ticker);
            })
            .catch(error => console.error("Error al obtener el precio:", error));
    }



    function updateTradingViewWidget(ticker) {
        const container = document.getElementById('tradingview-container');
        container.innerHTML = '';
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js';
        script.async = true;
        script.innerHTML = JSON.stringify({
            autosize: true,
            symbol: ticker,
            interval: "D",
            timezone: "Etc/UTC",
            theme: "light",
            style: "1",
            locale: "en",
            hide_side_toolbar: false,
            allow_symbol_change: true,
            calendar: false,
            support_host: "https://www.tradingview.com"
        });
        container.appendChild(script);
    }

    function fetchOptionDetails() {
        const ticker = document.getElementById('ticker').value.trim().toUpperCase();
        const dateValue = document.getElementById('date').value;
        const strikeValue = parseFloat(document.getElementById('strike').value);
        const cantidad = parseInt(document.getElementById('cantidad').value, 10);
        if (!ticker || !dateValue || isNaN(strikeValue) || isNaN(cantidad)) {
            showFlashMessage("{{ _('Por favor ingrese todos los campos correctamente.') }}", "warning");
            return;
        }
        fetch('/ccitm/get_option_details', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                ticker: ticker,
                date: dateValue,
                strike: strikeValue
            })
        })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    showFlashMessage(data.error, "danger");
                    return;
                }
                const bid = parseFloat(data.bid || 0);
                const ask = parseFloat(data.ask || 0);
                const volume = parseInt(data.totalVolume || 0);
                const midPrice = (bid + ask) / 2;
                const credito = midPrice * cantidad;
                const breakeven = lastPrice - (credito / cantidad);
                const percentageToBreakeven = ((lastPrice - breakeven) / lastPrice) * 100;
                document.getElementById('resultBid').innerText = bid.toFixed(2) || "-";
                document.getElementById('resultAsk').innerText = ask.toFixed(2) || "-";
                document.getElementById('resultVolume').innerText = volume || "-";
                document.getElementById('resultCredito').innerText = credito.toFixed(2) || "-";
                document.getElementById('resultBreakeven').innerText = breakeven.toFixed(2) || "-";
                document.getElementById('resultPercentageToBreakeven').innerText = percentageToBreakeven.toFixed(2) + "%" || "-";
                const maxProfitElement = document.getElementById('resultMaxProfit');
                const maxProfit = (-lastPrice * cantidad) + credito + (strikeValue * cantidad);
                maxProfitElement.innerText = maxProfit.toFixed(2) || "-";
                // Asigna color verde si es positivo y rojo si es negativo
                if (maxProfit > 0) {
                    maxProfitElement.classList.add("text-success");
                    maxProfitElement.classList.remove("text-danger");
                } else {
                    maxProfitElement.classList.add("text-danger");
                    maxProfitElement.classList.remove("text-success");
                }
            })
            .catch(error => console.error("Error al obtener los detalles de la opción:", error));
    }
</script>
{% endblock %}