<?php
$idgym = $_GET['idg'];
$idSucursal = $_GET['idSucursal'];
$id_c = $_GET['idc'];

 // TRAEMOS LOS DATOS DEL SERVIDOR PARA LA CONEXION A LA BD
    include("../../../mysql_connection/mysql_data.php");
    $server_data = new serverData;
    $servername = $server_data -> getServerName();
    $username = $server_data -> getUserName();
    $password = $server_data -> getPassword();
 // **END
    
    // ===============================
    // CONEXIÓN BD CENTRAL
    // ===============================
    $conn = new mysqli($servername, $username, $password, "direct18_ProGymCloud");
    $conn->set_charset("utf8");
    $queryGym = "SELECT BaseDatos FROM gimnasios WHERE idGimnasio = ?";
    $stmtGym = $conn->prepare($queryGym);
    $stmtGym->bind_param("i", $idgym);
    $stmtGym->execute();
    $result = $stmtGym->get_result();
    if ($result->num_rows > 0) {
        $row = $result->fetch_assoc();
        $db = "direct18_" . $row['BaseDatos'];
    } else {
        // Manejo de error explícito
        throw new Exception("No se encontró el gimnasio");
    }
        
    // ===============================
    // HACEMOS LA CONEXION
    // ===============================
    $conn2 = new mysqli($servername,$username,$password, $db);
    mysqli_set_charset($conn2, 'utf8');
    //  FIN 

    
 // OBTENEMOS LOS DATOS BASICOS DEL CLIENTE
    $query2 = "SELECT CONCAT(Nombre, ' ', Apellidos) AS nombre_completo, Nombre, Email FROM socios WHERE idSocio = ?";
    $stmt2 = $conn2->prepare($query2);
    $stmt2->bind_param('i', $id_c);
    $stmt2->execute();
    $rs2 = $stmt2->get_result();
    $n2 = $rs2 -> num_rows;
    if($n2 > 0){
        $row2 = mysqli_fetch_array($rs2, MYSQLI_ASSOC);
        $name_c = $row2['Nombre'];
        $email_c = $row2['Email'];
        $name_completo = $row2['nombre_completo'];
    }
?>

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://openpay.s3.amazonaws.com/openpay.v1.min.js"></script>
<script type='text/javascript' src="https://openpay.s3.amazonaws.com/openpay-data.v1.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script></head>
<meta name="viewport" content="width=device-width, initial-scale=1">




