{% extends 'core/base.html' %}
{% load static %}

{% block title %}
    {% if mode == 'edit' %}Edit Supplier{% else %}Add Supplier{% endif %} - SwiftPOS
{% endblock %}

{% block topbar_title %}
    {% if mode == 'edit' %}Edit Supplier{% else %}Add Supplier{% endif %}
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8 col-xl-6">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h4 class="fw-bold mb-1">{% if mode == 'edit' %}Edit Supplier{% else %}New Supplier{% endif %}</h4>
                <div class="text-muted small">{% if mode == 'edit' %}Update existing supplier details.{% else %}Create a new vendor profile.{% endif %}</div>
            </div>
            <a href="{% url 'inventory:supplier_list' %}" class="btn btn-outline-secondary btn-sm rounded-pill px-3">
                <i class="fas fa-arrow-left me-1"></i> Back
            </a>
        </div>
        
        <div class="card border-0 shadow-sm" style="border-radius: 16px;">
            <div class="card-body p-4">
                <form method="post" action="{% if mode == 'edit' %}{% url 'inventory:supplier_edit' supplier.id %}{% else %}{% url 'inventory:supplier_create' %}{% endif %}">
                    {% csrf_token %}
                    
                    <div class="row g-4">
                        {% for field in form %}
                            <div class="{% if field.name in 'notes,address' %}col-12{% else %}col-md-6{% endif %}">
                                <label class="form-label small fw-bold text-dark mb-2" for="{{ field.id_for_label }}">
                                    {{ field.label }} {% if field.field.required %}<span class="text-danger">*</span>{% endif %}
                                </label>
                                
                                {{ field }}
                                
                                {% if field.help_text %}
                                    <div class="form-text small mt-1" style="color:var(--sp-text-muted);">{{ field.help_text }}</div>
                                {% endif %}
                                {% for error in field.errors %}
                                    <div class="text-danger small mt-1 fw-medium"><i class="fas fa-exclamation-circle me-1"></i>{{ error }}</div>
                                {% endfor %}
                            </div>
                        {% endfor %}
                    </div>
                    
                    <hr class="my-4" style="border-color: #eee;">
                    
                    <div class="d-flex justify-content-between align-items-center">
                        {% if mode == 'edit' %}
                            <!-- Action button to trigger delete modal -->
                            <button type="button" class="btn btn-outline-danger btn-sm rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#deleteModal">
                                <i class="fas fa-trash me-1"></i> Delete
                            </button>
                        {% else %}
                            <div></div> <!-- spacer -->
                        {% endif %}

                        <div class="d-flex gap-2">
                            <a href="{% url 'inventory:supplier_list' %}" class="btn btn-light btn-sm rounded-pill px-4 text-dark fw-medium">Cancel</a>
                            <button type="submit" class="btn btn-primary btn-sm rounded-pill px-4 fw-medium shadow-sm">
                                <i class="fas fa-save me-1"></i> {% if mode == 'edit' %}Save Changes{% else %}Create Supplier{% endif %}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{% if mode == 'edit' %}
<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0" style="border-radius:16px;">
      <div class="modal-header border-0 pb-0">
        <h5 class="modal-title fw-bold text-danger" id="deleteModalLabel"><i class="fas fa-exclamation-triangle me-2"></i>Delete Supplier</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body py-4">
        Are you sure you want to completely remove <strong>{{ supplier.name }}</strong>? This action cannot be undone and may affect associated purchase orders.
      </div>
      <div class="modal-footer border-0 pt-0">
        <form method="post" action="{% url 'inventory:supplier_delete' supplier.id %}">
            {% csrf_token %}
            <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-danger rounded-pill px-4 shadow-sm"><i class="fas fa-trash me-1"></i> Confirm Delete</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endif %}

{% endblock %}