<?php
session_start();
require_once 'Connections/conexionabm.php';

// Verificar login
$isLogged = isset($_SESSION['id_cliente']);
if ($isLogged) {
    $idCliente = (int)$_SESSION['id_cliente'];
    if (!empty($_SESSION['nombre_cliente'])) {
        $nombreCliente = $_SESSION['nombre_cliente'];
    } elseif (!empty($_SESSION['usuario_cliente'])) {
        $nombreCliente = $_SESSION['usuario_cliente'];
    } else {
        $nombreCliente = 'Cliente';
    }
} else {
    // Si no está logueado, lo mandamos a login
    header('Location: login');
    exit;
}

$error = null;
$success = false;
$factura_generada = null;

// Flujo 1: viene desde carrito con items + total
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['items']) && isset($_POST['total']) && !isset($_POST['tarjeta_num'])) {
    $itemsJson = $_POST['items'];
    $total = (float)$_POST['total'];

    $items = json_decode($itemsJson, true);
    if (!is_array($items) || empty($items)) {
        header('Location: carrito');
        exit;
    }

    $_SESSION['checkout_items'] = $items;
    $_SESSION['checkout_total'] = $total;
}

// Flujo 2: envío de datos de tarjeta
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['tarjeta_num'])) {

    if (empty($_SESSION['checkout_items']) || !isset($_SESSION['checkout_total'])) {
        header('Location: carrito');
        exit;
    }

    $items       = $_SESSION['checkout_items'];
    $total_gral  = (float)$_SESSION['checkout_total'];

    $tarjeta_num    = trim($_POST['tarjeta_num'] ?? '');
    $tarjeta_expira = trim($_POST['tarjeta_expira'] ?? '');
    $tarjeta_codigo = trim($_POST['tarjeta_codigo'] ?? '');

    if ($tarjeta_num === '' || $tarjeta_expira === '' || $tarjeta_codigo === '') {
        $error = "Completa todos los datos de la tarjeta.";
    } else {

        // DEMO: aquí iría la integración real con pasarela de pago.
        // Si la pasarela responde OK, procedemos a registrar la factura.

        $fecha_hoy  = date('Y-m-d');
        $hora_ahora = date('Y-m-d H:i:s');

        // Por simplicidad:
        $sub_total  = $total_gral;  // Si luego calculas ITBIS separado, ajustas aquí
        $total_itbi = 0.00;
        $tipo_pago  = 'TC';
        $ttarjeta   = $total_gral;
		$status		= 0;

        // Insert fact_header_w
        $sqlH = "INSERT INTO fact_header_w
            (client_cod, fecha_emi, sub_total, total_itbi, tipo_pago, total_gral,
             usuario_ua, fecha_ua, hora, ttarjeta, tarjeta_num, tarjeta_expira, tarjeta_codigo, status)
            VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?)";

        $stmtH = $mysqli->prepare($sqlH);
        if (!$stmtH) {
            $error = "Error al preparar encabezado: " . $mysqli->error;
        } else {
            // Tipos: i,s,d,d,s,d,i,s,s,d,s,s,s
            $stmtH->bind_param(
                'isddsdissdssss',
                $idCliente,
                $fecha_hoy,
                $sub_total,
                $total_itbi,
                $tipo_pago,
                $total_gral,
                $idCliente,
                $fecha_hoy,
                $hora_ahora,
                $ttarjeta,
                $tarjeta_num,
                $tarjeta_expira,
                $tarjeta_codigo,
				$status
            );

            if ($stmtH->execute()) {
                $num_fact = $stmtH->insert_id;

                // Insert fact_detail_w
                $sqlD = "INSERT INTO fact_detail_w
                    (num_fact, prod_cod, cantidad, total, precio, totalitbis, usuario_ua, fecha_ua)
                    VALUES (?,?,?,?,?,?,?,?)";
                $stmtD = $mysqli->prepare($sqlD);

                if (!$stmtD) {
                    $error = "Error al preparar detalle: " . $mysqli->error;
                } else {
                    $okDetalle = true;
                    foreach ($items as $it) {
                        $prod_cod = $it['id'];
                        $cantidad = (float)($it['qty'] ?? 1);
                        $precio   = (float)($it['precio'] ?? 0);
                        $total_r  = $precio * $cantidad;
                        $total_itbis_r = 0.00; // Ajustar si llevas ITBIS por línea

                        // Tipos: i,s,d,d,d,d,i,s
                        $stmtD->bind_param(
                            'isddddis',
                            $num_fact,
                            $prod_cod,
                            $cantidad,
                            $total_r,
                            $precio,
                            $total_itbis_r,
                            $idCliente,
                            $fecha_hoy
                        );

                        if (!$stmtD->execute()) {
                            $okDetalle = false;
                            $error = "Error al insertar detalle: " . $stmtD->error;
                            break;
                        }
                    }

                    if ($okDetalle) {
                        $success = true;
                        $factura_generada = $num_fact;
                        // Limpiar datos de checkout en servidor
                        unset($_SESSION['checkout_items'], $_SESSION['checkout_total']);
                    }
                }
            } else {
                $error = "Error al guardar el encabezado: " . $stmtH->error;
            }
        }
    }
}

