Tul xxx Tul

Viewing: index.php

<?= $this->extend('layout/app'); ?>

<?php $this->section('title'); ?>
Control de Asistencia
<?php $this->endSection(); ?>

<?php $this->section('css'); ?>
<link rel="stylesheet" href="<?= base_url('assets/DataTables/datatables.min.css'); ?>">
<style>
    .attendance-cell {
        min-width: 110px;
        font-size: 0.75rem;
        padding: 12px 5px !important;
        vertical-align: top !important;
    }
    .time-badge {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.65rem;
        font-weight: 700;
        margin-top: 4px;
        padding: 3px 6px;
        border-radius: 4px;
        white-space: nowrap;
    }
    .badge-in { background: #dcfce7; color: #15803d; }
    .badge-out { background: #e0f2fe; color: #0369a1; }
    .badge-duration { background: #0a0a0a; color: #ccff00; border: 1px solid #ccff00; margin-top: 6px; justify-content: center; }
    .badge-pending { background: #f3f4f6; color: #9ca3af; }

    .status-si {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 50px;
        font-weight: 800;
        font-size: 0.6rem;
        letter-spacing: 0.5px;
        margin-bottom: 5px;
        text-transform: uppercase;
    }
    .status-presente { background: #ccff00; color: #15803d; }
    .status-finalizado { background: #0a0a0a; color: #ccff00; border: 1px solid #ccff00; }

    .status-no {
        color: #d1d5db;
        font-weight: 300;
    }
    .month-header {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 800;
        color: #0a0a0a;
        font-size: 1.4rem;
        margin-bottom: 0;
    }
    .period-badge {
        font-size: 0.7rem;
        background: #0a0a0a;
        color: #ccff00;
        padding: 2px 10px;
        border-radius: 50px;
        text-transform: uppercase;
        font-weight: 700;
    }
</style>
<?php $this->endSection(); ?>

<?php $this->section('content'); ?>

<div class="app-title">
    <div>
        <h1><i class="bi bi-calendar-check-fill"></i> Control de Asistencia</h1>
        <p>Historial de entradas y salidas de clientes</p>
    </div>
    <ul class="app-breadcrumb breadcrumb">
        <li class="breadcrumb-item"><i class="bi bi-house-door fs-6"></i></li>
        <li class="breadcrumb-item">Gestión Deportiva</li>
        <li class="breadcrumb-item active">Asistencia</li>
    </ul>
</div>

<div class="card shadow-sm border-0" style="border-radius: 20px;">
    <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div class="d-flex align-items-center gap-3">
                <h2 class="month-header"><?= $monthName ?></h2>
            </div>
            <div class="btn-group" role="group">
                <?php if (has_permission('Asistencia:registrar')) { ?>
                    <a href="<?= base_url('admin/attendance/new?tipo=qr'); ?>" class="btn btn-dark btn-sm rounded-start-pill px-3"><i class="bi bi-qr-code-scan"></i> Registro QR</a>
                <?php } ?>
                <a href="<?= base_url('admin/pdfAsistencia?period=' . $period . '&date=' . ($period == 'month' ? $monthStart : $date) . '&month=' . ($period == 'month' ? $monthStart : '')) ?>" class="btn btn-outline-danger btn-sm px-3" target="_blank">
                    <i class="bi bi-file-pdf"></i> PDF
                </a>
            </div>
        </div>

        <div class="bg-light p-3 rounded-4 mb-4">
            <form method="get" action="<?= base_url('admin/attendance'); ?>">
                <div class="row g-3 align-items-end">
                    <div class="col-md-3">
                        <label class="small fw-bold text-muted mb-1">Visualización</label>
                        <select name="period" id="periodSelect" class="form-select form-select-sm border-0 shadow-sm" onchange="this.form.submit()">
                            <option value="day" <?= ($period == 'day') ? 'selected' : '' ?>>Vista Diaria</option>
                            <option value="week" <?= ($period == 'week') ? 'selected' : '' ?>>Vista Semanal</option>
                            <option value="month" <?= ($period == 'month') ? 'selected' : '' ?>>Vista Mensual</option>
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="small fw-bold text-muted mb-1">Seleccionar Fecha/Mes</label>
                        <?php if ($period == 'day' || $period == 'week'): ?>
                            <input type="date" name="date" value="<?= $date ?>" class="form-control form-control-sm border-0 shadow-sm" />
                        <?php else: ?>
                            <input type="month" name="month" value="<?= $currentMonth ?>" class="form-control form-control-sm border-0 shadow-sm" />
                        <?php endif; ?>
                    </div>

                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary btn-sm w-100 shadow-sm">
                            <i class="bi bi-funnel-fill"></i> Filtrar
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <div class="table-responsive">
            <table class="table table-hover align-middle" id="tblAttendance">
                <thead class="bg-dark text-white">
                    <tr>
                        <th class="py-3 px-4 border-0" style="border-top-left-radius: 15px;">CLIENTE</th>
                        <?php 
                        $formatter = new IntlDateFormatter('es_ES', IntlDateFormatter::FULL, IntlDateFormatter::NONE, null, null, "EEE d");
                        foreach ($dates as $dateItem): 
                        ?>
                            <th class="py-3 px-2 border-0 text-center"><?= ucfirst($formatter->format(new DateTime($dateItem))) ?></th>
                        <?php endforeach; ?>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($users as $user): ?>
                        <tr>
                            <td class="fw-bold px-4 border-bottom-0"><?= $user['name'] ?></td>
                            <?php foreach ($dates as $dateItem): ?>
                                <?php
                                $isToday = ($dateItem === date('Y-m-d')) ? 'bg-light' : '';
                                $record = $attendance[$user['id']][$dateItem] ?? null;
                                ?>
                                <td class="attendance-cell text-center border-bottom-0 <?= $isToday ?>">
                                    <?php if ($record): ?>
                                        <?php if ($record['check_out']): ?>
                                            <div class="status-si status-finalizado">COMPLETO</div>
                                        <?php else: ?>
                                            <div class="status-si status-presente">PRESENTE</div>
                                        <?php endif; ?>
                                        
                                        <div class="d-flex flex-column align-items-center">
                                            <?php if ($record['check_in']): ?>
                                                <div class="time-badge badge-in" title="Hora de Entrada">
                                                    <i class="bi bi-box-arrow-in-right"></i> <?= date('h:i A', strtotime($record['check_in'])) ?>
                                                </div>
                                            <?php endif; ?>
                                            
                                            <?php if ($record['check_out']): ?>
                                                <div class="time-badge badge-out" title="Hora de Salida">
                                                    <i class="bi bi-box-arrow-right"></i> <?= date('h:i A', strtotime($record['check_out'])) ?>
                                                </div>
                                                
                                                <?php 
                                                    $start = new DateTime($record['check_in']);
                                                    $end = new DateTime($record['check_out']);
                                                    $diff = $start->diff($end);
                                                    $duration = "";
                                                    if ($diff->h > 0) $duration .= $diff->h . "h ";
                                                    $duration .= $diff->i . "m";
                                                ?>
                                                <div class="time-badge badge-duration" title="Duración Total">
                                                    <i class="bi bi-clock-fill"></i> <?= $duration ?>
                                                </div>
                                            <?php elseif ($record['check_in']): ?>
                                                <div class="time-badge badge-pending">
                                                    <i class="bi bi-clock-history"></i> --:--
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                    <?php else: ?>
                                        <span class="status-no">&bull;</span>
                                    <?php endif; ?>
                                </td>
                            <?php endforeach; ?>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>

        <div class="d-flex justify-content-between align-items-center mt-4">
            <div class="small text-muted">
                <span class="me-3"><i class="bi bi-circle-fill text-success" style="font-size: 0.5rem;"></i> Entrada registrada</span>
                <span><i class="bi bi-circle-fill text-info" style="font-size: 0.5rem;"></i> Salida registrada</span>
            </div>
            <div class="btn-group" role="group">
                <?php if ($period == 'day'): ?>
                    <a href="?period=<?= $period ?>&date=<?= date('Y-m-d', strtotime($date . ' -1 day')) ?>" class="btn btn-outline-dark btn-sm px-3 rounded-pill-start">Anterior</a>
                    <a href="?period=<?= $period ?>&date=<?= date('Y-m-d', strtotime($date . ' +1 day')) ?>" class="btn btn-outline-dark btn-sm px-3 rounded-pill-end">Siguiente</a>
                <?php elseif ($period == 'week'): ?>
                    <a href="?period=<?= $period ?>&date=<?= date('Y-m-d', strtotime($date . ' -1 week')) ?>" class="btn btn-outline-dark btn-sm px-3 rounded-pill-start">Anterior</a>
                    <a href="?period=<?= $period ?>&date=<?= date('Y-m-d', strtotime($date . ' +1 week')) ?>" class="btn btn-outline-dark btn-sm px-3 rounded-pill-end">Siguiente</a>
                <?php elseif ($period == 'month'): ?>
                    <a href="?period=<?= $period ?>&month=<?= date('Y-m', strtotime($monthStart . ' -1 month')) ?>" class="btn btn-outline-dark btn-sm px-3 rounded-pill-start">Anterior</a>
                    <a href="?period=<?= $period ?>&month=<?= date('Y-m', strtotime($monthStart . ' +1 month')) ?>" class="btn btn-outline-dark btn-sm px-3 rounded-pill-end">Siguiente</a>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<?php $this->endSection(); ?>
User / IP	: 216.73.216.191
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