@extends('layouts.demo10.base')

@section('content')

<style>
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
  .pulse-dot { animation: pulse-dot 1.5s ease-in-out infinite; }
  .condition-select,
.column-select{
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;

    background-color:#f2f3ff !important;
}
</style>

<input type="file" id="dataset1File" accept=".csv,.xls,.xlsx" class="hidden" onchange="handleFileUpload(event, 1)">
<input type="file" id="dataset2File" accept=".csv,.xls,.xlsx" class="hidden" onchange="handleFileUpload(event, 2)">

<div class="bg-gray-50 min-h-screen font-sans">

  <!-- Header -->
  <div class="bg-white border-b border-gray-200 px-6 py-3 flex items-center gap-2">
    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
    </svg>
    <span class="font-semibold text-gray-800 text-base">Data Validator</span>
  </div>

  <div class=" mx-auto px-6 py-6">

    <!-- Tab Switcher -->
    <div class="flex justify-center mb-6">
      <div class="bg-white border border-gray-200 rounded-lg p-1 flex gap-1 shadow-sm">
        <button id="tab-single" onclick="switchTab('single')"
          class="px-5 py-2 rounded-md text-sm font-medium transition-colors bg-white shadow text-gray-800 border border-gray-200">
          Single Dataset
        </button>
        <button id="tab-dual" onclick="switchTab('dual')"
          class="px-5 py-2 rounded-md text-sm font-medium transition-colors text-gray-500 hover:text-gray-700">
          Dual Dataset (Comparison)
        </button>
      </div>
    </div>

    <!-- Dataset Upload Section -->
    <div class="bg-white rounded-xl border border-gray-200 p-5 mb-5 shadow-sm">

      <!-- Single Dataset View -->
      <div id="single-view">
        <p class="text-sm font-medium text-gray-700 mb-3">Dataset 1</p>
        <div onclick="openFilePicker(1)"
     class="border-2 border-dashed border-gray-200 rounded-xl flex flex-col items-center justify-center py-8 px-4 cursor-pointer hover:border-blue-300 hover:bg-blue-50"
     style="background: #f2f3ff;">
          <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-3">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
          </div>
          <p id="single-file-name" class="text-sm font-medium text-gray-600">Drop CSV or Excel here</p>
          <p class="text-xs text-gray-400 mt-1">Maximum file size 50MB</p>
        </div>
        <div class="grid grid-cols-2 gap-4 mt-4">
          <div class="bg-gray-50 rounded-lg px-4 py-3"style="background: #f2f3ff;">
            <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Rows</p>
            <p id="single-rows-count" class="text-xl font-bold text-gray-800 mt-0.5">12,842</p>
          </div>
          <div class="bg-gray-50 rounded-lg px-4 py-3"style="background: #f2f3ff;">
            <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Columns</p>
            <p id="single-columns-count" class="text-xl font-bold text-gray-800 mt-0.5">24</p>
          </div>
        </div>
      </div>

      <!-- Dual Dataset View -->
      <div id="dual-view" class="hidden">
        <div class="flex gap-5">
          <!-- Left: Dataset 1 -->
          <div class="flex-1">
            <p class="text-sm font-medium text-gray-700 mb-3">Dataset 1</p>
            <div onclick="openFilePicker(1)" class="border-2 border-dashed border-gray-200 rounded-xl bg-gray-50 flex flex-col items-center justify-center py-8 px-4 cursor-pointer hover:border-blue-300 hover:bg-blue-50 transition-colors"style="background: #f2f3ff;">
              <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-3">
                <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
              </div>
              <p id="dual-file-name" class="text-sm font-medium text-gray-600">Drop CSV or Excel here</p>
              <p class="text-xs text-gray-400 mt-1">Maximum file size 50MB</p>
            </div>
            <div class="grid grid-cols-2 gap-4 mt-4">
              <div class="bg-gray-50 rounded-lg px-4 py-3"style="background: #f2f3ff;">
                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Rows</p>
                <p id="dual-rows-count" class="text-xl font-bold text-gray-800 mt-0.5">12,842</p>
              </div>
              <div class="bg-gray-50 rounded-lg px-4 py-3"style="background: #f2f3ff;">
                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Columns</p>
                <p id="dual-columns-count" class="text-xl font-bold text-gray-800 mt-0.5">24</p>
              </div>
            </div>
          </div>

          <!-- Right: Dataset 2 -->
        <div class="flex-1">

    <p class="text-sm font-medium text-gray-700 mb-3">
        Dataset 2
        <span class="text-gray-400 font-normal">(Optional)</span>
    </p>

    <!-- Hidden File Input -->
    <input
        type="file"
        id="dataset2Upload"
        class="hidden"
        accept=".csv,.xlsx,.json">

    <!-- Upload Box -->
    <div
        onclick="document.getElementById('dataset2Upload').click()"
        class="border border-gray-100 rounded-2xl bg-[#f8f9ff]
        flex flex-col items-center justify-center
        cursor-pointer hover:border-blue-300"
        style="height:170px;background:#f2f3ff;">

        <div
            class="w-10 h-10 border-2 border-gray-300 rounded-full
            flex items-center justify-center mb-4">

            <svg class="w-5 h-5 text-gray-400"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24">

                <path stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M12 4v16m8-8H4"/>

            </svg>
        </div>

        <p class="text-[18px] text-gray-600 font-medium">
            Add Comparison Source
        </p>

    </div>

    <!-- Metadata Card -->
    <div
        class="mt-6 h-[90px]
        rounded-2xl bg-[#fafafa]
        border border-gray-100
        flex items-center justify-center"
        style="background:#f2f3ff;">

        <p class="text-gray-300 text-lg">
            No metadata available
        </p>

    </div>

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

    <!-- Validation Rules -->
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-base font-semibold text-gray-800">Validation Rules</h2>
        <span id="active-rules-count" class="text-xs text-blue-600 font-medium bg-blue-50 px-2 py-1 rounded-md">2 Active Rules</span>
      </div>
    <div class="bg-white rounded-xl border border-gray-200 p-5 mb-5 shadow-sm">
     

      <div id="rules-wrapper">
      <!-- Rule 1 -->
      <div class="rule-row grid grid-cols-3 gap-4 mb-4">
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Select Column</label>
          <select class="column-select w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"style="background: #f2f3ff;">
            <option>HRU Code</option>
          </select>
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Condition</label>
          <select class="condition-select w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"style="background: #f2f3ff;">
            <option>Must contain unique values</option>
          </select>
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Values to Match</label>
          <div class="flex items-center gap-2">
            <input class="rule-value-input flex-1 border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-400 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"style="background: #f2f3ff;"
              placeholder='e.g. "10-9|A|5' />
            <button type="button" onclick="addRule(this)" class="w-7 h-7 rounded-md bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-500 transition-colors">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
              </svg>
            </button>
            <button type="button" onclick="deleteRule(this)" class="w-7 h-7 rounded-md bg-red-50 hover:bg-red-100 flex items-center justify-center text-red-500 transition-colors">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <div class="border-t border-gray-100 my-4"></div>

      <!-- Rule 2 -->
      <div class="rule-row grid grid-cols-3 gap-4 mb-4">
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Select Column</label>
          <select class="column-select w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"style="background: #f2f3ff;">
            <option>Region</option>
          </select>
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Condition</label>
          <select class="condition-select w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"style="background: #f2f3ff;">
            <option>Match against Set</option>
          </select>
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Allowed Values</label>
          <div class="flex items-center gap-2">
            <div class="allowed-values-box flex-1 border border-gray-200 rounded-lg px-3 py-2 flex gap-1 flex-wrap min-h-[38px] "style="background: #f2f3ff;">
              <span class="bg-gray-100 text-gray-600 text-xs px-2 py-0.5 rounded font-medium bg-white">EMEA</span>
              <span class="bg-gray-100 text-gray-600 text-xs px-2 py-0.5 rounded font-medium bg-white">APAC</span>
              <span class="bg-gray-100 text-gray-600 text-xs px-2 py-0.5 rounded font-medium bg-white">NA</span>
            </div>
            <button type="button" onclick="addRule(this)" class="w-7 h-7 rounded-md bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-500 transition-colors">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
              </svg>
            </button>
            <button type="button" onclick="deleteRule(this)" class="w-7 h-7 rounded-md bg-red-50 hover:bg-red-100 flex items-center justify-center text-red-500 transition-colors">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
              </svg>
            </button>
          </div>
        </div>
      </div>

      </div>

      <div class="flex justify-end gap-3 mt-4">
        <!-- <button class="px-4 py-2 rounded-lg border border-gray-200 text-sm font-medium text-gray-600 hover:bg-gray-50 transition-colors">
          Save Filter
        </button> -->
        <button type="button" onclick="runValidation()" class="px-5 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition-colors shadow-sm">
          Run Validation
        </button>
      </div>
    </div>

    <!-- Validation Results -->
        <h2 class="text-base font-semibold text-gray-800 mb-4">Validation Results</h2>
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
     <div>
        <span id="validation-status" class="hidden flex items-center gap-1.5 text-xs text-blue-500 font-medium">
          <span class="w-2 h-2 bg-blue-500 rounded-full pulse-dot inline-block"></span>
          VALIDATING...
        </span>
        </div>
      
      <div class="overflow-x-auto">
        <table class="w-full text-sm">
          <thead>
            <tr class="bg-gray-50 border-b border-gray-100" style="background: #f2f3ff;">
              <th class="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Excel Index</th>
              <th class="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">HRU Code</th>
              <th class="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Region</th>
              <th class="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Status</th>
              <th class="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Values</th>
            </tr>
          </thead>
          <tbody id="validation-results-body" class="divide-y divide-gray-50">
            <tr class="hover:bg-gray-50 transition-colors">
              <td class="px-5 py-3 text-gray-600">1024</td>
              <td class="px-5 py-3 font-medium text-gray-800">HRU_9921</td>
              <td class="px-5 py-3 text-gray-700">EMEA</td>
              <td class="px-5 py-3"><span class="bg-green-100 text-green-700 border border-green-300 px-2 py-0.5 rounded text-xs font-semibold uppercase">VALID</span></td>
              <td class="px-5 py-3 text-gray-600">2,442.00</td>
            </tr>
            <tr class="hover:bg-gray-50 transition-colors">
              <td class="px-5 py-3 text-gray-600" style="background: #fff8f7;">1025</td>
              <td class="px-5 py-3 font-medium text-red-500"style="background: #fff8f7;">HRU_NULL</td>
              <td class="px-5 py-3 text-gray-700"style="background: #fff8f7;">APAC</td>
              <td class="px-5 py-3" style="background: #fff8f7;"><span class="bg-red-100 text-red-700 border border-red-300 px-2 py-0.5 rounded text-xs font-semibold uppercase" >INVALID</span></td>
              <td class="px-5 py-3 text-gray-600"style="background: #fff8f7;">1,120.50</td>
            </tr>
            <tr class="hover:bg-gray-50 transition-colors">
              <td class="px-5 py-3 text-gray-600">1026</td>
              <td class="px-5 py-3 font-medium text-gray-800">HRU_4412</td>
              <td class="px-5 py-3 text-gray-700">NA</td>
              <td class="px-5 py-3"><span class="bg-green-100 text-green-700 border border-green-300 px-2 py-0.5 rounded text-xs font-semibold uppercase">VALID</span></td>
              <td class="px-5 py-3 text-gray-600">4,900.00</td>
            </tr>
            <tr class="hover:bg-gray-50 transition-colors">
              <td class="px-5 py-3 text-gray-600"style="background: #fff8f7;">1027</td>
              <td class="px-5 py-3 font-medium text-gray-800"style="background: #fff8f7;">HRU_1120</td>
              <td class="px-5 py-3 font-medium text-orange-500"style="background: #fff8f7;">LATAM</td>
              <td class="px-5 py-3"style="background: #fff8f7;"><span class="bg-orange-100 text-orange-700 border border-orange-300 px-2 py-0.5 rounded text-xs font-semibold uppercase">OUT OF SET</span></td>
              <td class="px-5 py-3 text-gray-600"style="background: #fff8f7;">920.00</td>
            </tr>
            <tr class="hover:bg-gray-50 transition-colors">
              <td class="px-5 py-3 text-gray-600">1028</td>
              <td class="px-5 py-3 font-medium text-gray-800">HRU_0012</td>
              <td class="px-5 py-3 text-gray-700">EMEA</td>
              <td class="px-5 py-3"><span class="bg-green-100 text-green-700 border border-green-300 px-2 py-0.5 rounded text-xs font-semibold uppercase">VALID</span></td>
              <td class="px-5 py-3 text-gray-600">12,110.00</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Footer -->
      <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-between bg-gray-50">
        <div class="flex items-center gap-2">
          <div class="w-6 h-6 bg-blue-600 rounded flex items-center justify-center">
            <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
          </div>
          <span class="text-xs text-gray-500 font-medium">Total Records</span>
          <span id="total-records-text" class="text-xs font-bold text-gray-700">12,842 Rows Found</span>
        </div>
        <div class="flex items-center gap-2">
          <select
class="min-w-[85px] h-9 border border-gray-200 rounded-md px-7 text-sm text-gray-700 bg-white">
    <option>.xlsx</option>
    <option>.csv</option>
</select>

<button
class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-5 h-9 rounded-md transition-colors">

    <svg class="w-4 h-4" fill="none" stroke="currentColor"
        viewBox="0 0 24 24">
        <path stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
    </svg>

    Export
</button>
        </div>
      </div>
    </div>

  </div>
</div>

@endsection

@section('scripts')
@vite('resources/js/pages/module.js')

<script>
  function switchTab(tab) {
    const singleView = document.getElementById('single-view');
    const dualView   = document.getElementById('dual-view');
    const tabSingle  = document.getElementById('tab-single');
    const tabDual    = document.getElementById('tab-dual');

    if (tab === 'single') {
      singleView.classList.remove('hidden');
      dualView.classList.add('hidden');
      tabSingle.classList.add('bg-white', 'shadow', 'text-gray-800', 'border', 'border-gray-200');
      tabSingle.classList.remove('text-gray-500');
      tabDual.classList.remove('bg-white', 'shadow', 'text-gray-800', 'border', 'border-gray-200');
      tabDual.classList.add('text-gray-500');
    } else {
      dualView.classList.remove('hidden');
      singleView.classList.add('hidden');
      tabDual.classList.add('bg-white', 'shadow', 'text-gray-800', 'border', 'border-gray-200');
      tabDual.classList.remove('text-gray-500');
      tabSingle.classList.remove('bg-white', 'shadow', 'text-gray-800', 'border', 'border-gray-200');
      tabSingle.classList.add('text-gray-500');
    }
  }

  let uploadedRows = [];
  let uploadedHeaders = [];
  let validationRows = [];

  function openFilePicker(dataset) {
    const input = dataset === 2 ? document.getElementById('dataset2File') : document.getElementById('dataset1File');
    input.click();
  }

  function handleFileUpload(event, dataset) {
    const file = event.target.files[0];
    if (!file) return;

    const fileName = file.name;
    const extension = fileName.split('.').pop().toLowerCase();

    if (dataset === 2) {
      document.getElementById('dataset2-file-name').textContent = fileName;
      document.getElementById('dataset2-meta').textContent = 'Comparison source selected';
      return;
    }

    document.getElementById('single-file-name').textContent = fileName;
    document.getElementById('dual-file-name').textContent = fileName;

    if (extension !== 'csv') {
      alert('Abhi browser side par CSV parsing active hai. Excel file ke liye backend ya SheetJS library add karni hogi. CSV upload karo.');
      return;
    }

    const reader = new FileReader();
    reader.onload = function(e) {
      const parsed = parseCSV(e.target.result);
      uploadedHeaders = parsed.headers;
      uploadedRows = parsed.rows;

      updateDatasetStats(uploadedRows.length, uploadedHeaders.length);
      updateColumnDropdowns();
      document.getElementById('total-records-text').textContent = `${uploadedRows.length.toLocaleString()} Rows Found`;
    };
    reader.readAsText(file);
  }

  function parseCSV(text) {
    const lines = text.trim().split(/\r?\n/).filter(Boolean);
    if (!lines.length) return { headers: [], rows: [] };

    const headers = splitCSVLine(lines[0]).map(h => h.trim());
    const rows = lines.slice(1).map((line, index) => {
      const values = splitCSVLine(line);
      const row = { __index: index + 2 };
      headers.forEach((header, i) => row[header] = values[i] ?? '');
      return row;
    });

    return { headers, rows };
  }

  function splitCSVLine(line) {
    const result = [];
    let current = '';
    let insideQuotes = false;

    for (let i = 0; i < line.length; i++) {
      const char = line[i];
      if (char === '"') {
        insideQuotes = !insideQuotes;
      } else if (char === ',' && !insideQuotes) {
        result.push(current);
        current = '';
      } else {
        current += char;
      }
    }
    result.push(current);
    return result;
  }

  function updateDatasetStats(rows, columns) {
    document.getElementById('single-rows-count').textContent = rows.toLocaleString();
    document.getElementById('single-columns-count').textContent = columns.toLocaleString();
    document.getElementById('dual-rows-count').textContent = rows.toLocaleString();
    document.getElementById('dual-columns-count').textContent = columns.toLocaleString();
  }

  function updateColumnDropdowns() {
    document.querySelectorAll('.column-select').forEach(select => {
      const oldValue = select.value;
      select.innerHTML = '';
      uploadedHeaders.forEach(header => {
        const option = document.createElement('option');
        option.value = header;
        option.textContent = header;
        select.appendChild(option);
      });
      if (uploadedHeaders.includes(oldValue)) select.value = oldValue;
    });
  }

  function addRule(button) {
    const wrapper = document.getElementById('rules-wrapper');
    const currentRow = button.closest('.rule-row');
    const divider = document.createElement('div');
    divider.className = 'border-t border-gray-100 my-4';

    const newRow = currentRow.cloneNode(true);
    newRow.querySelectorAll('input').forEach(input => input.value = '');
    newRow.querySelectorAll('.allowed-values-box').forEach(box => {
      box.innerHTML = '<span class="bg-gray-100 text-gray-600 text-xs px-2 py-0.5 rounded font-medium">New</span>';
    });

    wrapper.appendChild(divider);
    wrapper.appendChild(newRow);
    updateActiveRulesCount();
    if (uploadedHeaders.length) updateColumnDropdowns();
  }

  function deleteRule(button) {
    const wrapper = document.getElementById('rules-wrapper');
    const rows = wrapper.querySelectorAll('.rule-row');

    if (rows.length <= 1) {
      alert('Kam az kam 1 rule rehna chahiye.');
      return;
    }

    const row = button.closest('.rule-row');
    const prev = row.previousElementSibling;
    const next = row.nextElementSibling;

    if (prev && prev.classList.contains('border-t')) prev.remove();
    else if (next && next.classList.contains('border-t')) next.remove();

    row.remove();
    updateActiveRulesCount();
  }

  function updateActiveRulesCount() {
    const count = document.querySelectorAll('#rules-wrapper .rule-row').length;
    document.getElementById('active-rules-count').textContent = `${count} Active Rules`;
  }

  function runValidation() {
    const status = document.getElementById('validation-status');
    status.classList.remove('hidden');

    const sourceRows = uploadedRows.length ? uploadedRows : getDemoRows();
    const rules = Array.from(document.querySelectorAll('#rules-wrapper .rule-row')).map(row => ({
      column: row.querySelector('.column-select')?.value,
      condition: row.querySelector('.condition-select')?.value,
      value: row.querySelector('.rule-value-input')?.value || Array.from(row.querySelectorAll('.allowed-values-box span')).map(s => s.textContent.trim()).join('|')
    }));

    validationRows = sourceRows.map(row => validateRow(row, rules));
    renderResults(validationRows);

    setTimeout(() => {
      status.classList.add('hidden');
    }, 700);
  }

  function validateRow(row, rules) {
    let status = 'VALID';
    let statusClass = 'bg-green-100 text-green-700 border border-green-300';

    for (const rule of rules) {
      const value = String(row[rule.column] ?? '').trim();
      const allowed = String(rule.value || '').split('|').map(v => v.trim()).filter(Boolean);

      if (rule.condition === 'Must contain unique values' && !value) {
        status = 'INVALID';
        statusClass = 'bg-red-100 text-red-700 border border-red-300';
        break;
      }

      if (rule.condition === 'Match against Set' && allowed.length && !allowed.includes(value)) {
        status = 'OUT OF SET';
        statusClass = 'bg-orange-100 text-orange-700 border border-orange-300';
        break;
      }
    }

    return { ...row, __status: status, __statusClass: statusClass };
  }

  function renderResults(rows) {
    const tbody = document.getElementById('validation-results-body');
    tbody.innerHTML = '';

    rows.slice(0, 100).forEach(row => {
      const hru = row['HRU Code'] ?? row['HRU'] ?? row[uploadedHeaders[0]] ?? '';
      const region = row['Region'] ?? row[uploadedHeaders[1]] ?? '';
      const value = row['Values'] ?? row['Value'] ?? row[uploadedHeaders[2]] ?? '';

      tbody.insertAdjacentHTML('beforeend', `
        <tr class="hover:bg-gray-50 transition-colors">
          <td class="px-5 py-3 text-gray-600">${escapeHtml(row.__index ?? '')}</td>
          <td class="px-5 py-3 font-medium ${row.__status === 'INVALID' ? 'text-red-500' : 'text-gray-800'}">${escapeHtml(hru)}</td>
          <td class="px-5 py-3 ${row.__status === 'OUT OF SET' ? 'font-medium text-orange-500' : 'text-gray-700'}">${escapeHtml(region)}</td>
          <td class="px-5 py-3"><span class="${row.__statusClass} px-2 py-0.5 rounded text-xs font-semibold uppercase">${row.__status}</span></td>
          <td class="px-5 py-3 text-gray-600">${escapeHtml(value)}</td>
        </tr>
      `);
    });
  }

  function exportResults() {
    const rows = validationRows.length ? validationRows : getDemoRows().map(row => ({ ...row, __status: row.Status || 'VALID' }));
    const format = document.getElementById('export-format').value;
    const csv = rowsToCSV(rows);
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = format === '.xlsx' ? 'validation-results.xlsx' : 'validation-results.csv';
    a.click();
    URL.revokeObjectURL(url);
  }

  function rowsToCSV(rows) {
    const headers = ['Excel Index', 'HRU Code', 'Region', 'Status', 'Values'];
    const lines = [headers.join(',')];

    rows.forEach(row => {
      const data = [
        row.__index ?? row['Excel Index'] ?? '',
        row['HRU Code'] ?? row['HRU'] ?? '',
        row['Region'] ?? '',
        row.__status ?? row['Status'] ?? '',
        row['Values'] ?? row['Value'] ?? ''
      ];
      lines.push(data.map(v => `"${String(v).replaceAll('"', '""')}"`).join(','));
    });

    return lines.join('\n');
  }

  function getDemoRows() {
    return [
      { __index: 1024, 'HRU Code': 'HRU_9921', Region: 'EMEA', Values: '2,442.00', Status: 'VALID' },
      { __index: 1025, 'HRU Code': 'HRU_NULL', Region: 'APAC', Values: '1,120.50', Status: 'INVALID' },
      { __index: 1026, 'HRU Code': 'HRU_4412', Region: 'NA', Values: '4,900.00', Status: 'VALID' },
      { __index: 1027, 'HRU Code': 'HRU_1120', Region: 'LATAM', Values: '920.00', Status: 'OUT OF SET' },
      { __index: 1028, 'HRU Code': 'HRU_0012', Region: 'EMEA', Values: '12,110.00', Status: 'VALID' }
    ];
  }

  function escapeHtml(value) {
    return String(value)
      .replaceAll('&', '&amp;')
      .replaceAll('<', '&lt;')
      .replaceAll('>', '&gt;')
      .replaceAll('"', '&quot;')
      .replaceAll("'", '&#039;');
  }

</script>
@endsection