{% extends "pos/base.html" %}
{% load static %}
{% block title %}{% if is_edit %}Edit Master{% else %}Add Master{% endif %}{% endblock %}

{% block stylesheets %}
  {{ block.super }}
  
{% endblock %}

{% block content %}
<div class="container-fluid">
  <h1 class="h3 mb-4 text-gray-800">
    {% if is_edit %}Edit Master{% else %}Add Master{% endif %}
  </h1>

  {% if form.errors %}
    <div class="alert alert-danger">
      <ul class="mb-0">
        {% for field in form %}
          {% for err in field.errors %}
            <li>{{ err }}</li>
          {% endfor %}
        {% endfor %}
        {% for err in form.non_field_errors %}
          <li>{{ err }}</li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}

  {% if is_edit %}
    {# Edit existing master: branches + expiry/status #}
    <form method="post">
      {% csrf_token %}

      <div class="form-group">
        <label>User</label>
        <input class="form-control" value="{{ assign.user.username }}" readonly>
      </div>

      <div class="form-group">
        {{ form.branches.label_tag }}{{ form.branches }}
        {% if form.branches.help_text %}
          <small class="form-text text-muted">{{ form.branches.help_text }}</small>
        {% endif %}
        {{ form.branches.errors }}
      </div>


     <div class="row">
       <div class="col-md-6 form-group">
         {{ form.password1.label_tag }}{{ form.password1 }}
         <small class="form-text text-muted">{{ form.password1.help_text }}</small>
         {{ form.password1.errors }}
       </div>
       <div class="col-md-6 form-group">
         {{ form.password2.label_tag }}{{ form.password2 }}
         {{ form.password2.errors }}
       </div>
     </div>


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

      <button type="submit" class="btn btn-success">Save Changes</button>
      <a href="{% url 'authentication:master_list' %}" class="btn btn-secondary">Cancel</a>
    </form>
  {% else %}
    {# Full create form (as before) #}
    <form method="post">
      {% csrf_token %}
      <div class="row">
        <div class="col-md-4 form-group">
          {{ form.username.label_tag }}{{ form.username }}
        </div>
        <div class="col-md-4 form-group">
          {{ form.email.label_tag }}{{ form.email }}
        </div>
        <div class="col-md-4 form-group">
          {{ form.password1.label_tag }}{{ form.password1 }}
        </div>
        <div class="col-md-4 form-group">
          {{ form.password2.label_tag }}{{ form.password2 }}
        </div>
      </div>

      <div class="form-group">
        {{ form.branches.label_tag }}{{ form.branches }}
        {% if form.branches.help_text %}
          <small class="form-text text-muted">{{ form.branches.help_text }}</small>
        {% endif %}
      </div>

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

      <button type="submit" class="btn btn-success">Create Master</button>
      <a href="{% url 'authentication:master_list' %}" class="btn btn-secondary">Cancel</a>
    </form>
  {% endif %}

</div>
{% endblock %}

{% block javascripts %}
  {{ block.super }}

  <script>
    document.addEventListener("DOMContentLoaded", function(){
      $('.select2-multiple').select2({
        placeholder: () => $(this).data('placeholder'),
        allowClear: Boolean($('.select2-multiple').data('allow-clear')),
        ajax: {
          url: $('.select2-multiple').data('ajax--url'),
          dataType: 'json',
          delay: 250,
          data: params => ({ q: params.term }),
          processResults: data => ({ results: data.results }),
          cache: true
        },
        width: 'resolve'
      });
    });
  </script>
{% endblock %}