{% extends 'base.html' %}
{% load i18n static %}
{% block title %}{{ _('Leads')|capfirst }}{% endblock title %}

{% block customCSS %}
  <style>
    .kanban-column {
      background-color: #f8f9fa;
      border-radius: 8px;
      padding: 1rem;
      min-height: 500px;
    }
    .kanban-header {
      position: relative;
      background-color:rgb(237, 241, 245);
      font-weight: 600;
      padding: 0.5rem 1rem;
      margin-bottom: 1rem;
      color: #333;
      clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
      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 {
      background-color: white;
      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="d-flex justify-content-between mb-3">
      <h3>Lead Tracking</h3>
    </div>

    <div class="row g-3">
      <!-- New Lead -->
      <div class="col-md">
        <div class="kanban-column">
          <div class="kanban-header">New Leads ({{new|length}})</div>
          {% for lead in new %}
            <a href="{% url 'lead_detail' 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">
          <div class="kanban-header">Follow Ups ({{follow_up|length}})</div>
          {% for lead in follow_up %}
            <a href="{% url 'lead_detail' 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">
          <div class="kanban-header">Negotiation ({{negotiation|length}})</div>
          {% for lead in negotiation %}
            <a href="{% url 'lead_detail' 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">
          <div class="kanban-header">Won ({{won|length}})</div>
          {% for lead in won %}
            <a href="{% url 'lead_detail' 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">
          <div class="kanban-header">Lose ({{lose|length}})</div>
          {% for lead in lose %}
            <a href="{% url 'lead_detail' 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>
{% endblock %}