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

{% block content %}
<div class="container-fluid">
  <h1 class="h3 mb-4 text-gray-800">
    {% if form.instance.pk %}Edit Branch{% else %}Add Branch{% endif %}
  </h1>

  <form method="post" novalidate>
    {% csrf_token %}
    {{ form.non_field_errors }}

    <div class="card shadow mb-4">
      <div class="card-body">

        <!-- Identity -->
        <h5 class="mb-3">Identity</h5>
        <div class="form-row">
          <div class="form-group col-md-4">
            {{ form.company_name.label_tag }}
            {{ form.company_name }}
            {{ form.company_name.errors }}
          </div>
          <div class="form-group col-md-4">
            {{ form.branch_name.label_tag }}
            {{ form.branch_name }}
            {{ form.branch_name.errors }}
          </div>
          <div class="form-group col-md-4">
            {{ form.business_name.label_tag }}
            {{ form.business_name }}
            {{ form.business_name.errors }}
          </div>
        </div>

        <!-- Business profile -->
        <h5 class="mt-4 mb-3">Business Profile</h5>
        <div class="form-row">
          <div class="form-group col-md-4">
            {{ form.business_type.label_tag }}
            {{ form.business_type }}
            {{ form.business_type.errors }}
          </div>
          <div class="form-group col-md-4">
            {{ form.shop_type.label_tag }}
            {{ form.shop_type }}
            {{ form.shop_type.errors }}
          </div>
          <div class="form-group col-md-4">
            {{ form.expiry_date.label_tag }}
            {{ form.expiry_date }}
            {{ form.expiry_date.errors }}
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-4">
            {{ form.status.label_tag }}
            {{ form.status }}
            {{ form.status.errors }}
          </div>
        </div>

        <!-- Contact -->
        <h5 class="mt-4 mb-3">Contact</h5>
        <div class="form-group">
          {{ form.address.label_tag }}
          {{ form.address }}
          {{ form.address.errors }}
        </div>
        <div class="form-row">
          <div class="col-md-6 form-group">
            {{ form.phone_no.label_tag }}
            {{ form.phone_no }}
            {{ form.phone_no.errors }}
          </div>
          <div class="col-md-6 form-group">
            {{ form.mobile_no.label_tag }}
            {{ form.mobile_no }}
            {{ form.mobile_no.errors }}
          </div>
        </div>

        <!-- initial shop_type for edit mode -->
        <input type="hidden" id="shop_type_initial"
               value="{{ form.shop_type.value|default_if_none:'' }}">

        <button type="submit" class="btn btn-success">
          {% if form.instance.pk %}Save Changes{% else %}Create Branch{% endif %}
        </button>
        <a href="{% url 'authentication:branch_list' %}" class="btn btn-secondary">Cancel</a>
      </div>
    </div>
  </form>
</div>

<script>
  (function() {
    // BusinessType -> ShopType mapping (same as trial page)
    var SHOP_TYPES = {
      'Retail': [
        'Retail / POS',
        'Pharmacy',
        'Sanitary Store',
        'Paint & Hardware Store',
        'Electronics Store',
        'Shoe Shop Retail',
        'Garments Shop Retail',
        'Crockery Shop'
      ],
      'Distribution': [
        'FMCG Distribution',
        'Medical Distribution',
        'Wholesale Distribution',
        'Cosmetics Distribution',
        'Other Distributions'
      ],
      'Hotel & Restaurant': [
        'Hotel',
        'Restaurant'
      ],
      'Manufacturing': [
        'Factory / Manufacturing Plant'
      ]
    };

    var bt = document.getElementById('id_business_type');
    var st = document.getElementById('id_shop_type');
    var initialShopEl = document.getElementById('shop_type_initial');
    var initialShop = initialShopEl ? initialShopEl.value : '';

    function populateShopTypes() {
      if (!bt || !st) return;
      var type = bt.value;
      var options = SHOP_TYPES[type] || [];

      // clear all
      while (st.firstChild) {
        st.removeChild(st.firstChild);
      }

      var def = document.createElement('option');
      def.value = '';
      def.textContent = 'Select Shop Type';
      st.appendChild(def);

      options.forEach(function(label) {
        var opt = document.createElement('option');
        opt.value = label;
        opt.textContent = label;
        st.appendChild(opt);
      });

      if (initialShop) {
        st.value = initialShop;
      }
    }

    if (bt && st) {
      bt.addEventListener('change', function() {
        initialShop = '';
        populateShopTypes();
      });
      populateShopTypes();
    }
  })();
</script>
{% endblock %}