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

{% block title %}{{ is_edit|yesno:"Edit Client,Add New Client" }}{% endblock %}

{% block stylesheets %}
<style>
  .readonly-field {
    background: #f0f4f8 !important;
    font-weight: 600;
    letter-spacing: .5px;
  }
  .section-title {
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: .75rem;
    letter-spacing: .5px;
  }
  .licence-box {
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
    color: #155724;
    background: #d4edda !important;
    border: 1px solid #c3e6cb;
    letter-spacing: 2px;
  }
</style>
{% endblock %}

{% block heading %}{{ is_edit|yesno:"Edit Client,Add New Client" }}{% endblock %}

{% block content %}

{# ── Breadcrumb ── #}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb" style="background:transparent;padding:0;margin-bottom:1rem;">
    <li class="breadcrumb-item">
      <a href="{% url 'pos:offline_clients_list' %}">
        <i class="fas fa-users mr-1"></i>Clients
      </a>
    </li>
    <li class="breadcrumb-item active">{{ is_edit|yesno:"Edit,Add New" }}</li>
  </ol>
</nav>

<div class="card shadow-sm">
  <div class="card-header">
    <i class="fas fa-{{ is_edit|yesno:'user-edit,user-plus' }} mr-2"></i>
    {{ is_edit|yesno:"Edit Client Profile,Register New Client" }}
  </div>

  <div class="card-body">
    <form method="post" id="client-form" novalidate>
      {% csrf_token %}

      {# ═══════════ SECTION 1 — Identity (read-only) ═══════════ #}
      <div class="section-title">
        <i class="fas fa-fingerprint mr-1"></i> Identification
      </div>

      <div class="alert alert-info py-2 small">
        <i class="fas fa-info-circle mr-1"></i>
        <strong>T-ID</strong> is auto-assigned.
        <strong>License Code</strong> is auto-generated and unique — it cannot be changed.
      </div>

      <div class="form-row">
        <div class="form-group col-md-3">
          <label><i class="fas fa-hashtag text-muted mr-1"></i>T-ID</label>
          <input type="text" class="form-control readonly-field" value="{{ next_tid }}" readonly>
        </div>
        <div class="form-group col-md-9">
          <label><i class="fas fa-key text-muted mr-1"></i>License Code</label>
          <div class="input-group">
            <input type="text" id="licence-display"
                   class="form-control licence-box"
                   value="{{ liscense_code }}" readonly>
            <input type="hidden" name="liscense_code" value="{{ liscense_code }}">
            <div class="input-group-append">
              <button type="button" class="btn btn-outline-success" onclick="copyLicence()" title="Copy to clipboard">
                <i class="fas fa-copy"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <hr>

      {# ═══════════ SECTION 2 — Client Details ═══════════ #}
      <div class="section-title">
        <i class="fas fa-address-card mr-1"></i> Client Details
      </div>

      <div class="form-row">
        <div class="form-group col-md-6">
          <label>
            <i class="fas fa-user text-muted mr-1"></i>Client Name
            <span class="text-danger">*</span>
          </label>
          <input type="text" name="name"
                 class="form-control {% if errors.name %}is-invalid{% endif %}"
                 value="{{ data.name|default:'' }}"
                 placeholder="Enter client name" required>
          {% if errors.name %}
            <div class="invalid-feedback">{{ errors.name }}</div>
          {% endif %}
        </div>
        <div class="form-group col-md-6">
          <label><i class="fas fa-map-marker-alt text-muted mr-1"></i>Address</label>
          <input type="text" name="address" class="form-control"
                 value="{{ data.address|default:'' }}"
                 placeholder="Enter address">
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-md-6">
          <label>
            <i class="fas fa-mobile-alt text-muted mr-1"></i>Mobile
            <span class="text-danger">*</span>
          </label>
          <input type="text" name="mobile"
                 class="form-control {% if errors.mobile %}is-invalid{% endif %}"
                 value="{{ data.mobile|default:'' }}"
                 placeholder="Enter mobile number" required>
          {% if errors.mobile %}
            <div class="invalid-feedback">{{ errors.mobile }}</div>
          {% endif %}
        </div>
        <div class="form-group col-md-6">
          <label><i class="fas fa-phone text-muted mr-1"></i>Phone</label>
          <input type="text" name="phone" class="form-control"
                 value="{{ data.phone|default:'' }}"
                 placeholder="Enter phone number">
        </div>
      </div>

      <hr>

      {# ═══════════ SECTION 3 — License & Status ═══════════ #}
      <div class="section-title">
        <i class="fas fa-shield-alt mr-1"></i> License & Status
      </div>

      <div class="form-row">
        <div class="form-group col-md-6">
          <label><i class="fas fa-calendar-alt text-muted mr-1"></i>License Expiry Date</label>
          <input type="date" name="liscense_expiry" class="form-control"
                 value="{{ data.liscense_expiry|default:'' }}">
          <small class="text-muted">Leave blank if no expiry.</small>
        </div>
        <div class="form-group col-md-6">
          <label><i class="fas fa-toggle-on text-muted mr-1"></i>Status</label>
          <select name="status" class="form-control" id="status-select">
            <option value="active"
              {% if data.status == 'active' or not data.status %}selected{% endif %}>
              ✅  Active
            </option>
            <option value="inactive"
              {% if data.status == 'inactive' %}selected{% endif %}>
              ❌  Inactive
            </option>
          </select>
        </div>
      </div>

      <hr>

      {# ═══════════ SECTION 4 — POS Configuration ═══════════ #}
      <div class="section-title">
        <i class="fas fa-cogs mr-1"></i> POS Configuration
      </div>

      <div class="form-row">
        <div class="form-group col-md-4">
          <label><i class="fas fa-building text-muted mr-1"></i>POS Company ID</label>
          <input type="number" name="pos_company_id" class="form-control"
                 value="{{ data.pos_company_id|default:'0' }}" min="0">
        </div>
        <div class="form-group col-md-4">
          <label><i class="fas fa-code-branch text-muted mr-1"></i>POS Branch ID</label>
          <input type="number" name="pos_branch_id" class="form-control"
                 value="{{ data.pos_branch_id|default:'0' }}" min="0">
        </div>
        <div class="form-group col-md-4">
          <label><i class="fas fa-briefcase text-muted mr-1"></i>POS Business ID</label>
          <input type="number" name="pos_business_id" class="form-control"
                 value="{{ data.pos_business_id|default:'0' }}" min="0">
        </div>
      </div>

      <hr>

      {# ═══════════ ACTION BUTTONS ═══════════ #}
      <div class="d-flex justify-content-between">
        <a href="{% url 'pos:offline_clients_list' %}" class="btn btn-secondary">
          <i class="fas fa-arrow-left mr-1"></i> Back to List
        </a>
        <button type="submit" class="btn btn-success px-4">
          <i class="fas fa-save mr-1"></i>
          {{ is_edit|yesno:"Update Client,Save Client" }}
        </button>
      </div>

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

{# ── Client Meta Info (edit mode only) ── #}
{% if is_edit and instance %}
<div class="card shadow-sm mt-4">
  <div class="card-header py-2">
    <i class="fas fa-info-circle mr-1"></i> Record Meta
  </div>
  <div class="card-body py-2">
    <div class="row small text-muted">
      <div class="col-md-4"><strong>Database PK:</strong> {{ instance.pk }}</div>
      <div class="col-md-4"><strong>T-ID:</strong> {{ instance.t_id }}</div>
      <div class="col-md-4"><strong>License:</strong> <code>{{ instance.liscense_code }}</code></div>
    </div>
  </div>
</div>
{% endif %}

{% endblock %}


{% block javascripts %}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function copyLicence() {
  var code = document.getElementById('licence-display').value;
  navigator.clipboard.writeText(code).then(function() {
    Swal.fire({
      toast: true,
      position: 'top-end',
      icon: 'success',
      title: 'License code copied!',
      showConfirmButton: false,
      timer: 1500,
      timerProgressBar: true,
    });
  });
}
</script>
{% endblock %}