<?= $this->extend('layouts/master') ?>

<?= $this->section('title') ?>
Inicio
<?= $this->endSection() ?>

<?= $this->section('css') ?>
<style>
    .kpi-card {
        border: 0;
        border-radius: 12px;
        transition: .2s;
    }
    .kpi-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.07);
    }
    .kpi-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: #fff;
    }
    .card-title {
        font-weight: 600;
    }
    .list-item {
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }
    .list-item:last-child {
        border-bottom: 0;
    }
</style>
<?= $this->endSection() ?>

<?= $this->section('pageContent') ?>
<div class="container-fluid py-4">

    <!-- Título -->
    <div class="mb-4">
        <h2 class="fw-bold">Dashboard</h2>
        <p class="text-muted">Resumen general del Sistema de Gestión Ciudadana</p>
    </div>

    <!-- KPIs -->
    <div class="row g-4">

        <!-- Organizaciones -->
        <div class="col-md-3">
            <div class="card kpi-card shadow-sm p-3">
                <div class="d-flex align-items-center">
                    <div class="kpi-icon bg-primary">
                        <i class="ti ti-building-community"></i>
                    </div>
                    <div class="ms-3">
                        <h3 class="mb-0 fw-bold">
                            <?= esc($stats['cantidad_organizaciones'] ?? 0) ?>
                        </h3>
                        <small class="text-muted">Organizaciones</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tickets Pendientes -->
        <div class="col-md-3">
            <div class="card kpi-card shadow-sm p-3">
                <div class="d-flex align-items-center">
                    <div class="kpi-icon bg-warning">
                        <i class="ti ti-ticket"></i>
                    </div>
                    <div class="ms-3">
                        <h3 class="mb-0 fw-bold">
                            <?= esc($stats['tickets_pendientes'] ?? 0) ?>
                        </h3>
                        <small class="text-muted">Tickets Pendientes</small>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- Widgets inferiores -->
    <div class="row g-4 mt-1">

        <!-- Actividad reciente -->
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">Actividad Reciente de Organizaciones</h5>
                </div>
                <div class="card-body">
                    <?php if (!empty($stats['ultimos_movimientos'])): ?>
                        <?php foreach ($stats['ultimos_movimientos'] as $mov): ?>
                            <div class="list-item">
                                <strong><?= esc($mov['organizacion'] ?? 'Organización') ?></strong>
                                actualizado por
                                <strong><?= esc($mov['usuario_nombre'] ?? 'Usuario') ?></strong>
                                <br>
                                <small class="text-muted">
                                    <?= !empty($mov['fecha_modificacion']) 
                                        ? date('d/m/Y H:i', strtotime($mov['fecha_modificacion'])) 
                                        : '-' ?>
                                </small>
                            </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="text-muted">Sin actividad reciente.</div>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- Próximos eventos -->
        <!-- Próximos eventos -->
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">Próximos Eventos</h5>
                </div>
                <div class="card-body">
                    <?php if (!empty($stats['proximos_eventos'])): ?>
                        <?php foreach ($stats['proximos_eventos'] as $evento): ?>
                            <div class="list-item d-flex align-items-start gap-3">

                                <!-- Imagen evento -->
                                <?php if (!empty($evento['imagen'])): ?>
                                    <img
                                        src="<?= site_url($evento['imagen']) ?>"
                                        alt="<?= esc($evento['nombre']) ?>"
                                        style="width:60px;height:60px;object-fit:cover;border-radius:8px;"
                                    >
                                <?php else: ?>
                                    <div
                                        style="width:60px;height:60px;border-radius:8px;background:#f1f1f1;
                                            display:flex;align-items:center;justify-content:center;color:#999;">
                                        <i class="ti ti-calendar-event"></i>
                                    </div>
                                <?php endif; ?>

                                <!-- Info evento -->
                                <div>
                                    <strong><?= esc($evento['nombre']) ?></strong><br>
                                    <small class="text-muted">
                                        <?= date('d/m/Y H:i', strtotime($evento['fecha_inicio'])) ?>
                                        —
                                        <?= date('d/m/Y H:i', strtotime($evento['fecha_fin'])) ?>
                                    </small>
                                    <br>
                                    <small class="text-muted">
                                        <?= esc($evento['organizacion'] ?? '') ?>
                                    </small>
                                </div>

                            </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="text-center py-4">
                            <img 
                                src="<?= base_url('assets/images/art/no-eventos.png') ?>" 
                                alt="No hay eventos" 
                                style="max-width: 200px;"
                            >
                            <div class="text-muted mt-3">No hay eventos agendados.</div>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>


    </div>

   <!-- Última fila -->
    <div class="row g-4 mt-1">

        <!-- Últimos Tickets -->
        <div class="col-lg-6">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">Últimos Tickets</h5>
                    <a href="<?=site_url('modulos/bandeja')?>">
                        <span class="badge bg-warning text-dark">
                            <?= esc($stats['tickets_pendientes'] ?? 0) ?> pendientes
                        </span>
                    </a>
                </div>

                <div class="card-body">
                    <?php if (!empty($stats['ultimos_tickets'])): ?>
                        <?php foreach ($stats['ultimos_tickets'] as $ticket): ?>
                            <div class="list-item">
                                <a href="<?=site_url('modulos/gestionar/'.$ticket["id"])?>">
                                    <strong>#<?= esc($ticket['id']) ?></strong>
                                    <?= esc($ticket['item'] ?? 'Sin asunto') ?>
                                    <br>
                                    <small class="text-muted">
                                        <?= date('d/m/Y H:i', strtotime($ticket['fecha_creacion'])) ?>
                                    </small>

                                    <span class="badge bg-warning text-dark float-end">
                                        <?= esc($ticket['estado']) ?>
                                    </span>
                                </a>
                            </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="text-center py-4">
                            <img 
                                src="<?= base_url('assets/images/art/aplauso.png') ?>" 
                                alt="No hay eventos" 
                                style="max-width: 200px;"
                            >
                            <div class="text-muted mt-3">No hay tickets pendientes.</div>
                        </div>
                    <?php endif; ?>

                </div>
            </div>
        </div>

    </div>


</div>
<?= $this->endSection() ?>
