@extends('Admin/layout')
@section('title','Bulk Import — Associate Master')
@section('content')
@if(has_permission('Associate','Import'))
<div class="container-fluid">
    <div class="row">
          <div class="topbar">
 
            <div class="tb-r">
            
            <button class="btnprime" onclick="go('/visitportal/associates')">
                <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
                Back to Associate Master
            </button>
            </div>
        </div>
    </div>
       <!-- IMPORT BODY -->
  <div class="imp-wrap">
    <div class="imp-main" id="imp-main">

      <!-- STEP INDICATOR -->
      <div class="steps" id="steps">
        <div class="step active" id="step-1">
          <div class="step-num">1</div>
          <div class="step-label">Prepare File</div>
        </div>
        <div class="step-line"></div>
        <div class="step" id="step-2">
          <div class="step-num">2</div>
          <div class="step-label">Upload & Validate</div>
        </div>
        <div class="step-line"></div>
        <div class="step" id="step-3">
          <div class="step-num">3</div>
          <div class="step-label">Review Errors</div>
        </div>
        <div class="step-line"></div>
        <div class="step" id="step-4">
          <div class="step-num">4</div>
          <div class="step-label">Import</div>
        </div>
      </div>

      <!-- STEP 1 — PREPARE -->
      <div id="sec-prepare">

        <!-- Download Sample -->
        <div class="imp-card">
          <div class="imp-card-title">📥 Download Sample Format</div>
          <div class="imp-card-sub">Download a ready-made sample file to fill in your associate data. Choose Excel (.xlsx) or CSV format.</div>
          <div class="fmt-grid">
            <div class="fmt-card" onclick="downloadSample('xlsx')">
              <div class="fmt-ico excel">📊</div>
              <div>
                <div class="fmt-name">Excel Format (.xlsx)</div>
                <div class="fmt-desc">Recommended — with dropdowns & colors</div>
              </div>
            </div>
            <div class="fmt-card" onclick="downloadSample('csv')">
              <div class="fmt-ico csv">📄</div>
              <div>
                <div class="fmt-name">CSV Format (.csv)</div>
                <div class="fmt-desc">Plain text — works with any software</div>
              </div>
            </div>
          </div>
        </div>

        <!-- Field Reference -->
        <div class="imp-card">
          <div class="field-toggle" onclick="toggleFieldTable()">
            <svg class="ft-arrow" id="ft-arrow" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
            <span class="imp-card-title" style="margin:0">📋 Column Reference &amp; Allowed Values</span>
          </div>
          <div class="imp-card-sub" style="margin-bottom:0">Click to expand field definitions, mandatory flags and allowed values.</div>
          <div class="imp-card-sub" style="margin-bottom:0;color:red;font-size:16px;" >Date format must be "YYYY-MM-DD".</div>
          <div id="field-table-wrap" style="display:none;margin-top:14px">
            <div style="overflow-x:auto">
              <table class="field-table">
                <thead>
                  <tr>
                    <th>Column Name</th>
                    <th>Required?</th>
                    <th>Type</th>
                    <th>Allowed Values / Format</th>
                    <th>Notes</th>
                  </tr>
                </thead>
                <tbody id="field-tbody"></tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- Upload Drop Zone -->
        <div class="imp-card">
          <div class="imp-card-title">📂 Upload Your File</div>
          <div class="imp-card-sub">Drag &amp; drop your filled Excel or CSV file, or click to browse.</div>

          <div id="upload-scheme" style="margin-bottom:14px;display:none;">
            <div class="flbl" style="font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px">
              Scheme <span style="color:var(--red)">*</span>
            </div>
            <select class="fi-full" id="sel-scheme" style="max-width:340px">
              <option value="">— Select Scheme —</option>
              @if($tblschemes)
                @foreach($tblschemes as $key => $value)
                     <option value="{{$value->id}}">{{$value->name}}</option>
                @endforeach
              @endif
            </select>
            <div style="font-size:10.5px;color:var(--t4);margin-top:5px">All imported plots will be added to this scheme. You can also include scheme_id in the file to override per-row.</div>
          </div>

          <div class="drop-zone" id="drop-zone">
            <input type="file" id="file-input" accept=".xlsx,.xls,.csv" onchange="handleFileSelect(this.files[0])"/>
            <div class="dz-ico">⬆️</div>
            <div class="dz-title">Drop your file here</div>
            <div class="dz-sub">Supports .xlsx, .xls, .csv · Max 10 MB · Up to 5,000 rows per import</div>
            <div class="dz-btn">
              <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
              Browse File
            </div>
          </div>

          <div id="file-selected-wrap" style="display:none;margin-top:12px"></div>

          <div style="margin-top:14px;display:flex;gap:10px">
            <button class="btn-import-all" id="btn-validate" onclick="validateFile()" disabled
              style="background:linear-gradient(135deg,#1a5fa8,#1476cc);box-shadow:0 4px 14px rgba(26,95,168,.3)">
              <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
              Validate File
            </button>
          </div>
        </div>

      </div><!-- /sec-prepare -->

      <!-- STEP 3 — VALIDATION RESULTS (hidden initially) -->
      <div id="sec-validate" style="display:none">

        <div class="imp-card">
          <div class="imp-card-title">🔍 Validation Results</div>
          <div class="imp-card-sub" id="val-sub-text">Checking all rows against required fields and allowed values…</div>

          <div class="val-summary" id="val-summary"></div>

          <!-- Error filter chips -->
          <div class="err-filter" id="err-filter" style="display:none">
            <div class="ef-chip active" data-filter="all" onclick="filterErrors('all',this)">All Rows</div>
            <div class="ef-chip ec-err"  data-filter="error" onclick="filterErrors('error',this)">Errors Only</div>
            <div class="ef-chip ec-warn" data-filter="warn"  onclick="filterErrors('warn',this)">Warnings Only</div>
            <div class="ef-chip ec-ok"   data-filter="ok"    onclick="filterErrors('ok',this)">Valid Rows</div>
             <div class="ef-chip ec-validdata"   data-filter="ok"    onclick="filterErrors('validdata',this)">Valid Data</div>
          </div>

          <div style="overflow-x:auto">
            <table class="err-table" id="err-table">
              <thead>
                <tr>
                  <th>Row</th>
                  <th>Associste Name /GK Code</th>
                  <th>Status</th>
                  <th>Issues</th>
                  <th>Preview</th>
                </tr>
              </thead>
              <tbody id="err-tbody"></tbody>
            </table>
          </div>
        </div>

        <!-- Import Action -->
        <div class="imp-card" id="import-action-card">
          <div class="imp-card-title">🚀 Proceed with Import</div>
          <div class="imp-card-sub" id="import-action-sub"></div>
          <div class="imp-actions">
            <button class="btn-import-all"  id="btn-import-all"  onclick="startImport('all')"  disabled style="display:none"></button>
            <button class="btn-import-skip" id="btn-import-skip" onclick="startImport('skip')" disabled>
              <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg>
              Import Valid, Skip Errors
            </button>
            <button class="vbtn" onclick="resetImport()" style="margin-left:auto">
              ↩ Upload Different File
            </button>
          </div>
          <div id="import-note" style="margin-top:12px;font-size:11px;color:var(--t4);line-height:1.6"></div>
        </div>

      </div><!-- /sec-validate -->

      <!-- STEP 4 — IMPORTING PROGRESS -->
      <div id="sec-importing" style="display:none">
        <div class="imp-card">
          <div class="imp-card-title">⏳ Importing Plots…</div>
          <div class="imp-card-sub">Please wait — do not close this page.</div>
          <div class="imp-progress">
            <div class="prg-label">
              <span id="prg-text">Preparing…</span>
              <span id="prg-pct">0%</span>
            </div>
            <div class="prg-bar-wrap">
              <div class="prg-bar-fill" id="prg-fill" style="width:0%"></div>
            </div>
            <div style="font-size:11px;color:var(--t4);margin-top:4px" id="prg-detail"></div>
          </div>
        </div>
      </div>

      <!-- STEP 4 — RESULT -->
      <div id="sec-result" style="display:none">
        <div class="imp-card">
          <div class="imp-result" id="imp-result-body"></div>
        </div>
      </div>

    </div><!-- /imp-main -->
  </div><!-- /imp-wrap -->

<div id="toast-wrap"></div>
</div>
@push('styles')
<link href="{{ URL::asset('assets/css/plot/plotimport.css') }}" rel="stylesheet" type="text/css" />
@endpush

@push('scripts')
<script src="{{ URL::asset('assets/js/jquery.min.js') }}"></script>
<script src="{{ URL::asset('assets/js/associate/associateimport.js') }}"></script>
<script src="{{ URL::asset('assets/js/associate/associate-import-api.js') }}"></script>
<!-- SheetJS for Excel parsing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
@endpush
@endif
@endsection