{% extends "base.html" %}

{% block title %}
{{ _('Neutral Edge - BackTestingMarket') }}
{% endblock %}

{% block extra_head %}
<!-- CSS Externos -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.6.1/nouislider.min.css">
<link rel="stylesheet" href="/static/css/styles-neutraledge.css">

<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

<!-- Plotly -->
<script src="https://cdn.plot.ly/plotly-2.18.2.min.js"></script>


<!-- Estilos Inline -->
<style>
    main.container {
        display: block;
        width: 100%;
        min-height: 100%;
        overflow: visible;
    }

    .form-control,
    .form-select,
    input[type="number"] {
        background-color: #495057 !important;
        border: 1px solid #6c757d;
        color: #e9ecef;
        font-size: 0.8rem;
        padding: 0.3rem 0.5rem;
        line-height: 1.2;
        height: auto;
    }

    .form-control:focus,
    .form-select:focus,
    input[type="number"]:focus {
        border-color: #adb5bd !important;
        box-shadow: none;
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type="time"].form-control {
        height: 30px;
    }

    .input-narrow {
        max-width: 150px;
    }

    .form-label {
        font-size: 0.9rem;
        font-weight: 200;
        margin-bottom: 0.005rem;
    }

    .btn-success {
        background-color: #28a745;
        border-color: #28a745;
        border-radius: 8px;
        padding: 12px 30px;
        font-size: 1rem;
    }

    .btn-success:hover {
        background-color: #218838;
        border-color: #1e7e34;
    }

    .modal-content,
    #chartContainer {
        background-color: #343a40;
        border-radius: 10px;
        border: 1px solid #6c757d;
    }

    .custom-display {
        background-color: #495057;
        color: #e9ecef;
        font-size: 0.9rem;
        padding: 0.1rem 0.1rem;
        border: 1px solid #6c757d;
        border-radius: 0.4rem;
        text-align: center;
    }
</style>
{% endblock %}

{% block content %}

<!-- ALERTAS -->
<div id="alertContainer" style="position: fixed; top: 20px; right: 20px; z-index: 2000;"></div>

<!-- CARGANDO -->
<div id="loadingOverlay" class="loading-overlay">
    <div class="spinner-container">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">{{ _('Cargando...') }}</span>
        </div>
        <p class="mt-2">{{ _('Procesando datos, por favor espera...') }}</p>
        <p id="countdownTimer" class="text-center mt-3"></p>
    </div>
</div>

<!-- MAIN -->

