{% extends '_base.html' %}
{% load static %}

{% block sidebar %}
    {% include 'sidebars/admin.html' %}
{% endblock sidebar %}

{% block navbar %}
    {% include 'navbars/admin.html' %}
{% endblock navbar %}


{% block title %}کاربرها{% endblock %}

{% block style %}
<!-- DataTables CSS -->
<link rel="stylesheet" href="{% static 'assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css' %}">
<link rel="stylesheet" href="{% static 'assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css' %}">
<link rel="stylesheet" href="{% static 'assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css' %}">

{% endblock %}

{% block content %}
<!-- Include Toasts -->
{% include '_toasts.html' %}


<div class="container-xxl flex-grow-1 container-p-y">

<div class="row py-3 mb-4 card-header flex-column flex-md-row pb-0">
  <div class="d-md-flex justify-content-between align-items-center dt-layout-start col-md-auto me-auto mt-0">
    <h5 class="card-title mb-0 text-md-start text-center fw-bold">لیست کاربرها</h5>
  </div>
  <div class="d-md-flex justify-content-between align-items-center dt-layout-end col-md-auto ms-auto mt-0">
    <div class="dt-buttons btn-group flex-wrap mb-0">
      <div class="btn-group">
        <button class="btn buttons-collection btn-label-primary dropdown-toggle me-4" tabindex="0" aria-controls="DataTables_Table_0" type="button" aria-haspopup="dialog" aria-expanded="false">
          <span>
            <span class="d-flex align-items-center gap-2">
              <i class="icon-base bx bx-export me-sm-1">
              </i>
              <span class="d-none d-sm-inline-block">
                خروجی
              </span>
            </span>
          </span>
        </button>
        <button class="btn btn-primary " onclick="prepareAddForm()">
          <i class="bx bx-plus me-1"></i>
          افزودن کاربر جدید
        </button>
      </div>
    </div>
  </div>
