{% extends 'base.html' %}
{% load i18n static %}
{% block title %}
    {{ _("Leads Tracking") |capfirst }}
{% endblock title %}
{% block customCSS %}
    <style>
        .kanban-column {
            border-radius: 8px;
            padding: 1rem;
            min-height: 500px;
        }
        .kanban-header {
            position: relative;
            font-weight: 600;
            padding: 0.5rem 1rem;
            margin-bottom: 1rem;
            color: #333;
            --pointed-edge: {% if LANGUAGE_CODE == 'en' %} right {% else %} left {% endif %};
            clip-path: {% if LANGUAGE_CODE == 'en' %}
                           polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%)
                       {% else %}
                           polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%)
                       {% endif %};
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }


        .kanban-header::after {
            content: "";
            position: absolute;
            right: -20px;
            top: 0;
            width: 0;
            height: 0;
            border-top: 28px solid transparent;
            border-bottom: 28px solid transparent;
            border-left: 20px solid #dee2e6;
        }
        .lead-card {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 0.75rem;
            margin-bottom: 1rem;
        }
        .lead-card small {
            color: #6c757d;
        }
        .bg-success-soft {
            background-color: rgba(17, 240, 66, 0.1) !important;
            opacity: .8;
        }
        .bg-danger-soft {
            background-color: rgba(230, 50, 68, 0.1) !important;
            opacity: .8;
        }
        .bg-info-soft {
            background-color: rgba(41, 197, 245, 0.1) !important;
            opacity: .8;
        }
        .bg-negotiation-soft {
            background-color: rgba(113, 206, 206, 0.1) !important;
            opacity: .8;
        }
    </style>
{% endblock customCSS %}
{% block content %}
    {% if leads %}
        <div class="container-fluid my-4">
            <div class="row justify-content-center">
                <div class="col">
                    <div class="d-flex justify-content-between mb-3">
                        <h3>
                            {{ _("Lead Tracking") }}
                            <li class="fas fa-bullhorn text-primary ms-2"></li>
                        </h3>
                    </div>
                    <div class="row g-3">
                        <!-- New Lead -->
                        <div class="col-md">
                            <div class="kanban-column bg-body">
                                <div class="kanban-header opacity-75">
                                    <span class="text-body">{{ _("New Leads") }} ({{ new|length }})</span>
                                </div>
                                {% for lead in new %}
                                    <a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
                                        <div class="lead-card">
                                            <strong>{{ lead.full_name|capfirst }}</strong>
                                            <br>
                                            <small>{{ lead.email }}</small>
                                            <br>
                                            <small>{{ lead.phone_number }}</small>
                                        </div>
                                    </a>
                                {% endfor %}
                            </div>
                        </div>
                        <!-- Follow Ups -->
                        <div class="col-md">
                            <div class="kanban-column bg-body">
                                <div class="kanban-header opacity-75">
                                    <span class="text-body">{{ _("Follow Ups") }} ({{ follow_up|length }})</span>
                                </div>
                                {% for lead in follow_up %}
                                    <a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
                                        <div class="lead-card">
                                            <strong>{{ lead.full_name|capfirst }}</strong>
                                            <br>
                                            <small>{{ lead.email }}</small>
                                            <br>
                                            <small>{{ lead.phone_number }}</small>
                                        </div>
                                    </a>
                                {% endfor %}
                            </div>
                        </div>
                        <!-- Negotiation -->
                        <div class="col-md">
                            <div class="kanban-column bg-body">
                                <div class="kanban-header opacity-75">
                                    <span class="text-body">{{ _("Negotiation Ups") }} ({{ follow_up|length }})</span>
                                </div>
                                {% for lead in negotiation %}
                                    <a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
                                        <div class="lead-card">
                                            <strong>{{ lead.full_name|capfirst }}</strong>
                                            <br>
                                            <small>{{ lead.email }}</small>
                                            <br>
                                            <small>{{ lead.phone_number }}</small>
                                        </div>
                                    </a>
                                {% endfor %}
                            </div>
                        </div>
                        <!-- Won -->
                        <div class="col-md">
                            <div class="kanban-column bg-body">
                                <div class="kanban-header bg-success-light opacity-75">
                                    <span class="text-body">{{ _("Won") }} ({{ won|length }}) ({{ follow_up|length }})</span>
                                </div>
                                {% for lead in won %}
                                    <a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
                                        <div class="lead-card">
                                            <strong>{{ lead.full_name|capfirst }}</strong>
                                            <br>
                                            <small>{{ lead.email }}</small>
                                            <br>
                                            <small>{{ lead.phone_number }}</small>
                                        </div>
                                    </a>
                                {% endfor %}
                            </div>
                        </div>
                        <!-- Lose -->
                        <div class="col-md">
                            <div class="kanban-column bg-body">
                                <div class="kanban-header bg-danger-light opacity-75">{{ _("Lost") }} ({{ lose|length }})</div>
                                {% for lead in lose %}
                                    <a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
                                        <div class="lead-card">
                                            <strong>{{ lead.full_name|capfirst }}</strong>
                                            <br>
                                            <small>{{ lead.email }}</small>
                                            <br>
                                            <small>{{ lead.phone_number }}</small>
                                        </div>
                                    </a>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        {% url 'lead_create' request.dealer.slug as create_lead_url %}
        {% include "empty-illustration-page.html" with value=empty_state_value url=create_lead_url %}
    {% endif %}
{% endblock %}