{% extends "pos/base.html" %}

{% block title %}{{ page_title }} — Workshop{% endblock %}

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

  {# ── Breadcrumb ── #}
  <nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb small">
      <li class="breadcrumb-item">
        <a href="{% url 'workshop:company_list' %}">Companies</a>
      </li>
      <li class="breadcrumb-item active">{{ page_title }}</li>
    </ol>
  </nav>

  {# ── Messages ── #}
  {% for msg in messages %}
  <div class="alert alert-{{ msg.tags }} alert-dismissible fade show py-2" role="alert">
    {{ msg }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  {% endfor %}

  <div class="row justify-content-center">
    <div class="col-lg-6 col-md-8">

      <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom py-3">
          <h5 class="mb-0 fw-bold">
            <i class="bi bi-building me-2 text-primary"></i>
            {{ page_title }}
          </h5>
        </div>

        <form method="POST" autocomplete="off">
          {% csrf_token %}
          <div class="card-body p-4">

            {# Company Name #}
            <div class="mb-3">
              <label class="form-label fw-semibold">
                Company Name <span class="text-danger">*</span>
              </label>
              <input type="text"
                     name="area_name"
                     class="form-control"
                     value="{{ instance.area_name|default:'' }}"
                     placeholder="e.g. Bank Al-Habib, EFU Insurance"
                     required autofocus>
              <div class="form-text">This name will appear on corporate invoices and reports.</div>
            </div>

            {# Company Type #}
            <div class="mb-3">
              <label class="form-label fw-semibold">
                Type <span class="text-danger">*</span>
              </label>
              <div class="d-flex gap-3 pt-1">
                {% for val, label in company_types %}
                <div class="form-check">
                  <input class="form-check-input" type="radio"
                         name="company_type" id="type_{{ val }}"
                         value="{{ val }}"
                         {% if instance.description == val or not instance and val == "corporate" %}
                           checked
                         {% endif %}>
                  <label class="form-check-label" for="type_{{ val }}">
                    {% if val == "corporate" %}
                      <i class="bi bi-briefcase me-1 text-primary"></i>
                    {% elif val == "insurance" %}
                      <i class="bi bi-shield-check me-1 text-success"></i>
                    {% else %}
                      <i class="bi bi-building me-1 text-secondary"></i>
                    {% endif %}
                    {{ label }}
                  </label>
                </div>
                {% endfor %}
              </div>
              <div class="form-text mt-2">
                <strong>Corporate:</strong> Company pays for employee vehicles. &nbsp;
                <strong>Insurance:</strong> Insurance company covers claims.
              </div>
            </div>


          </div>

          <div class="card-footer bg-white border-top d-flex justify-content-between align-items-center py-3">
            <a href="{% url 'workshop:company_list' %}"
               class="btn btn-outline-secondary btn-sm px-3">
              <i class="bi bi-arrow-left me-1"></i> Back
            </a>
            <div class="d-flex gap-2">
              {% if is_edit %}
              <a href="{% url 'workshop:company_detail' instance.id %}"
                 class="btn btn-outline-primary btn-sm px-3">
                <i class="bi bi-people me-1"></i> View Customers
              </a>
              {% endif %}
              <button type="submit" class="btn btn-primary btn-sm px-4">
                <i class="bi bi-check-lg me-1"></i>
                {% if is_edit %}Update{% else %}Save{% endif %}
              </button>
            </div>
          </div>
        </form>

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

</div>
{% endblock %}