</div>

  <div class="card">
    <div class="card-datatable table-responsive">
      <table class="datatables-basic table border-top" id="customers-table">
        <thead>
          <tr>
            <th>ردیف</th>
            <th>کاربر</th>
            <th>کد ملی</th>
            <th>تلفن</th>
            <th>آدرس</th>
            <th>بانک</th>
            <th>وضعیت</th>
            <th>عملیات</th>
          </tr>
        </thead>
        <tbody>
          {% for customer in customers %}
          <tr>
            <td>{{forloop.counter}}</td>
            <td>
              <div class="d-flex justify-content-start align-items-center user-name">
                <div class="avatar-wrapper">
                  <div class="avatar me-2">
                    {% if customer.pic and customer.pic.url %}
                      <img src="{{ customer.pic.url }}" alt="Avatar" class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover;">
                    {% else %}
                      <span class="avatar-initial rounded-circle bg-label-primary">
                        {% if customer.user.first_name and customer.user.last_name %}
                          {{ customer.user.first_name|first|upper }}{{ customer.user.last_name|first|upper }}
                        {% elif customer.user.first_name %}
                          {{ customer.user.first_name|first|upper }}
                        {% elif customer.user.last_name %}
                          {{ customer.user.last_name|first|upper }}
                        {% else %}
                          {{ customer.user.username|first|upper }}
                        {% endif %}
                      </span>
                    {% endif %}
                  </div>
                </div>
                <div class="d-flex flex-column">
                  <span class="emp_name text-truncate text-heading">{{ customer.user.get_full_name|default:customer.user.username }}</span>
                  <small class="emp_post text-truncate">{{ customer.user.username }}</small>
                </div>
              </div>
            </td>
            <td>{{ customer.national_code|default:"کد ملی ثبت نشده" }}</td>
            <td>
              <div class="d-flex flex-column">
                {% if customer.phone_number_1 %}
                  <span class="fw-medium">{{ customer.phone_number_1 }}</span>
                {% endif %}
                {% if customer.phone_number_2 %}
                  <small class="text-muted">{{ customer.phone_number_2 }}</small>
                {% endif %}
                {% if not customer.phone_number_1 and not customer.phone_number_2 %}
                  <span class="text-muted">تلفن ثبت نشده</span>
                {% endif %}
              </div>
            </td>
            <td>
              {% if customer.address %}
                <span class="text-truncate d-inline-block" style="max-width: 200px;" title="{{ customer.address }}">
                  {{ customer.address|truncatechars:50 }}
                </span>
              {% else %}
                <span class="text-muted">آدرس ثبت نشده</span>
              {% endif %}
            </td>
            <td>
              <div class="d-flex flex-column">
                {% if customer.bank_name %}
                  <span class="fw-medium">{{ customer.get_bank_name_display }}</span>
                  <span class="text-muted">{{ customer.card_number }}</span>
                  <span class="text-muted">{{ customer.account_number }}</span>
                {% else %}
                  <span class="text-muted">بانک ثبت نشده</span>
                {% endif %}
              </div>
            </td>
            <td>
              {% if customer.is_completed %}
                <span class="badge bg-label-success">تکمیل شده</span>
              {% else %}
                <span class="badge bg-label-warning">ناقص</span>
              {% endif %}
            </td>
            <td>
              <div class="d-inline-block">
                <a href="javascript:;" class="btn btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
                  <i class="icon-base bx bx-dots-vertical-rounded"></i>
                </a>
                <ul class="dropdown-menu dropdown-menu-end m-0">
                  <li>
                    <a href="#" class="dropdown-item" data-customer-id="{{ customer.id }}" onclick="viewCustomer(this.getAttribute('data-customer-id'))">
                      <i class="bx bx-show me-1"></i>مشاهده جزئیات
                    </a>
                  </li>
                  <li>
                    <a href="#" class="dropdown-item" data-customer-id="{{ customer.id }}" onclick="editCustomer(this.getAttribute('data-customer-id'))">
                      <i class="bx bx-edit me-1"></i>ویرایش
                    </a>
                  </li>
                  <div class="dropdown-divider"></div>
                  <li>
                    <a href="#" class="dropdown-item text-danger" data-customer-id="{{ customer.id }}" data-customer-name="{{ customer.user.get_full_name|default:customer.user.username }}" onclick="deleteCustomer(this.getAttribute('data-customer-id'), this.getAttribute('data-customer-name'))">
                      <i class="bx bx-trash me-1"></i>حذف
                    </a>
                  </li>
                </ul>
              </div>
              <a href="#" class="btn btn-icon item-edit" data-customer-id="{{ customer.id }}" onclick="editCustomer(this.getAttribute('data-customer-id'))">
                <i class="icon-base bx bx-edit icon-sm"></i>
              </a>
            </td>
          </tr>
                      {% empty %}
            <tr>
              <td colspan="7" class="text-center py-4">
                <div class="d-flex flex-column align-items-center">
                  <i class="bx bx-user-x bx-lg text-muted mb-2"></i>
                  <span class="text-muted">هیچ کاربری یافت نشد</span>
                </div>
              </td>
            </tr>
            {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Modal to add/edit record -->
<div class="offcanvas offcanvas-end" id="add-new-record">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title" id="exampleModalLabel">افزودن کاربر جدید</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body flex-grow-1">
    <form class="add-new-record pt-0 row g-2" id="form-add-new-record" method="post" enctype="multipart/form-data">
      {% csrf_token %}
      <input type="hidden" id="customer-id" name="customer_id" value="">
      
      <!-- User Information -->
     
      <div class="col-sm-6">
        <label class="form-label fw-bold" for="{{ form.first_name.id_for_label }}">{{ form.first_name.label }}</label>
        <div class="input-group input-group-merge">
          <span class="input-group-text"><i class="bx bx-user"></i></span>
          {{ form.first_name }}
        </div>
        {% if form.first_name.errors %}
          <div class="invalid-feedback d-block">{{ form.first_name.errors.0 }}</div>
        {% endif %}
      </div>
      
      <div class="col-sm-6">
        <label class="form-label fw-bold" for="{{ form.last_name.id_for_label }}">{{ form.last_name.label }}</label>
        <div class="input-group input-group-merge">
          <span class="input-group-text"><i class="bx bx-user"></i></span>
          {{ form.last_name }}
        </div>
        {% if form.last_name.errors %}
          <div class="invalid-feedback d-block">{{ form.last_name.errors.0 }}</div>
        {% endif %}
      </div>
      
      <div class="col-sm-6">
        <label class="form-label fw-bold" for="{{ form.phone_number_1.id_for_label }}">{{ form.phone_number_1.label }}</label>
        <div class="input-group input-group-merge">
          <span class="input-group-text"><i class="bx bx-phone"></i></span>
          {{ form.phone_number_1 }}
        </div>
        {% if form.phone_number_1.errors %}
          <div class="invalid-feedback d-block">{{ form.phone_number_1.errors.0 }}</div>
        {% endif %}
      </div>
      
      <div class="col-sm-6">
        <label class="form-label fw-bold" for="{{ form.phone_number_2.id_for_label }}">{{ form.phone_number_2.label }}</label>
        <div class="input-group input-group-merge">
          <span class="input-group-text"><i class="bx bx-phone"></i></span>
          {{ form.phone_number_2 }}
        </div>
        {% if form.phone_number_2.errors %}
          <div class="invalid-feedback d-block">{{ form.phone_number_2.errors.0 }}</div>
        {% endif %}
      </div>
      
      <div class="col-sm-12">
        <label class="form-label fw-bold" for="{{ form.national_code.id_for_label }}">{{ form.national_code.label }}</label>
        <div class="input-group input-group-merge">
          <span class="input-group-text"><i class="bx bx-id-card"></i></span>
          {{ form.national_code }}
        </div>
        {% if form.national_code.errors %}
          <div class="invalid-feedback d-block">{{ form.national_code.errors.0 }}</div>
        {% endif %}
      </div>

      <div class="col-sm-12">
        <label class="form-label fw-bold" for="{{ form.bank_name.id_for_label }}">{{ form.bank_name.label }}</label>
        <div class="input-group input-group-merge">
          <span class="input-group-text"><i class="bx bx-credit-card"></i></span>
          {{ form.bank_name }}
        </div>
        {% if form.bank_name.errors %}
          <div class="invalid-feedback d-block">{{ form.bank_name.errors.0 }}</div>
        {% endif %}
      </div>
      
      <div class="col-sm-12">
        <label class="form-label fw-bold" for="{{ form.card_number.id_for_label }}">{{ form.card_number.label }}</label>
        <div class="input-group input-group-merge">
          <span class="input-group-text"><i class="bx bx-credit-card"></i></span>
          {{ form.card_number }}
        </div>
        {% if form.card_number.errors %}
          <div class="invalid-feedback d-block">{{ form.card_number.errors.0 }}</div>
        {% endif %}
      </div>
      
      <div class="col-sm-12">
        <label class="form-label fw-bold" for="{{ form.account_number.id_for_label }}">{{ form.account_number.label }}</label>
        <div class="input-group input-group-merge">
          <span class="input-group-text"><i class="bx bx-credit-card"></i></span>
          {{ form.account_number }}
        </div>
        {% if form.account_number.errors %}
          <div class="invalid-feedback d-block">{{ form.account_number.errors.0 }}</div>
        {% endif %}
      </div>
      
      <div class="col-sm-12">
        <label class="form-label fw-bold" for="{{ form.address.id_for_label }}">{{ form.address.label }}</label>
        <div class="input-group input-group-merge">
          <span class="input-group-text"><i class="bx bx-map"></i></span>
          {{ form.address }}
        </div>
        {% if form.address.errors %}
          <div class="invalid-feedback d-block">{{ form.address.errors.0 }}</div>
        {% endif %}
      </div>
      
      <div class="col-sm-12">
        <button type="submit" class="btn btn-primary data-submit me-sm-3 me-1">ذخیره</button>
        <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">انصراف</button>
      </div>
    </form>
  </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteConfirmModalLabel">تایید حذف</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p id="deleteConfirmText">آیا از حذف این کاربر اطمینان دارید؟</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">انصراف</button>
        <button type="button" class="btn btn-danger" id="confirmDeleteBtn">حذف</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block script %}
