Tul xxx Tul

Viewing: clients.php

<?php require_once __DIR__ . '/../utils/auth.php'; ?>
<?php include __DIR__ . '/../includes/header.php'; ?>
<?php include __DIR__ . '/../includes/sidebar.php'; ?>
<div class="main-content">
    <div class="users-header">
        <h1>Clientes</h1>
        <button type="button" class="btn btn-primary" onclick="openClientModal()">+ Nuevo Cliente</button>
    </div>
    <form method="get" action="router.php" class="user-search-form">
        <input type="hidden" name="action" value="clients">
        <div class="search-group">
            <div class="search-input">
                <i class="fa fa-search"></i>
                <input type="text" name="nombre" placeholder="Buscar por nombre o razón social..." value="<?= htmlspecialchars($_GET['nombre'] ?? '') ?>">
            </div>
            <select name="ciudad">
                <option value="">Todas las ciudades</option>
                <?php
                $ciudades = array_unique(array_map(function($c){return $c['ciudad'];}, $clientes));
                foreach($ciudades as $ciudad) {
                    if($ciudad) echo '<option value="'.htmlspecialchars($ciudad).'"'.((isset($_GET['ciudad']) && $_GET['ciudad']==$ciudad)?' selected':'').'>'.htmlspecialchars($ciudad).'</option>';
                }
                ?>
            </select>
            <select name="regimen">
                <option value="">Todos los regímenes</option>
                <option value="Común" <?= (isset($_GET['regimen']) && $_GET['regimen']=='Común')?'selected':'' ?>>Común</option>
                <option value="Simplificado" <?= (isset($_GET['regimen']) && $_GET['regimen']=='Simplificado')?'selected':'' ?>>Simplificado</option>
                <option value="Gran Contribuyente" <?= (isset($_GET['regimen']) && $_GET['regimen']=='Gran Contribuyente')?'selected':'' ?>>Gran Contribuyente</option>
            </select>
            <button type="submit" class="btn btn-search">Buscar</button>
        </div>
    </form>
    <div class="client-deck">
        <div class="user-deck">
            <?php foreach ($clientes as $cliente):
                if (
                    (empty($_GET['nombre']) || stripos($cliente['nombre'].$cliente['razon_social'], $_GET['nombre']) !== false) &&
                    (empty($_GET['ciudad']) || $cliente['ciudad'] == $_GET['ciudad']) &&
                    (empty($_GET['regimen']) || $cliente['regimen'] == $_GET['regimen'])
                ):
            ?>
            <div class="user-card">
                <img src="<?= $cliente['imagen'] ? 'uploads/clients/' . htmlspecialchars($cliente['imagen']) : 'assets/img/user-default.png' ?>" class="user-avatar">
                <div class="user-info">
                    <?php
                    $nombreCliente = htmlspecialchars(html_entity_decode($cliente['tipo'] === 'Jurídico' ? $cliente['razon_social'] : $cliente['nombre'], ENT_QUOTES | ENT_HTML5, 'UTF-8'));
                    $regimenCliente = htmlspecialchars(html_entity_decode($cliente['regimen'], ENT_QUOTES | ENT_HTML5, 'UTF-8'));
                    $ciudadCliente = htmlspecialchars(html_entity_decode($cliente['ciudad'], ENT_QUOTES | ENT_HTML5, 'UTF-8'));
                    ?>
                    <strong><?= $nombreCliente ?></strong>
                    <span class="badge badge-success" style="margin-left:8px;"> <?= $regimenCliente ?> </span>
                    <div><?= htmlspecialchars($cliente['nit_cc']) ?><?= $cliente['dv'] ? '-' . htmlspecialchars($cliente['dv']) : '' ?></div>
                    <div><?= $ciudadCliente ?></div>
                    <div><?= htmlspecialchars($cliente['telefono']) ?></div>
                </div>
                <div class="user-actions">
                    <button type="button" class="btn-edit btn btn-primary me-2" onclick='openEditClientModal(<?= json_encode($cliente) ?>)'>Editar</button>
                </div>
            </div>
            <?php endif; endforeach; ?>
        </div>
    </div>
    <!-- Modal de Cliente -->
    <div id="clientModal" class="modal-user" style="display:none;">
        <div class="modal-content-user" style="max-width: 800px; min-width: 600px;">
            <span class="close-modal-user" onclick="closeClientModal()">&times;</span>
            <form id="clientForm" action="router.php?action=createClient" method="post" enctype="multipart/form-data" class="user-form-modal" onsubmit="return validateClientForm()">
                <input type="hidden" name="id" id="client-id">
                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <label class="form-label">Tipo de Cliente:</label>
                        <select name="tipo" id="client-tipo" class="form-select" onchange="toggleFields()">
                            <option value="Natural">Natural</option>
                            <option value="Jurídico">Jurídico</option>
                        </select>
                    </div>
                    <div class="col-md-6" id="field-nombre">
                        <label class="form-label">Nombre Completo:</label>
                        <input type="text" name="nombre" id="client-nombre" class="form-control">
                    </div>
                    <div class="col-md-6" id="field-razon" style="display:none;">
                        <label class="form-label">Razón Social:</label>
                        <input type="text" name="razon_social" id="client-razon" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">NIT / CC:</label>
                        <input type="text" name="nit_cc" id="client-nitcc" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">DV:</label>
                        <input type="text" name="dv" id="client-dv" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Dirección:</label>
                        <input type="text" name="direccion" id="client-direccion" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Ciudad:</label>
                        <input type="text" name="ciudad" id="client-ciudad" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Teléfono:</label>
                        <input type="text" name="telefono" id="client-telefono" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Email:</label>
                        <input type="email" name="email" id="client-email" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Representante Legal:</label>
                        <input type="text" name="representante" id="client-representante" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Documento Representante:</label>
                        <input type="text" name="documento_representante" id="client-doc-representante" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Régimen:</label>
                        <select name="regimen" id="client-regimen" class="form-select">
                            <option value="Común">Común</option>
                            <option value="Simplificado">Simplificado</option>
                            <option value="Gran Contribuyente">Gran Contribuyente</option>
                        </select>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Observaciones:</label>
                        <textarea name="observaciones" id="client-observaciones" class="form-control"></textarea>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Imagen (foto/logo):</label>
                        <input type="file" name="imagen" id="client-imagen" class="form-control" accept="image/*">
                    </div>
                </div>
                <button type="submit" class="btn btn-primary w-100" id="clientFormBtn">Registrar Cliente</button>
                <button type="button" class="btn btn-danger w-100 mt-2" id="deleteClientBtn" style="display:none;" onclick="deleteClient()">Eliminar Cliente</button>
            </form>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.12/dist/sweetalert2.all.min.js"></script>
