@extends('layouts.admin')

@section('title','ID Card Generator')

@section('content')
<div class="container-fluid">
  <div class="row g-3">
    <div class="col-12 col-lg-8">
      <div class="card shadow-sm">
  <div class="card-header bg-body-tertiary d-flex align-items-center">
          <div class="d-flex align-items-center">
            <span class="me-2" data-feather="image"></span>
            <h5 class="mb-0">Bulk ID Card Generator</h5>
          </div>
        </div>
  <div class="card-body" style="position:relative; max-height: calc(100vh - 220px); overflow:auto;">
          <p class="text-body-secondary mb-3">Upload one or more CSV/Excel files and the ID card template image. We'll generate one image per row and give you ZIPs to download.</p>
          <form id="idcards-form" class="row g-3" onsubmit="return false;">
            <div class="col-md-6">
              <label class="form-label">Data File(s)</label>
              <input type="file" class="form-control" id="csv_file" accept=".csv,.xlsx,.xls" multiple>
              <div class="form-text">Upload one or more .csv/.xlsx/.xls files. First row is treated as headers.</div>
            </div>
            <div class="col-md-6">
              <label class="form-label">Template Image</label>
              <input type="file" class="form-control" id="template_image" accept="image/*">
              <div class="form-text">Accepted: JPG/PNG up to 5 MB.</div>
            </div>
            <!-- Removed mark style selector; gender/profile will be drawn as text -->
            <div class="col-md-3 d-flex  align-items-center">
              <div class="form-check ms-auto">
                <input class="form-check-input" type="checkbox" id="skip_photo" />
                <label class="form-check-label" for="skip_photo">Leave the profile photo area blank</label>
              </div>
            </div>
            <div class="col-12 d-flex gap-2">
              <button class="btn btn-secondary" id="analyze-btn" type="button">
                <span class="spinner-border spinner-border-sm me-2 d-none" id="an-spinner"></span>
                Analyze
              </button>
              <button class="btn btn-primary" id="generate-btn" type="button" disabled>
                <span class="spinner-border spinner-border-sm me-2 d-none" id="gen-spinner"></span>
                Generate & Zip
              </button>
              <div class="flex-grow-1"></div>
              <div id="gen-progress-wrap" class="d-none" style="min-width:280px;">
                <div class="progress" style="height: 8px;">
                  <div id="gen-progress-bar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div id="gen-progress-text" class="small text-body-secondary mt-1">Preparing…</div>
              </div>
            </div>
          </form>
          <hr>
          <div id="analyze-section" class="d-none">
           
            <h6>Mapping & Positions</h6>
            <div class="row g-3">
              <div class="col-lg-6">
                 <div class="mb-2 d-none" id="analyze-file-picker-wrap">
                  <label class="form-label">Analyze file</label>
                  <select id="analyze-file-picker" class="form-select"></select>
                  <div class="form-text">Pick which selected file to analyze for headers preview.</div>
                </div>

                <div class="mb-2 d-none" id="sheet-picker-wrap">
                  <label class="form-label">Sheets to include (Excel)</label>
                  <select id="sheet-picker" class="form-select" multiple></select>
                  <div class="d-flex gap-2 mt-1">
                    <button class="btn btn-sm btn-outline-secondary" type="button" id="sheet-select-all">Select All</button>
                    <button class="btn btn-sm btn-outline-secondary" type="button" id="sheet-clear-all">Clear</button>
                  </div>
                  <div class="form-text">Select one or more sheets to generate. Leave empty to include all sheets.</div>
                </div>

                <div class="row g-2" id="mapping-fields">
                  <!-- Mapping dropdowns injected here -->
                </div>
              </div>
              <div class="col-lg-6">
                
                <div class="border rounded position-relative" style=";">
                  <img id="template-preview" class="img-fluid" alt="Template Preview"/>
                  <!-- draggable anchors -->
                  <div class="position-absolute border border-2 border-warning drag" data-field="photo" style="cursor:move;left:38.5%;top:39.8%;width:23.5%;height:23.5%;transform:translate(-0%,-0%);"></div>
                  <div class="position-absolute bg-primary text-white py-1 px-2 rounded-circle small drag" data-field="uid" style="cursor:move;left:53%;top:66.9%;transform:translate(-50%,-50%);">UID</div>
                  <div class="position-absolute bg-primary text-white py-1 px-2 rounded-circle small drag" data-field="name" style="cursor:move;left:25%;top:73.5%;transform:translate(-50%,-50%);">N</div>
                  <div class="position-absolute bg-primary text-white py-1 px-2 rounded-circle small drag" data-field="state" style="cursor:move;left:25%;top:78.5%;transform:translate(-50%,-50%);">S</div>
                  <div class="position-absolute bg-primary text-white py-1 px-2 rounded-circle small drag" data-field="gender" style="cursor:move;left:25%;top:83.0%;transform:translate(-50%,-50%);">G</div>
                  <div class="position-absolute bg-primary text-white py-1 px-2 rounded-circle small drag" data-field="dob" style="cursor:move;left:55%;top:82.5%;transform:translate(-50%,-50%);">D</div>
                  <div class="position-absolute bg-primary text-white py-1 px-2 rounded-circle small drag" data-field="category" style="cursor:move;left:30%;top:87.0%;transform:translate(-50%,-50%);">C</div>
                  <div class="position-absolute bg-primary text-white py-1 px-2 rounded-circle small drag" data-field="subcategory" style="cursor:move;left:30%;top:90.5%;transform:translate(-50%,-50%);">SC</div>
                  <!-- Profile/Role text position (centered above photo) -->
                  <div class="position-absolute bg-info text-white py-1 px-2 rounded small drag" data-field="profile" style="cursor:move;left:50.2%;top:37.5%;transform:translate(-50%,-50%);">ROLE</div>
                </div>
                <div class="form-text">Drag the badges to set positions for text fields. Gender and Role will be rendered as text.</div>
              </div>
            </div>
          </div>
          <div id="result" class="d-none">
            <div class="mt-2 d-flex align-items-center gap-2" id="overall-summary" style="display:none;">
              <span class="badge text-bg-secondary" id="summary-datasets">0 dataset(s)</span>
              <span class="badge text-bg-primary" id="summary-cards">0 cards</span>
            </div>
            <div class="mt-3 d-none" id="per-file-list">
              <h6 class="mb-2">Generated Files</h6>
              <ul class="list-group" id="per-file-list-ul"></ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="card shadow-sm h-100">
        <div class="card-header bg-body-tertiary d-flex align-items-center justify-content-between">
          <h6 class="mb-0">Run Queue</h6>
          <small class="text-body-secondary" id="queue-status">Idle</small>
        </div>
        <div class="card-body" style="max-height: calc(100vh - 260px); overflow:auto;">
          <div id="queue-docs" class="vstack gap-2"></div>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="card mt-3">
        <div class="card-header">
          <h6 class="mb-0">CSV Columns Mapping</h6>
        </div>
        <div class="card-body small text-body-secondary">
          <p>The generator looks for these columns (case-insensitive) in your CSV header row:</p>
          <ul>
            <li>UID: IT-UID | UID | UID NO | UID NO- | UID NO:</li>
            <li>Name: NAME | FULL NAME</li>
            <li>State: STATE</li>
            <li>Date of Birth: DOB | D.O.B | D.O.B.</li>
            <li>Gender: GENDER</li>
            <li>Category: DIVISION Cadet / JUNIOR | DIVISION | CATEGORY</li>
            <li>Sub-Category: KYORUGI WEIGHT CATEGORIES | SUBCATEGORY | SUB-CATEGORY</li>
            <li>Profile/Role (optional): PROFILE | ROLE | TYPE | ATHLETE/OFFICIAL/COACH</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{ asset('js/pages/admin/idcards.js') }}?v={{ time() }}"></script>
@endpush