<script type="text/javascript">
    // VARIABLES GLOBALES   
    var id_cliente_openpay, id_tarjeta_openpay, deviceSessionId;
    const idg = <?php echo json_encode($idgym) ?>;
    const idSucursal = <?php echo json_encode($idSucursal) ?>; 
    const db = <?php echo json_encode($db) ?>;
    const nombre_cliente = <?php echo json_encode($name_completo); ?>;
    const email_cliente = <?php echo json_encode($email_c); ?>;
    const idc = <?php echo json_encode($id_c ?? null); ?>;


    $(document).ready(function () {
    
    async function init() {

        try {
            // 1. OBTENER LLAVES DE INMEDIATO
            const keys = await obtenerKeys();
            if (keys && keys.length > 0) {
                OpenPay.setId(keys[0].openpay_id);
                OpenPay.setApiKey(keys[0].public_key);
                OpenPay.setSandboxMode(false); // Asegúrate que sea false solo en producción
                console.log("OpenPay configurado");
            } else {
                throw new Error("Llaves vacías");
            }
    
            // 2. LÓGICA DE CLIENTE
            if (!idc) throw new Error('ID de cliente inválido');
    
            const verificacion = await verificarCliente(idc);
            console.log("Resultado verificación:", verificacion);
    
            // CAMBIO AQUÍ: Leer las propiedades del objeto JSON
            if (verificacion && verificacion.success === true) {
                id_cliente_openpay = verificacion.id_cliente; 
                console.log("Cliente ya existe en BD:", id_cliente_openpay);
            } else {
                console.log("Cliente no existe, procediendo a crear uno nuevo...");
                id_cliente_openpay = await crearCliente(nombre_cliente, email_cliente, idc, db, idSucursal, idg);
            }
            
        } catch (e) {
            console.error("Error en init:", e);
            // Esto te dirá si es un error de JSON, de Red, o de lógica
            swal("Error de Diagnóstico", e.message, "error"); 
        }
        
        // ==========================================
        // 1. RESTRICCIONES DE ENTRADA (Input Masking)
        // ==========================================
        
        // Solo números en Tarjeta, Mes, Año y CVV
        $('#input-numero_tarjeta, #input-mes, #input-year, #input-cvv').on('input', function () {
            this.value = this.value.replace(/\D/g, '');
        });
    
        // Solo letras en Nombre
        $('#input-nombre_propietario').on('input', function () {
            this.value = this.value.replace(/[0-9]/g, '');
        });
        
        // Limpiar el rojo "al escribir"
        $(".form-control").on("input", function() {
            $(this).removeClass("is-invalid");
        });
        
        $('#input-numero_tarjeta').on('input', function (e) {
            // 1. Obtener solo los números eliminando cualquier guion previo
            let valor = e.target.value.replace(/\D/g, '');
            
            // 2. Insertar un guion cada 4 dígitos
            let formateado = valor.match(/.{1,4}/g)?.join('-') || "";
            
            // 3. Asignar el valor formateado al input (máximo 19 caracteres incluyendo guiones)
            e.target.value = formateado.substring(0, 19);
        });
        
        let cvvTimeout;

$('#input-cvv').on('input', function () {
    const input = $(this);
    
    // 1. Solo permitir números
    input.val(input.val().replace(/\D/g, ''));

    // 2. Limpiar el temporizador previo si el usuario sigue escribiendo
    clearTimeout(cvvTimeout);

    // 3. Mantener el tipo 'text' mientras escribe para que vea el número
    input.attr('type', 'text');

    // 4. Configurar el retraso para ocultar (500 milisegundos)
    cvvTimeout = setTimeout(function () {
        if (input.val().length > 0) {
            input.attr('type', 'password');
        }
    }, 500); 
});

// Opcional: Ocultar inmediatamente si el usuario cambia de campo (blur)
$('#input-cvv').on('blur', function () {
    if ($(this).val().length > 0) {
        $(this).attr('type', 'password');
    }
});
    }
    
    

    init();

    // =========================
    // BOTÓN DE ENVIO DE ENLANCE
    // =========================
    $(document).on("click", "#send-bttn", async function (e) {
        e.preventDefault();
        
        // Limpiar estados de error previos
        $(".form-control").removeClass("is-invalid");
        
        // OBTENEMOS EL VALOR LIMPIO PARA LA LÓGICA
            const numeroTarjetaLimpio = $("#input-numero_tarjeta").val().replace(/-/g, '');
        
            const fields = {
                nombre: $("#input-nombre_propietario"),
                numero: $("#input-numero_tarjeta"),
                mes: $("#input-mes"),
                year: $("#input-year"),
                cvv: $("#input-cvv")
            };
            
            let errores = [];
        
            if (fields.nombre.val().trim().length < 5) {
                fields.nombre.addClass("is-invalid");
                errores.push("Nombre inválido");
            }
        
            // VALIDAMOS CON EL NÚMERO LIMPIO
            if (!OpenPay.card.validateCardNumber(numeroTarjetaLimpio)) {
                fields.numero.addClass("is-invalid");
                errores.push("Número de tarjeta inválido");
            }
        
            if (!OpenPay.card.validateExpiry(fields.mes.val(), fields.year.val())) {
                fields.mes.addClass("is-invalid");
                fields.year.addClass("is-invalid");
                errores.push("Fecha inválida");
            }
        
            if (!OpenPay.card.validateCVC(fields.cvv.val())) {
                fields.cvv.addClass("is-invalid");
                errores.push("CVV inválido");
            }

        // Si hay errores, detener el proceso
        if (errores.length > 0) {
            swal("Atención", "Por favor revisa los campos marcados en rojo.", "warning");
            return;
        }
        
        // Si todo está bien, procedemos con OpenPay
        try {
            
            // =========================
            // OBTENER LLAVES OPENPAY
            // =========================
            const keys = await obtenerKeys();
            if (!keys || !keys.length) {
                throw new Error("No se pudieron obtener las llaves de OpenPay");
            }
            console.log(keys);

            OpenPay.setId(keys[0].openpay_id);
            OpenPay.setApiKey(keys[0].public_key);
            OpenPay.setSandboxMode(false); // true en pruebas

            // =========================
            // DEVICE SESSION
            // =========================
            
            // 1. Añadimos un id de sesión para el dispositovo (Se necesita para anexar una tarjeta el cliente)
            // Esto genera el ID de sesión para prevención de fraudes usando el formulario.
            deviceSessionId = OpenPay.deviceData.setup("payment-form", "deviceIdHiddenFieldName");
        
            // 2. CAMBIO CLAVE: Usamos .create() en lugar de .extractFormAndCreate()
            // Así evitamos que los guiones del input rompan la comunicación.
            OpenPay.token.create({
                "card_number": numeroTarjetaLimpio, // Enviamos el valor SIN guiones
                "holder_name": fields.nombre.val(),
                "expiration_year": fields.year.val(),
                "expiration_month": fields.mes.val(),
                "cvv2": fields.cvv.val()
            }, SuccessCallback, ErrorCallback);

            } catch (err) {
            setTimeout(() => {
            swal("Error", err.message, "error");
            console.log(err);
            }, 0);
        }
    });
    
        async function SuccessCallback(response) {
            const token_id = response.data.id;
            console.log("TOKEN:", token_id);
        
            const dataSend = {
                "cliente_id": id_cliente_openpay,
                "idgym": idg,
        		"ids": idSucursal,
        		"db": db
                
            };
        
            const res = await fetch("../enlace_proceso_openpay/openpay-obtener_tarjetas.php", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(dataSend)
            });
        
            const dataTarjetas = await res.json();
            console.log("Respuesta servidor tarjetas:", dataTarjetas);
        
            // DETERMINAR EL NÚMERO DE TARJETAS
            let numTarjetas = 0;
        
            if (Array.isArray(dataTarjetas)) {
                numTarjetas = dataTarjetas.length;
            } else if (dataTarjetas === 202) {
                numTarjetas = 0; // El error 202 significa que no hay registros
            } else if (dataTarjetas === 201) {
                swal("Error", "Hubo un problema al consultar tus tarjetas.", "error");
                document.getElementById("loaderPrincipal").classList.add('d-none');
                return;
            }
        
            // VALIDACIÓN DE LÍMITE (Menor a 3)
            if (numTarjetas < 3) {
                console.log("Tienes " + numTarjetas + " tarjetas; insertando nueva...");
                id_tarjeta_openpay = await agregarTarjetaCliente(deviceSessionId, token_id, id_cliente_openpay, idg, idSucursal, db);
                
                // Manejo de declinación
                if (id_tarjeta_openpay === "ERROR on the request: Card declined (k)") {
                    setTimeout(() => {
                        swal("Ups", "No se aceptó la tarjeta.", "warning");
                    }, 0);
                    document.getElementById("loaderPrincipal").classList.add('hidden');
                    return;
                }
            } else {
                setTimeout(() => {
                    swal("Ups", "Solamente se pueden tener 3 tarjetas.", "warning");
                }, 0);
                document.getElementById("loaderPrincipal").classList.add('d-none');
                return;
            }
        }
        
        function ErrorCallback(response) {
            
            // Log técnico (solo dev)
            console.error('OpenPay Error:', response);
        
            // Mensaje amigable
            let mensajeUsuario = 'Ocurrió un error al procesar la solicitud.';
        
            // Mensaje específico si existe
            if (response?.data?.description) {
                mensajeUsuario = response.data.description;
            } else if (response?.message) {
                mensajeUsuario = response.message;
            }
        
            swal({
                icon: 'warning',
                title: 'No se pudo completar la operación',
                text: mensajeUsuario,
                buttons: {
                    confirm: {
                        text: 'Entendido',
                        value: true
                    }
                }
            });
        }


    });
    
    // =========================
    // FUNCIONES AUXILIARES
    // =========================
    async function obtenerKeys() {
    const res = await fetch(`../enlace_proceso_openpay/mostrar_keys.php?idg=${idg}&idSucursal=${idSucursal}`);
    const text = await res.text();

    try {
        const data = JSON.parse(text);
        if (!res.ok) {
            throw new Error(data.error || "Error backend");
        }
        return data;
    } catch (e) {
        throw new Error(
            "JSON inválido recibido desde mostrar_keys.php:\n" + text
        );
    }
}

    
    //Funcion veriricar cliente
    async function verificarCliente (id_c){
        const dataSend = {
    		"id_c": id_c,
    		"idgym": idg,
    		"ids": idSucursal,
    		"db": db
    	}
    	console.log("verififcarcleinte", dataSend);
    	const res = await fetch("../enlace_proceso_openpay/verificar-cliente.php",{
    		method: "POST",
    		headers: { "Content-Type": "application/json" },
    		body: JSON.stringify(dataSend)
    	});
    	const data = await res.json();
    	return data;

    }
    // **END
    
    //Funcion para crear clientes
    async function crearCliente(nombre_c, email_c, id_c, db, id_sucursal, idgym) {
    try {
        const dataSend = {
            name: nombre_c,
            email: email_c,
            id_cliente: id_c,
            db: db,
            id_sucursal: id_sucursal,
            idg: idgym
        };

        const res = await fetch("../enlace_proceso_openpay/openpay-crear-cliente.php", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(dataSend)
        });

        // Leer JSON de respuesta
        const json = await res.json();

        if (json.success) {
            console.log("Cliente creado en OpenPay y BD:", json.customer_id);
            return json.customer_id; // Devuelve el ID de OpenPay
        } 
        if (!json.success) {
            console.warn("No se pudo insertar:", json.error);
        }

    } catch (error) {
        console.error("Error en crearCliente:", error);
        return null;
    }
}
    // **END
    
    // funcion para agregar la tarjeta al cliente
        async function agregarTarjetaCliente(deviceID, tokenID, clienteID) {
            const dataSend = { 
        device_session_id: deviceID, 
        token_id: tokenID, 
        id_cliente: clienteID, 
        idg: idg, 
        id_sucursal: idSucursal,
        db: db
    };
            console.log("agregarTarjeta - datos enviados:", dataSend);
        
            const loader = document.getElementById("loaderPrincipal");
            const form = document.getElementById("payment-form");
        
            if (loader) loader.classList.remove('d-none'); // Mostrar loader
        
            try {
                const res = await fetch("../enlace_proceso_openpay/openpay-anexar-tarjeta.php", {
                    method: "POST",
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(dataSend)
                });
        
                // Reemplaza la lógica de validación dentro de agregarTarjetaCliente con esto:
                
                let data = await res.json();
                console.log("agregarTarjeta - respuesta:", data);
                
                let mensajeUsuario = "";
                let exito = false;
                
                // 1. Validar si es el objeto de éxito que acabamos de configurar
                if (data.status === "success" || data.id_tarjeta) {
                    mensajeUsuario = "Tarjeta agregada correctamente";
                    exito = true;
                } 
                // 2. Validar si el PHP nos mandó un error controlado
                else if (data.error) {
                    mensajeUsuario = data.error;
                    exito = false;
                }
                // 3. Casos de error antiguos (por si acaso)
                else if (data === "201" || data === 201) {
                    mensajeUsuario = "No se pudo guardar la tarjeta en la base de datos";
                    exito = false;
                }
                
                // Mostrar alerta con SweetAlert
                swal({
                    icon: exito ? "success" : "warning",
                    title: exito ? "¡Éxito!" : "Atención",
                    text: mensajeUsuario,
                    buttons: { confirm: { text: "Entendido", value: true } }
                });
                
                if (exito && form) form.reset();
                if (loader) loader.classList.add('d-none');
                
                return data;
        
            } catch (error) {
                console.error("Error en agregarTarjetaCliente:", error);
                swal({
                    icon: "error",
                    title: "Error",
                    text: "No se pudo completar la operación",
                    buttons: { confirm: { text: "Entendido", value: true } }
                });
                if (loader) loader.classList.add('d-none'); // Ocultar loader
                return null;
            }
        }



    // ** END    