<div class="container-fluid mt-1 pt-3" style="max-width: 1600px; background-color: #343a40;">
    <div class="card shadow-sm" style="background-color: #343a40;">
        <div class="card-body">
            <form id="backtestingForm">
                <!-- Fila 1 -->
                <div class="d-flex align-items-center flex-wrap gap-3 mb-3">
                    <div class="d-flex flex-column">
                        <label for="symbol" class="form-label fw-bold text-white">{{ _('Símbolo') }}</label>
                        <input type="text" id="symbol" class="form-control input-narrow" value="SPX" readonly>
                    </div>
                    <div class="d-flex flex-column">
                        <label for="strategy_display" class="form-label fw-bold text-white">{{ _('Estrategia')
                            }}</label>
                        <input type="text" id="strategy_display" class="form-control input-narrow" value="Iron Condor"
                            readonly>
                        <input type="hidden" id="strategy" value="IRON_CONDOR">
                    </div>
                    <div id="configValues" class="d-flex flex-wrap gap-3">
                        <div style="min-width: 150px;">
                            <label class="form-label fw-bold text-white">{{ _('Delta Call') }}</label>
                            <input type="text" id="deltaCallValue" class="form-control input-narrow" readonly>
                        </div>
                        <div style="min-width: 150px;">
                            <label class="form-label fw-bold text-white">{{ _('Spread Call') }}</label>
                            <input type="text" id="spreadCallValue" class="form-control input-narrow" readonly>
                        </div>
                        <div style="min-width: 150px;">
                            <label class="form-label fw-bold text-white">{{ _('Delta Put') }}</label>
                            <input type="text" id="deltaPutValue" class="form-control input-narrow" readonly>
                        </div>
                        <div style="min-width: 150px;">
                            <label class="form-label fw-bold text-white">{{ _('Spread Put') }}</label>
                            <input type="text" id="spreadPutValue" class="form-control input-narrow" readonly>
                        </div>
                    </div>

                    <div>
                        <button type="button" class="btn btn-secondary mt-4" data-bs-toggle="modal"
                            data-bs-target="#strategyModal">
                            <i class="fas fa-cog me-2"></i> {{ _('Configurar Estrategia') }}
                        </button>
                    </div>
                </div>

                <!-- Fila 2 -->
                <div class="row g-3 mb-3">
                    <div class="col-auto">
                        <label for="fechaDesde" class="form-label fw-bold text-white">{{ _('Desde') }}</label>
                        <input type="date" id="fechaDesde" class="form-control input-narrow" value="2025-01-01">
                    </div>
                    <div class="col-auto">
                        <label for="fechaHasta" class="form-label fw-bold text-white">{{ _('Hasta') }}</label>
                        <input type="date" id="fechaHasta" class="form-control input-narrow" value="2025-03-05">
                    </div>
                    <div class="col-auto">
                        <label for="horario" class="form-label fw-bold text-white">{{ _('Horario') }}</label>
                        <input type="time" id="horario" class="form-control input-narrow" value="10:30">
                    </div>
                    <div class="col-auto">
                        <label for="takeProfit" class="form-label fw-bold text-white">{{ _('Take Profit') }}</label>
                        <input type="number" id="takeProfit" class="form-control" value="100">
                    </div>
                    <div class="col-auto">
                        <label for="stopLoss" class="form-label fw-bold text-white">{{ _('Stop Loss') }}</label>
                        <input type="number" id="stopLoss" class="form-control" value="70">
                    </div>
                    <div class="col-auto">
                        <label for="desplazamiento" class="form-label fw-bold text-white">{{ _('Desplazamiento')
                            }}</label>
                        <input type="number" id="desplazamiento" class="form-control" value="10" step="5">
                    </div>
                </div>

                <div class="text-center mt-1">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-play me-2"></i> {{ _('Ejecutar Backtesting') }}
                    </button>
                </div>
            </form>
        </div>


        <!-- Resultados -->
        <div id="resultsContainer" style="padding: 20px; display: none; background-color: rgb(197, 197, 197);">
            <div class="row">
                <div class="col-12">
                    <h2 class="text-center text-uppercase fw-bold" style="color: rgb(41, 41, 41); font-size: 1.2rem;">
                        {{ _('Resultados del Backtesting') }}
                    </h2>
                </div>
            </div>

            <!-- Detalles de la estrategia -->
            <div class="row align-items-start">
                <div class="col-md-12">
                    <div id="strategyDetails"></div>
                </div>
            </div>

            <!-- Resumen de resultados -->
            <div class="row align-items-start mt-1">
                <div class="col-md-12">
                    <div id="resultsSummary"></div>
                </div>
            </div>

            <!-- Botones de gráficos -->
            <div class="row align-items-start mt-2">
                <div class="d-flex flex-wrap justify-content-center gap-2 mb-3 mt-2">
                    <button id="btnWeeklyChart" class="btn btn-primary">
                        <i class="fas fa-calendar-week me-2"></i> {{ _('P&L Semanal') }}
                    </button>
                    <button id="btnMonthlyChart" class="btn btn-info">
                        <i class="fas fa-calendar-alt me-2"></i> {{ _('P&L Mensual') }}
                    </button>
                    <button id="btnCumulativeChart" class="btn btn-secondary">
                        <i class="fas fa-chart-line me-2"></i> {{ _('P&L Diario') }}
                    </button>
                </div>
            </div>

            <!-- Gráfico -->
            <div class="mb-3">
                <div id="chartContainer"
                    style="width: 100%; height: 400px; background-color: white; border-radius: 8px; overflow: hidden; border: none;">
                </div>
            </div>

            <!-- Filtros Día / Eventos / GAP / Exportar CSV -->
            <div class="rounded p-3 mb-3 bg-light">
                <div class="d-flex flex-wrap align-items-center gap-2 w-100">

                    <!-- Dropdown Día -->
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="daysDropdown"
                            data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                            {{ _('Día(s)') }}
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="daysDropdown">
                            {% for day, label in [('Monday', _('Lunes')), ('Tuesday', _('Martes')), ('Wednesday',
                            _('Miércoles')), ('Thursday', _('Jueves')), ('Friday', _('Viernes'))] %}
                            <li class="dropdown-item">
                                <div class="form-check small">
                                    <input class="form-check-input day-checkbox" type="checkbox" id="check{{ day }}"
                                        value="{{ day }}" checked>
                                    <label class="form-check-label" for="check{{ day }}">{{ label }}</label>
                                </div>
                            </li>
                            {% endfor %}
                            <li class="dropdown-item text-center">
                                <button type="button" id="applySelectedDays" class="btn btn-primary btn-sm">{{
                                    _('Aplicar') }}</button>
                            </li>
                        </ul>
                    </div>

                    <!-- Dropdown Eventos -->
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="newsDropdown"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            {{ _('Eventos') }}
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="newsDropdown">
                            <li><button class="dropdown-item event-filter-option small d-flex align-items-center"
                                    type="button" data-filter="all"><i class="bi bi-check me-2 d-none"></i>
                                    {{ _('Todos los días') }}</button></li>
                            <li><button class="dropdown-item event-filter-option small d-flex align-items-center"
                                    type="button" data-filter="no-news"><i class="bi bi-check me-2 d-none"></i>
                                    {{ _('Solo días sin eventos') }}</button></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><button class="dropdown-item event-filter-option small d-flex align-items-center"
                                    type="button" data-filter="CPI Report"><i class="bi bi-check me-2 d-none"></i>
                                    {{ _('Reporte de CPI') }}</button></li>
                            <li><button class="dropdown-item event-filter-option small d-flex align-items-center"
                                    type="button" data-filter="Fed Minutes"><i class="bi bi-check me-2 d-none"></i>
                                    {{ _('Minutas de la Fed') }}</button></li>
                            <li><button class="dropdown-item event-filter-option small d-flex align-items-center"
                                    type="button" data-filter="Unemployment"><i class="bi bi-check me-2 d-none"></i>
                                    {{ _('Reporte de Desempleo') }}</button></li>
                            <li><button class="dropdown-item event-filter-option small d-flex align-items-center"
                                    type="button" data-filter="PCE Report"><i class="bi bi-check me-2 d-none"></i>
                                    {{ _('Reporte PCE') }}</button></li>
                            <li><button class="dropdown-item event-filter-option small d-flex align-items-center"
                                    type="button" data-filter="GDP Report"><i class="bi bi-check me-2 d-none"></i>
                                    {{ _('Reporte GDP') }}</button></li>
                            <li><button class="dropdown-item event-filter-option small d-flex align-items-center"
                                    type="button" data-filter="Fed Meeting"><i class="bi bi-check me-2 d-none"></i>
                                    {{ _('Reunión de la Fed') }}</button></li>
                        </ul>
                    </div>

                    <!-- Dropdown GAP -->
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="gapDropdown"
                            data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                            {{ _('GAP') }}
                        </button>
                        <ul class="dropdown-menu p-3" style="min-width: 300px;" aria-labelledby="gapDropdown">
                            <li class="mb-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="checkGAP">
                                    <label class="form-check-label text-dark" for="checkGAP">{{ _('Activar GAP')
                                        }}</label>
                                </div>
                            </li>
                            <li class="mb-3 d-flex gap-2 align-items-end">
                                <div style="flex: 1;">
                                    <label for="gapDesde" class="form-label mb-1 text-dark">{{ _('Desde') }}</label>
                                    <div class="input-group input-group-sm">
                                        <input type="number" class="form-control" id="gapDesde" value="-0.5" step="0.01"
                                            min="-100" max="100" disabled>
                                        <span class="input-group-text">%</span>
                                    </div>
                                </div>
                                <div style="flex: 1;">
                                    <label for="gapHasta" class="form-label mb-1 text-dark">{{ _('Hasta') }}</label>
                                    <div class="input-group input-group-sm">
                                        <input type="number" class="form-control" id="gapHasta" value="0.5" step="0.01"
                                            min="-100" max="100" disabled>
                                        <span class="input-group-text">%</span>
                                    </div>
                                </div>
                            </li>
                            <li class="text-center">
                                <button type="button" id="applyGAP" class="btn btn-primary btn-sm">{{ _('Aplicar')
                                    }}</button>
                            </li>
                        </ul>
                    </div>

                    <!-- Exportar CSV -->
                    <div class="ms-auto">
                        <button class="btn btn-warning"
                            onclick="exportTableToCSV('resultsTable', 'OpcionSigma_BackTesting.csv')">
                            <i class="fas fa-download me-2"></i> {{ _('Descargar CSV') }}
                        </button>
                    </div>
                </div>

                <!-- Tabla -->
                <div class="table-responsive">
                    <table id="resultsTable" class="table table-striped">
                        <thead>
                            <tr>
                                <th scope="col" class="text-center">{{ _('Fecha') }}</th>
                                <th scope="col" class="text-center">{{ _('Día') }}</th>
                                <th scope="col" class="text-center">{{ _('Evento') }}</th>
                                <th scope="col" class="text-center">{{ _('Resultado') }}</th>
                                <th scope="col" class="text-center">{{ _('P/L') }}</th>
                                <th scope="col" class="text-center">{{ _('Crédito Inicial') }}</th>
                                <th scope="col" class="text-center">{{ _('Precio SPX') }}</th>
                                <th scope="col" class="text-center">{{ _('Hora Salida') }}</th>
                                <th scope="col" class="text-center">{{ _('Min. TP') }}</th>
                                <th scope="col" class="text-center">{{ _('Min. SL') }}</th>
                                <th scope="col" class="text-center">{{ _('Strikes (PUT/CALL)') }}</th>
                                <th scope="col" class="text-center">{{ _('P/L Acumulado') }}</th>
                            </tr>
                        </thead>
                        <tbody id="resultsBody"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- MODAL DE CONFIGURACIÓN DE ESTRATEGIA -->
