Tul xxx Tul

Viewing: index.php

<?php
$success = $success ?? null;
$error   = $error ?? null;
?>

<?php if ($success): ?>
<div class="alert alert-success alert-dismissible fade show d-flex align-items-center" role="alert" style="border: none; border-radius: 10px; border-left: 4px solid #06d6a0;">
    <i class="bi bi-check-circle-fill me-2"></i>
    <?= htmlspecialchars($success) ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>

<?php if ($error): ?>
<div class="alert alert-danger alert-dismissible fade show d-flex align-items-center" role="alert" style="border: none; border-radius: 10px; border-left: 4px solid #ef476f;">
    <i class="bi bi-exclamation-circle-fill me-2"></i>
    <?= htmlspecialchars($error) ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>

<!-- Estadísticas Rápidas -->
<div class="row g-4 mb-4">
    <!-- Total Owed -->
    <div class="col-12 col-sm-6 col-xl-4">
        <div class="card-stats p-4 h-100 transition-all shadow-sm" style="border-radius: 24px; background: white; border: 1px solid rgba(239, 71, 111, 0.1);">
            <div class="d-flex align-items-center gap-3">
                <div class="icon-shape bg-soft-danger d-flex align-items-center justify-content-center" style="width: 56px; height: 56px; border-radius: 18px; background: rgba(239, 71, 111, 0.1); color: #ef476f;">
                    <i class="bi bi-cash-stack fs-4"></i>
                </div>
                <div>
                    <h6 class="text-muted small fw-bold text-uppercase mb-1" style="letter-spacing: 0.5px;">Dinero que me deben</h6>
                    <div class="d-flex align-items-baseline gap-2">
                        <h3 class="fw-bold mb-0" style="color: #111827;">$<?= number_format($stats['total_deuda'] ?? 0, 2) ?></h3>
                        <span class="badge rounded-pill bg-soft-danger text-danger small" style="background: rgba(239, 71, 111, 0.1);">Pendiente</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Total Paid -->
    <div class="col-12 col-sm-6 col-xl-4">
        <div class="card-stats p-4 h-100 transition-all shadow-sm" style="border-radius: 24px; background: white; border: 1px solid rgba(6, 214, 160, 0.1);">
            <div class="d-flex align-items-center gap-3">
                <div class="icon-shape bg-soft-success d-flex align-items-center justify-content-center" style="width: 56px; height: 56px; border-radius: 18px; background: rgba(6, 214, 160, 0.1); color: #06d6a0;">
                    <i class="bi bi-check2-all fs-4"></i>
                </div>
                <div>
                    <h6 class="text-muted small fw-bold text-uppercase mb-1" style="letter-spacing: 0.5px;">Dinero cobrado</h6>
                    <div class="d-flex align-items-baseline gap-2">
                        <h3 class="fw-bold mb-0" style="color: #111827;">$<?= number_format($stats['total_pagado'] ?? 0, 2) ?></h3>
                        <span class="badge rounded-pill bg-soft-success text-success small" style="background: rgba(6, 214, 160, 0.1);">Pagado</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pending Tasks -->
    <div class="col-12 col-sm-6 col-xl-4">
        <div class="card-stats p-4 h-100 transition-all shadow-sm" style="border-radius: 24px; background: white; border: 1px solid rgba(67, 97, 238, 0.1);">
            <div class="d-flex align-items-center gap-3">
                <div class="icon-shape bg-soft-primary d-flex align-items-center justify-content-center" style="width: 56px; height: 56px; border-radius: 18px; background: rgba(67, 97, 238, 0.1); color: var(--primary);">
                    <i class="bi bi-clock-history fs-4"></i>
                </div>
                <div>
                    <h6 class="text-muted small fw-bold text-uppercase mb-1" style="letter-spacing: 0.5px;">Tareas Pendientes</h6>
                    <div class="d-flex align-items-baseline gap-2">
                        <h3 class="fw-bold mb-0" style="color: #111827;"><?= number_format($stats['tareas_pendiente'] ?? 0) ?></h3>
                        <span class="badge rounded-pill bg-soft-primary text-primary small" style="background: rgba(67, 97, 238, 0.1);">En curso</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card-custom border-0 shadow-sm overflow-hidden" style="border-radius: 20px; background: rgba(255, 255, 255, 0.9);">
    <div class="card-header-custom d-flex justify-content-between align-items-center p-4" style="background: transparent; border-bottom: 1px solid rgba(0,0,0,0.05);">
        <div>
            <h5 class="fw-bold mb-0" style="color: #111827;"><i class="bi bi-people me-2 text-primary"></i>Gestión de Clientes</h5>
            <p class="text-muted small mb-0 mt-1">Administra la base de datos de tus clientes y sus saldos</p>
        </div>
        <a href="<?= BASE_URL ?>/clientes/create" class="btn btn-primary-custom d-flex align-items-center gap-2" style="border-radius: 12px; padding: 10px 20px; font-weight: 600;">
            <i class="bi bi-plus-lg"></i> Nuevo Cliente
        </a>
    </div>
    <div class="card-body-custom p-0">
        <?php if (empty($clientes)): ?>
            <div class="empty-section py-5 text-center">
                <div class="empty-section-icon mb-3">
                    <i class="bi bi-people text-muted opacity-25" style="font-size: 5rem;"></i>
                </div>
                <h4 class="fw-bold" style="color: #374151;">Sin clientes registrados</h4>
                <p class="text-muted">Comienza agregando tu primer cliente para empezar a trabajar.</p>
                <a href="<?= BASE_URL ?>/clientes/create" class="btn btn-primary-custom mt-3" style="border-radius: 12px; padding: 12px 24px;">
                    <i class="bi bi-plus-circle me-2"></i>Agregar primer cliente
                </a>
            </div>
        <?php else: ?>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" style="border-collapse: separate; border-spacing: 0 8px; background: transparent;">
                    <thead>
                        <tr class="text-muted" style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;">
                            <th class="border-0 ps-4">Información del Cliente</th>
                            <th class="border-0 d-none d-md-table-cell">Contacto</th>
                            <th class="border-0 text-end">Estado Financiero</th>
                            <th class="border-0 text-center" style="width: 140px;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody style="border-top: none;">
                        <?php foreach ($clientes as $cli): ?>
                        <tr class="client-row transition-all shadow-sm-hover" style="background: white; border-radius: 16px;">
                            <td class="ps-4 border-0" style="border-radius: 16px 0 0 16px;">
                                <div class="d-flex align-items-center gap-3 py-2">
                                    <div class="user-avatar-container" style="position: relative;">
                                        <?php
                                            $hasFoto = !empty($cli['foto']);
                                        ?>
                                        <div class="client-avatar-modern">
                                            <?php if ($hasFoto): ?>
                                                <img src="<?= BASE_URL ?>/public/assets/uploads/clientes/<?= htmlspecialchars($cli['foto']) ?>" alt="<?= htmlspecialchars($cli['nombre']) ?>">
                                            <?php else: ?>
                                                <span class="avatar-placeholder">
                                                    <?= strtoupper(substr($cli['nombre'], 0, 1)) ?>
                                                </span>
                                            <?php endif; ?>
                                        </div>
                                        <?php if (floatval($cli['saldo_pendiente']) <= 0): ?>
                                            <span class="position-absolute bottom-0 end-0 bg-success border border-white rounded-circle" style="width: 14px; height: 14px; border-width: 2.5px !important; z-index: 1;" title="Al día"></span>
                                        <?php endif; ?>
                                    </div>
                                    <div>
                                        <div class="fw-bold" style="color: #111827; font-size: 0.95rem; line-height: 1.2;">
                                            <?= htmlspecialchars($cli['nombre'] . ' ' . ($cli['apellido'] ?? '')) ?>
                                            <?php if (($cli['tareas_pendientes'] ?? 0) > 0): ?>
                                                <span class="badge rounded-pill bg-primary ms-1" style="font-size: 0.65rem; padding: 3px 7px;" title="Tareas pendientes">
                                                    <?= $cli['tareas_pendientes'] ?>
                                                </span>
                                            <?php endif; ?>
                                        </div>
                                        <?php if (!empty($cli['cedula'])): ?>
                                            <div class="text-muted" style="font-size: 0.75rem; margin-top: 3px;">
                                                <i class="bi bi-credit-card-2-front me-1"></i><?= htmlspecialchars($cli['cedula']) ?>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </td>
                            <td class="border-0 d-none d-md-table-cell">
                                <div class="d-flex flex-column gap-1">
                                    <?php if (!empty($cli['telefono'])): ?>
                                        <span style="font-size: 0.85rem; color: #4b5563;"><i class="bi bi-telephone me-2 text-primary opacity-75"></i><?= htmlspecialchars($cli['telefono']) ?></span>
                                    <?php endif; ?>
                                    <?php if (!empty($cli['email'])): ?>
                                        <span style="font-size: 0.82rem; color: #6b7280;"><i class="bi bi-envelope me-2 text-primary opacity-75"></i><?= htmlspecialchars($cli['email']) ?></span>
                                    <?php endif; ?>
                                </div>
                            </td>
                            <td class="text-end border-0 pe-4">
                                <?php
                                $pendiente = floatval($cli['saldo_pendiente']);
                                ?>
                                <div class="fw-bold" style="font-size: 1.05rem; color: <?= $pendiente > 0 ? '#ef476f' : '#06d6a0' ?>;">
                                    $<?= number_format($pendiente, 2) ?>
                                </div>
                                <div class="badge-modern <?= $pendiente > 0 ? 'badge-soft-danger' : 'badge-soft-success' ?>" style="font-size: 0.65rem; padding: 4px 8px; border-radius: 6px;">
                                    <i class="bi <?= $pendiente > 0 ? 'bi-exclamation-circle' : 'bi-check-circle' ?> me-1"></i>
                                    <?= $pendiente > 0 ? 'PENDIENTE' : 'AL DÍA' ?>
                                </div>
                            </td>
                            <td class="border-0 pe-4" style="border-radius: 0 16px 16px 0;">
                                <div class="d-flex justify-content-center gap-2">
                                    <a href="<?= BASE_URL ?>/clientes/show/<?= $cli['id'] ?>"
                                       class="btn-action-modern primary" title="Ver perfil">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <a href="<?= BASE_URL ?>/clientes/edit/<?= $cli['id'] ?>"
                                       class="btn-action-modern secondary" title="Editar">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <?php if (Auth::isAdmin()): ?>
                                    <button type="button" class="btn-action-modern danger btn-delete-client"
                                            data-id="<?= $cli['id'] ?>"
                                            data-nombre="<?= htmlspecialchars($cli['nombre'] . ' ' . ($cli['apellido'] ?? '')) ?>"
                                            title="Eliminar">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                    <?php endif; ?>
                                </div>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php endif; ?>
    </div>
