{% extends "layouts/base.html" %}
{% load i18n %}

{% block content %}
  <div class="container">
    <h1>{{ strategy.name }}</h1>

    <div class="row">
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{% trans "Total Invested" %}</h5>
            {#            <p class="card-text">{{ strategy.total_invested }} {{ strategy.payment_currency }}</p>#}
            <div class="card-text">
              <c-amount.display
                  :amount="strategy.total_invested"
                  :prefix="strategy.payment_currency.prefix"
                  :suffix="strategy.payment_currency.suffix"
                  :decimal_places="strategy.payment_currency.decimal_places"></c-amount.display>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{% trans "Total Received" %}</h5>
            <div class="card-text">
              <c-amount.display
                  :amount="strategy.total_received"
                  :prefix="strategy.target_currency.prefix"
                  :suffix="strategy.target_currency.suffix"
                  :decimal_places="strategy.target_currency.decimal_places"></c-amount.display>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{% trans "Average Entry Price" %}</h5>
            <div class="card-text">
              <c-amount.display
                  :amount="strategy.average_entry_price"
                  :prefix="strategy.payment_currency.prefix"
                  :suffix="strategy.payment_currency.suffix"
                  :decimal_places="strategy.payment_currency.decimal_places"></c-amount.display>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row mt-4">
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{% trans "Current Total Value" %}</h5>
            <div class="card-text">
              <c-amount.display
                  :amount="strategy.current_total_value"
                  :prefix="strategy.payment_currency.prefix"
                  :suffix="strategy.payment_currency.suffix"
                  :decimal_places="strategy.payment_currency.decimal_places"></c-amount.display>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{% trans "Total P/L" %}</h5>
            <div class="card-text {% if strategy.total_profit_loss >= 0 %}text-success{% else %}text-danger{% endif %}">
              <c-amount.display
                  :amount="strategy.total_profit_loss"
                  :prefix="strategy.payment_currency.prefix"
                  :suffix="strategy.payment_currency.suffix"
                  :decimal_places="strategy.payment_currency.decimal_places">
              </c-amount.display>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{% trans "Total % P/L" %}</h5>
            <div class="card-text {% if strategy.total_profit_loss >= 0 %}text-success{% else %}text-danger{% endif %}">
              {{ strategy.total_profit_loss_percentage|floatformat:2 }}%
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Monthly Chart -->
    <div class="row mt-4">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <canvas id="monthlyChart"></canvas>
          </div>
        </div>
      </div>
    </div>

    <!-- Entries Table -->
    <div class="row mt-4">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{% trans "Entries" %}</h5>
            <div class="table-responsive">
              <table class="table table-hover text-nowrap">
              <thead>
              <tr>
                <th>{% trans "Date" %}</th>
                <th>{% trans "Amount Paid" %}</th>
                <th>{% trans "Amount Received" %}</th>
                <th>{% trans "Current Value" %}</th>
                <th>{% trans "P/L" %}</th>
                <th>{% trans "Actions" %}</th>
              </tr>
              </thead>
              <tbody>
              {% for entry in entries %}
                <tr>
                  <td>{{ entry.date|date:"SHORT_DATE_FORMAT" }}</td>
                  <td><c-amount.display
                          :amount="entry.amount_paid"
                          :prefix="entry.strategy.payment_currency.prefix"
                          :suffix="entry.strategy.payment_currency.suffix"
                          :decimal_places="entry.strategy.payment_currency.decimal_places"></c-amount.display></td>
                  <td><c-amount.display
                          :amount="entry.amount_received"
                          :prefix="entry.strategy.target_currency.prefix"
                          :suffix="entry.strategy.target_currency.suffix"
                          :decimal_places="entry.strategy.target_currency.decimal_places"></c-amount.display></td>
                  <td><c-amount.display
                          :amount="entry.current_value"
                          :prefix="entry.strategy.payment_currency.prefix"
                          :suffix="entry.strategy.payment_currency.suffix"
                          :decimal_places="entry.strategy.payment_currency.decimal_places"></c-amount.display></td>
                  <td>
                    {% if entry.profit_loss_percentage > 0 %}
                      <span class="badge text-bg-success"><i class="fa-solid fa-up-long me-2"></i>{{ entry.profit_loss_percentage|floatformat:"2g" }}%</span>
                    {% elif entry.profit_loss_percentage < 0 %}
                      <span class="badge text-bg-danger"><i class="fa-solid fa-down-long me-2"></i>{{ entry.profit_loss_percentage|floatformat:"2g" }}%</span>
                    {% endif %}
                  </td>
                  <td>
                    <!-- Add action buttons -->
                  </td>
                </tr>
              {% endfor %}
              </tbody>
            </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row mt-4">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{% trans "Performance Over Time" %}</h5>
            <canvas id="performanceChart"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block extra_js_body %}
  <script>
      // Add Chart.js initialization for performance visualization
      const perfomancectx = document.getElementById('performanceChart').getContext('2d');
      const performanceChart = new Chart(perfomancectx, {
          type: 'line',
          data: {
              labels: [{% for entry in entries_data %}'{{ entry.entry.date|date:"Y-m-d" }}'{% if not forloop.last %}, {% endif %}{% endfor %}],
              datasets: [{
                  label: '{% trans "P/L %" %}',
                  data: [{% for entry in entries_data %}{{ entry.profit_loss_percentage|floatformat:2 }}{% if not forloop.last %}, {% endif %}{% endfor %}],
                  borderColor: 'rgb(75, 192, 192)',
                  tension: 0.1
              }]
          },
          options: {
              responsive: true,
              scales: {
                  y: {
                      beginAtZero: true
                  }
              }
          }
      });
  </script>
  <script>
      // Add Chart.js initialization for performance visualization
      const ctx = document.getElementById('monthlyChart').getContext('2d');
      const chart = new Chart(ctx, {
          type: 'line',
          data: {
              labels: [{% for entry in monthly_data %}'{{ entry.date|date:"Y-m-d" }}'{% if not forloop.last %}, {% endif %}{% endfor %}],
              datasets: [{
                  label: '{% trans "P/L %" %}',
                  data: [{% for entry in monthly_data %}{{ entry.total_paid|floatformat:2 }}{% if not forloop.last %}, {% endif %}{% endfor %}],
                  borderColor: 'rgb(75, 192, 192)',
                  tension: 0.1
              }]
          },
          options: {
              responsive: true,
              scales: {
                  y: {
                      beginAtZero: true
                  }
              }
          }
      });
  </script>
{% endblock %}