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

{% block content %}
<div class="container py-5">
  <div class="card shadow-sm">
    <div class="card-header bg-primary text-white">
      <h5 class="mb-0">
        <i class="fas fa-code-branch me-2"></i>
        Bulk Update Branch ID
      </h5>
    </div>
    
    <div class="card-body">
      <!-- Info Alert -->
      <div class="alert alert-info mb-4">
        <i class="fas fa-info-circle me-2"></i>
        Total <strong>{{ total_models }}</strong> tables found.
        <br><small>{{ has_pos_branch_id_count }} tables have <code>pos_branch_id</code> field.</small>
      </div>

      <!-- Input Form -->
      <div class="row mb-4 align-items-end">
        <div class="col-md-6">
          <label for="branch-id-input" class="form-label fw-bold">
            Branch ID <span class="text-danger">*</span>
          </label>
          <input 
            type="number" 
            id="branch-id-input" 
            class="form-control form-control-lg" 
            placeholder="Enter Branch ID (e.g., 1, 2, 3...)"
            min="0"
          >
        </div>
        <div class="col-md-6">
          <button 
            id="update-btn" 
            class="btn btn-success btn-lg w-100"
            disabled
          >
            <i class="fas fa-sync me-2"></i>
            Update Selected Tables (<span id="selected-count">0</span>)
          </button>
        </div>
      </div>

      <!-- Selection Controls -->
      <div class="mb-3 p-3 bg-light rounded border">
        <div class="d-flex justify-content-between align-items-center">
          <span class="fw-bold"><i class="fas fa-list-check me-2"></i>Select Tables:</span>
          <div>
            <button id="select-all-btn" class="btn btn-outline-primary btn-sm me-2">
              <i class="fas fa-check-square me-1"></i>Select All
            </button>
            <button id="unselect-all-btn" class="btn btn-outline-secondary btn-sm">
              <i class="fas fa-square me-1"></i>Unselect All
            </button>
            <span class="ms-3 text-muted">
              <span id="selection-status" class="badge bg-secondary">None Selected</span>
            </span>
          </div>
        </div>
      </div>

      <!-- Tables Grid -->
      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-3 mb-4">
        {% for model in models %}
          <div class="col table-item {% if model.has_pos_branch_id %}has-field{% else %}no-field{% endif %}">
            <div class="form-check p-2 border rounded h-100 {% if model.has_pos_branch_id %}border-success bg-success-subtle{% else %}border-muted bg-light{% endif %}">
              <input 
                class="form-check-input" 
                type="checkbox" 
                id="chk_{{ model.name }}" 
                value="{{ model.name }}"
                name="selected-tables"
                data-has-field="{{ model.has_pos_branch_id|yesno:'true,false' }}"
                {% if not model.has_pos_branch_id %}disabled{% endif %}
              >
              <label class="form-check-label d-block" for="chk_{{ model.name }}">
                <small class="fw-semibold">{{ model.label }}</small>
                {% if model.has_pos_branch_id %}
                  <small class="text-success ms-1">
                    <i class="fas fa-check-circle"></i> Has Field
                  </small>
                {% else %}
                  <small class="text-muted ms-1">
                    <i class="fas fa-times-circle"></i> No Field
                  </small>
                {% endif %}
              </label>
            </div>
          </div>
        {% endfor %}
      </div>

      <!-- Search Filter -->
      <div class="mb-3">
        <input 
          type="text" 
          id="search-box" 
          class="form-control" 
          placeholder="Search tables..."
        >
        <small class="text-muted">Type to filter tables by name</small>
      </div>

      <!-- Progress Section (hidden initially) -->
      <div id="progress-section" class="d-none mt-4">
        <hr>
        <h6 class="fw-bold mb-3"><i class="fas fa-tasks me-2"></i>Update Progress</h6>
        
        <div class="mb-3">
          <div class="d-flex justify-content-between mb-2">
            <span class="fw-bold">Progress:</span>
            <span id="progress-text">0%</span>
          </div>
          <div class="progress" style="height: 25px;">
            <div 
              id="progress-bar" 
              class="progress-bar progress-bar-striped progress-bar-animated bg-success" 
              role="progressbar" 
              style="width: 0%"
            >
              0%
            </div>
          </div>
        </div>
        
        <div id="status-message" class="alert alert-info">
          <i class="fas fa-spinner fa-spin me-2"></i>
          Starting update process...
        </div>
      </div>

      <!-- Results Section (hidden initially) -->
      <div id="results-section" class="d-none mt-4">
        <hr>
        <h6 class="fw-bold mb-3"><i class="fas fa-chart-bar me-2"></i>Results Summary</h6>
        
        <!-- Summary Cards -->
        <div class="row mb-3">
          <div class="col-md-3">
            <div class="card bg-success text-white h-100">
              <div class="card-body text-center">
                <h3 id="success-count" class="mb-0">0</h3>
                <small>Tables Updated</small>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card bg-warning text-dark h-100">
              <div class="card-body text-center">
                <h3 id="skipped-count" class="mb-0">0</h3>
                <small>Skipped (No Field)</small>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card bg-danger text-white h-100">
              <div class="card-body text-center">
                <h3 id="failed-count" class="mb-0">0</h3>
                <small>Failed</small>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card bg-info text-white h-100">
              <div class="card-body text-center">
                <h3 id="total-records" class="mb-0">0</h3>
                <small>Total Records</small>
              </div>
            </div>
          </div>
        </div>

        <!-- Detailed Lists -->
        <div class="accordion" id="results-accordion">
          <!-- Updated Tables -->
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button 
                class="accordion-button {% if success_count_gt_0 %}{% else %}collapsed{% endif %}" 
                type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#updated-list"
                aria-expanded="true"
              >
                <span class="text-success"><i class="fas fa-check-circle me-2"></i></span>
                Successfully Updated (<span id="acc-updated-count">0</span>)
              </button>
            </h2>
            <div id="updated-list" class="accordion-collapse collapse show" data-bs-parent="#results-accordion">
              <div class="accordion-body">
                <ul class="list-group mb-0" id="updated-tables-list"></ul>
              </div>
            </div>
          </div>

          <!-- Skipped Tables -->
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button 
                class="accordion-button collapsed" 
                type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#skipped-list"
                aria-expanded="false"
              >
                <span class="text-warning"><i class="fas fa-exclamation-triangle me-2"></i></span>
                Skipped - No pos_branch_id Field (<span id="acc-skipped-count">0</span>)
              </button>
            </h2>
            <div id="skipped-list" class="accordion-collapse collapse" data-bs-parent="#results-accordion">
              <div class="accordion-body">
                <ul class="list-group mb-0" id="skipped-tables-list"></ul>
              </div>
            </div>
          </div>

          <!-- Failed Tables -->
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button 
                class="accordion-button collapsed" 
                type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#failed-list"
                aria-expanded="false"
              >
                <span class="text-danger"><i class="fas fa-times-circle me-2"></i></span>
                Failed (<span id="acc-failed-count">0</span>)
              </button>
            </h2>
            <div id="failed-list" class="accordion-collapse collapse" data-bs-parent="#results-accordion">
              <div class="accordion-body">
                <ul class="list-group mb-0" id="failed-tables-list"></ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
