{% extends 'admin_frontend/base.html' %}
{% block title %}Lead #{{ lead.id }}{% endblock %}
{% block content %}
  <div class="flex items-center justify-between mb-4">
    <h1 class="text-2xl font-semibold">Lead Details</h1>
    <a href="{% url 'public_frontend_admin:leads_list' %}" class="btn-outline">Back</a>
  </div>

  <div class="bg-white rounded shadow p-6 space-y-4">
    <div>
      <div class="text-sm text-gray-500">Created</div>
      <div class="font-medium">{{ lead.created_at }}</div>
    </div>
    <div>
      <div class="text-sm text-gray-500">Organization</div>
      <div class="font-medium">{{ lead.organization.name }} <span class="text-gray-400">({{ lead.organization.code }})</span></div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <div class="text-sm text-gray-500">Name</div>
        <div class="font-medium">{{ lead.name }}</div>
      </div>
      <div>
        <div class="text-sm text-gray-500">Source</div>
        <div class="font-medium">{{ lead.get_source_display|default:'-' }}</div>
      </div>
      <div>
        <div class="text-sm text-gray-500">Email</div>
        <div class="font-medium">{{ lead.email|default:'-' }}</div>
      </div>
      <div>
        <div class="text-sm text-gray-500">Phone</div>
        <div class="font-medium">{{ lead.phone|default:'-' }}</div>
      </div>
    </div>
    {% if lead.subject %}
    <div>
      <div class="text-sm text-gray-500">Subject</div>
      <div class="font-medium">{{ lead.subject }}</div>
    </div>
    {% endif %}
    {% if lead.message %}
    <div>
      <div class="text-sm text-gray-500">Message</div>
      <div class="whitespace-pre-line">{{ lead.message }}</div>
    </div>
    {% endif %}
  </div>

  <div class="bg-white rounded shadow p-6 space-y-4 mt-6">
    <h2 class="text-xl font-semibold">Uploaded Files</h2>
    {% if documents %}
      <ul class="divide-y divide-gray-100">
        {% for d in documents %}
          <li class="py-3 flex items-center justify-between">
            <div>
              <div class="font-medium">
                <a href="{{ d.file.url }}" target="_blank" class="text-blue-700 hover:underline">
                  {{ d.file.name|cut:"media/"|cut:"/" }}
                </a>
              </div>
              <div class="text-sm text-gray-500">{{ d.kind|default:'file' }} • {{ d.created_at }}</div>
            </div>
            <div>
              <a href="{{ d.file.url }}" target="_blank" class="btn-outline">View</a>
            </div>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <p class="text-gray-500">No files uploaded for this lead.</p>
    {% endif %}
  </div>

  <div class="bg-white rounded shadow p-6 space-y-4 mt-6">
    <h2 class="text-xl font-semibold">Create Pickup</h2>
    <form method="post" action="{% url 'public_frontend_admin:lead_convert_to_pickup' lead.pk %}">
      {% csrf_token %}
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="md:col-span-2">
          <label class="block text-sm text-gray-600 mb-1">Address</label>
          <textarea name="address" rows="3" class="w-full border rounded px-3 py-2" placeholder="Pickup address" required>{{ suggested.address }}</textarea>
        </div>
        <div>
          <label class="block text-sm text-gray-600 mb-1">Scheduled At (optional)</label>
          <input type="datetime-local" name="scheduled_at" class="w-full border rounded px-3 py-2" value="">
        </div>
        <div>
          <label class="block text-sm text-gray-600 mb-1">Assign Driver (optional)</label>
          <select name="driver" class="w-full border rounded px-3 py-2">
            <option value="">-- Select driver --</option>
            {% for u in drivers %}
              <option value="{{ u.id }}">{{ u.username }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="mt-4 flex justify-end">
        <button class="px-4 py-2 bg-blue-600 text-white rounded">Create Pickup</button>
      </div>
    </form>
  </div>
{% endblock %}
