{% extends 'invoices/base.html' %}
{% block title %}Business Settings{% endblock %}
{% block page_title %}Business Settings{% endblock %}
{% block content %}
<div style="max-width:700px;">
<form method="post" enctype="multipart/form-data">{% csrf_token %}
<div class="card" style="margin-bottom:20px;">
  <div class="card-header"><h3 style="font-size:15px;font-weight:700;">🏢 Business Profile</h3><span style="font-size:12px;color:var(--muted);">This info appears on every invoice</span></div>
  <div class="card-body">
    <div class="grid-2">
      {% for field in form %}
      {% if field.html_name != 'terms_and_conditions' %}
      <div class="form-group {% if field.html_name == 'address' %}full-width{% endif %}">
        <label class="form-label">{{ field.label }}</label>
        {% if field.html_name == 'logo' %}
          {% if profile.logo %}<div style="margin-bottom:8px;"><img src="{{ profile.logo.url }}" style="max-height:60px;border-radius:8px;"></div>{% endif %}
          <input type="file" name="{{ field.html_name }}" class="form-control" accept="image/*">
        {% elif field.html_name == 'address' %}
          <textarea name="{{ field.html_name }}" class="form-control" rows="2">{{ field.value|default:'' }}</textarea>
        {% else %}
          <input type="text" name="{{ field.html_name }}" value="{{ field.value|default:'' }}" class="form-control">
        {% endif %}
      </div>
      {% endif %}
      {% endfor %}
    </div>
  </div>
</div>
<div class="card" style="margin-bottom:20px;">
  <div class="card-header"><h3 style="font-size:15px;font-weight:700;">📋 Terms & Conditions</h3><span style="font-size:12px;color:var(--muted);">Printed on every invoice</span></div>
  <div class="card-body">
    <textarea name="terms_and_conditions" class="form-control" rows="8">{{ form.terms_and_conditions.value|default:'' }}</textarea>
  </div>
</div>
<div style="display:flex;justify-content:flex-end;">
  <button type="submit" class="btn btn-primary" style="padding:12px 32px;">💾 Save Settings</button>
</div>
</form>
</div>
<style>.grid-2 .full-width { grid-column: 1 / -1; }</style>
{% endblock %}