<?php
session_start();
// Verificar si el usuario está logueado y tiene un rol válido
if (!isset($_SESSION['usuario_id']) || empty($_SESSION['usuario_id']) || 
    !in_array($_SESSION['rol'], ['admin', 'vendedor', 'cobrador'])) {
    header('Location: ../login.php');
    exit;
}

require_once '../includes/config.php';
require_once '../includes/db.php';
require_once '../includes/theme_only.php'; 


$db = new Database();
$mensaje = '';
$seccion = null;

// Obtener configuración
$stmt = $db->query("SELECT color_principal, color_secundario, favicon FROM configuracion");
$config = $stmt->fetch(PDO::FETCH_ASSOC);

try {
    // Manejar eliminación de cliente
    if (isset($_POST['eliminar_id'])) {
        if ($_SESSION['rol'] !== 'admin') {
            echo json_encode(['error' => 'No tienes permisos para eliminar clientes']);
            exit;
        }
        $idEliminar = $_POST['eliminar_id'];
        
        // Verificar si el cliente tiene ventas asociadas
        $stmt = $db->prepare("SELECT COUNT(*) as total FROM ventas WHERE cliente_id = ?");
        $stmt->execute([$idEliminar]);
        $result = $stmt->fetch(PDO::FETCH_ASSOC);
        
        if ($result['total'] > 0) {
            echo json_encode(['error' => 'No se puede eliminar el cliente porque tiene ventas asociadas']);
            exit;
        }
        
        // Si no tiene ventas, proceder con la eliminación
        $stmt = $db->prepare("DELETE FROM clientes WHERE id_cliente = ?");
        $stmt->execute([$idEliminar]);
        
        if ($_SERVER['HTTP_X_REQUESTED_WITH'] ?? '' === 'XMLHttpRequest') {
            echo json_encode(['success' => true]);
            exit;
        }
    }

    // Verificamos si hay clientes de prueba solo si es necesario
    $count = $db->query("SELECT COUNT(*) as total FROM clientes")->fetch(PDO::FETCH_ASSOC);
    if ($count['total'] == 0) {
        $db->query("INSERT INTO clientes (tipo_documento, numero_documento, nombre, apellidos, direccion, telefono_principal, email) 
                   VALUES ('CI', '123456', 'Cliente', 'De Prueba', 'Calle Principal 123', '555-0123', 'cliente@ejemplo.com')");
    }

    // Preparar la búsqueda y filtros
    $busqueda = isset($_GET['buscar']) ? trim($_GET['buscar']) : '';
    $filtroMorosos = isset($_GET['morosos']) ? true : false;
    $whereClause = '';
    
    if (!empty($busqueda) || $filtroMorosos) {
        $whereClause = " WHERE ";
        $condiciones = [];
        
        if (!empty($busqueda)) {
            $condiciones[] = "
                (tipo_documento LIKE :busqueda OR 
                numero_documento LIKE :busqueda OR 
                nombre LIKE :busqueda OR 
                apellidos LIKE :busqueda OR 
                razon_social LIKE :busqueda OR 
                direccion LIKE :busqueda OR 
                telefono_principal LIKE :busqueda OR 
                telefono_secundario LIKE :busqueda OR 
                email LIKE :busqueda OR 
                ciudad LIKE :busqueda OR
                estado LIKE :busqueda OR
                categoria LIKE :busqueda)";
        }
        
        if ($filtroMorosos) {
            $condiciones[] = "EXISTS (
                SELECT 1 FROM cuotas cu 
                WHERE cu.cliente_id = c.id_cliente 
                AND cu.estado = 'PENDIENTE' 
                AND cu.fecha_vencimiento < CURDATE()
                AND cu.tercer_aviso IS NOT NULL
            )";
        }
        
        $whereClause .= implode(' AND ', $condiciones);
    }

    // Modificamos la consulta principal para incluir información de deuda cuando es vista de morosos
    if ($filtroMorosos) {
        $sql = "SELECT DISTINCT
            c.id_cliente, 
            CONCAT(c.tipo_documento, ': ', c.numero_documento) as documento,
            c.nombre,
            c.apellidos,
            COALESCE(c.razon_social, '') as razon_social,
            c.telefono_principal,
            c.email,
            c.estado,
            c.categoria,
            COUNT(cu.id) as cuotas_vencidas,
            SUM(cu.monto) as deuda_total
        FROM clientes c
        INNER JOIN cuotas cu ON cu.cliente_id = c.id_cliente
        WHERE cu.estado = 'PENDIENTE' 
        AND cu.fecha_vencimiento < CURDATE()
        " . (!empty($busqueda) ? "AND (
            c.tipo_documento LIKE :busqueda OR 
            c.numero_documento LIKE :busqueda OR 
            c.nombre LIKE :busqueda OR 
            c.apellidos LIKE :busqueda OR 
            c.razon_social LIKE :busqueda OR 
            c.direccion LIKE :busqueda OR 
            c.telefono_principal LIKE :busqueda OR 
            c.telefono_secundario LIKE :busqueda OR 
            c.email LIKE :busqueda OR 
            c.ciudad LIKE :busqueda OR
            c.estado LIKE :busqueda OR
            c.categoria LIKE :busqueda
        )" : "") . "
        GROUP BY c.id_cliente
        HAVING COUNT(cu.id) > 0
        ORDER BY deuda_total DESC";
    } else {
        $sql = "SELECT 
            c.id_cliente, 
            CONCAT(c.tipo_documento, ': ', c.numero_documento) as documento,
            c.nombre,
            c.apellidos,
            COALESCE(c.razon_social, '') as razon_social,
            c.telefono_principal,
            c.email,
            c.estado,
            c.categoria
        FROM clientes c
        " . ($whereClause ? $whereClause : "") . "
        ORDER BY c.id_cliente DESC";
    }

    $stmt = $db->prepare($sql);
    
    if (!empty($busqueda)) {
        $busquedaParam = "%{$busqueda}%";
        $stmt->bindParam(':busqueda', $busquedaParam, PDO::PARAM_STR);
    }
    
    $stmt->execute();
    $clientes = $stmt;

} catch (PDOException $e) {
    echo "Error en la base de datos: " . $e->getMessage();
    exit;
}
echo getThemeCSS();
?>

