<!doctype html>
<html lang="es">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Formularios HTML generados</title>
  <?php echo app('Illuminate\Foundation\Vite')(['resources/css/layout.css']); ?>
  <script src="https://cdn.tailwindcss.com"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <style>
    mark {
      background: #fde68a;
      padding: .1rem .2rem;
      border-radius: .25rem;
    }
  </style>
</head>

<body class="bg-gray-50 text-gray-900" x-data="pageData">
  <header class="app-header">
        <div class="inner">
            <div class="brand">
                <div class="logo">
                    <img src="<?php echo e(asset('img/logo.png')); ?>" alt="Logo">
                </div>
                <div>Seguimiento contractual capitas</div>
            </div>
            <div style="margin-left:auto; display:flex; gap:10px">
                <a href="<?php echo e(url('/auditoria_capita')); ?>" class="btn btn-ghost">Inicio</a>
            </div>
        </div>
    </header>
  <!-- Fondo decorativo global -->
  <div class="bg-decor" aria-hidden="true">
    <span class="sq sq-blue" style="width:220px;height:220px; top:40px; left:-30px;"></span>
    <span class="sq sq-orange" style="width:160px;height:160px; top:140px; right:20px;"></span>
    <span class="sq sq-blue" style="width:260px;height:260px; bottom:60px; right:-40px;"></span>
    <span class="sq sq-orange" style="width:200px;height:200px; bottom:-30px; left:60px;"></span>
    <span class="sq sq-blue" style="width:120px;height:120px; top:320px; left:30%;"></span>
    <span class="sq sq-orange" style="width:140px;height:140px; top:20px; left:55%;"></span>
    <span class="sq sq-blue" style="width:180px;height:180px; bottom:120px; left:45%;"></span>
    <span class="sq sq-orange" style="width:110px;height:110px; bottom:10px; right:30%;"></span>
  </div>

  <div class="max-w-6xl mx-auto p-6 space-y-6" style="position:relative; z-index:1;">

    <h1 style="font-size:20px; font-weight:700; margin:0 0 16px; padding-left: 2rem;">Aplicativo Auditoria Capita > Home
      > Repositorio </h1>

    <!-- Header -->
    <div class="flex items-center justify-between">
      <h2 class="text-2xl font-bold">HTMLs generados</h2>
      <a href="<?php echo e(route('home')); ?>" class="px-3 py-2 rounded-lg border shadow-sm bg-white hover:bg-gray-50">Volver al
        inicio</a>
    </div>

    <!-- Search & actions -->
    <div class="bg-white border rounded-xl p-4 shadow-sm">
      <div class="flex flex-col md:flex-row gap-3 md:items-center">
        <div class="relative flex-1">
          <input x-model.debounce.250ms="query" type="text" placeholder="Buscar por nombre de carpeta o archivo…"
            class="w-full rounded-lg border px-4 py-2 pr-10 focus:outline-none focus:ring-2 focus:ring-indigo-500"
            aria-label="Buscar" />
          <svg class="absolute right-3 top-2.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd"
              d="M12.9 14.32a8 8 0 111.414-1.414l4.387 4.386-1.414 1.415-4.387-4.387zM14 8a6 6 0 11-12 0 6 6 0 0112 0z"
              clip-rule="evenodd" />
          </svg>
        </div>
        <div class="flex items-center gap-4">
          <label class="inline-flex items-center gap-2 text-sm">
            <input type="checkbox" class="rounded border-gray-300" x-model="onlyMatches" />
            Mostrar solo carpetas con coincidencias
          </label>
          <button type="button" @click="clearSearch()"
            class="px-3 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-sm">Limpiar</button>
        </div>
      </div>
      <div class="mt-3 text-sm text-gray-600 flex items-center gap-3">
        <span x-text="summaryText()"></span>
      </div>
    </div>

    <!-- Empty state -->
    <?php if(empty($items)): ?>
      <div class="p-4 bg-white border rounded-xl shadow-sm">No hay carpetas todavía en <code>storage/formularios</code>.
      </div>
    <?php endif; ?>

    <!-- Folders list -->
    <div class="space-y-4" x-init="init(<?php echo \Illuminate\Support\Js::from($items)->toHtml() ?>, '<?php echo e(asset('storage')); ?>')">

      <template x-for="folder in visibleFolders()" :key="folder.folder">
        <div class="bg-white border rounded-xl shadow-sm overflow-hidden">

          <!-- Folder header -->
          <button type="button" class="w-full px-4 py-3 flex items-center justify-between hover:bg-gray-50"
            @click="folder.open = !folder.open">
            <div class="flex items-center gap-3 min-w-0">
              <svg class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M3 7a2 2 0 012-2h4l2 2h6a2 2 0 012 2v1M3 7v10a2 2 0 002 2h14a2 2 0 002-2V10M3 7h4" />
              </svg>
              <div class="min-w-0">
                <div class="font-semibold truncate" x-html="highlight(folder.folder)"></div>
                <div class="text-xs text-gray-500 truncate" x-text="`storage/app/public/${folder.path}`"></div>
              </div>
            </div>
            <div class="flex items-center gap-3 shrink-0">
              <span class="text-sm text-gray-700" x-text="`${folder.filteredFiles.length} archivo(s)`"></span>
              <svg :class="folder.open ? 'rotate-180' : ''" class="h-5 w-5 text-gray-400 transition-transform"
                viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd"
                  d="M5.23 7.21a.75.75 0 011.06.02L10 11.126l3.71-3.896a.75.75 0 111.08 1.04l-4.24 4.46a.75.75 0 01-1.08 0l-4.24-4.46a.75.75 0 01.02-1.06z"
                  clip-rule="evenodd" />
              </svg>
            </div>
          </button>

          <!-- Files list -->
          <div x-show="folder.open" x-collapse>
            <template x-if="folder.filteredFiles.length">
              <ul class="divide-y">
                <template x-for="f in folder.filteredFiles" :key="f">
                  <li class="px-4 py-2 flex items-center justify-between gap-3">
                    <div class="flex items-center gap-3 min-w-0">
                      <svg class="h-4 w-4 text-gray-400 shrink-0" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z" />
                        <path d="M14 2v6h6" />
                      </svg>
                      <div class="truncate" x-html="highlight(basename(f))"></div>
                    </div>
                    <div class="shrink-0 space-x-2">
                      <a :href="fileUrl(f)" target="_blank" class="px-2 py-1 text-indigo-600 hover:underline">Abrir</a>
                      <a :href="fileUrl(f)" download class="px-2 py-1 text-gray-700 hover:underline">Descargar</a>
                    </div>
                  </li>
                </template>
              </ul>
            </template>
            <template x-if="!folder.filteredFiles.length">
              <div class="px-4 py-3 text-sm text-gray-600">Carpeta vacía o sin coincidencias.</div>
            </template>
          </div>
        </div>
      </template>

      <!-- No matches -->
      <template x-if="visibleFolders().length === 0">
        <div class="p-6 bg-white border rounded-xl text-center text-gray-600">
          No se encontraron resultados para <span class="font-semibold" x-text="`“${query}”`"></span>.
        </div>
      </template>
    </div>
  </div>

  <script>
    document.addEventListener('alpine:init', () => {
      Alpine.data('pageData', () => ({
        baseUrl: '',
        rawItems: [],
        folders: [],
        query: '',
        onlyMatches: true,

        init(items, baseUrl) {
          this.baseUrl = baseUrl; // "<?php echo e(asset('storage')); ?>"
          // Normaliza estructura y agrega flags locales
          this.rawItems = Array.isArray(items) ? items : [];
          this.folders = this.rawItems.map(it => ({
            ...it,
            open: false,
            filteredFiles: (it.files || [])
          }));
        },

        clearSearch() {
          this.query = '';
        },

        // Devuelve carpetas visibles según filtros
        visibleFolders() {
          const q = this.query.trim().toLowerCase();
          return this.folders
            .map(f => {
              const matchFolder = q.length ? f.folder.toLowerCase().includes(q) : true;
              const files = (f.files || []);
              const filteredFiles = q.length
                ? files.filter(fp => this.basename(fp).toLowerCase().includes(q))
                : files;

              // Si solo se muestran coincidencias, una carpeta es visible
              // si coincide su nombre o tiene archivos coincidentes
              const visible = this.onlyMatches
                ? (matchFolder || filteredFiles.length > 0)
                : true;

              return visible
                ? { ...f, filteredFiles }
                : null;
            })
            .filter(Boolean);
        },

        // Resumen superior
        summaryText() {
          const totalFolders = this.folders.length;
          const totalFiles = this.folders.reduce((acc, f) => acc + (f.files?.length || 0), 0);

          const vis = this.visibleFolders();
          const visibleFoldersCount = vis.length;
          const visibleFilesCount = vis.reduce((acc, f) => acc + (f.filteredFiles?.length || 0), 0);

          if (!this.query) {
            return `${totalFolders} carpeta(s), ${totalFiles} archivo(s)`;
          }
          return `Coincidencias: ${visibleFoldersCount} carpeta(s), ${visibleFilesCount} archivo(s)`;
        },

        // Utils
        fileUrl(path) {
          // path viene como 'formularios/xxx/archivo.html'
          // Base ya es asset('storage')
          const clean = path.replace(/^\/+/, '');
          return `${this.baseUrl}/${encodeURI(clean)}`;
        },
        basename(p) {
          try { return p.split('/').pop(); } catch { return p; }
        },
        escapeHtml(s) {
          return s.replace(/[&<>"']/g, m => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' }[m]));
        },
        highlight(text) {
          const q = this.query.trim();
          if (!q) return this.escapeHtml(text);
          const escQ = q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
          return this.escapeHtml(text).replace(new RegExp(escQ, 'gi'), m => `<mark>${m}</mark>`);
        },
      }));
    });
  </script>
  <?php echo app('Illuminate\Foundation\Vite')(['resources/css/home.css', 'resources/js/home-hub.js']); ?>
</body>

</html>
<?php /**PATH C:\xampp\htdocs\Auditoria-app\resources\views/snapshots/index.blade.php ENDPATH**/ ?>