<script>
function openClientModal() {
    document.getElementById('clientForm').reset();
    document.getElementById('client-tipo').value = 'Natural';
    toggleFields();
    document.getElementById('client-id').value = '';
    document.getElementById('clientFormBtn').textContent = 'Registrar Cliente';
    document.getElementById('clientForm').action = 'router.php?action=createClient';
    document.getElementById('deleteClientBtn').style.display = 'none';
    document.getElementById('clientModal').style.display = 'flex';
}
function openEditClientModal(cliente) {
    const form = document.getElementById('clientForm');
    form.reset();
    document.getElementById('client-id').value = cliente.id;
    document.getElementById('client-tipo').value = cliente.tipo;
    toggleFields();
    document.getElementById('client-nombre').value = cliente.nombre;
    document.getElementById('client-razon').value = cliente.razon_social;
    document.getElementById('client-nitcc').value = cliente.nit_cc;
    document.getElementById('client-dv').value = cliente.dv;
    document.getElementById('client-direccion').value = cliente.direccion;
    document.getElementById('client-ciudad').value = cliente.ciudad;
    document.getElementById('client-telefono').value = cliente.telefono;
    document.getElementById('client-email').value = cliente.email;
    document.getElementById('client-representante').value = cliente.representante;
    document.getElementById('client-doc-representante').value = cliente.documento_representante;
    document.getElementById('client-regimen').value = cliente.regimen;
    document.getElementById('client-observaciones').value = cliente.observaciones;
    document.getElementById('clientFormBtn').textContent = 'Actualizar Cliente';
    form.action = 'router.php?action=updateClient';
    document.getElementById('deleteClientBtn').style.display = 'block';
    document.getElementById('clientModal').style.display = 'flex';
}
function closeClientModal() {
    document.getElementById('clientModal').style.display = 'none';
}
function toggleFields() {
    const tipo = document.getElementById('client-tipo').value;
    document.getElementById('field-nombre').style.display = tipo === 'Natural' ? 'block' : 'none';
    document.getElementById('field-razon').style.display = tipo === 'Jurídico' ? 'block' : 'none';
}
function validateClientForm() {
    const tipo = document.getElementById('client-tipo').value;
    if (tipo === 'Natural' && !document.getElementById('client-nombre').value.trim()) {
        Swal.fire({icon:'warning',title:'Nombre requerido',background:'#000',color:'#fff',confirmButtonColor:'#00bfff'}); return false;
    }
    if (tipo === 'Jurídico' && !document.getElementById('client-razon').value.trim()) {
        Swal.fire({icon:'warning',title:'Razón social requerida',background:'#000',color:'#fff',confirmButtonColor:'#00bfff'}); return false;
    }
    if (!document.getElementById('client-nitcc').value.trim()) {
        Swal.fire({icon:'warning',title:'NIT/CC requerido',background:'#000',color:'#fff',confirmButtonColor:'#00bfff'}); return false;
    }
    if (!document.getElementById('client-email').value.trim()) {
        Swal.fire({icon:'warning',title:'Email requerido',background:'#000',color:'#fff',confirmButtonColor:'#00bfff'}); return false;
    }
    return true;
}
function deleteClient(id = null) {
    Swal.fire({
        title: '¿Eliminar cliente?',
        text: 'Esta acción no se puede deshacer',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#23252b',
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar',
        background: '#000',
        color: '#fff',
    }).then((result) => {
        if (result.isConfirmed) {
            if (id) {
                // Eliminar desde card
                const form = document.createElement('form');
                form.method = 'post';
                form.action = 'router.php?action=deleteClient';
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'id';
                input.value = id;
                form.appendChild(input);
                document.body.appendChild(form);
                form.submit();
            } else {
                // Eliminar desde modal
                document.getElementById('clientForm').action = 'router.php?action=deleteClient';
                document.getElementById('clientForm').submit();
            }
        }
    });
}
document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('success') === 'create') {
        Swal.fire({icon:'success',title:'Cliente registrado',confirmButtonColor:'#00bfff',background:'#000',color:'#fff'});
    } else if (urlParams.get('success') === 'update') {
        Swal.fire({icon:'success',title:'Cliente actualizado',confirmButtonColor:'#28a745',background:'#000',color:'#fff'});
    } else if (urlParams.get('success') === 'delete') {
        Swal.fire({icon:'success',title:'Cliente eliminado',confirmButtonColor:'#dc3545',background:'#000',color:'#fff'});
    }
});
window.onclick = function(event) {
    let modal = document.getElementById('clientModal');
    if (event.target == modal) {
        closeClientModal();
    }
}
</script>
<?php include __DIR__ . '/../includes/footer.php'; ?>
<style>
.clientes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 2rem auto;
}
.section-title {
    font-size: 2.5rem;
    margin: 0;
    color: #00bfff;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
}
.client-deck {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.user-deck {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 30px;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
}
.user-card {
    background: #fff;
    color: #222;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 28px 32px;
    display: flex;
    align-items: center;
    min-width: 340px;
    max-width: 100%;
    width: 48%;
    position: relative;
    margin-bottom: 10px;
    gap: 24px;
}
.user-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 24px;
    border: 2px solid #eee;
    background: #f8f8f8;
}
.user-info {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.badge {
    position: absolute;
    right: 32px;
    top: 28px;
    padding: 8px 20px;
    border-radius: 14px;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
}
.badge-success {
    background: #28a745;
}
.user-actions {
    position: absolute;
    right: 32px;
    bottom: 24px;
    display: flex;
    gap: 14px;
}
.btn-edit, .btn-delete {
    padding: 7px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1em;
    color: #fff;
}
.btn-edit {
    background: #0099e5;
}
.btn-delete {
    background: #dc3545;
}
.modal-user {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.45);
    justify-content: center;
    align-items: center;
}
.modal-content-user {
    background: #fff;
    color: #222;
    border-radius: 18px;
    padding: 36px 38px 28px 38px;
    min-width: 350px;
    max-width: 900px;
    width: 90vw;
    max-height: 90vh;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
}
@media (max-width: 900px) {
    .modal-content-user {
        min-width: 90vw;
        max-width: 98vw;
        padding: 18px 8px 18px 8px;
    }
}
</style>
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