<!DOCTYPE html>
<html lang="es">
<head>
<?php
    // Modo oscuro
    require_once '../includes/dark_mode.php';
    ?>
    <meta name="color-scheme" content="light dark">
    <?php echo getDarkModeStyles(); ?>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clientes</title>
    <link rel="shortcut icon" href="../uploads/config/<?php echo $config['favicon']; ?>" type="image/x-icon">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        :root {
            --color-primary: <?php echo $config['color_principal']; ?>;
            --color-secondary: <?php echo $config['color_secundario']; ?>;
        }
        
        .titulo-principal {
            color: var(--color-primary);
            font-weight: bold;
            font-size: 1.5rem; /* Reducción del tamaño del título */
            margin: 0; /* Asegura que no haya márgenes */
            display: inline-flex;
            align-items: center;
        }
        
        .btn-custom-primary {
            background-color: var(--color-primary);
            border-color: var(--color-primary);
            color: #fff;
        }
        
        .btn-custom-primary:hover {
            background-color: var(--color-primary);
            filter: brightness(90%);
            color: #fff;
        }
        
        .btn-custom-secondary {
            background-color: var(--color-secondary);
            border-color: var(--color-secondary);
            color: #fff;
        }
        
        .btn-custom-secondary:hover {
            background-color: var(--color-secondary);
            filter: brightness(90%);
            color: #fff;
        }

        .table thead th {
            background-color: var(--color-primary);
            color: #fff;
            padding: 0.5rem; /* Reducido de 1rem */
            font-size: 0.9rem; /* Texto ligeramente más pequeño */
            vertical-align: middle;
        }

        .estado-activo {
            color: var(--color-primary);
            font-weight: bold;
        }

        .categoria-vip {
            color: var(--color-secondary);
            font-weight: bold;
        }

        .icon-menu {
            width: 36px;  /* Reducido de 40px a 36px */
            height: 36px; /* Reducido de 40px a 36px */
            filter: none;
        }

        .container-fluid {
            padding-left: 0.5rem; /* Reducido de 1rem */
            padding-right: 1rem;
        }

        .btn-menu {
            padding: 0.5rem;
            margin: 0; /* Reset de todos los márgenes */
            display: flex;
            align-items: center;
            margin-left: -0.65rem; /* Mover el botón más a la izquierda */
        }

        .header-container {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 0rem; /* Reducido de 1.5rem */
            padding-left: 0; /* Eliminado el padding izquierdo */
        }

        /* Ajustar el espacio del contenedor del botón Nuevo */
        .d-flex.justify-content-between {
            margin-bottom: 1rem; /* Reducido de 3rem */
        }

        /* Ajustes para los botones de acción */
        .btn-group .btn {
            margin-right: 0.5rem; /* Espaciado entre botones */
        }

        .btn-group .btn:last-child {
            margin-right: 0;
        }

        .table-responsive {
            overflow-x: auto;
        }

        /* Ajustes de la tabla para todas las pantallas */
        .table {
            min-width: 100%;
            white-space: nowrap;
        }

        /* Anchos específicos para las columnas */
        .table th, .table td {
            min-width: 80px; /* Ancho mínimo base */
        }

        .table th:nth-child(1), 
        .table td:nth-child(1) { /* ID */
            min-width: 50px;
            width: 5%;
        }

        .table th:nth-child(2),
        .table td:nth-child(2) { /* Documento */
            min-width: 120px;
            width: 15%;
        }

        .table th:nth-child(3),
        .table td:nth-child(3) { /* Nombre */
            min-width: 120px;
            width: 15%;
        }

        .table th:nth-child(4),
        .table td:nth-child(4) { /* Apellidos */
            min-width: 140px;
            width: 20%;
        }

        /* Ajustes específicos para móvil */
        @media (max-width: 768px) {
            .table {
                font-size: 0.85rem; /* Texto ligeramente más pequeño en móvil */
            }

            .table td, .table th {
                padding: 0.5rem 0.3rem; /* Padding más compacto */
            }

            .actions-column {
                min-width: 110px; /* Ancho mínimo para botones */
                width: 110px;
            }

            /* Ocultar scrollbar pero mantener funcionalidad */
            .table-responsive::-webkit-scrollbar {
                height: 4px;
            }

            .table-responsive::-webkit-scrollbar-track {
                background: #f1f1f1;
            }

            .table-responsive::-webkit-scrollbar-thumb {
                background: var(--color-primary);
                border-radius: 2px;
            }
        }

        /* Estilos para el buscador */
        .form-control {
            border-color: var(--color-primary);
        }
        
        .form-control:focus {
            border-color: var(--color-secondary);
            box-shadow: 0 0 0 0.2rem rgba(var(--color-secondary-rgb), 0.25);
        }

        @media (max-width: 768px) {
            .d-flex.gap-2 {
                gap: 0.5rem!important;
            }
            
            .form-control {
                font-size: 0.9rem;
                padding: 0.375rem 0.5rem;
            }
        }

        /* Ajustes para el contenedor de acciones y búsqueda */
        .d-flex.gap-2.flex-grow-1 {
            max-width: 100%;
        }

        .form-control {
            border-color: var(--color-primary);
            max-width: 300px; /* Limitar el ancho del campo de búsqueda */
            width: 100%;
        }

        /* Ajustes para móvil */
        @media (max-width: 768px) {
            .form-control {
                max-width: 200px; /* Ancho máximo más pequeño en móvil */
            }
            
            .d-flex.gap-2 {
                gap: 0.5rem!important;
            }
        }

        /* Ajustes para el contenedor de acciones y búsqueda */
        .actions-container {
            display: flex;
            gap: 1.5rem; /* Aumentado el espacio entre elementos */
            align-items: center;
            margin-bottom: 1rem;
        }

        .search-container {
            display: flex;
            gap: 0.5rem;
        }

        .form-control {
            border-color: var(--color-primary);
            width: 300px; /* Ancho fijo en desktop */
        }

        /* Ajustes específicos para móvil */
        @media (max-width: 768px) {
            .actions-container {
                flex-direction: column;
                align-items: stretch;
                gap: 1rem;
            }

            .search-container {
                width: 100%;
            }

            .form-control {
                width: 100%; /* En móvil ocupa todo el ancho disponible */
                max-width: none;
            }

            .btn-custom-primary {
                width: 100%; /* Botón nuevo a todo el ancho en móvil */
            }
        }

        /* Ajustes para botones y sus contenidos */
        .btn-custom-primary,
        .btn-custom-secondary {
            color: white !important;
        }

        .btn-custom-primary:hover,
        .btn-custom-secondary:hover {
            color: white !important;
        }

        /* Ajustes para los iconos dentro de los botones (excepto el menú) */
        .btn:not(.btn-menu) img.icon,
        .btn-group .btn img {
            filter: brightness(0) invert(1) !important;
        }

        /* Asegurar que el texto dentro de los botones sea blanco */
        .btn span {
            color: white !important;
        }

        /* Mantener el color original del icono del menú */
        .btn-menu img.icon-menu {
            filter: none !important;
        }

        /* Ajustes para los botones en la tabla */
        .actions-column .btn-group .btn {
            color: white !important;
        }

        .actions-column .btn-group .btn img {
            filter: brightness(0) invert(1) !important;
        }

        @media (max-width: 768px) {
            .btn:not(.btn-menu) span {
                color: white !important;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid mt-4">
        <div class="row">
            <div class="col-12">
                <?php if (isset($_GET['mensaje'])) { ?>
                    <div class="alert alert-<?php echo ($_GET['tipo'] ?? 'success'); ?> alert-dismissible fade show" role="alert">
                        <?php echo htmlspecialchars_decode(urldecode($_GET['mensaje'])); ?>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                <?php } ?>
                <div class="header-container">
                    <a href="dashboard.php" class="btn btn-menu" title="Ir al Dashboard">
                        <img src="icons/menu.svg" alt="Menú" class="icon-menu" style="filter: none; fill: <?php echo $config['color_secundario']; ?>">
                    </a>
                    <h2 class="titulo-principal mb-0">Listado de Clientes</h2>
                </div>
                <div class="actions-container">
                    <?php if ($_SESSION['rol'] === 'admin'): ?>
                    <a href="registrar-cliente.php" class="btn btn-custom-primary me-2">
                        <img src="icons/plus.svg" alt="Nuevo" class="icon"> 
                        <span>Nuevo Cliente</span>
                    </a>
                    <?php endif; ?>
                    <a href="?<?php echo $filtroMorosos ? '' : 'morosos=1'; ?>" 
                       class="btn <?php echo $filtroMorosos ? 'btn-custom-primary' : 'btn-custom-secondary'; ?> me-2">
                        <img src="icons/person.svg" alt="Morosos" class="icon" style="filter: brightness(0) invert(1);"> 
                        <span>Morosos</span>
                    </a>
                    <a href="javascript:void(0)" 
                       onclick="enviarAvisosMorosos()" 
                       class="btn btn-custom-secondary me-2">
                        <img src="icons/whatsapp.svg" alt="Enviar Mensajes" class="icon" style="filter: brightness(0) invert(1);"> 
                        <span>Enviar Avisos a Morosos</span>
                    </a>
                    <form action="" method="GET" class="search-container" id="searchForm">
                        <?php if($filtroMorosos): ?>
                            <input type="hidden" name="morosos" value="1">
                        <?php endif; ?>
                        <input type="search" 
                               name="buscar" 
                               class="form-control" 
                               placeholder="Buscar cliente..." 
                               value="<?php echo htmlspecialchars($busqueda); ?>"
                               oninput="realizarBusqueda(this.value)">
                    </form>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Documento</th>
                                <th>Nombre</th>
                                <th>Apellidos</th>
                                <th class="d-none d-md-table-cell">Teléfono</th>
                                <th class="d-none d-md-table-cell">Email</th>
                                <th class="d-none d-md-table-cell">Estado</th>
                                <th class="d-none d-md-table-cell">Categoría</th>
                                <th class="actions-column text-end">Acciones</th>
                            </tr>
                        </thead>
                        <tbody id="tablaClientes">
                            <?php while($row = $clientes->fetch(PDO::FETCH_ASSOC)) { ?>
                            <tr onclick="verCliente(<?php echo $row['id_cliente']; ?>)" style="cursor: pointer;">
                                <td><?php echo htmlspecialchars($row['id_cliente'] ?? ''); ?></td>
                                <td><?php echo htmlspecialchars($row['documento'] ?? ''); ?></td>
                                <td><?php echo htmlspecialchars($row['nombre'] ?? ''); ?></td>
                                <td><?php echo htmlspecialchars($row['apellidos'] ?? ''); ?></td>
                                <td class="d-none d-md-table-cell"><?php echo htmlspecialchars($row['telefono_principal'] ?? ''); ?></td>
                                <td class="d-none d-md-table-cell"><?php echo htmlspecialchars($row['email'] ?? ''); ?></td>
                                <td class="d-none d-md-table-cell">
                                    <span class="<?php echo $row['estado'] === 'Activo' ? 'estado-activo' : ''; ?>">
                                        <?php echo htmlspecialchars($row['estado'] ?? ''); ?>
                                    </span>
                                </td>
                                <td class="d-none d-md-table-cell">
                                    <span class="<?php echo $row['categoria'] === 'VIP' ? 'categoria-vip' : ''; ?>">
                                        <?php echo htmlspecialchars($row['categoria'] ?? ''); ?>
                                    </span>
                                </td>
                                <td class="actions-column text-end text-nowrap">
                                    <div class="btn-group" role="group" aria-label="Acciones" style="float: right;">
                                        <?php if ($_SESSION['rol'] === 'admin'): ?>
                                            <a href="editar-cliente.php?id=<?php echo htmlspecialchars($row['id_cliente'] ?? ''); ?>" 
                                               class="btn btn-custom-secondary btn-sm me-1" 
                                               onclick="event.stopPropagation()"
                                               title="Editar">
                                                <img src="icons/pencil.svg" alt="Editar" class="icon">
                                                <span class="d-none d-md-inline">Editar</span>
                                            </a>
                                            <a href="javascript:void(0)" 
                                               onclick="event.stopPropagation(); eliminarCliente(<?php echo htmlspecialchars($row['id_cliente'] ?? ''); ?>, '<?php echo htmlspecialchars($row['nombre'] ?? '', ENT_QUOTES); ?>')"
                                               class="btn btn-custom-primary btn-sm" 
                                               title="Eliminar">
                                                <img src="icons/trash.svg" alt="Eliminar" class="icon">
                                                <span class="d-none d-md-inline">Eliminar</span>
                                            </a>
                                        <?php endif; ?>
                                        <a href="ver-cliente.php?id=<?php echo htmlspecialchars($row['id_cliente'] ?? ''); ?>" 
                                           class="btn btn-custom-secondary btn-sm" 
                                           onclick="event.stopPropagation()"
                                           title="Ver">
                                            <img src="icons/eye.svg" alt="Ver" class="icon">
                                            <span class="d-none d-md-inline">Ver</span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            <?php } ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        function verCliente(id) {
            window.location.href = 'ver-cliente.php?id=' + id;
        }
        
        function eliminarCliente(id, nombre) {
            <?php if ($_SESSION['rol'] !== 'admin'): ?>
                alert('No tienes permisos para eliminar clientes');
                return;
            <?php endif; ?>
            if (confirm('¿Está seguro de eliminar el cliente "' + nombre + '"?')) {
                fetch('clientes.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: 'eliminar_id=' + id
                })
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        alert(data.error);
                    } else {
                        // Recargar con los mismos parámetros de búsqueda actuales
                        window.location.href = window.location.href;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error al eliminar el cliente');
                });
            }
        }
        
        let timeoutId;
        
        function realizarBusqueda(texto) {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => {
                const morososParam = new URLSearchParams(window.location.search).get('morosos');
                let url = 'buscar-clientes.php?buscar=' + encodeURIComponent(texto);
                if (morososParam) {
                    url += '&morosos=1';
                }
                
                fetch(url)
                    .then(response => response.text())
                    .then(html => {
                        document.getElementById('tablaClientes').innerHTML = html;
                    })
                    .catch(error => console.error('Error:', error));
            }, 300);
        }

        function enviarAvisosMorosos() {
            if(confirm('¿Está seguro de enviar mensajes a todos los clientes morosos?')) {
                window.location.href = 'enviar_avisos_morosos.php';
            }
        }
    </script>
</body>
</html>
