<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TAI – AGE | Legislación</title>
  <link rel="stylesheet" th:href="@{/css/style.css}">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" th:href="@{/css/leyes.css}">
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>

  <!-- ── Topbar ─────────────────────────────────────────── -->
  <nav class="topbar">
    <span class="topbar-brand"><i class="fas fa-graduation-cap"></i> TAI – AGE</span>
    <nav class="topbar-nav">
      <a href="index.html">Inicio</a>
      <a href="curso.html">Temario</a>
      <a href="cuestionarios/index.html">Cuestionarios</a>
      <a href="leyes.html" class="active">Leyes</a>
      <a href="noticias.html">Noticias</a>
      <a sec:authorize="hasAnyRole('PAGADO','ADMIN')" th:href="@{/planning}">Planning</a>
      <a sec:authorize="hasAnyRole('PAGADO','ADMIN')" th:href="@{/flashcards.html}">Flashcards</a>
    </nav>
  </nav>

  <!-- ── Layout ─────────────────────────────────────────── -->
  <div class="leyes-layout">

    <!-- Sidebar con lista de leyes -->
    <aside class="leyes-sidebar">
      <div class="leyes-sidebar-header">
        <h2><i class="fas fa-landmark"></i> Legislación TAI</h2>
        <div class="leyes-search">
          <i class="fas fa-search"></i>
          <input type="text" id="search-leyes" placeholder="Buscar ley…" autocomplete="off">
        </div>
      </div>

      <div class="leyes-list" id="leyes-list">

        <div class="ley-grupo-label">Bloque I · Tema 1 — Constitución</div>

        <div class="ley-item" data-pdf="leyes/BOE-A-1978-31229-consolidado.pdf"
             data-titulo="Constitución Española de 1978">
          <span class="ley-nombre">Constitución Española de 1978</span>
          <span class="ley-subtitulo">La Constitución Española de 1978. Derechos y deberes fundamentales. La Corona: funciones constitucionales del Rey.</span>
          <span class="ley-badge">B1 · T1</span>
        </div>

        <div class="ley-item" data-pdf="leyes/BOE-A-1981-12774-consolidado-estados-alarma-excepcion-sitio.pdf"
             data-titulo="LO 4/1981 – Estados de alarma, excepción y sitio">
          <span class="ley-nombre">LO 4/1981 – Estados de alarma, excepción y sitio</span>
          <span class="ley-subtitulo">Art. 55 CE · Suspensión de derechos</span>
          <span class="ley-badge">B1 · T1</span>
        </div>

        <div class="ley-grupo-label">Bloque I · Tema 2 — Cortes, TC, Defensor</div>

        <div class="ley-item" data-pdf="leyes/BOE-A-1981-10325-consolidado-defensor-del-pueblo.pdf"
             data-titulo="LO 3/1981 – El Defensor del Pueblo">
          <span class="ley-nombre">LO 3/1981 – El Defensor del Pueblo</span>
          <span class="ley-subtitulo">Composición, funciones y procedimiento</span>
          <span class="ley-badge">B1 · T2</span>
        </div>

        <div class="ley-grupo-label">Bloque I · Tema 3 — El Gobierno</div>

        <div class="ley-item" data-pdf="leyes/BOE-A-1997-25336-consolidado-gobierno.pdf"
             data-titulo="Ley 50/1997 – Del Gobierno">
          <span class="ley-nombre">Ley 50/1997 – Del Gobierno</span>
          <span class="ley-subtitulo">Composición, organización y funcionamiento</span>
          <span class="ley-badge">B1 · T3</span>
        </div>

        <div class="ley-grupo-label">Bloque I · Tema 4 — Empleado Público</div>

        <div class="ley-item" data-pdf="leyes/01 Retribuciones personal funcionario 2023.pdf"
             data-titulo="Retribuciones personal funcionario 2023">
          <span class="ley-nombre">Retribuciones del personal funcionario 2023</span>
          <span class="ley-subtitulo">Ley de Presupuestos – Capítulo retributivo</span>
          <span class="ley-badge">B1 · T4</span>
        </div>

        <div class="ley-grupo-label">Bloque I · Tema 5 — Igualdad, violencia y dependencia</div>

        <div class="ley-item" data-pdf="leyes/BOE-A-2007-6115-consolidado igualdad de genero.pdf"
             data-titulo="LO 3/2007 – Igualdad efectiva de mujeres y hombres">
          <span class="ley-nombre">LO 3/2007 – Igualdad efectiva de mujeres y hombres</span>
          <span class="ley-subtitulo">Principios, derechos y medidas de igualdad</span>
          <span class="ley-badge">B1 · T5</span>
        </div>

        <div class="ley-item" data-pdf="leyes/BOE-A-2004-21760-consolidado-violencia-genero.pdf"
             data-titulo="LO 1/2004 – Medidas de protección integral contra la violencia de género">
          <span class="ley-nombre">LO 1/2004 – Violencia de género</span>
          <span class="ley-subtitulo">Medidas de protección integral</span>
          <span class="ley-badge">B1 · T5</span>
        </div>

        <div class="ley-item" data-pdf="leyes/BOE-A-2006-21990-consolidado-dependencia.pdf"
             data-titulo="Ley 39/2006 – Promoción de la autonomía personal y atención a la dependencia">
          <span class="ley-nombre">Ley 39/2006 – Dependencia (LAPAD)</span>
          <span class="ley-subtitulo">Autonomía personal y atención a la dependencia</span>
          <span class="ley-badge">B1 · T5</span>
        </div>

        <div class="ley-item" data-pdf="leyes/BOE-A-2023-5366-LGTBI.pdf"
             data-md="leyes/tema5-leylgtbi.md"
             data-titulo="LO 4/2023 – Igualdad real y efectiva de las personas trans y LGTBI">
          <span class="ley-nombre">LO 4/2023 – Igualdad LGTBI</span>
          <span class="ley-subtitulo">Igualdad real y efectiva de las personas trans y LGTBI</span>
          <span class="ley-badge">B1 · T5</span>
        </div>

        <div class="ley-grupo-label">Bloque I · Tema 6 — Sociedad de la información</div>

        <div class="ley-item" data-pdf="leyes/1-6-Sociedad-de-la-informacion-BOE-A-2002-13758-consolidado.pdf"
             data-titulo="Ley 34/2002 – LSSI – Servicios de la Sociedad de la Información">
          <span class="ley-nombre">Ley 34/2002 – LSSI</span>
          <span class="ley-subtitulo">Servicios de la sociedad de la información y comercio electrónico</span>
          <span class="ley-badge">B1 · T6</span>
        </div>

        <div class="ley-item" data-pdf="leyes/1-6-firma-electronica-BOE-A-2003-23399-consolidado.pdf"
             data-titulo="Ley 59/2003 – Firma Electrónica">
          <span class="ley-nombre">Ley 59/2003 – Firma Electrónica</span>
          <span class="ley-subtitulo">Tipos de firma, certificados y prestadores</span>
          <span class="ley-badge">B1 · T6</span>
        </div>

        <div class="ley-grupo-label">Bloque I · Tema 7 — Protección de datos</div>

        <div class="ley-item" data-pdf="leyes/1-7-BOE-A-2018-16673-consolidado.pdf"
             data-titulo="LO 3/2018 – LOPDGDD – Protección de datos personales">
          <span class="ley-nombre">LO 3/2018 – LOPDGDD</span>
          <span class="ley-subtitulo">Protección de datos personales y garantía de derechos digitales</span>
          <span class="ley-badge">B1 · T7</span>
        </div>

      </div><!-- /leyes-list -->
    </aside>

    <!-- Visor PDF -->
    <div class="leyes-viewer" id="leyes-viewer">
      <div class="leyes-viewer-header">
        <i class="fas fa-file-pdf" style="color:var(--error);font-size:1rem;flex-shrink:0"></i>
        <span class="leyes-viewer-title" id="viewer-title">Selecciona una ley</span>
        <div class="leyes-viewer-actions">
          <a id="btn-temario" href="#" class="leyes-btn" style="display:none">
            <i class="fas fa-book-open"></i> Ver tema
          </a>
          <a id="btn-download" href="#" download class="leyes-btn primary" style="display:none">
            <i class="fas fa-download"></i> Descargar PDF
          </a>
        </div>
      </div>

      <div class="leyes-placeholder" id="viewer-placeholder">
        <i class="fas fa-landmark"></i>
        <p>Selecciona una ley del panel izquierdo para leerla aquí.</p>
      </div>
      <iframe id="pdf-frame" src="" style="display:none" title="Visor PDF de ley"></iframe>
      <div id="md-frame" style="display:none"></div>
    </div>

  </div>

  <script>
    // Mapa ley → URL del tema en curso.html
    const LEY_TEMA_MAP = {
      'BOE-A-1981-12774': 'curso.html?bloque=1&tema=1',
      'BOE-A-1981-10325': 'curso.html?bloque=1&tema=2',
      'BOE-A-1997-25336': 'curso.html?bloque=1&tema=3',
      'Retribuciones':    'curso.html?bloque=1&tema=4',
      'BOE-A-2007-6115':  'curso.html?bloque=1&tema=5',
      'BOE-A-2023-5366':  'curso.html?bloque=1&tema=5',
      'BOE-A-2004-21760': 'curso.html?bloque=1&tema=5',
      'BOE-A-2006-21990': 'curso.html?bloque=1&tema=5',
      'BOE-A-2002-13758': 'curso.html?bloque=1&tema=6',
      'BOE-A-2003-23399': 'curso.html?bloque=1&tema=6',
      'BOE-A-2018-16673': 'curso.html?bloque=1&tema=7',
    };

    function getTemaUrl(pdfPath) {
      for (const [key, url] of Object.entries(LEY_TEMA_MAP)) {
        if (pdfPath.includes(key)) return url;
      }
      return null;
    }

    // Abrir ley
    document.querySelectorAll('.ley-item').forEach(item => {
      item.addEventListener('click', () => {
        const pdf   = item.dataset.pdf;
        const titulo = item.dataset.titulo;

        // Activo visual
        document.querySelectorAll('.ley-item').forEach(i => i.classList.remove('active'));
        item.classList.add('active');

        // Mostrar visor
        const frame       = document.getElementById('pdf-frame');
        const mdFrame     = document.getElementById('md-frame');
        const placeholder = document.getElementById('viewer-placeholder');
        const titleEl     = document.getElementById('viewer-title');
        const btnDown     = document.getElementById('btn-download');
        const btnTema     = document.getElementById('btn-temario');
        const md          = item.dataset.md;

        placeholder.style.display = 'none';
        titleEl.textContent = titulo;

        btnDown.href = pdf;
        btnDown.style.display = 'inline-flex';

        const temaUrl = getTemaUrl(pdf);
        if (temaUrl) {
          btnTema.href = temaUrl;
          btnTema.style.display = 'inline-flex';
        } else {
          btnTema.style.display = 'none';
        }

        if (md) {
          // Renderizar Markdown
          frame.style.display = 'none';
          frame.src = '';
          fetch(md)
            .then(r => r.text())
            .then(text => {
              mdFrame.innerHTML = marked.parse(text);
              mdFrame.style.display = 'block';
              mdFrame.scrollTop = 0;
            })
            .catch(() => {
              mdFrame.innerHTML = '<p style="padding:1rem;color:red">Error cargando el documento.</p>';
              mdFrame.style.display = 'block';
            });
        } else {
          // Mostrar PDF en iframe
          mdFrame.style.display = 'none';
          mdFrame.innerHTML = '';
          frame.src = pdf;
          frame.style.display = 'block';
        }
      });
    });

    // Búsqueda
    document.getElementById('search-leyes').addEventListener('input', function () {
      const q = this.value.toLowerCase().trim();
      document.querySelectorAll('.ley-item').forEach(item => {
        const text = item.textContent.toLowerCase();
        item.classList.toggle('hidden', q.length > 0 && !text.includes(q));
      });
      // Ocultar etiquetas de grupo si todos sus items están ocultos
      document.querySelectorAll('.ley-grupo-label').forEach(label => {
        let sibling = label.nextElementSibling;
        let allHidden = true;
        while (sibling && !sibling.classList.contains('ley-grupo-label')) {
          if (!sibling.classList.contains('hidden')) { allHidden = false; break; }
          sibling = sibling.nextElementSibling;
        }
        label.style.display = allHidden ? 'none' : '';
      });
    });

    // Si viene con ?ley= en la URL, autoseleccionar
    const params = new URLSearchParams(location.search);
    const leyParam = params.get('ley');
    if (leyParam) {
      const target = document.querySelector(`.ley-item[data-pdf*="${leyParam}"]`);
      if (target) target.click();
    }
  </script>

</body>
</html>