// Si no hay datos de checkout y no es success, redirigir
if (!$success && (empty($_SESSION['checkout_items']) || !isset($_SESSION['checkout_total']))) {
    header('Location: carrito');
    exit;
}

$itemsResumen = $_SESSION['checkout_items'] ?? [];
$totalResumen = $_SESSION['checkout_total'] ?? 0;
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Pagar con tarjeta - Supermercado Dragón de Oro</title>
  <style>
:root{
  --rojo:#ff0000;
  --mamey:#e1552f;
  --mamey-dark:#c14425;
  --gris:#f3f4f6;
  --gris-borde:#e5e7eb;
  --texto:#111827;
  --blanco:#ffffff;
  --header-h:118px;
}

/* Contenedor principal */
.pago-main{
  max-width:1100px;
  margin:0 auto;
  padding:calc(var(--header-h) + 32px) 16px 40px;
  display:grid;
  grid-template-columns:1.7fr 1.3fr;
  gap:22px;
  align-items:flex-start;
}

/* Columna izquierda: imagen + formulario */
.pago-left{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Imagen de tarjetas (hero pago) */
.pago-hero{
  background:#f9fafb;
  border-radius:16px;
  padding:14px 14px 8px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
  border:1px solid var(--gris-borde);
}
.pago-hero img{
  height:54px;
  width:auto;
}
.pago-hero-text{
  font-size:13px;
  color:#4b5563;
}
.pago-hero-text b{
  color:#111827;
}

/* Formulario de tarjeta */
.pago-card{
  background:#fff;
  border-radius:16px;
  padding:18px 16px 16px;
  box-shadow:0 14px 30px rgba(15,23,42,.10);
  border:1px solid var(--gris-borde);
}
.pago-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:4px;
  color:#111827;
}
.pago-sub{
  font-size:12px;
  color:#6b7280;
  margin-bottom:12px;
}
.pago-group{
  margin-bottom:9px;
}
.pago-group label{
  display:block;
  font-size:11px;
  margin-bottom:3px;
  color:#4b5563;
}
.pago-group input{
  width:100%;
  padding:8px 9px;
  border-radius:8px;
  border:1px solid var(--gris-borde);
  font-size:13px;
  outline:none;
}
.pago-group input:focus{
  border-color:var(--mamey);
  box-shadow:0 0 0 1px rgba(225,85,47,.10);
}
.pago-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.btn-pago{
  width:100%;
  margin-top:10px;
  padding:10px 14px;
  border-radius:12px;
  border:none;
  background:var(--mamey);
  color:#fff;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
}
.btn-pago:hover{
  background:var(--mamey-dark);
}

