{% extends 'core/base.html' %}
{% load static %}

{% block content %}
<style>
  #dashboard_nav:hover { color: #c51d21; }
  .transporter-edit-modal-panel {
    max-height: min(90vh, calc(100dvh - 2rem));
  }
  .transporter-edit-modal-body {
    overscroll-behavior: contain;
  }
  .transporter-doc-preview-panel {
    margin-top: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #f9fafb;
    padding: 0.75rem;
  }
  .transporter-doc-preview-panel img,
  .transporter-doc-preview-panel iframe {
    width: 100%;
    max-height: 24rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background: #fff;
  }
  .transporter-doc-preview-panel iframe {
    height: 24rem;
  }
  .transporter-kyc-badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    color: #fff;
  }
  .transporter-kyc-badge.badge-success {
    background-color: #198754;
  }
  .transporter-kyc-badge.badge-warning {
    background-color: #ffc107;
    color: #000;
  }
  .transporter-kyc-badge.badge-danger {
    background-color: #dc3545;
  }
</style>
<nav>
  <ol class="flex flex-wrap pt-1 mr-12 bg-transparent rounded-lg sm:mr-16"
    style="position: relative;top: -40px;right: -19px;">
    <li class="text-lg leading-normal">
      <a class="text-white" href="{% url 'core:dashboard' %}">Home</a>
    </li>
    <li class="text-lg pl-2 capitalize leading-normal text-white before:pr-2 before:content-['/']" aria-current="page">Transporters</li>
  </ol>
</nav>

