@extends('layouts.main')
@section('title', 'CheckList View - ' . $dist->distributor_name)
@section('container')
<style>
    .filter-header { position: relative; cursor: pointer; }
    .filter-icon { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #6c757d; }
    .filter-dropdown { position: absolute; background: white; border: 1px solid #ddd; padding: 10px; z-index: 1000; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); display: none; min-width: 200px; }
    .pagination-info { margin-top: 8px; font-size: 14px; color: #6c757d; }
    .table-responsive { overflow-x: auto; }
    .dropdown-item { cursor: pointer; }
    .column-toggle { margin-right: 8px; }
    .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(0, 0, 0, .1); border-radius: 50%; border-top-color: #F8B940; animation: spin 1s ease-in-out infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
    ul.pagination li { margin: 0; padding: 0; line-height: 14px !important; border: 0px !important; padding: 4px 0px !important; margin: 0 !important; }
    .card-container { margin: 15px 0; display: flex; justify-content: center; }
    .badge-title { height: 35px; width: fit-content; padding: 6px 14px; background: #452b90; color: #fff; font-weight: 500; border-radius: 8px; font-size: 14px; margin: 0 auto 10px auto; text-align: center; }
    .badge-title.bg-agency { background: #f7941d; }
    .user-avatar { width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 12px; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #6a11cb, #2575fc); color: #fff; font-size: 22px; font-weight: bold; box-shadow: 0px 4px 10px rgba(0,0,0,0.2); }
    .user-avatar.bg-orange { background: linear-gradient(135deg, #ff9800, #ff5722); }
    .user-name { font-size: 18px; font-weight: 600; margin-bottom: 6px; color: #333; }
    .user-email { font-size: 14px; color: #777; margin-bottom: 16px; }
    .action-btn { padding: 8px 16px; border-radius: 6px; border: none; font-weight: 500; cursor: pointer; transition: all 0.3s ease; background: #452b90; color: #fff; }
    .action-btn:hover { background: #321f68; }
    #columnSelectionMenu { background-color: #fff; border: 1px solid #dee2e6; border-radius: 0.25rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); padding: 10px; }
    .dropdown-item { display: flex; align-items: center; padding: 8px; font-size: 0.875rem; color: #212529; white-space: normal; word-break: break-word; }
    .column-label { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; }
    .dropdown-item:not(.disabled):hover { background-color: #f8f9fa; }
    .dropdown-item.disabled { opacity: 0.6; cursor: not-allowed; }
    .download-btn { margin-right: 5px; }
    .map-icon { cursor: pointer; color: #007bff; }
    @media (max-width: 768px) {
        #columnSelectionMenu { min-width: 100%; max-width: 100%; }
        .row-cols-md-3, .row-cols-lg-4 { row-cols: 2; }
    }
       :root {
            --primary-blue: #3a60f6;
            --secondary-blue: #6236ff;
            --badge-blue: #3a60f6;
            --badge-green: #28a745;
            --badge-purple: #6f42c1;
            --badge-yellow: #ffc107;
            --badge-gray: #6c757d;
            --badge-red: #dc3545;
            --light-bg: #f8f9fa;
        }
        
 
        
        /* Header Styles */
        .dashboard-header {
            background: linear-gradient(to right, #452B90, #442b90a2);
            border-radius: 13px;
            padding: 7px;
            margin-bottom: 23px;
            color: white;
        }
        
        .icon-container {
            background-color: rgba(255, 255, 255, 0.2);
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }
        
        .stat-box {
            background-color: #442b90ff;
            border-radius: 10px;
            padding: 12px;
            text-align: center;
            margin-bottom: 12px;
        }
        
        .stat-number {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .btn-add-member {
            background-color: white;
            color: #452B90;
            border: none;
            border-radius: 8px;
            padding: 10px 20px;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        /* User Card Styles */
        .user-card {
            background-color: #f3f0ecd0;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-bottom: 25px;
            height: 100%;
        }
        
        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--light-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: var(--primary-blue);
            margin-right: 15px;
        }
        
        .user-name {
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .role-badge {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .badge-team-leader {
            background-color: var(--badge-blue);
            color: white;
        }
        
        .badge-agency {
            background-color: var(--badge-green);
            color: white;
        }
        
        .badge-auditor {
            background-color: var(--badge-purple);
            color: white;
        }
        
        .status-icon {
            font-size: 20px;
        }
        
        .status-active {
            color: var(--badge-green);
        }
        
        .status-inactive {
            color: var(--badge-red);
        }
        
        .contact-row {
            background-color: var(--light-bg);
            border-radius: 8px;
            padding: 10px 15px;
            margin: 15px 0;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        
        .contact-item:last-child {
            margin-bottom: 0;
        }
        
        .contact-icon {
            width: 24px;
            height: 24px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: var(--primary-blue);
        }
        
        .status-row {
            display: flex;
            align-items: center;
            margin: 15px 0;
        }
        
        .status-label {
            font-weight: 500;
            margin-right: 10px;
        }
        
        .status-badge {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            margin-right: 8px;
        }
        
        .badge-wip {
            background-color: var(--badge-yellow);
            color: #000;
        }
        .badge-pending {
            background-color: #0d258fff;
            color: #eeeeeeff;
        }
        .badge-submit {
            background-color: #28702cff;
            color: #fff;
        }
        
        .badge-on-hold {
            background-color: var(--badge-yellow);
            color: #000;
        }
        
        .badge-not-started {
            background-color: var(--badge-gray);
            color: white;
        }
        
        .badge-completed {
            background-color: var(--badge-green);
            color: white;
        }
        
        .badge-inactive {
            background-color: var(--badge-gray);
            color: white;
        }
        
        .badge-active {
            background-color: var(--badge-green);
            color: white;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin: 15px 0;
        }
        
        .stat-item {
            background-color: var(--light-bg);
            border-radius: 8px;
            padding: 12px;
            text-align: center;
        }
        
        .stat-item-value {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 5px;
        }
        
        .stat-item-label {
            font-size: 12px;
            color: #6c757d;
        }
        
        .card-buttons {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        .card-btn {
            flex: 1;
            border: 1px solid #dee2e6;
            background: white;
            border-radius: 8px;
            padding: 8px 5px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            color: #6c757d;
        }
        
        @media (max-width: 768px) {
            .stat-box {
                margin-bottom: 10px;
            }
            
            .btn-add-member {
                margin-top: 15px;
            }
        }
        
        /* #bookStockTable {
            table-layout: fixed;
            width: 100%;
        } */
</style>

<div class="row">
    <div class="col-xl-12 col-lg-12 col-sm-12">
        <div class="card" style="height: max-content;">
            <div class="card-header new-card-header p-2" style="background: var(--secondary);">
                <div class="row" style="width: 100%;">
                    <div class="col-md-4 col-4">
                        <h4 class="card-title">CheckList View - {{ $dist->distributor_name }}</h4>
                    </div>
                        <div class="col-md-8 col-8" >
                            <a class="btn btn-sm btn-primary track-btn m-2" style="float:right" data-userid="{{ $datauser->lead_auditor_id }}" title="View Users Location">
                                <i class="fa fa-map-marker"></i>   Check Location
                            </a>
                            @if($dist->questionnaire_status == 2)
                            <a class="btn btn-sm btn-primary m-2" style="float:right" onclick="openmodel()"  title="Update Status">
                               Update Status
                            </a>
                            @endif
                        </div>
                    </div>
                </div>
           <div class="card-body" id="bookstockcard">
                <div class="row">
                    <div class="col-md-6">
                        <lable style=" float: left; font-weight: 900; ">Select Templete</lable>
                            <select id="templateSelect" class="form-control">
                                <option value="">-- Select template --</option>
                                @foreach($data as $t)
                                    <option value="{{ $t->id }}">{{ $t->name ?? 'Template '.$t->id }}</option>
                                @endforeach
                            </select>
                    </div>
                </div>

                <table class="table table-bordered" id="questionsTable" style="display:none;">
                    <thead>
                        <tr>
                            <th>Sr#</th>
                            <th>Action</th>
                            <th>Question</th>
                            <th>Answer</th>
                        </tr>
                    </thead>
                    <tbody id="questionsTbody"></tbody>
                </table>

                <div id="noDataMessage" class="alert alert-info" style="display:none;"></div>

                <div class="row mt-3">
                    <div class="col-md-6">
                        <div class="pagination-info"></div>
                    </div>
                    <div class="col-md-6">
                        <nav class="float-end">
                            <ul class="pagination" id="paginationControls"></ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="docsupload">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background:var(--secondary) ;">
                <h5 class="modal-title">Update Status</h5>
                <button type="button" class="btn-close btn-close-it" data-bs-dismiss="modal">
                </button>
            </div>
            <form id="statusChecklistForm">
                @csrf
                <center class="mt-2">
                    <div class="col-8 mb-4">
                        <lable style=" float: left; font-weight: 900; ">Select Status</lable>
                        <select class="form-control" name="status" id="statusdoc" onchange="changedocremark();"
                            aria-label="Default select example" required>
                            <option value="">Select Status</option>
                            <option value="3">Accepted</option>
                            <option value="2">Rejected</option>
                        </select>
                    </div>
                    <div class="col-8 mb-4">
                        <lable style=" float: left; font-weight: 900; ">Enter Remarks</lable>
                        <textarea class="form-control" name="docremark" id="docremark"
                            required></textarea>
                            <input type="hidden" name="dist_id" value="{{ $dist->id }}"/>
                            <input type="hidden" name="template_id" id="temp" value=""/>
                        </div>
                </center>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary deleted-Zone">Submit</button>
                </div>
        </div>
        </form>
    </div>
</div>

<!-- Extra CSS for smooth scroll (optional but recommended) -->
<style>
    #editFormBody {
        scrollbar-width: thin;
        scrollbar-color: #452b90 #f1f1f1;
    }
    #editFormBody::-webkit-scrollbar {
        width: 8px;
    }
    #editFormBody::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }
    #editFormBody::-webkit-scrollbar-thumb {
        background: #452b90;
        border-radius: 10px;
    }
    #editFormBody::-webkit-scrollbar-thumb:hover {
        background: #321f68;
    }
    .modal-xl {
        max-width: 96%;
        max-width: 1200px;
    }
</style>
<button class="d-none" data-bs-toggle="modal"
                            data-bs-target="#docsupload" id="mbtn"></button>
<input id="distributor_id" value="{{ $dist->id }}" type="hidden"/>
<input id="project_id" value="{{ $dist->project_id }}" type="hidden"/>
<script nonce="{{ $cspNonce }}" src="{{ asset('public/js/jquery-3.6.0.min.js') }}"></script>
<script nonce="{{ $cspNonce }}" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script nonce="{{ $cspNonce }}" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script nonce="{{ $cspNonce }}" src="https://cdn.jsdelivr.net/npm/table2excel@1.0.0/dist/table2excel.min.js"></script>
<script nonce="{{ $cspNonce }}" src="{{ asset('js/checklist.js') }}"></script>
<script nonce="{{ $cspNonce }}">
    function openmodel()
    {
        var model = $("#templateSelect").val();
        $("#temp").val(model);
        $("#mbtn").click();
    }
    $(document).ready(function() {

  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
  });

  $('#statusChecklistForm').submit(function (event) {
        event.preventDefault();
        var formData = new FormData(this);

    Swal.fire({
      title: 'Please wait',
      html: 'Submitting your checklist...',
      allowOutsideClick: false,
      didOpen: () => {
        Swal.showLoading();
      }
    });

    $.ajax({
      url: '{{ route("submitstatuschecklist") }}',
      type: 'POST',
      data: formData,
       processData: false,
            contentType: false,
      success: function(response) {
        Swal.fire({
          icon: 'success',
          title: response.title || 'Successful',
          text: response.message || 'Checklist Status Updated successfully.',
          confirmButtonText: 'OK'
        }).then(function() {
          location.reload();
        });
      },
      error: function(xhr, status, error) {
        var msg = 'Something went wrong.';

        if (xhr && xhr.responseJSON && xhr.responseJSON.message) {
          msg = xhr.responseJSON.message;
        } else if (xhr && xhr.responseText) {
          try {
            var j = JSON.parse(xhr.responseText);
            if (j.message) msg = j.message;
          } catch(e) {
          }
        }

        Swal.fire({
          icon: 'error',
          title: 'Error',
          text: msg,
        });
      }
    });
  });
});

</script>
<script nonce="{{ $cspNonce }}">
document.addEventListener('DOMContentLoaded', function() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
   });
    $('.filter-dropdown').each(function() {
        if (!$(this).hasClass('active')) {
            $(this).hide();
        }
    });
});
</script>

<!-- ========== Live Track Modal ========== -->
<div class="modal fade" id="trackModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Live Location - <span id="trackUserLabel"></span></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div id="trackMap" style="width:100%;height:600px"></div>
        <div id="trackMeta" class="mt-2 small"></div>
      </div>
    </div>
  </div>
</div>

<script nonce="{{ $cspNonce }}">
let mapFrame = null;
let trackPollTimer = null;
const latestLocationUrlTemplate = @json(url('/users/__USER__/latest-location'));
const trackPollIntervalMs = 15000;

function initTrackMap() {
  if (mapFrame) return;
  const wrapper = document.getElementById('trackMap');
  if (!wrapper) {
    console.error('trackMap element not found in DOM');
    return;
  }
  wrapper.innerHTML = '';
  wrapper.style.position = 'relative';
  wrapper.style.minHeight = '400px';

  mapFrame = document.createElement('iframe');
  mapFrame.id = 'trackMapFrame';
  mapFrame.width = '100%';
  mapFrame.height = '600';
  mapFrame.style.border = '0';
  mapFrame.src = encodeURI('https://www.google.com/maps?q=20.5937,78.9629&z=5&output=embed');
  wrapper.appendChild(mapFrame);

  const openBtn = document.createElement('a');
  openBtn.id = 'openInGoogleMaps';
  openBtn.className = 'btn btn-sm btn-primary';
  openBtn.style.position = 'absolute';
  openBtn.style.right = '12px';
  openBtn.style.top = '12px';
  openBtn.style.zIndex = '9999';
  openBtn.target = '_blank';
  openBtn.href = 'https://www.google.com/maps';
  openBtn.innerText = 'Open in Google Maps';
  wrapper.appendChild(openBtn);
}

function attachTrackButtons() {
  document.querySelectorAll('.track-btn').forEach(btn => {
    btn.removeEventListener('click', onTrackBtnClick);
    btn.addEventListener('click', onTrackBtnClick);
  });
}

function onTrackBtnClick(e) {
  const btn = e.currentTarget;
  const userId = btn.getAttribute('data-userid') || btn.dataset.userid;
  if (!userId) {
    return alert('User id not found on button (data-userid).');
  }

  const labelEl = document.getElementById('trackUserLabel');
  if (labelEl) labelEl.innerText = userId;
  initTrackMap();

  const modalDom = document.getElementById('trackModal');
  if (!modalDom) {
    console.error('Modal #trackModal not found in DOM.');
    return alert('Track modal not present. Check modal markup.');
  }
  if (typeof bootstrap === 'undefined') {
    console.error('Bootstrap JS is not loaded.');
    return alert('Bootstrap JS not loaded. Include bootstrap.bundle.min.js');
  }

  const modalObj = new bootstrap.Modal(modalDom, { keyboard: true });
  modalObj.show();

  startPolling(userId);

  modalDom.addEventListener('hidden.bs.modal', function handler() {
    stopPolling();
    if (mapFrame) {
      try {
        mapFrame.src = 'about:blank';
      } catch (e) {}
    }
    modalDom.removeEventListener('hidden.bs.modal', handler);
  }, { once: true });
}

async function fetchLatestLocation(userId) {
  const meta = document.getElementById('trackMeta');
  const url = latestLocationUrlTemplate.replace('__USER__', encodeURIComponent(userId));

  try {
    const response = await fetch(url, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
      },
      credentials: 'same-origin',
      cache: 'no-store',
    });

    const payload = await response.json();
    if (!response.ok || !payload.status || !payload.data) {
      if (meta) {
        meta.innerText = response.status === 404
          ? 'No location data available yet.'
          : (payload.message || 'Unable to fetch latest location.');
      }
      return;
    }

    const data = payload.data;
    const lat = parseFloat(data.latitude);
    const lng = parseFloat(data.longitude);
    const accuracy = data.accuracy ?? 'n/a';
    const capturedAt = data.captured_at || '';
    const channel = data.channel || 'unknown';

    if (meta) {
      meta.innerText = `lat: ${lat}, lng: ${lng}, accuracy: ${accuracy}m, at: ${capturedAt}, source: ${channel}`;
    }

    if (!mapFrame) initTrackMap();

    const embedUrl = `https://www.google.com/maps?q=${lat},${lng}&z=17&output=embed`;
    mapFrame.src = encodeURI(embedUrl);

    const openBtn = document.getElementById('openInGoogleMaps');
    if (openBtn) {
      openBtn.href = `https://www.google.com/maps/place/${lat},${lng}`;
    }
  } catch (error) {
    console.error('[TrackLocation] fetch error', error);
    if (meta) {
      meta.innerText = 'Unable to fetch latest location right now.';
    }
  }
}

function startPolling(userId) {
  stopPolling();
  fetchLatestLocation(userId);
  trackPollTimer = window.setInterval(() => fetchLatestLocation(userId), trackPollIntervalMs);
}

function stopPolling() {
  if (trackPollTimer) {
    window.clearInterval(trackPollTimer);
    trackPollTimer = null;
  }

  if (mapFrame) {
    try {
      mapFrame.src = 'about:blank';
      const wrapper = document.getElementById('trackMap');
      if (wrapper) wrapper.innerHTML = '';
    } catch (e) { console.warn(e); }
    mapFrame = null;
  }
}

document.addEventListener('DOMContentLoaded', function() {
  attachTrackButtons();
  console.log('Debug: bootstrap loaded?', !!window.bootstrap);
  console.log('Debug: trackModal el', !!document.getElementById('trackModal'));
  console.log('Debug: trackMap el', !!document.getElementById('trackMap'));
  console.log('Debug: any .track-btn found?', !!document.querySelector('.track-btn'));
});

</script>
<!-- <script nonce="{{ $cspNonce }}">
document.addEventListener('DOMContentLoaded', function () {

    const select = document.getElementById('templateSelect');
    const tbody = document.getElementById('questionsTbody');
    const tableEl = document.getElementById('questionsTable');
    const noData = document.getElementById('noDataMessage');

    // Escape text for safety
    function escapeHtml(text) {
        return String(text)
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }

    // Render answer cell
    function renderAnswer(answer, inputType) {
        if (answer === null || answer === undefined) {
            return '<span class="text-muted">—</span>';
        }

        // If array → image/video/file list
        if (Array.isArray(answer)) {
            return answer
                .map(url => {
                    let ext = url.split('.').pop().toLowerCase();

                    // image preview
                    if (['jpg','jpeg','png','gif','webp','bmp'].includes(ext)) {
                        return `
                            <div style="display:inline-block;margin:4px;">
                                <a href="${url}" target="_blank">
                                    <img src="${url}" style="width:80px;height:80px;object-fit:cover;border:1px solid #ddd;border-radius:4px">
                                </a>
                            </div>`;
                    }

                    // video preview
                    if (['mp4','webm','ogg'].includes(ext)) {
                        return `
                            <div style="margin:4px;">
                                <video width="160" height="90" controls>
                                    <source src="${url}">
                                </video>
                            </div>`;
                    }

                    // pdf or file
                    let name = url.split('/').pop();
                    return `<div><a href="${url}" target="_blank" class="btn btn-primary"><i class="fa fa-download"></i> Download File</a></div>`;
                })
                .join('');
        }

        // location → google link
        if (inputType && inputType.toLowerCase() === "location") {
            let coords = String(answer).trim();
            return `<a href="https://www.google.com/maps/search/?api=1&query=${coords}" target="_blank" class="btn btn-primary"><i class="fa fa-map-marker"></i> Check Location</a></a>`;
        }

        // default text
        return escapeHtml(answer);
    }

    // Load template answers
    async function loadTemplate(templateId) {
        tbody.innerHTML = "";
        tableEl.style.display = "none";
        noData.style.display = "none";

        if (!templateId) return;

        try {
            const res = await fetch(`{{ url('/checklist/template') }}/${templateId}/answers`);
            const json = await res.json();

            if (!json.rows || json.rows.length === 0) {
                noData.textContent = json.message || "No data found";
                noData.style.display = "block";
                return;
            }

            let html = "";
            json.rows.forEach(row => {
                html += `
                    <tr>
                        <td>${row.srno}</td>
                        <td>
                            <button class="btn btn-sm btn-primary"><i class="fa fa-pencil"></i></button>
                        </td>
                        <td>${escapeHtml(row.question_text)}</td>
                        <td>${renderAnswer(row.answer, row.input_type)}</td>
                    </tr>
                `;
            });

            tbody.innerHTML = html;
            tableEl.style.display = "table";

        } catch (error) {
            console.error(error);
            noData.textContent = "Error loading data.";
            noData.style.display = "block";
        }
    }

    // on dropdown change
    select.addEventListener("change", function () {
        loadTemplate(this.value);
    });

});
</script> -->
<script nonce="{{ $cspNonce }}">
document.addEventListener('DOMContentLoaded', function () {

    const select = document.getElementById('templateSelect');
    const tbody = document.getElementById('questionsTbody');
    const tableEl = document.getElementById('questionsTable');
    const noData = document.getElementById('noDataMessage');

    let currentEntryId = null;

    /* ------------------ helpers ------------------ */

    function escapeHtml(text) {
        return String(text ?? '')
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }

    function canEditAnswer(answer, inputType) {
        if (Array.isArray(answer)) return false;
        if (!inputType) return true;

        return !['file','image','video','signature'].includes(inputType.toLowerCase());
    }

    /* ------------------ render answer ------------------ */

    function renderAnswer(answer, inputType) {

        if (answer === null || answer === undefined) {
            return '<span class="text-muted">—</span>';
        }

        if (Array.isArray(answer)) {
            return answer.map(url => {
                let ext = url.split('.').pop().toLowerCase();

                if (['jpg','jpeg','png','gif','webp','bmp'].includes(ext)) {
                    return `
                        <div style="display:inline-block;margin:4px;">
                            <a href="${url}" target="_blank">
                                <img src="${url}" style="width:80px;height:80px;object-fit:cover;border:1px solid #ddd;border-radius:4px">
                            </a>
                        </div>`;
                }

                if (['mp4','webm','ogg'].includes(ext)) {
                    return `
                        <div style="margin:4px;">
                            <video width="160" height="90" controls>
                                <source src="${url}">
                            </video>
                        </div>`;
                }

                return `
                    <div>
                        <a href="${url}" target="_blank" class="btn btn-sm btn-primary">
                            <i class="fa fa-download"></i> Download File
                        </a>
                    </div>`;
            }).join('');
        }

        if (inputType === 'location') {
            return `
                <a href="https://www.google.com/maps/search/?api=1&query=${answer}"
                   target="_blank"
                   class="btn btn-sm btn-primary">
                   <i class="fa fa-map-marker"></i> Check Location
                </a>`;
        }

        return escapeHtml(answer);
    }

    /* ------------------ load template ------------------ */

    async function loadTemplate(templateId,dist_id) {

        tbody.innerHTML = "";
        tableEl.style.display = "none";
        noData.style.display = "none";

        if (!templateId) return;

        try {
            const res = await fetch(`{{ url('/checklist/template') }}/${templateId}/${dist_id}/answers`);
            const json = await res.json();

            currentEntryId = json.entry_id; 

            if (!json.rows || json.rows.length === 0) {
                noData.textContent = json.message || "No data found";
                noData.style.display = "block";
                return;
            }

            let html = "";
            json.rows.forEach(row => {

                const editable = canEditAnswer(row.answer, row.input_type);
                const answerText = Array.isArray(row.answer) ? '' : (row.answer ?? '');

                html += `
                    <tr data-question-id="${row.question_id}">
                        <td>${row.srno}</td>
                        <td>
                            ${editable ? `
                                <button class="btn btn-sm btn-primary edit-btn">
                                    <i class="fa fa-pencil"></i>
                                </button>` : '<span class="text-muted">—</span>'}
                        </td>
                        <td>${escapeHtml(row.question_text)}</td>
                        <td class="answer-cell"
                            data-input-type="${row.input_type}"
                            data-answer="${escapeHtml(answerText)}">
                            ${renderAnswer(row.answer, row.input_type)}
                        </td>
                    </tr>`;
            });

            tbody.innerHTML = html;
            tableEl.style.display = "table";

        } catch (e) {
            console.error(e);
            noData.textContent = "Error loading data.";
            noData.style.display = "block";
        }
    }

    /* ------------------ edit / save / cancel ------------------ */

    tbody.addEventListener('click', function (e) {

        /* EDIT */
        const editBtn = e.target.closest('.edit-btn');
        if (editBtn) {

            const cell = editBtn.closest('tr').querySelector('.answer-cell');
            const type = cell.dataset.inputType;
            const value = cell.dataset.answer;

            const input = type === 'textarea'
                ? `<textarea class="form-control">${value}</textarea>`
                : `<input type="text" class="form-control" value="${value}">`;

            cell.innerHTML = `
                ${input}
                <div class="mt-1">
                    <button class="btn btn-sm btn-success save-btn"><i class="fa fa-check"></i></button>
                    <button class="btn btn-sm btn-secondary cancel-btn"><i class="fa fa-times"></i></button>
                </div>`;
            return;
        }

        /* CANCEL */
        const cancelBtn = e.target.closest('.cancel-btn');
        if (cancelBtn) {
            const cell = cancelBtn.closest('.answer-cell');
            cell.innerHTML = renderAnswer(cell.dataset.answer, cell.dataset.inputType);
            return;
        }

        /* SAVE */
        const saveBtn = e.target.closest('.save-btn');
        if (saveBtn) {

            const tr = saveBtn.closest('tr');
            const cell = saveBtn.closest('.answer-cell');
            const newValue = cell.querySelector('input,textarea').value;

            fetch(`{{ route('checklist.answer.update') }}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    entry_id: currentEntryId,
                    question_id: tr.dataset.questionId,
                    value: newValue
                })
            })
            .then(r => r.json())
            .then(resp => {
                if (!resp.status) {
                    alert(resp.message || 'Update failed');
                    return;
                }

                cell.dataset.answer = newValue;
                cell.innerHTML = renderAnswer(newValue, cell.dataset.inputType);
            })
            .catch(() => alert('Server error'));
        }
    });

    select.addEventListener("change", function () {
        var dist_id = $("#distributor_id").val();
        loadTemplate(this.value,dist_id);
    });

});
</script>


@endsection