</div>

<style>
.card-stats {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-stats:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Client Avatar Styles */
.client-avatar-modern {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.15);
    border: 2px solid rgba(67, 97, 238, 0.1);
    transition: all 0.3s ease;
}

.client-avatar-modern img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.client-avatar-modern .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), #6366f1);
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
}

.client-row:hover .client-avatar-modern {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(67, 97, 238, 0.25);
}

.client-row {
    margin-bottom: 10px !important;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.client-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(67, 97, 238, 0.1);
    background: #fcfdfe !important;
}
.btn-action-modern {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
}
.btn-action-modern.primary { background: rgba(67, 97, 238, 0.1); color: var(--primary); }
.btn-action-modern.primary:hover { background: var(--primary); color: white; }

.btn-action-modern.secondary { background: rgba(107, 114, 128, 0.1); color: #4b5563; }
.btn-action-modern.secondary:hover { background: #4b5563; color: white; }

.btn-action-modern.danger { background: rgba(239, 71, 111, 0.1); color: #ef476f; }
.btn-action-modern.danger:hover { background: #ef476f; color: white; }

.shadow-sm-hover:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
</style>

<!-- Modal eliminar -->
<div class="modal fade" id="deleteClientModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border: none; border-radius: 16px;">
            <div class="modal-header" style="border-bottom: 1px solid var(--border-color); padding: 20px 24px;">
                <h5 class="modal-title"><i class="bi bi-exclamation-triangle text-danger me-2"></i>Confirmar Eliminación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" style="padding: 24px;">
                <p>¿Estás seguro de eliminar al cliente <strong id="deleteClientName"></strong>?</p>
                <p class="text-muted" style="font-size: 0.85rem;">Se eliminarán también su cuenta y pagos registrados.</p>
            </div>
            <div class="modal-footer" style="border-top: 1px solid var(--border-color); padding: 16px 24px;">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal" style="border-radius: 6px;">Cancelar</button>
                <a href="#" id="deleteClientBtn" class="btn btn-sm btn-danger" style="border-radius: 6px;">
                    <i class="bi bi-trash me-1"></i>Eliminar
                </a>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const modal = new bootstrap.Modal(document.getElementById('deleteClientModal'));
    document.querySelectorAll('.btn-delete-client').forEach(function(btn) {
        btn.addEventListener('click', function() {
            document.getElementById('deleteClientName').textContent = this.dataset.nombre;
            document.getElementById('deleteClientBtn').href = '<?= BASE_URL ?>/clientes/delete/' + this.dataset.id;
            modal.show();
        });
    });
});
</script>
User / IP	: 216.73.216.217
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