{% extends "django_meta_whatsapp/base.html" %}
{% block title %}{% if object %}Edit{% else %}Add{% endif %} Contact{% endblock %}
{% block page_title %}{% if object %}Edit Contact{% else %}Add Contact{% endif %}{% endblock %}
{% block extra_head %}
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
{% endblock %}
{% block content %}
<div class="max-w-xl mx-auto">
  <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-100 bg-gray-50 flex items-center gap-3">
      <div class="w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-600">
        <i data-lucide="user" class="w-4 h-4"></i>
      </div>
      <div>
        <h2 class="text-sm font-semibold text-gray-900">Contact Details</h2>
        <p class="text-xs text-gray-500">Enter the contact's phone number and information.</p>
      </div>
    </div>
    <form method="post" class="p-6">
      {% csrf_token %}
      
      {% if form.non_field_errors %}
      <div class="mb-6 p-4 rounded-lg bg-red-50 border border-red-100 text-sm text-red-600">
        {{ form.non_field_errors|join:", " }}
      </div>
      {% endif %}

      <div class="space-y-5">
        <!-- Phone Number -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number <span class="text-red-500">*</span></label>
          <input type="text" name="{{ form.phone.name }}" value="{{ form.phone.value|default:'' }}" required
                 class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 placeholder-gray-400"
                 placeholder="e.g. +1234567890">
          {% if form.phone.errors %}<p class="text-xs text-red-600 mt-1">{{ form.phone.errors|join:", " }}</p>{% endif %}
        </div>

        <!-- Name -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
          <input type="text" name="{{ form.name.name }}" value="{{ form.name.value|default:'' }}"
                 class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 placeholder-gray-400"
                 placeholder="John Doe">
          {% if form.name.errors %}<p class="text-xs text-red-600 mt-1">{{ form.name.errors|join:", " }}</p>{% endif %}
        </div>

        <!-- Email -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
          <input type="email" name="{{ form.email.name }}" value="{{ form.email.value|default:'' }}"
                 class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 placeholder-gray-400"
                 placeholder="john@example.com">
          {% if form.email.errors %}<p class="text-xs text-red-600 mt-1">{{ form.email.errors|join:", " }}</p>{% endif %}
        </div>

        <!-- Labels -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Labels</label>
          <select name="{{ form.labels.name }}" id="id_{{ form.labels.name }}" multiple class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2">
            {% for choice in form.labels.field.choices %}
              <option value="{{ choice.0 }}" {% if choice.0 in form.labels.value or choice.0|stringformat:"s" in form.labels.value|stringformat:"s" %}selected{% endif %}>{{ choice.1 }}</option>
            {% endfor %}
          </select>
          <p class="text-xs text-gray-400 mt-1">Select or type to create new labels</p>
          {% if form.labels.errors %}<p class="text-xs text-red-600 mt-1">{{ form.labels.errors|join:", " }}</p>{% endif %}
        </div>

        <!-- Notes -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
          <textarea name="{{ form.notes.name }}" rows="3"
                    class="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 placeholder-gray-400">{{ form.notes.value|default:'' }}</textarea>
          {% if form.notes.errors %}<p class="text-xs text-red-600 mt-1">{{ form.notes.errors|join:", " }}</p>{% endif %}
        </div>

        <!-- Opted Out -->
        {% if form.opted_out %}
        <div class="flex items-start gap-3 p-4 bg-gray-50 rounded-lg border border-gray-100">
          <div class="flex items-center h-5">
            <input type="checkbox" name="{{ form.opted_out.name }}" id="id_{{ form.opted_out.name }}"
                   class="w-4 h-4 text-emerald-600 border-gray-300 rounded focus:ring-emerald-500"
                   {% if form.opted_out.value %}checked{% endif %}>
          </div>
          <div>
            <label for="id_{{ form.opted_out.name }}" class="text-sm font-medium text-gray-900">Opted Out</label>
            <p class="text-xs text-gray-500">Contact has opted out of marketing communications.</p>
          </div>
        </div>
        {% endif %}

      </div>

      <div class="flex justify-end gap-3 pt-6 mt-6 border-t border-gray-100">
        <a href="{% url 'django_meta_whatsapp:contact_list' %}" class="inline-flex items-center gap-2 bg-white border border-gray-200 hover:bg-gray-50 text-gray-700 text-sm font-medium px-5 py-2.5 rounded-lg transition-colors">Cancel</a>
        <button type="submit" class="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium px-5 py-2.5 rounded-lg transition-colors shadow-sm">
          <i data-lucide="save" class="w-4 h-4"></i> Save Contact
        </button>
      </div>
    </form>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    new TomSelect("#id_{{ form.labels.name }}", {
      create: true,
      plugins: ['remove_button'],
      placeholder: 'Select or type to create labels...',
    });
  });
</script>
{% endblock %}