<div id="strategyModal" class="modal fade" tabindex="-1" aria-labelledby="strategyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content bg-white">
            <div class="modal-header">
                <h5 class="modal-title" id="strategyModalLabel" style="color: #000;">
                    {{ _('Configuración de Estrategia') }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ _('Cerrar') }}"></button>
            </div>
            <div class="modal-body">
                <!-- Sliders de Deltas y Spreads -->
                <div class="outer-container">
                    <div class="set-container">
                        <div class="indicator-label">{{ _('DELTAS') }}</div>
                        <div class="main-container">
                            <div class="slider-container">
                                <div id="sliderDeltaPuts" class="slider"></div>
                            </div>
                            <div class="slider-container">
                                <div id="sliderDeltaCalls" class="slider"></div>
                            </div>
                        </div>
                        <div class="indicator-label">{{ _('SPREADS') }}</div>
                        <div class="main-container">
                            <div class="slider-container">
                                <div id="sliderSpreadPuts" class="slider"></div>
                            </div>
                            <div class="slider-container">
                                <div id="sliderSpreadCalls" class="slider"></div>
                            </div>
                        </div>
                    </div>

                    <div class="chart-container">
                        <div id="chart"></div>
                        <p class="text-muted text-center mt-2" style="font-size: 0.9em;">
                            {{ _('Nota: Este gráfico es una simulación para ilustrar el payoff de la estrategia.') }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _('Cerrar') }}</button>
                <button type="button" class="btn btn-primary" onclick="saveConfig()">{{ _('Guardar Cambios') }}</button>
            </div>
        </div>
    </div>
</div>


{% endblock %}

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

<!-- SCRIPTS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@1.1.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.0/dist/chartjs-plugin-zoom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.6.1/nouislider.min.js"></script>
<script src="{{ url_for('static', filename='/scripts/neutralEdge/scripts.js') }}"></script>
<script src="{{ url_for('static', filename='/scripts/neutralEdge/ironCondor.js') }}"></script>
<script>


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

    });

    const currentLang = "{{ locale_actual }}";

    const alertMessages = {
        dateTooEarly: "{{ _('La fecha \'Desde\' no puede ser menor a 2024-06-01.') }}",
        dateOrderError: "{{ _('La fecha \'Hasta\' debe ser mayor que la fecha \'Desde\'.') }}",
        timeOutOfRange: "{{ _('El horario debe estar entre 09:30 y 16:00.') }}",
        missingFields: "{{ _('Por favor, complete todos los campos obligatorios.') }}",
        deltasError: "{{ _('Por favor, configure correctamente los deltas y spreads para call y put.') }}",
        invalidTakeStop: "{{ _('Los valores de Take Profit y Stop Loss deben ser mayores a 0.') }}"
    };




</script>


{% endblock %}