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

{% block title %}Customer Profile - {{ customer.name|title }}{% endblock title %}

{% block stylesheets %}
{{ block.super }}
<!-- Select2 CSS -->

<style>
/* ============================================
   PROFESSIONAL CUSTOMER PROFILE STYLES
   ============================================ */

/* Main Container */
.profile-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* Profile Card */
.profile-card {
  border: none;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* Profile Header */
.profile-header {
  background: linear-gradient(135deg, #348cdb 0%, #1170c6 100%);
  padding: 40px 30px;
  text-align: center;
  position: relative;
}

.profile-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Profile Photo Container */
.profile-photo-wrapper {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 20px;
  z-index: 1;
}

.profile-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid rgba(255,255,255,0.9);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  transition: transform 0.3s ease;
}

.profile-photo:hover {
  transform: scale(1.05);
}

.profile-photo-overlay {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  border: 3px solid #348cdb;
}

.profile-photo-overlay:hover {
  transform: scale(1.15);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.profile-photo-overlay i {
  color: #348cdb;
  font-size: 1.1rem;
}

/* Profile Info */
.profile-name {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.2);
  position: relative;
  z-index: 1;
}

.profile-id {
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
  margin-top: 5px;
  position: relative;
  z-index: 1;
}

.profile-id span {
  background: rgba(255,255,255,0.2);
  padding: 3px 12px;
  border-radius: 20px;
  font-weight: 500;
}

/* Stats Section */
.profile-stats {
  background: #fff;
  padding: 25px;
  border-bottom: 1px solid #e9ecef;
}

.stat-item {
  text-align: center;
  padding: 10px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 5px;
}

.stat-value.balance-positive { color: #1cc88a; }
.stat-value.balance-negative { color: #f56565; }

.stat-label {
  font-size: 0.8rem;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* File Upload Info */
.upload-info {
  padding: 20px;
  background: #f8f9fc;
}

.file-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #718096;
  font-size: 0.85rem;
}

.file-hint i {
  margin-right: 8px;
  color: #348cdb;
}

.file-error {
  color: #e74a3b;
  font-size: 0.85rem;
  margin-top: 10px;
  padding: 8px 15px;
  background: #fed7d7;
  border-radius: 8px;
  display: none;
}

/* Document Upload Card */
.document-card {
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  overflow: hidden;
}

.document-card .card-header {
  background: linear-gradient(135deg, #f8f9fc 0%, #edf2f7 100%);
  border-bottom: 2px solid #e2e8f0;
  padding: 18px 20px;
}

.document-card .card-header h6 {
  margin: 0;
  font-weight: 700;
  color: #4a5568;
  display: flex;
  align-items: center;
}

.document-card .card-header h6 i {
  margin-right: 10px;
  color: #348cdb;
  font-size: 1.1rem;
}

/* Document Upload Zone */
.document-upload-zone {
  border: 3px dashed #cbd5e0;
  border-radius: 15px;
  padding: 40px 30px;
  text-align: center;
  background: linear-gradient(135deg, #fff 0%, #f7fafc 100%);
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.document-upload-zone:hover {
  border-color: #348cdb;
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
}

.document-upload-zone.dragover {
  border-color: #1cc88a;
  background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
  transform: scale(1.02);
}

.document-upload-zone.has-file {
  border-style: solid;
  border-color: #1cc88a;
}

.upload-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #348cdb 0%, #1170c6 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.upload-icon i {
  color: #fff;
  font-size: 1.5rem;
}

.upload-text {
  color: #4a5568;
  font-weight: 600;
  margin-bottom: 5px;
}

.upload-subtext {
  color: #a0aec0;
  font-size: 0.85rem;
}

.document-preview-container {
  display: none;
}

.document-preview-container img {
  max-width: 100%;
  max-height: 150px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.btn-remove-doc {
  margin-top: 12px;
}

/* Form Card */
.form-card {
  border: none;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* Form Sections */
.form-section {
  background: linear-gradient(135deg, #f8f9fc 0%, #fff 100%);
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 25px;
  border: 1px solid #e2e8f0;
}

.form-section:last-of-type {
  margin-bottom: 0;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e2e8f0;
}

.section-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #348cdb 0%, #1170c6 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.section-icon i {
  color: #fff;
  font-size: 1rem;
}

.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2d3748;
  margin: 0;
}

/* Form Controls */
.form-label {
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.form-label.required::after {
  content: ' *';
  color: #e74a3b;
}

.form-control, .form-select {
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 15px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
  border-color: #348cdb;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.form-control::placeholder {
  color: #a0aec0;
}

/* Input Groups */
.input-group-text {
  background: linear-gradient(135deg, #348cdb 0%, #1170c6 100%);
  border: none;
  color: #fff;
  padding: 12px 15px;
}

.input-group .form-control {
  border-left: none;
}

.input-group .form-control:focus {
  border-left: none;
}

/* Urdu Input */
.urdu-input {
  font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
  font-size: 1.1rem;
}

/* Quick Links */
.quick-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  color: #348cdb;
  margin-top: 5px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.quick-link:hover {
  color: #1170c6;
  transform: translateX(3px);
}

.quick-link i {
  margin-right: 5px;
  font-size: 0.7rem;
}

/* Action Buttons */
.btn-save-profile {
  background: linear-gradient(135deg, #1cc88a 0%, #17a673 100%);
  border: none;
  padding: 15px 35px;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 12px;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 5px 20px rgba(72, 187, 120, 0.3);
}

.btn-save-profile:hover {
  background: linear-gradient(135deg, #17a673 0%, #2f855a 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(72, 187, 120, 0.4);
}

.btn-cancel-profile {
  background: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
  border: none;
  padding: 15px 35px;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.btn-cancel-profile:hover {
  background: linear-gradient(135deg, #718096 0%, #4a5568 100%);
  transform: translateY(-2px);
}

/* Back Button */
.btn-back {
  background: transparent;
  border: 2px solid #348cdb;
  color: #348cdb;
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.btn-back:hover {
  background: #348cdb;
  color: #fff;
  transform: translateX(-5px);
}

/* Cropper Modal */
.cropper-modal-dialog {
  max-width: 600px;
}

.cropper-container-wrapper {
  max-height: 400px;
  overflow: hidden;
}

#cropperImage {
  max-width: 100%;
  display: block;
}

/* License Expiry Warning */
.license-warning {
  background: #fef3cd;
  border: 1px solid #ffc107;
  color: #856404;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.license-warning i {
  margin-right: 10px;
}

/* Select2 Custom Styles */
.select2-container--bootstrap-5 .select2-selection {
  border: 2px solid #e2e8f0 !important;
  border-radius: 10px !important;
  min-height: 48px !important;
  padding: 8px 10px !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection {
  border-color: #348cdb !important;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
}

/* Responsive */
@media (max-width: 991px) {
  .profile-header {
    padding: 30px 20px;
  }
  
  .profile-photo-wrapper {
    width: 130px;
    height: 130px;
  }
  
  .profile-photo {
    width: 130px;
    height: 130px;
  }
  
  .form-section {
    padding: 20px 15px;
  }
}

/* Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-card, .form-card, .document-card {
  animation: fadeInUp 0.5s ease forwards;
}

.form-card { animation-delay: 0.1s; }
.document-card { animation-delay: 0.2s; }
</style>
{% endblock stylesheets %}

{% block heading %}
<div class="d-flex align-items-center">
  <i class="fas fa-user-circle text-primary mr-3" style="font-size: 1.8rem;"></i>
  Customer Profile
</div>
{% endblock heading %}

{% block content %}
{% include "includes/_field_settings_dialog.html" %}
<div class="profile-container">
  <!-- Back Button -->
  <div class="mb-4">
    <a href="{% url 'customers:customers_list' %}" class="btn btn-back">
      <i class="fas fa-arrow-left mr-2"></i>Back to Customers
    </a>
  </div>

  <form id="customer-update-form"
        action="{% url 'customers:customers_update' customer.id %}"
        method="post"
        enctype="multipart/form-data">
    {% csrf_token %}

    <div class="row">
      <!-- ============================================
           LEFT COLUMN - Profile Card & Document Upload
           ============================================ -->
      <div class="col-lg-4 mb-4">
        <!-- Profile Card -->
        <div class="card profile-card">
          <!-- Profile Header with Photo -->
          <div class="profile-header">
            <div class="profile-photo-wrapper">
              <img id="profilePhotoPreview" 
                   src="{% if customer.profile_photo %}{{ customer.profile_photo.url }}{% else %}{% static 'img/default-avatar.png' %}{% endif %}" 
                   alt="Profile Photo" 
                   class="profile-photo"
                   onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Ccircle cx=%2250%22 cy=%2235%22 r=%2225%22 fill=%22%23ddd%22/%3E%3Ccircle cx=%2250%22 cy=%22110%22 r=%2250%22 fill=%22%23ddd%22/%3E%3C/svg%3E'">
              <label for="profilePhotoInput" class="profile-photo-overlay" title="Change Photo">
                <i class="fas fa-camera"></i>
              </label>
              <input type="file" 
                     id="profilePhotoInput" 
                     name="profile_photo" 
                     accept="image/jpeg,image/png,image/webp" 
                     style="display: none;">
            </div>
            <h4 class="profile-name" id="displayName">{{ customer.name|title }}</h4>
            <p class="profile-id">
              <span><i class="fas fa-hashtag mr-1"></i>{{ customer.t_id }}</span>
            </p>
          </div>

          <!-- Profile Stats -->
          <div class="profile-stats">
            <div class="row">
              <div class="col-6">
                <div class="stat-item">
                  <div class="stat-value {% if customer.balance > 0 %}balance-positive{% elif customer.balance < 0 %}balance-negative{% endif %}">
                    {{ customer.balance|floatformat:0 }}
                  </div>
                  <div class="stat-label">Balance</div>
                </div>
              </div>
              <div class="col-6">
                <div class="stat-item">
                  <div class="stat-value" style="color: #348cdb; font-size: 1rem;">
                    {{ customer.type_c|default:"N/A" }}
                  </div>
                  <div class="stat-label">Type</div>
                </div>
              </div>
            </div>
          </div>

          <!-- Upload Info -->
          <div class="upload-info">
            <div class="file-hint">
              <i class="fas fa-info-circle"></i>
              <span>Profile photo: Max 1 MB, square crop</span>
            </div>
            <div id="profilePhotoError" class="file-error text-center"></div>
          </div>
        </div>

        <!-- Document Upload Card -->
        <div class="card document-card mt-4">
          <div class="card-header">
            <h6>
              <i class="fas fa-id-card"></i>
              CNIC / Document Upload
            </h6>
          </div>
          <div class="card-body">
            <div id="documentUploadZone" class="document-upload-zone {% if customer.cnic_image %}has-file{% endif %}">
              <!-- Placeholder -->
              <div id="documentPlaceholder" {% if customer.cnic_image %}style="display: none;"{% endif %}>
                <div class="upload-icon">
                  <i class="fas fa-cloud-upload-alt"></i>
                </div>
                <p class="upload-text">Drag & drop or click to upload</p>
                <p class="upload-subtext">JPEG, PNG or PDF • Max 2 MB</p>
              </div>
              
              <!-- Preview Container -->
              <div id="documentPreviewContainer" class="document-preview-container" {% if customer.cnic_image %}style="display: block;"{% endif %}>
                <img id="documentPreview" 
                     src="{% if customer.cnic_image %}{{ customer.cnic_image.url }}{% endif %}" 
                     alt="Document Preview">
                <br>
                <button type="button" id="removeDocument" class="btn btn-sm btn-outline-danger btn-remove-doc">
                  <i class="fas fa-trash-alt mr-1"></i>Remove
                </button>
              </div>
            </div>
            <input type="file" 
                   id="documentInput" 
                   name="cnic_image" 
                   accept="image/*,.pdf" 
                   style="display: none;">
            <div id="documentError" class="file-error mt-2 text-center"></div>
          </div>
        </div>
      </div>

      <!-- ============================================
           RIGHT COLUMN - Form Fields
           ============================================ -->
      <div class="col-lg-8">
        <div class="card form-card">
          <div class="card-body p-4">
            
            <!-- Section 1: Basic Information -->
            <div class="form-section">
              <div class="section-header">
                <div class="section-icon">
                  <i class="fas fa-user"></i>
                </div>
                <h5 class="section-title">Basic Information</h5>
              </div>
              
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="id_name" class="form-label required">Customer Name</label>
                  <input type="text" 
                         id="id_name" 
                         name="name" 
                         class="form-control" 
                         value="{{ customer.name }}"
                         placeholder="Enter customer name"
                         required>
                </div>
                <div class="col-md-6 mb-3">
                  <label for="id_urdu_name" class="form-label">Urdu Name</label>
                  <input type="text" 
                         id="id_urdu_name" 
                         name="urdu_name" 
                         class="form-control urdu-input text-right" 
                         dir="rtl"
                         value="{{ customer.urdu_name }}"
                         placeholder="اردو نام">
                </div>
                <div class="col-md-6 mb-3">
                  <label for="id_person_name" class="form-label">Contact Person</label>
                  <input type="text" 
                         id="id_person_name" 
                         name="person_name" 
                         class="form-control" 
                         value="{{ customer.person_name }}"
                         placeholder="Contact person name">
                </div>
                <div class="col-md-6 mb-3">
                  <label for="id_type_c" class="form-label">Customer Type</label>
                  <select class="form-control" id="id_type_c" name="type_c">
                    <option value="">Select type...</option>
                    <option value="Local Sale" {% if customer.type_c == 'Local Sale' %}selected{% endif %}>Local Sale</option>
                    <option value="Whole Sale" {% if customer.type_c == 'Whole Sale' %}selected{% endif %}>Whole Sale</option>
                    <option value="Supplier" {% if customer.type_c == 'Supplier' %}selected{% endif %}>Supplier</option>
                    <option value="Branches" {% if customer.type_c == 'Branches' %}selected{% endif %}>Branches</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- Section 2: Contact Information -->
            <div class="form-section">
              <div class="section-header">
                <div class="section-icon">
                  <i class="fas fa-phone-alt"></i>
                </div>
                <h5 class="section-title">Contact Information</h5>
              </div>
              
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="id_mobile" class="form-label">Mobile Number</label>
                  <div class="input-group">
                    <span class="input-group-text">
                      <i class="fas fa-mobile-alt"></i>
                    </span>
                    <input type="text" 
                           id="id_mobile" 
                           name="mobile" 
                           class="form-control" 
                           value="{{ customer.mobile }}"
                           placeholder="03XX-XXXXXXX">
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <label for="id_address" class="form-label">Address</label>
                  <input type="text" 
                         id="id_address" 
                         name="address" 
                         class="form-control" 
                         value="{{ customer.address }}"
                         placeholder="Full address">
                </div>
                <div class="col-md-6 mb-3">
                  <label for="id_str_no" class="form-label">STRN</label>
                  <input type="text" 
                         id="id_str_no" 
                         name="str_no" 
                         class="form-control" 
                         value="{{ customer.str_no }}"
                         placeholder="STRN">
                </div>
                <div class="col-md-6 mb-3">
                  <label for="id_phone" class="form-label">Sale Area</label>
                  <select id="id_phone" name="phone" class="form-control select2-field">
                    <option value="">Select area...</option>
                    {% for area in sale_areas %}
                      <option value="{{ area.t_id }}" 
                              {% if area.t_id|stringformat:"s" == customer.phone|stringformat:"s" %}selected{% endif %}>
                        {{ area.area_name }}
                      </option>
                    {% endfor %}
                  </select>
                  <a href="{% url 'products:sale_areas_add' %}" class="quick-link" target="_blank">
                    <i class="fas fa-plus-circle"></i>Add New Area
                  </a>
                </div>
              </div>
            </div>

            <!-- Section 3: Financial Information -->
            <div class="form-section">
              <div class="section-header">
                <div class="section-icon">
                  <i class="fas fa-wallet"></i>
                </div>
                <h5 class="section-title">Financial Information</h5>
              </div>
              
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="id_balance" class="form-label required">Balance</label>
                  <div class="input-group">
                    <span class="input-group-text">Rs.</span>
                    <input type="number" 
                           step="any" 
                           id="id_balance" 
                           name="balance" 
                           class="form-control" 
                           value="{{ customer.balance }}"
                           required>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <label for="id_max_balance" class="form-label">Order Booker</label>
                  <select id="id_max_balance" name="max_balance" class="form-control select2-field">
                    <option value="">Select booker...</option>
                    {% for ob in order_bookers %}
                      <option value="{{ ob.t_id }}" 
                              {% if ob.t_id|stringformat:"s" == customer.max_balance|stringformat:"s" %}selected{% endif %}>
                        {{ ob.name }}
                      </option>
                    {% endfor %}
                  </select>
                  <a href="{% url 'products:order_booker_add' %}" class="quick-link" target="_blank">
                    <i class="fas fa-plus-circle"></i>Add New Booker
                  </a>
                </div>
                <div class="col-md-6 mb-3">
                  <label for="id_department_id" class="form-label">Department</label>
                  <select id="id_department_id" name="department_id" class="form-control" style="width:100%">
                    {% if current_department %}
                      <option value="{{ current_department.id }}" selected>{{ current_department.name }}</option>
                    {% endif %}
                  </select>
                </div>
              </div>
            </div>

            <!-- Section 4: Legal & License Information -->
            <div class="form-section">
              <div class="section-header">
                <div class="section-icon">
                  <i class="fas fa-file-contract"></i>
                </div>
                <h5 class="section-title">Legal & License Information</h5>
              </div>
              
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="id_cnic" class="form-label">CNIC Number</label>
                  <input type="text" 
                         id="id_cnic" 
                         name="cnic" 
                         class="form-control" 
                         value="{{ customer.cnic }}"
                         placeholder="XXXXX-XXXXXXX-X"
                         maxlength="15">
                </div>
                <div class="col-md-6 mb-3">
                  <label for="id_ntn_num" class="form-label">NTN Number</label>
                  <input type="text" 
                         id="id_ntn_num" 
                         name="ntn_num" 
                         class="form-control" 
                         value="{{ customer.ntn_num }}"
                         placeholder="NTN number">
                </div>
                <div class="col-md-6 mb-3">
                  <label for="id_license_no" class="form-label">
                    <i class="fas fa-id-badge mr-1 text-primary"></i>License Number
                  </label>
                  <input type="text" 
                         id="id_license_no" 
                         name="license_no" 
                         class="form-control" 
                         value="{{ customer.license_no|default:'' }}"
                         placeholder="Enter license number">
                </div>

                <div class="col-md-6 mb-3">
                  <label for="id_license_expiry" class="form-label">
                    <i class="fas fa-calendar-alt mr-1 text-primary"></i>License Expiry Date
                  </label>
                  <input type="date" 
                         id="id_license_expiry" 
                         name="license_expiry" 
                         class="form-control" 
                         value="{% if customer.license_expiry %}{{ customer.license_expiry|date:'Y-m-d' }}{% endif %}">
                  <div id="licenseExpiryWarning" class="license-warning" style="display: none;">
                    <i class="fas fa-exclamation-triangle"></i>
                    <span id="licenseExpiryMessage"></span>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label">
                    <i class="fas fa-file-invoice mr-1 text-primary"></i>Filer Status
                  </label>
                  <div class="d-flex align-items-center" style="min-height:48px;">
                    <label class="mb-0 d-flex align-items-center" style="cursor:pointer;gap:10px;">
                      <input type="checkbox" id="id_filer_status" name="filer_status"
                             {% if customer.filer_status %}checked{% endif %}
                             style="width:20px;height:20px;accent-color:#348cdb;cursor:pointer;">
                      <span class="filer-badge" id="filerBadge"
                            style="font-size:.85rem;font-weight:700;padding:5px 14px;border-radius:20px;
                                   transition:.2s;">
                      </span>
                    </label>
                  </div>
                </div>
              </div>
            </div>

          {% include "customer_portal/_portal_login_panel.html" with portal=portal %}
            <!-- Action Buttons -->
            <div class="d-flex justify-content-between align-items-center mt-4 pt-3 border-top">
              <a href="{% url 'customers:customers_list' %}" class="btn btn-cancel-profile text-white">
                <i class="fas fa-times mr-2"></i>Cancel
              </a>
              <button type="submit" class="btn btn-save-profile text-white">
                <i class="fas fa-save mr-2"></i>Save Changes
              </button>
            </div>

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

<!-- ============================================
     IMAGE CROPPER MODAL
     ============================================ -->
<div class="modal fade" id="cropperModal" tabindex="-1" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-dialog-centered cropper-modal-dialog">
    <div class="modal-content">
      <div class="modal-header" style="background: linear-gradient(135deg, #348cdb 0%, #1170c6 100%);">
        <h5 class="modal-title text-white">
          <i class="fas fa-crop-alt mr-2"></i>Crop Profile Photo
        </h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body p-0">
        <div class="cropper-container-wrapper">
          <img id="cropperImage" src="" alt="Crop preview">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          <i class="fas fa-times mr-1"></i>Cancel
        </button>
        <button type="button" class="btn btn-primary" id="cropButton">
          <i class="fas fa-crop-alt mr-1"></i>Crop & Apply
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock content %}

{% block javascripts %}
{{ block.super }}
<!-- Select2 JS -->

<script>
jQuery(function($) {
  // ============================================
  // CONSTANTS
  // ============================================
  const MAX_PROFILE_SIZE = 1 * 1024 * 1024;  // 1 MB
  const MAX_DOCUMENT_SIZE = 2 * 1024 * 1024; // 2 MB
  
  // ============================================
  // VARIABLES
  // ============================================
  let cropper = null;
  
  // ============================================
  // INITIALIZE SELECT2
  // ============================================
  $('.select2-field').select2({
    theme: 'bootstrap-5',
    width: '100%',
    allowClear: true
  });

  // Department select2 (ajax search against Department.name)
  $('#id_department_id').select2({
    theme: 'bootstrap-5',
    ajax: {
      url: "{% url 'products:departments_autocomplete' %}",
      dataType: 'json',
      delay: 250,
      data: params => ({ term: params.term }),
      processResults: data => ({
        results: data.map(d => ({ id: d.id, text: d.text }))
      }),
      cache: true
    },
    placeholder: "Search department...",
    minimumInputLength: 1,
    allowClear: true,
    width: '100%'
  });
  
  // ============================================
  // UPDATE DISPLAY NAME ON INPUT
  // ============================================
  $('#id_name').on('input', function() {
    const name = $(this).val().trim() || 'Customer Name';
    // Title case
    const titleName = name.replace(/\w\S*/g, txt => 
      txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
    );
    $('#displayName').text(titleName);
  });
  
  // ============================================
  // CNIC FORMATTER
  // ============================================
  $('#id_cnic').on('input', function() {
    let val = $(this).val().replace(/[^0-9]/g, '');
    if (val.length > 5) val = val.substring(0,5) + '-' + val.substring(5);
    if (val.length > 13) val = val.substring(0,13) + '-' + val.substring(13);
    if (val.length > 15) val = val.substring(0,15);
    $(this).val(val);
  });
  
  // ============================================
  // LICENSE EXPIRY CHECK
  // ============================================
  function checkLicenseExpiry() {
    const expiryDate = $('#id_license_expiry').val();
    if (!expiryDate) {
      $('#licenseExpiryWarning').hide();
      return;
    }
    
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    const expiry = new Date(expiryDate);
    const diffDays = Math.ceil((expiry - today) / (1000 * 60 * 60 * 24));
    
    if (diffDays < 0) {
      $('#licenseExpiryMessage').text('License has expired!');
      $('#licenseExpiryWarning').css('background', '#fed7d7').css('border-color', '#fc8181').css('color', '#c53030').show();
    } else if (diffDays <= 30) {
      $('#licenseExpiryMessage').text(`License expires in ${diffDays} days!`);
      $('#licenseExpiryWarning').css('background', '#fef3cd').css('border-color', '#ffc107').css('color', '#856404').show();
    } else {
      $('#licenseExpiryWarning').hide();
    }
  }
  
  $('#id_license_expiry').on('change', checkLicenseExpiry);
  checkLicenseExpiry(); // Check on load
  
  // ============================================
  // PROFILE PHOTO UPLOAD WITH CROPPING
  // ============================================
  $('#profilePhotoInput').on('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;
    
    // Check file type
    if (!file.type.match(/image\/(jpeg|png|webp)/)) {
      $('#profilePhotoError').text('Please select a valid image file (JPEG, PNG, or WebP)').show();
      this.value = '';
      return;
    }
    
    // Check file size
    if (file.size > MAX_PROFILE_SIZE) {
      $('#profilePhotoError').text('File size exceeds 1 MB. Please choose a smaller image.').show();
      this.value = '';
      return;
    }
    
    $('#profilePhotoError').hide();
    
    // Read file and open cropper
    const reader = new FileReader();
    reader.onload = function(event) {
      $('#cropperImage').attr('src', event.target.result);
      $('#cropperModal').modal('show');
    };
    reader.readAsDataURL(file);
  });
  
  // Initialize cropper when modal opens
  $('#cropperModal').on('shown.bs.modal', function() {
    if (cropper) {
      cropper.destroy();
    }
    
    cropper = new Cropper(document.getElementById('cropperImage'), {
      aspectRatio: 1, // Square crop
      viewMode: 2,
      minCropBoxWidth: 100,
      minCropBoxHeight: 100,
      responsive: true,
      restore: false,
      guides: true,
      center: true,
      highlight: true,
      cropBoxMovable: true,
      cropBoxResizable: true,
      toggleDragModeOnDblclick: false,
      background: true
    });
  });
  
  // Crop button click
  $('#cropButton').on('click', function() {
    if (!cropper) return;
    
    const canvas = cropper.getCroppedCanvas({
      width: 400,
      height: 400,
      imageSmoothingEnabled: true,
      imageSmoothingQuality: 'high'
    });
    
    canvas.toBlob(function(blob) {
      // Double check size
      if (blob.size > MAX_PROFILE_SIZE) {
        // Try with lower quality
        canvas.toBlob(function(lowQualityBlob) {
          if (lowQualityBlob.size > MAX_PROFILE_SIZE) {
            alert('Cropped image still exceeds 1 MB. Please try a smaller crop area or different image.');
            return;
          }
          applyProfilePhoto(lowQualityBlob);
        }, 'image/jpeg', 0.7);
      } else {
        applyProfilePhoto(blob);
      }
    }, 'image/jpeg', 0.9);
  });
  
  function applyProfilePhoto(blob) {
    // Show preview
    const url = URL.createObjectURL(blob);
    $('#profilePhotoPreview').attr('src', url);
    
    // Create file and attach to input
    const file = new File([blob], 'profile.jpg', { type: 'image/jpeg' });
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(file);
    document.getElementById('profilePhotoInput').files = dataTransfer.files;
    
    // Close modal and cleanup
    $('#cropperModal').modal('hide');
  }
  
  // Cleanup cropper on modal close
  $('#cropperModal').on('hidden.bs.modal', function() {
    if (cropper) {
      cropper.destroy();
      cropper = null;
    }
  });
  
  // ============================================
  // DOCUMENT UPLOAD (DRAG & DROP)
  // ============================================
  const $uploadZone = $('#documentUploadZone');
  const $documentInput = $('#documentInput');
  const $placeholder = $('#documentPlaceholder');
  const $previewContainer = $('#documentPreviewContainer');
  const $preview = $('#documentPreview');
  const $removeBtn = $('#removeDocument');
  const $docError = $('#documentError');
  
  // Click to upload
  $uploadZone.on('click', function(e) {
    if (!$(e.target).closest('#removeDocument').length) {
      $documentInput.click();
    }
  });
  
  // Prevent default drag behaviors
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    $uploadZone[0].addEventListener(eventName, e => {
      e.preventDefault();
      e.stopPropagation();
    });
  });
  
  // Highlight on drag
  ['dragenter', 'dragover'].forEach(eventName => {
    $uploadZone[0].addEventListener(eventName, () => {
      $uploadZone.addClass('dragover');
    });
  });
  
  ['dragleave', 'drop'].forEach(eventName => {
    $uploadZone[0].addEventListener(eventName, () => {
      $uploadZone.removeClass('dragover');
    });
  });
  
  // Handle drop
  $uploadZone[0].addEventListener('drop', e => {
    const files = e.dataTransfer.files;
    if (files.length) {
      handleDocumentFile(files[0]);
    }
  });
  
  // Handle file input change
  $documentInput.on('change', function(e) {
    if (e.target.files.length) {
      handleDocumentFile(e.target.files[0]);
    }
  });
  
  function handleDocumentFile(file) {
    // Check size
    if (file.size > MAX_DOCUMENT_SIZE) {
      $docError.text('File size exceeds 2 MB. Please choose a smaller file.').show();
      return;
    }
    
    $docError.hide();
    
    // Check type and show preview
    if (file.type.startsWith('image/')) {
      const reader = new FileReader();
      reader.onload = function(e) {
        $preview.attr('src', e.target.result);
        showDocumentPreview();
      };
      reader.readAsDataURL(file);
    } else if (file.type === 'application/pdf') {
      // Show PDF icon
      $preview.attr('src', 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Crect fill=%22%23e74a3b%22 width=%22100%22 height=%22100%22 rx=%2210%22/%3E%3Ctext x=%2250%22 y=%2260%22 text-anchor=%22middle%22 fill=%22white%22 font-size=%2230%22 font-weight=%22bold%22%3EPDF%3C/text%3E%3C/svg%3E');
      showDocumentPreview();
    }
    
    // Attach file to input
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(file);
    $documentInput[0].files = dataTransfer.files;
  }
  
  function showDocumentPreview() {
    $placeholder.hide();
    $previewContainer.css('display', 'block');
    $uploadZone.addClass('has-file');
  }
  
  // Remove document
  $removeBtn.on('click', function(e) {
    e.stopPropagation();
    $documentInput.val('');
    $placeholder.show();
    $previewContainer.hide();
    $uploadZone.removeClass('has-file');
  });
  
  // ============================================
  // KEYBOARD NAVIGATION
  // ============================================
  const $form = $('#customer-update-form');
  
  $form.on('keydown', 'input:not([type=file]), select', function(e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      
      const $fields = $form.find('input:visible:not([type=file]), select:visible, textarea:visible')
                           .not('[type=hidden],[type=submit]');
      const idx = $fields.index(this);
      const $next = $fields.eq(idx + 1);
      
      if ($next.length) {
        if ($next.hasClass('select2-hidden-accessible')) {
          $next.select2('open');
        } else {
          $next.focus();
        }
      }
    }
  });
  
  // Ctrl+S to save
  $(document).on('keydown', function(e) {
    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
      e.preventDefault();
      $form.submit();
    }
  });
  
  // ============================================
  // FORM VALIDATION FEEDBACK
  // ============================================
  // ============================================
  // FILER STATUS TOGGLE
  // ============================================
  function updateFilerBadge() {
    const checked = $('#id_filer_status').is(':checked');
    const $badge = $('#filerBadge');
    if (checked) {
      $badge.text('Filer')
            .css({ background: '#f0fdf4', color: '#16a34a', border: '2px solid #bbf7d0' });
    } else {
      $badge.text('Non-Filer')
            .css({ background: '#fef2f2', color: '#ef4444', border: '2px solid #fecaca' });
    }
  }

  $('#id_filer_status').on('change', updateFilerBadge);
  updateFilerBadge(); // on page load

  // ============================================
  // FORM VALIDATION FEEDBACK
  // ============================================
  $form.on('submit', function() {
    const $btn = $('.btn-save-profile');
    $btn.prop('disabled', true)
        .html('<i class="fas fa-spinner fa-spin mr-2"></i>Saving...');
  });
});
</script>
{% endblock javascripts %}