{% 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">{% trans "Opportunity for" %} {{ opportunity.customer }}</h5>
                {% elif opportunity.organization %}
                    <h5 class="mb-4">{% trans "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.fullname }}
                            </p>
                        {% endif %}
                    </div>
                </div>
                <table class="mb-3 w-100">
                                                {% comment %} <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> {% endcomment %}
                    <tr>
                        <td class="py-1">
                            <div class="d-flex align-items-center">
                                <p class="fw-semibold fs-9 mb-0 text-body-tertiary">
                                    {% trans "Marked Price" %}
                                </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.car.marked_price }}
                            </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">
                    {% if perms.inventory.view_opportunity %}
                        <a class="btn btn-sm btn-phoenix-primary"
                           href="{% url 'opportunity_detail' request.dealer.slug  opportunity.slug %}">
                            <i class="fa-solid fa-eye ms-2"></i>{{ _("View") }}
                        </a>
                    {% endif %}
                    {% if perms.inventory.change_opportunity %}
                        <a class="btn btn-sm btn-phoenix-success"
                           href="{% url 'update_opportunity' request.dealer.slug opportunity.slug %}">
                            <i class="fa-solid fa-pen ms-2"></i> {{ _("Update") }}
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endfor %}