/* Columna derecha: resumen */
.resumen-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Título fuera de la caja */
.resumen-title{
  font-size:14px;
  font-weight:700;
  color:#111827;
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* Caja con borde gris claro */
.resumen-box{
  background:#fff;
  border-radius:14px;
  border:1px solid var(--gris-borde);
  padding:10px 12px;
  box-shadow:0 8px 18px rgba(15,23,42,.04);
  font-size:12px;
  color:#4b5563;
}
.resumen-item{
  display:flex;
  justify-content:space-between;
  margin:2px 0;
}
.resumen-item span:first-child{
  color:#6b7280;
}
.resumen-item span:last-child{
  font-weight:600;
  color:#111827;
}

/* Total fuera de la caja, debajo */
.total-pagar-label{
  margin-top:4px;
  font-size:13px;
  color:#6b7280;
}
.total-pagar{
  font-size:20px;
  font-weight:800;
  color:#111827;
}

/* Responsive */
@media(max-width:900px){
  .pago-main{
    grid-template-columns:1fr;
    padding:calc(var(--header-h) + 26px) 12px 32px;
  }
}

    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family:Arial,sans-serif;
      color:var(--texto);
      background:#F9FBFB;
    }
    /* HEADER igual al index */
    header{
      position:fixed;top:0;left:0;right:0;z-index:1000;
      background:var(--blanco);box-shadow:0 1px 6px rgba(0,0,0,.08);
    }
    .topbar{
      background:var(--rojo);color:#fff;
      display:grid;
      grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr) auto;
      align-items:center;gap:16px;
      padding:6px 24px;font-size:13px;
    }
    .top-left{display:flex;align-items:center;gap:20px;white-space:nowrap;}
    .top-left span{display:flex;align-items:center;gap:6px;}
    .top-search{display:flex;justify-content:center;}
    .top-search input{
      width:100%;max-width:420px;height:30px;
      border-radius:999px;border:none;
      padding:0 14px;font-size:13px;outline:none;color:#111;
    }
    .top-right{display:flex;justify-content:flex-end;gap:14px;font-size:16px;}
    .top-right a{color:#fff;text-decoration:none;}

    .nav-white{
      background:#fff;
      display:flex;align-items:center;justify-content:space-between;
      padding:12px 40px 10px;
    }
    .logo-wrap{display:flex;align-items:center;gap:10px;}
    .logo-wrap img{height:55px;width:auto;display:block;}

    .main-menu{
      display:flex;align-items:center;gap:26px;
      font-size:14px;font-weight:500;
      text-transform:uppercase;letter-spacing:.4px;
    }
    .main-menu a{
      color:#111;text-decoration:none;
      padding-bottom:4px;border-bottom:2px solid transparent;
    }
    .main-menu a:hover,
    .main-menu a.activo{
      color:var(--mamey);border-bottom-color:var(--mamey);
    }

    .cuenta-wrap{position:relative;display:inline-flex;align-items:center;}
    .btn-cuenta{
      background:transparent;border:none;cursor:pointer;
      font:inherit;color:#111;text-transform:uppercase;
      display:flex;align-items:center;gap:4px;
      padding-bottom:4px;border-bottom:2px solid transparent;
    }
    .btn-cuenta:hover{
      color:var(--mamey);border-bottom-color:var(--mamey);
    }
    .dropdown{
      position:absolute;right:0;top:120%;
      width:210px;background:#fff;
      border:1px solid var(--gris-borde);
      border-radius:12px;
      box-shadow:0 16px 35px rgba(0,0,0,.14);
      display:none;overflow:hidden;z-index:1200;
    }
    .dropdown a{
      display:block;padding:10px 14px;
      text-decoration:none;color:#111;
      font-weight:600;font-size:13px;
    }
    .dropdown a:hover{background:#f9fafb;}
    .dropdown .divider{height:1px;background:#e5e7eb;}

    .cart-mini-wrap{
      display:flex;align-items:center;gap:6px;cursor:pointer;
    }
    .cart-mini-wrap img{
      height:22px;width:auto;display:block;
    }
    .cart-mini-label{
      font-size:11px;color:#111;
    }
    .cart-mini-count{
      font-size:12px;font-weight:700;color:var(--mamey);
    }
    .cart-mini-total{
      font-size:10px;font-weight:600;color:#111;
    }

    /* CONTENEDOR PAGO */
    main{
      max-width:900px;
      margin:0 auto;
      padding:calc(var(--header-h) + 40px) 16px 40px;
      min-height:calc(100vh - var(--header-h) - 180px);
      display:flex;
      justify-content:center;
      align-items:flex-start;
    }
    .pay-card{
      width:100%;
      max-width:540px;
      background:#fff;
      border-radius:18px;
      padding:20px 20px 24px;
      border:1px solid var(--gris-borde);
      box-shadow:0 18px 40px rgba(15,23,42,.18);
      animation:slideUp 0.6s ease-out;
    }
    .pay-title{
      font-size:20px;
      font-weight:700;
      margin-bottom:4px;
      text-align:left;
      color:#111827;
    }
    .pay-sub{
      font-size:13px;
      color:#6b7280;
      margin-bottom:12px;
    }
    .resumen-mini{
      font-size:12px;
      color:#4b5563;
      background:#f9fafb;
      border-radius:10px;
      padding:8px 10px;
      margin-bottom:14px;
      max-height:120px;
      overflow-y:auto;
    }
    .resumen-mini ul{
      margin:4px 0 0 16px;
      padding:0;
    }
    .resumen-mini li{
      margin-bottom:2px;
    }
    .total-pay{
      margin-top:6px;
      font-weight:800;
      font-size:16px;
      color:#111827;
    }
    .form-group{
      margin-bottom:10px;
    }
    .form-group label{
      display:block;
      font-size:12px;
      color:#4b5563;
      margin-bottom:3px;
    }
    .form-group input{
      width:100%;
      padding:8px 9px;
      border-radius:8px;
      border:1px solid var(--gris-borde);
      font-size:13px;
      outline:none;
    }
    .form-group input:focus{
      border-color:var(--mamey);
      box-shadow:0 0 0 1px rgba(225,85,47,.12);
    }
    .btn-pay{
      width:100%;
      margin-top:10px;
      background:var(--mamey);
      color:#fff;
      border:none;
      padding:10px 14px;
      font-weight:700;
      font-size:14px;
      border-radius:12px;
      cursor:pointer;
    }
    .btn-pay:hover{
      background:var(--mamey-dark);
    }
    .ok-msg{
      padding:10px;
      margin-bottom:10px;
      background:#ecfdf5;
      color:#166534;
      font-size:13px;
      border-radius:8px;
    }
    .err-msg{
      padding:10px;
      margin-bottom:10px;
      background:#fef2f2;
      color:#b91c1c;
      font-size:13px;
      border-radius:8px;
    }

    @keyframes slideUp{
      from{transform:translateY(40px);opacity:0;}
      to{transform:translateY(0);opacity:1;}
    }

    footer{
      background:#0f172a;color:#e2e8f0;
    }
    .foot-wrap{
      max-width:1300px;margin:0 auto;
      padding:32px 16px 26px;
      display:grid;gap:24px;
      grid-template-columns:2fr 1fr 1.3fr 1.5fr;
      font-size:14px;
    }
    .foot-title{font-weight:800;margin-bottom:10px;}
    .foot-links a{
      display:block;color:#e2e8f0;
      text-decoration:none;padding:4px 0;
      font-size:13px;
    }
    .foot-links a:hover{text-decoration:underline;}
    .boletin input{
      width:100%;height:38px;border-radius:10px;
      border:1px solid #334155;background:#0b1220;
      color:#e2e8f0;padding:0 10px;
      margin-bottom:6px;font-size:13px;
    }
    .btn-sub{
      width:100%;height:38px;border-radius:10px;
      border:none;background:var(--mamey);
      color:#fff;font-weight:700;
      cursor:pointer;font-size:13px;
    }
    .foot-copy{
      border-top:1px solid #1f2937;
      text-align:center;padding:10px;
      font-size:12px;color:#94a3b8;
    }
    @media(max-width:900px){
      .nav-white{
        flex-direction:column;
        align-items:flex-start;
        padding:8px 16px 10px;
      }
      .main-menu{
        flex-wrap:wrap;
        gap:14px;
        margin-top:4px;
        font-size:12px;
      }
      main{
        padding:calc(var(--header-h) + 26px) 12px 32px;
      }
      .foot-wrap{grid-template-columns:1fr 1fr;}
    }
    @media(max-width:560px){
      .foot-wrap{grid-template-columns:1fr;}
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<header>
  <div class="topbar">
    <div class="top-left">
      <span>📞 (809) 533-9616</span>
      <span>✉️ info@supermercadodragondeoro.com</span>
    </div>
    <div class="top-search">
      <input type="search" placeholder="Buscar" disabled style="opacity:.3;cursor:not-allowed">
    </div>
    <div class="top-right">
      <a href="#" aria-label="Facebook">f</a>
      <a href="#" aria-label="Instagram">◎</a>
    </div>
  </div>
  <div class="nav-white">
    <div class="logo-wrap">
      <a href="index">
        <img src="images/logo_dragon1.png" alt="Supermercado Dragón de Oro">
      </a>
    </div>
    <nav class="main-menu">
      <a href="index">Inicio</a>
      <a href="#">Nosotros</a>
      <a href="#">Ofertas</a>
      <a href="#">Contactos</a>

      <?php if (!$isLogged): ?>
      <div class="cuenta-wrap">
        <button class="btn-cuenta" id="btnCuenta" aria-haspopup="true" aria-expanded="false">
          Mi Cuenta ▾
        </button>
        <div class="dropdown" id="menuCuenta">
          <a href="login">Ingresar</a>
          <div class="divider"></div>
          <a href="registro">Registrarme</a>
        </div>
      </div>
      <?php else: ?>
      <div class="cuenta-wrap">
        <button class="btn-cuenta" id="btnCuenta" aria-haspopup="true" aria-expanded="false">
          <?= htmlspecialchars('Hola, ' . $nombreCliente) ?> ▾
        </button>
        <div class="dropdown" id="menuCuenta">
          <a href="logout">Cerrar sesión</a>
        </div>
      </div>
      <?php endif; ?>

      <div class="cart-mini-wrap" onclick="window.location.href='carrito'">
        <img src="images/carrito_compra4.png" alt="Carrito de compras">
        <div>
          <div class="cart-mini-label">Carrito</div>
          <div class="cart-mini-count" id="cartMiniCount">0</div>
          <div class="cart-mini-total" id="cartMiniTotal">RD$ 0.00</div>
        </div>
      </div>
    </nav>
  </div>
</header>

<main class="pago-main">
  <!-- Columna izquierda: imagen + formulario -->
  <div class="pago-left">
    <!-- Imagen/hero de pago con tarjeta -->
    <div class="pago-hero">
      <img src="images/pago_tarjeta.png" alt="Pago con tarjeta">
      <div class="pago-hero-text">
        <b>Pago con tarjeta seguro</b><br>
        Procesaremos tu pago de forma cifrada. Completa los datos de tu tarjeta para finalizar tu compra.
      </div>
    </div>

    <!-- Formulario de tarjeta -->
    <form method="post" class="pago-card">
      <div class="pago-title">Datos de la tarjeta</div>
      <div class="pago-sub">
        Ingresa la información tal como aparece en tu tarjeta de crédito o débito.
      </div>

      <div class="pago-group">
        <label for="nombre_tarjeta">Nombre del titular</label>
        <input type="text" id="nombre" name="nombre" required>
      </div>

      <div class="pago-group">
        <label for="tarjeta_num">Número de tarjeta</label>
        <input type="text" id="num" name="num" maxlength="19" required>
      </div>

      <div class="pago-row">
        <div class="pago-group">
          <label for="tarjeta_expira">Vencimiento (MM/AA)</label>
          <input type="text" id="tarjeta_expira" name="tarjeta_expira" maxlength="5" required>
        </div>
        <div class="pago-group">
          <label for="tarjeta_codigo">CVV</label>
          <input type="password" id="tarjeta_codigo" name="tarjeta_codigo" maxlength="4" required>
        </div>
      </div>

      <!-- Aquí mantienes tus campos ocultos:
           items, total, etc., que ya estabas recibiendo -->
      <?php if (!empty($hiddenInputsHtml)) echo $hiddenInputsHtml; ?>

      <button type="submit" class="btn-pago">Pagar ahora</button>
    </form>
  </div>

  <!-- Columna derecha: resumen -->
  <div class="resumen-wrap">
    <!-- Título fuera de la caja -->
    <div class="resumen-title">Resumen de compra</div>

    <!-- Caja resumen con borde gris -->
    <div class="resumen-box">
      <?php if (!empty($items) && is_array($items)): ?>
        <?php foreach ($items as $it): ?>
          <div class="resumen-item">
            <span><?= htmlspecialchars($it['titulo'] ?? '') ?> x <?= (float)($it['qty'] ?? 1) ?></span>
            <span>
              RD$
              <?= number_format(
                    (float)($it['precio'] ?? 0) * (float)($it['qty'] ?? 1),
                    2, '.', ','
                  ) ?>
            </span>
          </div>
        <?php endforeach; ?>
      <?php else: ?>
        <div class="resumen-item">
          <span>No se encontraron productos del carrito.</span>
        </div>
      <?php endif; ?>
    </div>

    <!-- Total a pagar (fuera de la caja) -->
    <div class="total-pagar-label">Total a pagar</div>
    <div class="total-pagar">
      RD$ <?= number_format($total ?? 0, 2, '.', ',') ?>
    </div>
  </div>
</main>


<footer>
  <div class="foot-wrap">
    <div>
      <div class="foot-title">Dragón de Oro</div>
      <div style="line-height:1.6;color:#cbd5e1;">
        Desde 1989 trabajamos para brindar excelencia y atención a nuestros clientes.
      </div>
    </div>
    <div class="foot-links">
      <div class="foot-title">Enlaces directos</div>
      <a href="index">Inicio</a>
      <a href="#">Nosotros</a>
      <a href="#">Ofertas</a>
      <a href="#">Contactos</a>
    </div>
    <div class="boletin">
      <div class="foot-title">Suscribirme al boletín</div>
      <input type="text" placeholder="Nombre completo">
      <input type="email" placeholder="Correo electrónico">
      <button class="btn-sub">Suscribirme</button>
    </div>
    <div>
      <div class="foot-title">Contactos</div>
      <div style="font-size:13px;color:#cbd5e1;line-height:1.7;">
        Av. Rómulo Betancourt 1351, Santo Domingo<br>
        (809) 533-9616<br>
        info@supermercadodragondeoro.com
      </div>
      <div class="foot-title" style="margin-top:12px;">Redes Sociales</div>
      <div>Facebook · Instagram</div>
    </div>
  </div>
  <div class="foot-copy">© 2025 Supermercado Dragón de Oro. Todos los derechos reservados.</div>
</footer>

<script>
  // Dropdown Mi Cuenta
  const btnCuenta = document.getElementById('btnCuenta');
  const menuCuenta = document.getElementById('menuCuenta');
  if (btnCuenta && menuCuenta) {
    btnCuenta.addEventListener('click', () => {
      const show = menuCuenta.style.display !== 'block';
      menuCuenta.style.display = show ? 'block' : 'none';
      btnCuenta.setAttribute('aria-expanded', show ? 'true' : 'false');
    });
    document.addEventListener('click', e => {
      if (!menuCuenta.contains(e.target) && !btnCuenta.contains(e.target)) {
        menuCuenta.style.display = 'none';
        btnCuenta.setAttribute('aria-expanded', 'false');
      }
    });
  }

  // Sincronizar mini carrito si no es success (en success ya se limpia)
  const cartMiniCountEl = document.getElementById('cartMiniCount');
  const cartMiniTotalEl = document.getElementById('cartMiniTotal');
  if (!<?= $success ? 'true' : 'false' ?>) {
    const count = parseInt(localStorage.getItem('cart_count_super') || '0', 10);
    const total = parseFloat(localStorage.getItem('cart_total_super') || '0');
    if (cartMiniCountEl) cartMiniCountEl.textContent = count;
    if (cartMiniTotalEl) {
      cartMiniTotalEl.textContent = 'RD$ ' + total.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
    }
  }
</script>
</body>
</html>
