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

{% block title %}Offline Clients Management{% endblock %}

{% block stylesheets %}
<style>
  .search-card  { border-left: 4px solid #007bff; }
  .client-table th { white-space: nowrap; font-size: .85rem; }
  .client-table td { vertical-align: middle; font-size: .88rem; }
  .code-cell    { font-family: 'Courier New', monospace; letter-spacing: .5px; font-size: .82rem; }
  .badge-status { font-size: .78rem; padding: .35em .65em; }
  .empty-state  { padding: 3rem 1rem; }
  .btn-action   { padding: .25rem .5rem; font-size: .78rem; }
  .stats-bar    { font-size: .85rem; }
</style>
{% endblock %}

{% block heading %}Offline Clients Management{% endblock %}

{% block content %}

{# ───────────── SEARCH + ADD BUTTON ───────────── #}
<div class="card shadow-sm mb-4 search-card">
  <div class="card-header d-flex justify-content-between align-items-center py-2">
    <span><i class="fas fa-search mr-2"></i><strong>Search Clients</strong></span>
    <a href="{% url 'pos:offline_clients_add' %}" class="btn btn-success btn-sm">
      <i class="fas fa-plus mr-1"></i> Add New Client
    </a>
  </div>
  <div class="card-body py-3">
    <form method="get" id="search-form">
      <div class="form-row align-items-end">
        <div class="form-group col-md-3 mb-2">
          <label class="small font-weight-bold mb-1">Client Name</label>
          <input type="text" name="q_name" class="form-control form-control-sm"
                 value="{{ q_name }}" placeholder="Search by name…">
        </div>
        <div class="form-group col-md-2 mb-2">
          <label class="small font-weight-bold mb-1">T-ID</label>
          <input type="text" name="q_tid" class="form-control form-control-sm"
                 value="{{ q_tid }}" placeholder="e.g. 12">
        </div>
        <div class="form-group col-md-3 mb-2">
          <label class="small font-weight-bold mb-1">License Code</label>
          <input type="text" name="q_code" class="form-control form-control-sm"
                 value="{{ q_code }}" placeholder="e.g. LEXM-09UH">
        </div>
        <div class="form-group col-md-2 mb-2">
          <button type="submit" class="btn btn-primary btn-sm btn-block">
            <i class="fas fa-search mr-1"></i> Search
          </button>
        </div>
        <div class="form-group col-md-2 mb-2">
          <a href="{% url 'pos:offline_clients_list' %}" class="btn btn-outline-secondary btn-sm btn-block">
            <i class="fas fa-times mr-1"></i> Clear
          </a>
        </div>
      </div>
    </form>
  </div>
</div>

{# ───────────── STATS BAR ───────────── #}
<div class="d-flex justify-content-between align-items-center mb-2 stats-bar">
  <div>
    <i class="fas fa-users text-primary mr-1"></i>
    Showing <strong>{{ total }}</strong> client{{ total|pluralize }}
    {% if q_name or q_tid or q_code %}
      <span class="text-muted ml-1">(filtered)</span>
    {% endif %}
  </div>
</div>

{# ───────────── CLIENT TABLE ───────────── #}
<div class="card shadow-sm">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover table-striped client-table mb-0">
        <thead class="thead-dark">
          <tr>
            <th>#</th>
            <th>T-ID</th>
            <th>Name</th>
            <th>Mobile</th>
            <th>License Code</th>
            <th>License Expiry</th>
            <th>Status</th>
            <th class="text-center" style="min-width:120px;">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for c in clients %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td><span class="badge badge-secondary">{{ c.t_id }}</span></td>
            <td class="font-weight-bold">{{ c.name|default:"—" }}</td>
            <td>{{ c.mobile|default:"—" }}</td>
            <td class="code-cell">
              <span id="code-{{ c.pk }}">{{ c.liscense_code }}</span>
              <button type="button" class="btn btn-link btn-sm p-0 ml-1"
                      onclick="copyToClip('code-{{ c.pk }}')" title="Copy">
                <i class="fas fa-copy text-muted"></i>
              </button>
            </td>
            <td>
              {% if c.liscense_expiry %}
                {{ c.liscense_expiry|date:"d M Y" }}
              {% else %}
                <span class="text-muted">—</span>
              {% endif %}
            </td>
            <td>
              {% if c.status == 'active' %}
                <span class="badge badge-success badge-status">
                  <i class="fas fa-check-circle mr-1"></i>Active
                </span>
              {% else %}
                <span class="badge badge-danger badge-status">
                  <i class="fas fa-times-circle mr-1"></i>Inactive
                </span>
              {% endif %}
            </td>
            <td class="text-center">
              <a href="{% url 'pos:offline_clients_edit' c.pk %}"
                 class="btn btn-outline-primary btn-action mr-1" title="Edit">
                <i class="fas fa-edit"></i> Edit
              </a>
              <button type="button" class="btn btn-outline-danger btn-action"
                      title="Delete"
                      onclick="confirmDelete({{ c.pk }}, '{{ c.name|escapejs }}')">
                <i class="fas fa-trash-alt"></i> Delete
              </button>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="8" class="text-center text-muted empty-state">
              <i class="fas fa-inbox fa-3x d-block mb-3 text-secondary"></i>
              <h5>No clients found</h5>
              <p class="mb-0">
                {% if q_name or q_tid or q_code %}
                  Try adjusting your search filters or
                {% endif %}
                <a href="{% url 'pos:offline_clients_add' %}">add a new client</a>.
              </p>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{# ── hidden delete forms ── #}
{% for c in clients %}
<form id="del-form-{{ c.pk }}"
      action="{% url 'pos:offline_clients_delete' c.pk %}"
      method="post" style="display:none">{% csrf_token %}</form>
{% endfor %}
{% endblock %}


{% block javascripts %}
<!-- SweetAlert2 CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
/* ── Delete confirmation ── */
function confirmDelete(pk, name) {
  Swal.fire({
    title: 'Delete Client?',
    html:  'Are you sure you want to permanently delete<br><strong>"' + name + '"</strong>?',
    icon:  'warning',
    showCancelButton:  true,
    confirmButtonColor:'#d33',
    cancelButtonColor: '#6c757d',
    confirmButtonText: '<i class="fas fa-trash-alt mr-1"></i> Yes, Delete',
    cancelButtonText:  'Cancel',
    reverseButtons: true,
  }).then(function(result) {
    if (result.isConfirmed) {
      document.getElementById('del-form-' + pk).submit();
    }
  });
}

/* ── Copy license code to clipboard ── */
function copyToClip(elemId) {
  var text = document.getElementById(elemId).innerText.trim();
  navigator.clipboard.writeText(text).then(function() {
    Swal.fire({
      toast: true,
      position: 'top-end',
      icon: 'success',
      title: 'Copied: ' + text,
      showConfirmButton: false,
      timer: 1500,
      timerProgressBar: true,
    });
  });
}
</script>
{% endblock %}