{% extends "pos/base.html" %}
{% block title %}{{ action }} Witness — Deal #{{ deal.installment_no }}{% endblock %}

{% block content %}
<div class="container-fluid py-3">

  <div class="row justify-content-center">
    <div class="col-lg-7">

      <!-- Header -->
      <div class="d-flex align-items-center mb-3">
        <a href="{% url 'installments:deal_detail' deal.id %}"
           class="btn btn-sm btn-outline-secondary mr-2">
          <i class="fa fa-arrow-left"></i>
        </a>
        <div>
          <h4 class="mb-0 font-weight-bold">
            {{ action }} Witness {{ witness_num }}
          </h4>
          <small class="text-muted">
            Deal #{{ deal.installment_no }}
            {% if deal.plan %} — {{ deal.plan.plan_name }}{% endif %}
          </small>
        </div>
      </div>

      {% if messages %}
        {% for msg in messages %}
          <div class="alert alert-{{ msg.tags }} alert-dismissible fade show py-2">
            {{ msg }}<button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
          </div>
        {% endfor %}
      {% endif %}

      <div class="card shadow-sm">
        <div class="card-header font-weight-bold"
             style="border-left: 3px solid #6c757d;">
          <i class="fa fa-user-shield mr-2 text-secondary"></i>
          Witness {{ witness_num }} Details
        </div>
        <div class="card-body">

          <form method="post">
            {% csrf_token %}

            <div class="row">

              <!-- Name -->
              <div class="col-md-6">
                <div class="form-group">
                  <label class="font-weight-bold">
                    Full Name <span class="text-danger">*</span>
                  </label>
                  <input type="text" name="name" class="form-control"
                         value="{{ witness.name|default:form_data.name|default:'' }}"
                         placeholder="Full name of witness" required>
                </div>
              </div>

              <!-- Father Name -->
              <div class="col-md-6">
                <div class="form-group">
                  <label class="font-weight-bold">Father's Name</label>
                  <input type="text" name="father_name" class="form-control"
                         value="{{ witness.father_name|default:form_data.father_name|default:'' }}"
                         placeholder="Father's full name">
                </div>
              </div>

              <!-- CNIC -->
              <div class="col-md-4">
                <div class="form-group">
                  <label class="font-weight-bold">CNIC</label>
                  <input type="text" name="cnic" class="form-control"
                         value="{{ witness.cnic|default:form_data.cnic|default:'' }}"
                         placeholder="XXXXX-XXXXXXX-X">
                </div>
              </div>

              <!-- Mobile -->
              <div class="col-md-4">
                <div class="form-group">
                  <label class="font-weight-bold">Mobile</label>
                  <input type="text" name="mobile" class="form-control"
                         value="{{ witness.mobile|default:form_data.mobile|default:'' }}"
                         placeholder="03XX-XXXXXXX">
                </div>
              </div>

              <!-- Phone -->
              <div class="col-md-4">
                <div class="form-group">
                  <label class="font-weight-bold">Phone</label>
                  <input type="text" name="phone" class="form-control"
                         value="{{ witness.phone|default:form_data.phone|default:'' }}"
                         placeholder="Landline (optional)">
                </div>
              </div>

              <!-- Address -->
              <div class="col-12">
                <div class="form-group">
                  <label class="font-weight-bold">Address</label>
                  <input type="text" name="address" class="form-control"
                         value="{{ witness.address|default:form_data.address|default:'' }}"
                         placeholder="Full residential address">
                </div>
              </div>

              <!-- Occupation -->
              <div class="col-md-6">
                <div class="form-group">
                  <label class="font-weight-bold">Occupation</label>
                  <input type="text" name="occupation" class="form-control"
                         value="{{ witness.occupation|default:form_data.occupation|default:'' }}"
                         placeholder="Job or business">
                </div>
              </div>

              <!-- Relationship -->
              <div class="col-md-6">
                <div class="form-group">
                  <label class="font-weight-bold">Relationship to Buyer</label>
                  <input type="text" name="relationship" class="form-control"
                         value="{{ witness.relationship|default:form_data.relationship|default:'' }}"
                         placeholder="e.g. Friend, Brother, Colleague">
                </div>
              </div>

              <!-- Notes -->
              <div class="col-12">
                <div class="form-group">
                  <label class="font-weight-bold">Notes</label>
                  <input type="text" name="notes" class="form-control"
                         value="{{ witness.notes|default:form_data.notes|default:'' }}"
                         placeholder="Any additional remarks">
                </div>
              </div>

            </div><!-- /row -->

            <!-- Actions -->
            <div class="d-flex justify-content-between align-items-center mt-2">
              <a href="{% url 'installments:deal_detail' deal.id %}"
                 class="btn btn-secondary">
                <i class="fa fa-times mr-1"></i> Cancel
              </a>
              <button type="submit" class="btn btn-primary">
                <i class="fa fa-save mr-1"></i>
                {% if action == 'Edit' %}Update Witness{% else %}Add Witness{% endif %}
              </button>
            </div>

          </form>
        </div>
      </div>

    </div>
  </div>

</div>
{% endblock %}