Tul xxx Tul

Viewing: index.php

<section class="space-y-6">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
            <p class="text-sm font-semibold text-slate-500">Dashboard / Proyectos</p>
            <h1 class="mt-2 text-3xl font-black text-slate-950">Proyectos</h1>
            <p class="mt-2 text-sm text-slate-500">Administra trabajos realizados, galeria, categorias y destacados.</p>
        </div>
        <div class="flex gap-2">
            <a href="<?= url('projects/create') ?>" class="rounded-lg bg-slate-950 px-4 py-3 text-sm font-bold text-white hover:bg-gold hover:text-black">Nuevo Proyecto</a>
        </div>
    </div>

    <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
        <div class="mb-4 grid gap-3 md:grid-cols-2">
            <input id="projectSearch" placeholder="Buscar proyecto..." class="rounded-lg border border-slate-200 px-4 py-3 text-sm outline-none focus:border-gold focus:ring-4 focus:ring-gold/15">
            <select id="statusFilter" class="rounded-lg border border-slate-200 px-4 py-3 text-sm outline-none focus:border-gold focus:ring-4 focus:ring-gold/15">
                <option value="">Todos los estados</option>
                <?php 
                $statusOptions = ['Finalizado', 'En Obra', 'Preventa', 'Entregado', 'Planificación', 'Suspendido'];
                foreach ($statusOptions as $opt): ?>
                    <option value="<?= $opt ?>"><?= $opt ?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="overflow-hidden rounded-lg border border-slate-200">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-200 text-sm">
                    <thead class="bg-slate-50 text-left text-xs font-bold uppercase tracking-wide text-slate-500">
                        <tr><th class="px-4 py-3">Imagen</th><th class="px-4 py-3">Titulo</th><th class="px-4 py-3">Ubicacion</th><th class="px-4 py-3">Estado</th><th class="px-4 py-3 text-right">Acciones</th></tr>
                    </thead>
                    <tbody id="projectsTable" class="divide-y divide-slate-100">
                        <?php foreach ($projects as $project): ?>
                            <tr class="project-row hover:bg-slate-50" data-search="<?= clean(strtolower($project['title'] . ' ' . $project['location'] . ' ' . ($project['status_text'] ?? '') . ' ' . $project['status'])) ?>" data-status="<?= clean($project['status_text'] ?? '') ?>">
                                <td class="px-4 py-3"><?php if ($project['main_image']): ?><img src="<?= uploaded_url($project['main_image']) ?>" class="h-14 w-20 rounded-lg object-cover"><?php else: ?><div class="h-14 w-20 rounded-lg bg-slate-100"></div><?php endif; ?></td>
                                <td class="px-4 py-3"><p class="font-black text-slate-950"><?= clean($project['title']) ?></p><p class="text-xs text-slate-500"><?= clean($project['location'] ?: '-') ?></p></td>
                                <td class="px-4 py-3"><?= clean($project['location'] ?: '-') ?></td>
                                <td class="px-4 py-3">
                                    <div class="flex flex-col gap-1.5">
                                        <?php 
                                        $s = clean($project['status_text'] ?? 'Sin estado');
                                        $colors = [
                                            'Finalizado' => 'bg-emerald-100 text-emerald-700 border-emerald-200',
                                            'En Obra' => 'bg-blue-100 text-blue-700 border-blue-200',
                                            'Preventa' => 'bg-amber-100 text-amber-700 border-amber-200',
                                            'Entregado' => 'bg-slate-100 text-slate-700 border-slate-200',
                                            'Planificación' => 'bg-purple-100 text-purple-700 border-purple-200',
                                            'Suspendido' => 'bg-red-100 text-red-700 border-red-200'
                                        ];
                                        $color = $colors[$s] ?? 'bg-slate-100 text-slate-600 border-slate-200';
                                        ?>
                                        <span class="inline-flex items-center w-fit rounded-full border px-2.5 py-0.5 text-[10px] font-black uppercase tracking-wider <?= $color ?>">
                                            <?= $s ?>
                                        </span>
                                        <div class="flex items-center gap-1.5 ml-1">
                                            <div class="h-1.5 w-1.5 rounded-full <?= $project['status'] === 'activo' ? 'bg-green-500 animate-pulse' : 'bg-red-500' ?>"></div>
                                            <span class="text-[9px] font-bold uppercase tracking-widest text-slate-400"><?= clean($project['status']) ?></span>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex justify-end gap-2">
                                        <a href="<?= url('projects/edit/' . $project['id']) ?>" class="rounded-lg border border-slate-200 px-3 py-2 text-xs font-bold">Editar</a>
                                        <form action="<?= url('projects/delete/' . $project['id']) ?>" method="POST" onsubmit="return confirm('Eliminar proyecto?')"><?= csrf_field() ?><button class="rounded-lg bg-red-50 px-3 py-2 text-xs font-bold text-red-700">Eliminar</button></form>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="mt-4 flex justify-between"><button id="prevPage" class="rounded-lg border px-3 py-2 text-xs font-bold">Anterior</button><span id="pageInfo" class="text-xs font-bold text-slate-500"></span><button id="nextPage" class="rounded-lg border px-3 py-2 text-xs font-bold">Siguiente</button></div>
    </div>
</section>
<script>
const rows=[...document.querySelectorAll('.project-row')], search=document.getElementById('projectSearch'), status=document.getElementById('statusFilter'), prev=document.getElementById('prevPage'), next=document.getElementById('nextPage'), info=document.getElementById('pageInfo'); let page=1; const per=8;
function filtered(){const q=search.value.toLowerCase(); return rows.filter(r=>r.dataset.search.includes(q)&&(!status.value||r.dataset.status===status.value));}
function render(){const f=filtered(), pages=Math.max(1,Math.ceil(f.length/per)); page=Math.min(page,pages); rows.forEach(r=>r.classList.add('hidden')); f.slice((page-1)*per,page*per).forEach(r=>r.classList.remove('hidden')); info.textContent=`Pagina ${page} de ${pages}`; prev.disabled=page===1; next.disabled=page===pages;}
[search,status].forEach(e=>e.addEventListener('input',()=>{page=1;render()})); prev.onclick=()=>{page--;render()}; next.onclick=()=>{page++;render()}; render();
</script>
User / IP	: 216.73.216.159
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64