{% 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 %}
  <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>
{% endblock %}