(function() {
  const input = document.getElementById('branch-id-input');
  const updateBtn = document.getElementById('update-btn');
  const selectAllBtn = document.getElementById('select-all-btn');
  const unselectAllBtn = document.getElementById('unselect-all-btn');
  const searchBox = document.getElementById('search-box');
  const selectionStatus = document.getElementById('selection-status');
  const selectedCountSpan = document.getElementById('selected-count');
  const checkboxes = document.querySelectorAll('input[name="selected-tables"]');
  
  const progressSection = document.getElementById('progress-section');
  const resultsSection = document.getElementById('results-section');
  const progressBar = document.getElementById('progress-bar');
  const progressText = document.getElementById('progress-text');
  const statusMessage = document.getElementById('status-message');

  let lastCheckedState = false;

  // Initialize selection status
  function updateSelectionStatus() {
    const checkedBoxes = document.querySelectorAll('input[name="selected-tables"]:checked:not([disabled])');
    const totalCount = document.querySelectorAll('input[name="selected-tables"]:not([disabled])').length;
    const checkedCount = checkedBoxes.length;

    // Update badge
    if (checkedCount === 0) {
      selectionStatus.className = 'badge bg-secondary';
      selectionStatus.textContent = 'None Selected';
    } else if (checkedCount === totalCount) {
      selectionStatus.className = 'badge bg-success';
      selectionStatus.textContent = 'All Selected';
    } else {
      selectionStatus.className = 'badge bg-warning text-dark';
      selectionStatus.textContent = `${checkedCount}/${totalCount} Selected`;
    }

    // Update button counter
    selectedCountSpan.textContent = checkedCount;

    // Enable/disable update button
    updateBtn.disabled = !checkedCount || !input.value || parseInt(input.value) < 0;
    
    return checkedCount;
  }

  // Select All Button
  selectAllBtn.addEventListener('click', function() {
    lastCheckedState = true;
    checkboxes.forEach(chk => {
      if (!chk.disabled) {
        chk.checked = true;
      }
    });
    updateSelectionStatus();
  });

  // Unselect All Button
  unselectAllBtn.addEventListener('click', function() {
    lastCheckedState = false;
    checkboxes.forEach(chk => {
      if (!chk.disabled) {
        chk.checked = false;
      }
    });
    updateSelectionStatus();
  });

  // Individual checkbox change
  checkboxes.forEach(chk => {
    chk.addEventListener('change', function() {
      updateSelectionStatus();
    });
  });

  // Input validation
  input.addEventListener('input', function() {
    updateSelectionStatus();
  });

  // Search/filter tables
  searchBox.addEventListener('input', function() {
    const term = this.value.toLowerCase().trim();
    document.querySelectorAll('.table-item').forEach(item => {
      const label = item.querySelector('label').textContent.toLowerCase();
      item.style.display = label.includes(term) ? '' : 'none';
    });
    updateSelectionStatus();
  });

  // Handle update button click
  updateBtn.addEventListener('click', async function() {
    const branchId = input.value;
    const checkedBoxes = document.querySelectorAll('input[name="selected-tables"]:checked:not([disabled])');
    
    if (!branchId) {
      alert('Please enter a valid Branch ID');
      return;
    }

    if (!checkedBoxes.length) {
      alert('Please select at least one table');
      return;
    }

    if (!confirm(`Are you sure you want to update pos_branch_id to ${branchId} for ${checkedBoxes.length} selected tables?`)) {
      return;
    }

    // Disable controls
    input.disabled = true;
    updateBtn.disabled = true;
    selectAllBtn.disabled = true;
    unselectAllBtn.disabled = true;
    checkboxes.forEach(chk => chk.disabled = true);

    // Show progress section
    progressSection.classList.remove('d-none');
    resultsSection.classList.add('d-none');
    
    // Reset progress
    updateProgress(0, 'Initiating update process...');

    try {
      // Get CSRF token
      const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value || getCookie('csrftoken');

      // Collect selected table names
      const selectedTables = Array.from(checkedBoxes).map(chk => chk.value);

      updateProgress(25, 'Sending request to server...');

      // Send AJAX request
      const response = await fetch('{% url "pos:update_branch_id" %}', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': csrfToken,
          'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify({ 
          branch_id: branchId,
          selected_tables: selectedTables
        })
      });

      updateProgress(50, 'Processing updates...');

      const data = await response.json();

      updateProgress(75, 'Finalizing...');

      if (data.success) {
        updateProgress(100, 'Update completed successfully!');
        displayResults(data);
      } else {
        throw new Error(data.error || 'Update failed');
      }

    } catch (error) {
      statusMessage.className = 'alert alert-danger';
      statusMessage.innerHTML = `
        <i class="fas fa-exclamation-triangle me-2"></i>
        <strong>Error:</strong> ${error.message}
      `;
      progressBar.classList.remove('progress-bar-animated');
      progressBar.classList.add('bg-danger');
    } finally {
      // Re-enable controls after delay
      setTimeout(() => {
        input.disabled = false;
        updateBtn.disabled = false;
        selectAllBtn.disabled = false;
        unselectAllBtn.disabled = false;
        checkboxes.forEach(chk => {
          if (chk.getAttribute('data-has-field') !== 'true') {
            chk.disabled = true;
          }
        });
        updateSelectionStatus();
      }, 2000);
    }
  });

  function updateProgress(percent, message) {
    progressBar.style.width = percent + '%';
    progressBar.textContent = percent + '%';
    progressText.textContent = percent + '%';
    
    if (percent === 100) {
      statusMessage.className = 'alert alert-success';
      statusMessage.innerHTML = `
        <i class="fas fa-check-circle me-2"></i>
        ${message}
      `;
      progressBar.classList.remove('progress-bar-animated');
    } else {
      statusMessage.className = 'alert alert-info';
      statusMessage.innerHTML = `
        <i class="fas fa-spinner fa-spin me-2"></i>
        ${message}
      `;
    }
  }

  function displayResults(data) {
    resultsSection.classList.remove('d-none');
    
    // Update summary counts
    document.getElementById('success-count').textContent = data.total_updated;
    document.getElementById('skipped-count').textContent = data.total_skipped;
    document.getElementById('failed-count').textContent = data.total_failed;
    
    const totalRecords = data.updated_tables.reduce((sum, t) => sum + (t.count || 0), 0);
    document.getElementById('total-records').textContent = totalRecords;

    // Accordion counts
    document.getElementById('acc-updated-count').textContent = data.total_updated;
    document.getElementById('acc-skipped-count').textContent = data.total_skipped;
    document.getElementById('acc-failed-count').textContent = data.total_failed;

    // Display updated tables
    if (data.updated_tables && data.updated_tables.length > 0) {
      document.querySelector('#updated-list').classList.add('show');
      document.querySelector('#updated-list button').classList.remove('collapsed');
      document.querySelector('#updated-list button').setAttribute('aria-expanded', 'true');
      
      const updatedHtml = data.updated_tables.map(t => `
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <span><strong>${t.name}</strong></span>
          <span class="badge bg-success">${t.count || 0} record(s)</span>
        </li>
      `).join('');
      document.getElementById('updated-tables-list').innerHTML = updatedHtml;
    } else {
      document.querySelector('#updated-list').classList.remove('show');
      document.querySelector('#updated-list button').classList.add('collapsed');
    }

    // Display skipped tables
    if (data.skipped_tables && data.skipped_tables.length > 0) {
      const skippedHtml = data.skipped_tables.map(t => `
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <span><strong>${t.name}</strong></span>
          <span class="badge bg-warning text-dark">${t.reason}</span>
        </li>
      `).join('');
      document.getElementById('skipped-tables-list').innerHTML = skippedHtml;
    } else {
      document.querySelector('#skipped-list').classList.remove('show');
      document.querySelector('#skipped-list button').classList.add('collapsed');
    }

    // Display failed tables
    if (data.failed_tables && data.failed_tables.length > 0) {
      const failedHtml = data.failed_tables.map(t => `
        <li class="list-group-item d-flex justify-content-between align-items-center text-danger">
          <span><strong>${t.name}</strong>: ${t.error}</span>
        </li>
      `).join('');
      document.getElementById('failed-tables-list').innerHTML = failedHtml;
    } else {
      document.querySelector('#failed-list').classList.remove('show');
      document.querySelector('#failed-list button').classList.add('collapsed');
    }
  }

  function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
      const cookies = document.cookie.split(';');
      for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].trim();
        if (cookie.substring(0, name.length + 1) === (name + '=')) {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  }

  // Initial status update
  updateSelectionStatus();
})();
</script>

<style>
  .table-item.has-field {
    transition: all 0.2s ease;
  }
  .table-item.has-field:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  .table-item.no-field {
    opacity: 0.5;
    pointer-events: none;
  }
  details summary {
    cursor: pointer;
    user-select: none;
  }
  details summary:hover {
    text-decoration: underline;
  }
  .accordion-button:not(.collapsed) {
    background-color: rgba(0, 123, 255, 0.1);
    color: #0d6efd;
  }
</style>

{% endblock %}