{% load i18n static humanize %}
{% load custom_filters %}
{% block customCSS %}
  <style>
    .bg-success-soft {
      background-color: rgba(25, 135, 84, 0.1) !important;
      opacity: .8;
    }
    .bg-danger-soft {
      background-color: rgba(220, 53, 69, 0.1) !important;
      opacity: .8;
    }
  </style>
{% endblock customCSS %}

{% for opportunity in opportunities %}
  <div class="col-12 col-md-6 col-lg-4 col-xl-3">
    <div class="card h-100
                {% if opportunity.get_stage_display == 'Closed Won' %}bg-success-soft
                {% elif opportunity.get_stage_display == 'Closed Lost' %}bg-danger-soft{% endif %}">
      <div class="card-body">
        <div class="avatar avatar-xl me-3 mb-3">
          {% if opportunity.car.id_car_make.logo %}
            <img class="rounded" src="{{ opportunity.car.id_car_make.logo.url }}" alt="" />
          {% endif %}
        </div>
        {% if opportunity.customer %}
          <h5 class="mb-4">Opportunity for {{ opportunity.customer }}</h5>
        {% elif opportunity.organization %}
          <h5 class="mb-4">Opportunity for {{ opportunity.organization }}</h5>
        {% endif %}

        <div class="d-flex align-items-center justify-content-between mb-3">
          <div class="d-flex gap-2">
            {% if opportunity.stage == "qualification" %}
              <span class="badge badge-phoenix fs-10 badge-phoenix-primary">
            {% elif opportunity.stage == "test_drive" %}
              <span class="badge badge-phoenix fs-10 badge-phoenix-info">
            {% elif opportunity.stage == "quotation" %}
              <span class="badge badge-phoenix fs-10 badge-phoenix-warning">
            {% elif opportunity.stage == "negotiation" %}
              <span class="badge badge-phoenix fs-10 badge-phoenix-warning">
            {% elif opportunity.stage == "financing" %}
              <span class="badge badge-phoenix fs-10 badge-phoenix-warning">
            {% elif opportunity.stage == "closed_won" %}
              <span class="badge badge-phoenix fs-10 badge-phoenix-success">
            {% elif opportunity.stage == "closed_lost" %}
              <span class="badge badge-phoenix fs-10 badge-phoenix-danger">
            {% elif opportunity.stage == "on_hold" %}
              <span class="badge badge-phoenix fs-10 badge-phoenix-secondary">
            {% endif %}
            {{ opportunity.stage }}</span>
          <span class="badge badge-phoenix fs-10
                       {% if opportunity.get_stage_display == 'Won' %}badge-phoenix-success
                       {% elif opportunity.get_stage_display == 'Lost' %}badge-phoenix-danger{% endif %}">
            {{ opportunity.get_status_display }}
          </span>
        </div>
        <div class="d-flex align-items-center">
          <i class="fa-regular fa-clock"></i>&nbsp;
          <p class="mb-0 fs-9 fw-semibold text-body-tertiary">{{ opportunity.created|naturalday|capfirst }}</p>
        </div>
      </div>

      <div class="deals-company-agent d-flex justify-content-between mb-3">
        <div class="d-flex align-items-center">
          <span class="uil uil-user me-2"></span>
          <p class="text-body-secondary fw-bold fs-10 mb-0">
            {{ _("Assigned To") }}{% if request.user.email == opportunity.staff.email %}
              {{ _("You") }}
            {% else %}
              {{ opportunity.staff.name }}</p>
            {% endif %}
          </div>
        </div>
        <table class="mb-3 w-100">
          <tr>
            <td class="py-1">
              <div class="d-flex align-items-center">
                <span class="me-2 text-body-tertiary"><span class="icon-saudi_riyal"></span></span>
                <p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Expected Revenue")}}</p>
              </div>
            </td>
            <td class="text-end">
              <p class="fw-semibold fs-9 mb-0 text-body-emphasis"><span class="icon-saudi_riyal"></span>{{ opportunity.expected_revenue }}</p>
            </td>
          </tr>

          <tr>
            <td class="py-1">
              <div class="d-flex align-items-center">
                <i class="uil uil-calendar-alt"></i>&nbsp;
                <p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Closing Date")}}</p>
              </div>
            </td>
            <td class="text-end">
              {% if opportunity.expected_close_date %}
                <p class="fw-semibold fs-9 mb-0 text-body-emphasis">{{ opportunity.expected_close_date|naturalday|capfirst }}</p>
              {% endif %}
            </td>
          </tr>
        </table>

        <p class="fs-9 mb-1 fw-bold">{{ _("Probability") }}: {{ opportunity.probability }}%</p>
        <div class="progress mb-3" style="height:16px">
          {% if opportunity.probability >= 25 and opportunity.probability < 49 %}
            <div class="progress-bar rounded-pill bg-danger-dark" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
              <span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
            </div>
          {% elif opportunity.probability >= 50 and opportunity.probability <= 74 %}
            <div class="progress-bar rounded-pill bg-warning-dark" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
              <span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
            </div>
          {% elif opportunity.probability >= 75 and opportunity.probability <= 100 %}
            <div class="progress-bar rounded-pill bg-success-dark" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
              <span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
            </div>
          {% endif %}
        </div>

        <div class="d-flex gap-2">
          <a class="btn btn-sm btn-phoenix-primary" href="{% url 'opportunity_detail' request.dealer.slug  opportunity.slug %}">
            {{ _("View Details") }} <i class="fa-solid fa-eye ms-2"></i>
          </a>
          <a class="btn btn-sm btn-phoenix-success" href="{% url 'update_opportunity' request.dealer.slug opportunity.slug %}">
            {{ _("Update") }} <i class="fa-solid fa-pen ms-2"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
{% endfor %}