<!-- DataTables JS -->
<script src="{% static 'assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
<!-- Persian DataTable Language -->
<script src="{% static 'assets/js/persian-datatable.js' %}"></script>

<script>
  $(document).ready(function() {
    // Initialize DataTable with Persian language
    $('#customers-table').DataTable({
      pageLength: 10,
      lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "همه"]],
      order: [[0, 'asc']],
      responsive: true,
    });
    
    // Handle form submission
    $('#form-add-new-record').on('submit', function(e) {
      e.preventDefault();
      
      const form = this;
      const formData = new FormData(form);
      const customerId = $('#customer-id').val();
      
      // Determine URL based on whether we're editing or adding
      const url = customerId ? '{% url "accounts:edit_customer_ajax" 0 %}'.replace('0', customerId) : '{% url "accounts:add_customer_ajax" %}';
      
      // Show loading state
      const submitBtn = $(form).find('button[type="submit"]');
      const originalText = submitBtn.text();
      submitBtn.prop('disabled', true).text('در حال ذخیره...');
      
      $.ajax({
        url: url,
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
          if (response.success) {
            // Show success message
            showToast(response.message, 'success');
            
            // Close offcanvas and reset form
            $('#add-new-record').offcanvas('hide');
            form.reset();
            
            // Reload page to show new customer
            setTimeout(function() {
              location.reload();
            }, 1500);
          } else {
            // Show error message
            showToast(response.message, 'danger');
            
            // Show form errors if any
            if (response.errors) {
              Object.keys(response.errors).forEach(function(field) {
                const errorMsg = response.errors[field][0];
                const fieldElement = $('[name="' + field + '"]');
                fieldElement.addClass('is-invalid');
                fieldElement.siblings('.invalid-feedback').remove();
                fieldElement.after('<div class="invalid-feedback d-block">' + errorMsg + '</div>');
              });
            }
          }
        },
        error: function(xhr, status, error) {
          // Show error message
          showToast('خطا در ارتباط با سرور', 'danger');
        },
        complete: function() {
          // Reset button state
          submitBtn.prop('disabled', false).text(originalText);
        }
      });
    });
    
    // Reset form when offcanvas is hidden
    $('#add-new-record').on('hidden.bs.offcanvas', function() {
      const form = $('#form-add-new-record')[0];
      form.reset();
      
      // Reset form for adding new customer
      $('#customer-id').val('');
      $('#exampleModalLabel').text('افزودن کاربر جدید');
      $('.data-submit').text('ذخیره');
      
      // Clear validation errors
      $('.is-invalid').removeClass('is-invalid');
      $('.invalid-feedback').remove();
    });
    
    // Clear validation errors when user starts typing
    $('input, textarea').on('input', function() {
      $(this).removeClass('is-invalid');
      $(this).siblings('.invalid-feedback').remove();
    });
  });
  
  // Customer functions
  function viewCustomer(id) {
    // Implement view functionality
    console.log('View customer:', id);
  }
  
  function editCustomer(id) {
    // Load customer data and open edit form
    $.ajax({
      url: '{% url "accounts:get_customer_data" 0 %}'.replace('0', id),
      type: 'GET',
      success: function(response) {
        if (response.success) {
          const customer = response.customer;
          
          // Fill form with customer data
          const fieldsMap = {
            'customer-id': customer.id,
            'id_first_name': customer.first_name,
            'id_last_name': customer.last_name,
            'id_phone_number_1': customer.phone_number_1,
            'id_phone_number_2': customer.phone_number_2,
            'id_national_code': customer.national_code,
            'id_card_number': customer.card_number,
            'id_account_number': customer.account_number,
            'id_address': customer.address
          };
          
          // Loop through fields for easier maintenance
          Object.keys(fieldsMap).forEach(function(fieldId) {
            $('#' + fieldId).val(fieldsMap[fieldId] || '');
          });
          
          // Update modal title and button
          $('#exampleModalLabel').text('ویرایش کاربر');
          $('.data-submit').text('ویرایش');
          
          // Open modal
          $('#add-new-record').offcanvas('show');
        } else {
          showToast('خطا در بارگذاری اطلاعات کاربر', 'danger');
        }
      },
      error: function() {
        showToast('خطا در ارتباط با سرور', 'danger');
      }
    });
  }
  
  function deleteCustomer(id, name) {
    // Set modal content
    document.getElementById('deleteConfirmText').textContent = `آیا از حذف کاربر "${name}" اطمینان دارید؟`;
    
    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
    modal.show();
    
    // Handle confirm button click
    document.getElementById('confirmDeleteBtn').onclick = function() {
      // Implement delete functionality
      console.log('Delete customer:', id);
      showToast('کاربر با موفقیت حذف شد.', 'success');
      modal.hide();
    };
  }
  
  function prepareAddForm() {
    // Reset form for adding new customer
    const form = $('#form-add-new-record')[0];
    form.reset();
    $('#customer-id').val('');
    $('#exampleModalLabel').text('افزودن کاربر جدید');
    $('.data-submit').text('ذخیره');
    
    // Clear validation errors
    $('.is-invalid').removeClass('is-invalid');
    $('.invalid-feedback').remove();
    
    // Open modal
    $('#add-new-record').offcanvas('show');
  }
</script>
{% endblock %}