</script>


<link rel="stylesheet" href="styles-formulario.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="styles-loader.css">
<body>
      <!--Añadimos el loader-->
  <div id="loaderPrincipal" class="loadingPrincipal d-none">
    <div class="spinner-border text-light" style="width: 7rem; height: 7rem;" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
  <!--Aquí va todo el contenido de la página-->
  <div class="container py-5 card-pay-container">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header card-header-red">
                    Agrega una tarjeta de crédito o débito
                </div>
                <div class="card-body p-4">
                    
                    <div class="card-expl">
                        <div class="credit"><h4>Tarjetas de crédito</h4></div>
                        <div class="debit"><h4>Tarjetas de débito</h4></div>
                    </div>

                    <form id="payment-form">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <label>Nombre del titular</label>
                                <input type="text" id="input-nombre_propietario" class="form-control" placeholder="Como aparece en su tarjeta">
                            </div>
                            <div class="col-md-6">
                                <label>Número de tarjeta</label>
                                <input id="input-numero_tarjeta" class="form-control" type="tel" inputmode="numeric" autocomplete="cc-number" placeholder="XXXX-XXXX-XXXX-XXXX" data-openpay-card="card_number" required>

                            </div>

                            <div class="col-md-6">
                                <label>Fecha de expiración</label>
                                <div class="d-flex gap-2">
                                    <input id="input-mes" type="tel" inputmode="numeric" class="form-control" placeholder="MES (MM)" maxlength="2">
                                    <input id="input-year" type="tel" inputmode="numeric" class="form-control" placeholder="AÑO (YY)" maxlength="2">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label>Código de seguridad</label>
                                <div class="cvv-icon-container">
                                    <input type="tel" autocomplete="cc-csc" inputmode="numeric" id="input-cvv" class="form-control" placeholder="CVV" maxlength="4">
                                </div>
                            </div>
                        </div>

                        <div class="openpay-footer">
                            <div class="d-flex align-items-center">
                                <div class="openpay-logo-section">
                                    <small>Transacciones realizadas vía:</small>
                                </div>
                                <div class="security-shield">
                                    Tus pagos se realizan de forma segura con encriptación de 256 bits
                                </div>
                            </div>
                            <div class="mt-3 mt-md-0">
                                <button type="button" id="send-bttn" class="btn btn-add-card">Agregar tarjeta</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>