<div style="margin-top: 30px;" class="mx-auto px-4 mt-16 pb-12">
  <div class="bg-white shadow-lg rounded-lg p-6">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-2xl font-semibold text-gray-800">Transporters</h3>
    </div>
    <div class="overflow-x-auto">
      <table id="transporters-table" class="w-full min-w-[720px] border-collapse text-sm">
        <thead class="bg-gray-100">
          <tr>
            <th class="px-3 py-2 text-left">Name</th>
            <th class="px-3 py-2 text-left">Company</th>
            <th class="px-3 py-2 text-left">Email</th>
            <th class="px-3 py-2 text-left">Phone</th>
            <th class="px-3 py-2 text-left">Type</th>
            <th class="px-3 py-2 text-left">KYC</th>
            <th class="px-3 py-2 text-left">Joined</th>
            <th class="px-3 py-2 text-left">Actions</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

    <div id="transporter-modals-root"></div>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const transporterModalsUrlTemplate = "{% url 'core:transporter_modal' 0 %}";
    const transporterModalsUrl = (userId) => transporterModalsUrlTemplate.replace('/0/', `/${userId}/`);
    const loadedTransporterModals = new Set();

    const viewIcon = `<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" /><path fill-rule="evenodd" d="M.664 10.59a1.651 1.651 0 0 1 0-1.186A10.004 10.004 0 0 1 10 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0 1 10 17c-4.257 0-7.893-2.66-9.336-6.41ZM14 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" clip-rule="evenodd" /></svg>`;

    const renderKycBadge = (verified) => {
      if (verified) {
        return '<span class="transporter-kyc-badge badge-success">Verified</span>';
      }
      return '<span class="transporter-kyc-badge badge-warning">Pending</span>';
    };

    const renderTransporterActions = (row) => `
      <button type="button"
        class="transporter-edit-open inline-flex h-9 w-9 items-center justify-center rounded-full text-orange-600 transition hover:bg-orange-50"
        data-user-id="${row.id}"
        data-modal-id="transporter-edit-modal-${row.id}"
        aria-label="View ${row.email}">${viewIcon}</button>`;

    const openModal = (modal) => {
      if (!modal) return;
      modal.classList.remove('hidden');
      modal.classList.add('flex');
    };

    const closeModal = (modal) => {
      if (!modal) return;
      modal.classList.add('hidden');
      modal.classList.remove('flex');
      modal.querySelectorAll('.transporter-doc-preview-panel').forEach((panel) => {
        panel.classList.add('hidden');
        panel.innerHTML = '';
      });
      modal.querySelectorAll('.transporter-doc-preview-btn').forEach((button) => {
        button.textContent = 'Preview';
      });
    };

    const renderPreview = (url) => {
      const cleanUrl = url.split('?')[0];
      const ext = cleanUrl.split('.').pop().toLowerCase();
      const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
      if (imageTypes.includes(ext)) {
        return `<img src="${url}" alt="Document preview">`;
      }
      if (ext === 'pdf') {
        return `<iframe src="${url}" title="Document preview"></iframe>`;
      }
      return `<p class="text-sm text-gray-600">Preview is not available for this file type. <a href="${url}" target="_blank" rel="noopener" class="font-medium text-orange-600 hover:underline">Open file</a></p>`;
    };

    const bindTransporterModalEvents = (modal) => {
      if (!modal || modal.dataset.bound === '1') return;
      modal.dataset.bound = '1';
      modal.querySelectorAll('.transporter-edit-close').forEach((button) => {
        button.addEventListener('click', () => closeModal(modal));
      });
      modal.addEventListener('click', (event) => {
        if (event.target === modal) closeModal(modal);
      });
    };

    const ensureTransporterModal = async (userId) => {
      const existing = document.getElementById(`transporter-edit-modal-${userId}`);
      if (existing) {
        existing.remove();
        loadedTransporterModals.delete(userId);
      }
      const response = await fetch(transporterModalsUrl(userId), {
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        cache: 'no-store',
      });
      if (!response.ok) throw new Error('Could not load transporter details.');
      const html = await response.text();
      document.getElementById('transporter-modals-root').insertAdjacentHTML('beforeend', html);
      const modal = document.getElementById(`transporter-edit-modal-${userId}`);
      bindTransporterModalEvents(modal);
      loadedTransporterModals.add(userId);
    };

    if (window.jQuery && window.jQuery.fn.DataTable) {
      window.adminDataTable = window.jQuery('#transporters-table').DataTable({
        serverSide: true,
        processing: true,
        ajax: {
          url: "{% url 'core:transporter' %}",
        },
        responsive: true,
        pageLength: 10,
        order: [[6, 'desc']],
        columns: [
          { data: 'name', defaultContent: '' },
          { data: 'company_name', defaultContent: '' },
          { data: 'email', defaultContent: '' },
          { data: 'phone', defaultContent: '' },
          { data: 'account_type_display', defaultContent: '' },
          {
            data: 'documents_verified',
            orderable: true,
            searchable: false,
            render: (value) => renderKycBadge(!!value),
          },
          { data: 'joined', defaultContent: '' },
          {
            data: null,
            orderable: false,
            searchable: false,
            render: (data, type, row) => renderTransporterActions(row),
          },
        ],
        language: {
          emptyTable: 'No transporters yet.',
        },
      });
    }

    document.addEventListener('click', async (event) => {
      const editButton = event.target.closest('.transporter-edit-open');
      if (editButton) {
        const userId = editButton.dataset.userId;
        const modalId = editButton.dataset.modalId;
        try {
          await ensureTransporterModal(userId);
          openModal(document.getElementById(modalId));
        } catch (error) {
          console.error(error);
        }
        return;
      }

      const previewButton = event.target.closest('.transporter-doc-preview-btn');
      if (!previewButton) return;
      const panel = document.getElementById(previewButton.dataset.previewId);
      if (!panel) return;
      const isHidden = panel.classList.contains('hidden');
      const modal = previewButton.closest('.transporter-edit-modal');
      if (modal) {
        modal.querySelectorAll('.transporter-doc-preview-panel').forEach((otherPanel) => {
          if (otherPanel !== panel) {
            otherPanel.classList.add('hidden');
            otherPanel.innerHTML = '';
          }
        });
        modal.querySelectorAll('.transporter-doc-preview-btn').forEach((otherButton) => {
          if (otherButton !== previewButton) otherButton.textContent = 'Preview';
        });
      }
      if (isHidden) {
        panel.innerHTML = renderPreview(previewButton.dataset.fileUrl);
        panel.classList.remove('hidden');
        previewButton.textContent = 'Hide preview';
      } else {
        panel.classList.add('hidden');
        panel.innerHTML = '';
        previewButton.textContent = 'Preview';
      }
    });

    document.addEventListener('keydown', (event) => {
      if (event.key !== 'Escape') return;
      document.querySelectorAll('.transporter-edit-modal:not(.hidden)').forEach(closeModal);
    });
  });
</script>
{% endblock %}