<?php
/**
 * Template: Vista filtrada de Proyectos Administrativos
 * Diseño: Editorial Bold (Opción 6)
 *
 * @var \dokuwiki\plugin\bez\meta\Tpl $tpl
 */
?>

<!-- Google Fonts cargadas por niccadminmenu/action.php (consolidado) -->

<style>
    /* ============================================================
       EDITORIAL BOLD — Filtro de Proyectos Administrativos
       Opción 6 adaptada al sistema NICC
    ============================================================ */
    .opt6-filtro {
        max-width: 700px;
        margin: 0 auto;
        font-family: 'DM Sans', sans-serif;
        background: #f8f7f4;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 4px 24px rgba(0,0,0,0.08);
        box-sizing: border-box;
    }

    .opt6-masthead {
        background: #1a1a2e;
        padding: 24px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
    }

    .opt6-logo {
        font-family: 'Playfair Display', serif;
        font-size: 22px;
        font-weight: 700;
        color: #fff;
    }

    .opt6-logo span {
        color: #e94560;
    }

    .opt6-filter-info {
        text-align: right;
    }

    .opt6-filter-label {
        font-size: 10px;
        letter-spacing: 3px;
        color: #555;
        text-transform: uppercase;
    }

    .opt6-filter-value {
        font-family: 'Playfair Display', serif;
        font-size: 16px;
        color: #fff;
        font-weight: 600;
    }

    .opt6-divider {
        height: 4px;
        background: linear-gradient(90deg, #e94560, #f59e0b, #e94560);
    }

    .opt6-toolbar {
        background: #f0ede8;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e8e5e0;
        flex-wrap: wrap;
        gap: 8px;
    }

    .opt6-toolbar-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .opt6-count-badge {
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        color: #92400e;
        background: #fff7ed;
        border: 1.5px solid #fde68a;
        border-radius: 20px;
        padding: 4px 14px;
        font-weight: 500;
    }

    .opt6-btn-config {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #1a1a2e;
        color: #fff;
        padding: 7px 18px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        text-decoration: none;
        font-family: 'DM Sans', sans-serif;
        transition: background .2s;
        border: none;
        cursor: pointer;
    }

    .opt6-btn-config:hover {
        background: #e94560;
        color: #fff;
        text-decoration: none;
    }

    .opt6-col-header {
        background: #f0ede8;
        padding: 10px 16px;
        display: grid;
        grid-template-columns: 35px 1fr 90px 150px 90px 60px;
        gap: 8px;
        align-items: center;
        border-bottom: 2px solid #1a1a2e;
    }

    .opt6-col-header span {
        font-size: 9px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #999;
        font-weight: 700;
    }

    .opt6-row {
        padding: 14px 16px;
        display: grid;
        grid-template-columns: 35px 1fr 90px 150px 90px 60px;
        gap: 8px;
        align-items: center;
        border-bottom: 1px solid #e8e5e0;
        transition: background .15s;
    }

    .opt6-row:hover {
        background: #fffbf5;
    }

    .opt6-row:last-child {
        border-bottom: none;
    }

    .num-6 {
        font-family: 'Playfair Display', serif;
        font-size: 22px;
        font-weight: 700;
        color: #e0ddd8;
    }

    .name-6 {
        font-size: 15px;
        font-weight: 600;
        color: #1a1a2e;
        line-height: 1.3;
    }

    .estado-6 {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        border: 1.5px solid #1a1a2e;
        border-radius: 2px;
        padding: 3px 8px;
        font-size: 10px;
        color: #1a1a2e;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    .estado-6.estado-closed {
        border-color: #c62828;
        color: #c62828;
    }

    .estado-6.estado-compilado {
        border-color: #e65100;
        color: #e65100;
    }

    .dot-6 {
        width: 5px;
        height: 5px;
        border-radius: 50%;
    }

    .dot-6.dot-opened { background: #10b981; }
    .dot-6.dot-closed { background: #c62828; }
    .dot-6.dot-compilado { background: #e65100; }

    .bar-6-outer { }

    .bar-6-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .pct-6 {
        font-size: 13px;
        font-weight: 800;
        color: #e94560;
        min-width: 42px;
    }

    .bar-6-bg {
        flex: 1;
        height: 3px;
        background: #e0ddd8;
        max-width: 70px;
        overflow: hidden;
    }

    .bar-6-fill {
        height: 100%;
        background: #e94560;
    }

    .tasks-6 {
        font-size: 10px;
        color: #bbb;
        margin-top: 4px;
        letter-spacing: .5px;
    }

    .fecha-6 {
        font-size: 12px;
        color: #888;
        font-style: italic;
    }

    .btn-6 {
        background: #1a1a2e;
        border: none;
        color: #fff;
        padding: 6px 12px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        font-family: 'DM Sans', sans-serif;
        transition: background .2s;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        white-space: nowrap;
    }

    .btn-6:hover {
        background: #e94560;
        color: #fff;
        text-decoration: none;
    }

    .opt6-footer {
        background: #f0ede8;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-top: 1px solid #e8e5e0;
    }

    .opt6-footer-text {
        font-size: 11px;
        color: #bbb;
    }

    .opt6-footer-line {
        flex: 1;
        height: 1px;
        background: #e0ddd8;
    }

    /* Estado vacío */
    .opt6-empty {
        padding: 60px 20px;
        text-align: center;
    }

    .opt6-empty h3 {
        font-family: 'Playfair Display', serif;
        font-size: 20px;
        color: #1a1a2e;
        margin-bottom: 8px;
    }

    .opt6-empty p {
        font-size: 13px;
        color: #999;
        margin-bottom: 20px;
    }

    /* Responsive: pantallas pequeñas */
    @media (max-width: 500px) {
        .opt6-col-header,
        .opt6-row {
            grid-template-columns: 30px 1fr 80px 60px;
            gap: 6px;
            padding-left: 10px;
            padding-right: 10px;
        }

        /* Ocultar columnas de Progreso y Fecha en móvil */
        .opt6-col-header span:nth-child(4),
        .opt6-col-header span:nth-child(5),
        .opt6-row > div:nth-child(4),
        .opt6-row > div:nth-child(5) {
            display: none;
        }

        .opt6-masthead,
        .opt6-toolbar,
        .opt6-footer {
            padding-left: 10px;
            padding-right: 10px;
        }

        .opt6-logo {
            font-size: 16px;
        }

        .opt6-filter-value {
            font-size: 13px;
        }
    }
</style>

<?php
$proyectos = $tpl->get('proyectos');
$nombreFiltro = $tpl->get('nombreFiltro');
$totalProyectos = $tpl->get('totalProyectos');
?>

<div class="opt6-filtro">

    <!-- Masthead -->
    <div class="opt6-masthead">
        <div class="opt6-logo">SISTEMA DE CONTROL ADMINISTRATIVO</div>
        <div class="opt6-filter-info">
            <?php if ($nombreFiltro): ?>
            <div class="opt6-filter-label">RESPONSABLE</div>
            <div class="opt6-filter-value"><?php echo htmlspecialchars($nombreFiltro) ?></div>
            <?php else: ?>
            <div class="opt6-filter-label">Sin filtro activo</div>
            <div class="opt6-filter-value">Seleccione una preferencia</div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Divider -->
    <div class="opt6-divider"></div>

    <!-- Toolbar -->
    <div class="opt6-toolbar">
        <div class="opt6-toolbar-left">
            <?php if ($totalProyectos > 0): ?>
            <span class="opt6-count-badge"><?php echo $totalProyectos ?> Sección<?php echo $totalProyectos !== 1 ? 'es' : '' ?></span>
            <?php endif; ?>
        </div>
        <?php if (in_array('manager', $GLOBALS['USERINFO']['grps'] ?? []) || action_plugin_managerprotect::shouldHaveManagerGroup($_SERVER['REMOTE_USER'] ?? '')): ?>
        <a href="<?php echo $tpl->url('admin_threads') ?>" class="opt6-btn-config">
            Configurar
        </a>
        <?php endif; ?>
    </div>

    <?php if (empty($proyectos)): ?>

    <!-- Estado vacío -->
    <div class="opt6-empty">
        <?php if ($nombreFiltro === null): ?>
        <h3>Sin preferencia seleccionada</h3>
        <p>Debe marcar un proyecto como preferencia desde la vista de configuración para activar el filtro.</p>
        <?php else: ?>
        <h3>Sin resultados</h3>
        <p>No se encontraron proyectos para "<?php echo htmlspecialchars($nombreFiltro) ?>".</p>
        <?php endif; ?>
        <?php if (in_array('manager', $GLOBALS['USERINFO']['grps'] ?? []) || action_plugin_managerprotect::shouldHaveManagerGroup($_SERVER['REMOTE_USER'] ?? '')): ?>
        <a href="<?php echo $tpl->url('admin_threads') ?>" class="btn-6" style="margin-top:10px;">
            Ir a Configurar
        </a>
        <?php endif; ?>
    </div>

    <?php else: ?>

    <!-- Column headers -->
    <div class="opt6-col-header">
        <span>#</span>
        <span>Nombre</span>
        <span>Estado</span>
        <span>Progreso</span>
        <span>Fecha</span>
        <span>Ver</span>
    </div>

    <!-- Rows -->
    <?php foreach ($proyectos as $p):
        $porcentaje = floatval($p['porcentaje_total'] ?? 0);
        $totalTareas = intval($p['total_tareas'] ?? 0);
        $tareasComp = intval($p['tareas_completadas'] ?? 0);
        $estado = $p['state'] ?? 'opened';
    ?>
    <div class="opt6-row">
        <div class="num-6"><?php echo str_pad($p['id'], 2, '0', STR_PAD_LEFT) ?></div>
        <div class="name-6"><?php echo htmlspecialchars($p['trabajador_nombre']) ?></div>
        <div>
            <span class="estado-6 <?php echo $estado === 'closed' ? 'estado-closed' : ($estado === 'compilado' ? 'estado-compilado' : '') ?>">
                <span class="dot-6 dot-<?php echo $estado ?>"></span>
                <?php if ($estado === 'opened'): ?>Abierto<?php elseif ($estado === 'closed'): ?>Cerrado<?php else: ?>Compilado<?php endif; ?>
            </span>
        </div>
        <div class="bar-6-outer">
            <div class="bar-6-row">
                <span class="pct-6"><?php echo $porcentaje ?>%</span>
                <div class="bar-6-bg">
                    <div class="bar-6-fill" style="width: <?php echo min($porcentaje, 100) ?>%;"></div>
                </div>
            </div>
            <div class="tasks-6"><?php echo $tareasComp ?>/<?php echo $totalTareas ?> tareas</div>
        </div>
        <div class="fecha-6"><?php echo !empty($p['fecha_inicio']) ? date('d/m/Y', strtotime($p['fecha_inicio'])) : '—' ?></div>
        <div>
            <a href="<?php echo $tpl->url('admin_thread', 'id', $p['id']) ?>" class="btn-6">Ver</a>
        </div>
    </div>
    <?php endforeach; ?>

    <?php endif; ?>

    <!-- Footer -->
    <div class="opt6-footer">
        <span class="opt6-footer-text"><?php echo $totalProyectos ?> Sección<?php echo $totalProyectos !== 1 ? 'es' : '' ?></span>
        <div class="opt6-footer-line"></div>
        <span class="opt6-footer-text">NICC Sistema</span>
    </div>

</div>
