<?php
session_start();
if (!isset($_SESSION['rol']) || !in_array($_SESSION['rol'], ['contabilidad', 'adminTi'])) {
  header('Location: ../../index.php');
  exit;
}
?>
<!DOCTYPE html>

<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Altas - Contabilidad</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Bootstrap + FontAwesome + DataTables -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
  <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
  <link href="../assets/css/recruiter.css" rel="stylesheet" />
  <style>
    .btn-banorte {
      background-color: #EF2945 !important; /* rojo Banorte */
      color: #fff !important;
      border: none;
      opacity: 1 !important;
    }
    .btn-banorte:disabled {
      background-color: #ffcccc !important; /* rojo pastel más visible */
      color: #fff !important;
      opacity: 1 !important;
    }
  </style>
</head>
<body class="bg-light">

<div class="bg-light">
  <?php include '../includes/sidebar.php'; ?>
  <div class="main-content flex-grow-1 px-4 py-4">
    <?php include '../includes/topbar.php'; ?>

    <div class="container-fluid">
      <h2 class="mb-4 text-success"><i class="fas fa-user-plus me-2"></i>Colaboradores con Alta Pendiente</h2>
      <div class="mb-3 d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
          <button id="btnExportarSeleccionados" class="btn btn-success" disabled>
            <i class="fas fa-file-excel me-2"></i>Exportar altas IMSS
          </button>
          <button id="btnExportarBanorte" class="btn btn-banorte ms-2">
            <i class="fas fa-file-excel me-2"></i>Exportar altas Banorte
          </button>
          <button id="btnExportarConta" class="btn btn-warning ms-2" disabled>
            <i class="fas fa-file-excel me-2"></i>Exportar Contpaqi
          </button>
        </div>
        <div class="d-flex align-items-center">
          <button id="btnPrealtaDatosAlta" class="btn btn-info me-2" disabled>
            <i class="fas fa-hourglass-half me-2"></i>Prealta
          </button>
          <button id="btnActivarDatosAlta" class="btn btn-primary" disabled>
            <i class="fas fa-check-circle me-2"></i>Marcar como completado
          </button>
        </div>
      </div>
      <div class="table-responsive">
        <!-- Leyenda para filas azules (reingresos) -->
        <div id="leyenda-reingreso" class="mb-2" style="font-size: 0.95rem; color: #222;">
          <i class="fas fa-info-circle me-1"></i> Si ve alguna fila pintada de azul significa que se trata de un <b>reingreso</b>.
        </div>
        <table id="tablaAltas" class="table table-striped table-bordered table-hover align-middle text-center">
          <thead class="table-dark">
            <tr>
              <th><input type="checkbox" id="chk-todos"></th>
              <th>Nombre</th>
              <th>Número de cuenta</th>
              <th>Cuenta CLABE</th>
              <th>CURP</th>
              <th>RFC</th>
              <th>NSS</th>
              <th>PDV</th>
              <th>Puesto</th>
              <th>Fecha de Ingreso</th>
              <th>Folio Prealta IDSE</th>
              <th>Fecha Prealta IDSE</th>
              <th>Estatus Contabilidad</th>
              <th>Folio alta IDSE</th>
              <th>Fecha alta IDSE</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal para datos de alta -->
<div class="modal fade" id="modalDatosAlta" tabindex="-1" aria-labelledby="modalDatosAltaLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalDatosAltaLabel">Datos de alta IDSE</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label for="inputFolioIDSE" class="form-label">Folio IDSE</label>
          <input type="text" class="form-control" id="inputFolioIDSE" required>
        </div>
        <div class="mb-3">
          <label for="inputFechaIDSE" class="form-label">Fecha de alta IDSE</label>
          <input type="date" class="form-control" id="inputFechaIDSE" required>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary" id="btnConfirmarDatosAlta">Guardar y marcar como completado</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal para editar colaborador -->
<div class="modal fade" id="modalEditarColaborador" tabindex="-1" aria-labelledby="modalEditarColaboradorLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalEditarColaboradorLabel">Editar datos del colaborador</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body">
        <form id="formEditarColaborador">
          <input type="hidden" id="editCurp">
          <div class="row">
            <div class="col-md-4">
              <div class="mb-3">
                <label for="editNombre" class="form-label">Nombre(s)</label>
                <input type="text" class="form-control" id="editNombre" required readonly disabled>
              </div>
            </div>
            <div class="col-md-4">
              <div class="mb-3">
                <label for="editApellidoPaterno" class="form-label">Apellido Paterno</label>
                <input type="text" class="form-control" id="editApellidoPaterno" required readonly disabled>
              </div>
            </div>
            <div class="col-md-4">
              <div class="mb-3">
                <label for="editApellidoMaterno" class="form-label">Apellido Materno</label>
                <input type="text" class="form-control" id="editApellidoMaterno" readonly disabled>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="mb-3">
                <label for="editNumeroCuenta" class="form-label">Número de cuenta</label>
                <input type="text" class="form-control" id="editNumeroCuenta">
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label for="editCuentaClabe" class="form-label">Cuenta CLABE</label>
                <input type="text" class="form-control" id="editCuentaClabe">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4">
              <div class="mb-3">
                <label for="editRfc" class="form-label">RFC</label>
                <input type="text" class="form-control" id="editRfc" required readonly disabled>
              </div>
            </div>
            <div class="col-md-4">
              <div class="mb-3">
                <label for="editNss" class="form-label">NSS</label>
                <input type="text" class="form-control" id="editNss" required readonly disabled>
              </div>
            </div>
            <div class="col-md-4">
              <div class="mb-3">
                <label for="editFolioIdse" class="form-label">Folio IDSE</label>
                <input type="text" class="form-control" id="editFolioIdse">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4">
              <div class="mb-3">
                <label for="editFonacot" class="form-label">Fonacot</label>
                <input type="text" class="form-control" id="editFonacot">
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary" id="btnGuardarCambios">Guardar cambios</button>
      </div>
    </div>
  </div>
</div>

<!-- JS y dependencias -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script type="module">
  document.addEventListener("DOMContentLoaded", () => {
    fetch("../../backend/contabilidad/get_altas.php")
      .then(res => res.json())
      .then(data => {
        if (data && Array.isArray(data.pendientes) && Array.isArray(data.altas)) {
          renderAltas([...data.pendientes, ...data.altas]);
        } else {
          console.error("La respuesta no contiene arrays válidos de 'pendientes' y 'altas':", data);
          Swal.fire({icon: 'error', title: 'Error', text: 'No se pudieron obtener los datos. Intenta más tarde.'});
        }
      })
      .catch(err => {
        console.error("Error al obtener datos:", err);
        Swal.fire({icon: 'error', title: 'Error de conexión', text: 'No se pudo conectar con el servidor.'});
      });
  });


  async function renderAltas(data) {
    const tbody = document.querySelector("#tablaAltas tbody");
    tbody.innerHTML = "";

    // Obtener lista de CURPs
    const curps = data.map(row => row.CURP);
    let reingresosCurps = [];
    try {
      const resp = await fetch('../../backend/contabilidad/validar_reingreso.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ curps })
      });
      const json = await resp.json();
      reingresosCurps = Array.isArray(json.reingresos) ? json.reingresos : [];
    } catch (e) {
      reingresosCurps = [];
    }

    // Orden personalizado
    const customOrder = (row) => {
      const estatus = (row.estatusConta || '').toUpperCase();
      const folioPrealta = row.Folio_pre_alta_idse || row.Folio_prealta_idse || row.Folio_pre_alta || '';
      const folioAlta = row.Folio_idse || '';
      if (estatus === 'PENDIENTE' && (!folioPrealta || folioPrealta === 'Por definir')) return 0;
      if (estatus === 'PENDIENTE' && folioPrealta && folioPrealta !== 'Por definir') return 1;
      if (estatus === 'ALTA') return 2;
      return 3;
    };

    // Ordena los datos según la prioridad definida en customOrder
    data.sort((a, b) => {
      const orderA = customOrder(a);
      const orderB = customOrder(b);
      if (orderA !== orderB) return orderA - orderB;
      return 0;
    });

    // Renderiza cada fila de la tabla de altas
    data.forEach(row => {
      // Determina el estatus y pinta la fila según corresponda
      const estatus = (row.estatusConta || '').toUpperCase();
      const folioPrealta = row.Folio_pre_alta_idse || row.Folio_prealta_idse || row.Folio_pre_alta || 'Por definir';
      let fechaPrealta = row.Fecha_pre_alta;
      if (!fechaPrealta || fechaPrealta === '0000-00-00') {
        fechaPrealta = 'Por definir';
      } else {
        fechaPrealta = fechaPrealta.split('-').reverse().join('/');
      }
      const folioAlta = row.Folio_idse || 'Por definir';
      let fechaAlta = row.Fecha_alta_idse;
      if (!fechaAlta || fechaAlta === '0000-00-00') {
        fechaAlta = 'Por definir';
      } else {
        fechaAlta = fechaAlta.split('-').reverse().join('/');
      }
      // Construye el nombre completo
      const nombre = [row.NOMBRES, row["APELLIDO PATERNO"], row["APELLIDO MATERNO"]].filter(Boolean).join(' ');
      const pdv = row["DEPARTAMENTO INTERNO"] || 'No disponible';
      let claseFila = '';
      // Si el CURP está en reingresos, pinta la fila de azul
      if (reingresosCurps.includes(row.CURP)) {
        claseFila = 'table-info'; // azul para reingresos
      } else if (estatus === 'ALTA' && folioAlta !== 'Por definir' && fechaAlta !== 'Por definir') {
        claseFila = 'table-success';
      } else if (estatus === 'PENDIENTE' && folioPrealta !== 'Por definir' && fechaPrealta !== 'Por definir') {
        claseFila = 'table-warning';
      }
      // Inserta la fila en el tbody
      tbody.innerHTML += `
        <tr class="${claseFila}" data-curp="${row.CURP}" data-row="${encodeURIComponent(JSON.stringify(row))}">
          <td><input type="checkbox" class="chk-export" value="${row.CURP}"></td>
          <td>${nombre}</td>
          <td>${row.Numero_cuenta || '<span class=\"text-muted\">Sin cuenta</span>'}</td>
          <td>${row.Cuenta_clave || '<span class=\"text-muted\">Sin CLABE</span>'}</td>
          <td>${row.CURP}</td>
          <td>${row.RFC}</td>
          <td>${row.NSS}</td>
          <td>${(pdv || '').replace(/^GRP\s*/, '')}</td>
          <td>${row.PUESTO}</td>
          <td>${row["FECHA DE INGRESO"] ? row["FECHA DE INGRESO"].split('-').reverse().join('/') : ''}</td>
          <td>${folioPrealta}</td>
          <td>${fechaPrealta}</td>
          <td><span class="badge bg-secondary text-uppercase">${estatus.replace('_', ' ')}</span></td>
          <td>${folioAlta}</td>
          <td>${fechaAlta}</td>
          <td><button class="btn btn-sm btn-outline-primary btn-editar"><i class="fas fa-edit"></i> Editar</button></td>
        </tr>
      `;
    });

    // Inicializa DataTable para permitir filtrado y orden por encabezados
    // El orden personalizado se aplica antes de renderizar, pero el usuario puede filtrar y ordenar por columnas
    $('#tablaAltas').DataTable({
      language: { url: '../assets/i18n/es-ES.json' },
      ordering: true,
      columnDefs: [{ targets: 11, visible: true }]
    });

    // Asigna el evento para abrir el modal de edición al hacer clic en el botón editar
    document.querySelectorAll('.btn-editar').forEach(btn => {
      btn.addEventListener('click', function() {
        const tr = this.closest('tr');
        const rowData = JSON.parse(decodeURIComponent(tr.dataset.row));
        // Llena el modal con los datos del colaborador seleccionado
        document.getElementById('editCurp').value = rowData.CURP;
        document.getElementById('editNombre').value = rowData.NOMBRES || '';
        document.getElementById('editApellidoPaterno').value = rowData["APELLIDO PATERNO"] || '';
        document.getElementById('editApellidoMaterno').value = rowData["APELLIDO MATERNO"] || '';
        document.getElementById('editNumeroCuenta').value = rowData.Numero_cuenta || '';
        document.getElementById('editCuentaClabe').value = rowData.Cuenta_clave || '';
        document.getElementById('editRfc').value = rowData.RFC || '';
        document.getElementById('editNss').value = rowData.NSS || '';
        document.getElementById('editFolioIdse').value = rowData.Folio_idse || '';
        document.getElementById('editFonacot').value = rowData.Fonacot || '';
        const modal = new bootstrap.Modal(document.getElementById('modalEditarColaborador'));
        modal.show();
      });
    });

    document.getElementById('btnGuardarCambios').addEventListener('click', function() {
      const curp = document.getElementById('editCurp').value;
      const updates = {
        "NOMBRES": document.getElementById('editNombre').value.trim(),
        "APELLIDO PATERNO": document.getElementById('editApellidoPaterno').value.trim(),
        "APELLIDO MATERNO": document.getElementById('editApellidoMaterno').value.trim(),
        "Numero_cuenta": document.getElementById('editNumeroCuenta').value.trim(),
        "Cuenta_clave": document.getElementById('editCuentaClabe').value.trim(),
        "RFC": document.getElementById('editRfc').value.trim(),
        "NSS": document.getElementById('editNss').value.trim(),
        "Folio_idse": document.getElementById('editFolioIdse').value.trim(),
        "Fonacot": document.getElementById('editFonacot').value.trim()
      };
      if (!updates["NOMBRES"] || !updates["APELLIDO PATERNO"] || !updates["RFC"] || !updates["NSS"]) {
        Swal.fire({icon: 'warning', title: 'Campos requeridos', text: 'Nombre, apellido paterno, RFC y NSS son obligatorios'});
        return;
      }
      Swal.fire({
        title: '¿Guardar cambios?',
        text: 'Se actualizarán los datos del colaborador',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Sí, guardar',
        cancelButtonText: 'Cancelar'
      }).then((result) => {
        if (result.isConfirmed) {
          Swal.fire({
            title: 'Guardando...',
            allowOutsideClick: false,
            didOpen: () => {
              Swal.showLoading();
            }
          });
          const promises = Object.entries(updates).map(([field, value]) => {
            return fetch('../../backend/contabilidad/actualizar_campo.php', {
              method: 'POST',
              headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
              body: `curp=${encodeURIComponent(curp)}&field=${encodeURIComponent(field)}&value=${encodeURIComponent(value)}`
            }).then(res => res.json());
          });
          Promise.all(promises)
            .then(results => {
              if (results.every(r => r.success)) {
                Swal.fire({icon: 'success', title: 'Actualizado', text: 'Datos guardados correctamente'})
                  .then(() => location.reload());
              } else {
                Swal.fire({icon: 'error', title: 'Error', text: 'Algunos datos no se pudieron actualizar'});
              }
            })
            .catch(() => {
              Swal.fire({icon: 'error', title: 'Error', text: 'Error al conectar con el servidor'});
            });
        }
      });
    });

    document.querySelectorAll('.chk-export').forEach(checkbox => {
      checkbox.addEventListener('change', updateExportButton);
    });
    if (document.getElementById('chk-todos')) {
      document.getElementById('chk-todos').addEventListener('change', function() {
        const checked = this.checked;
        document.querySelectorAll('.chk-export').forEach(chk => {
          chk.checked = checked;
        });
        updateExportButton();
      });
    }
    updateExportButton();
  }

  function updateExportButton() {
    const checked = document.querySelectorAll(".chk-export:checked").length;
    document.getElementById("btnExportarSeleccionados").disabled = checked === 0;
    document.getElementById("btnExportarBanorte").disabled = checked === 0;
    document.getElementById("btnExportarConta").disabled = checked === 0;
    document.getElementById("btnActivarDatosAlta").disabled = checked === 0;
    document.getElementById("btnPrealtaDatosAlta").disabled = checked === 0;
  }

  // Exportar seleccionados
  document.getElementById("btnExportarSeleccionados").addEventListener("click", function () {
    const seleccionados = Array.from(document.querySelectorAll(".chk-export:checked")).map(chk => chk.value);
    if (seleccionados.length === 0) return;

    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '../../backend/contabilidad/exportar_altas_detalle.php';
    form.target = '_blank';

    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'curps';
    input.value = JSON.stringify(seleccionados);
    form.appendChild(input);

    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
  });

  // Exportar seleccionados para Banorte
  document.getElementById("btnExportarBanorte").addEventListener("click", function () {
    const seleccionados = Array.from(document.querySelectorAll(".chk-export:checked")).map(chk => chk.value);
    if (seleccionados.length === 0) return;

    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '../../backend/contabilidad/exportar_altas_banorte.php';
    form.target = '_blank';

    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'curps';
    input.value = JSON.stringify(seleccionados);
    form.appendChild(input);

    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
  });

  // Exportar seleccionados para Plantilla Conta Rocasa
  document.getElementById("btnExportarConta").addEventListener("click", function () {
    const seleccionados = Array.from(document.querySelectorAll(".chk-export:checked")).map(chk => chk.value);
    if (seleccionados.length === 0) return;

    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '../../backend/contabilidad/plantillas/exportar_excel_conta.php';
    form.target = '_blank';

    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'curps';
    input.value = JSON.stringify(seleccionados);
    form.appendChild(input);

    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
  });

  // Mostrar modal para datos de alta
  document.getElementById("btnActivarDatosAlta").addEventListener("click", function () {
    const seleccionados = Array.from(document.querySelectorAll(".chk-export:checked")).map(chk => chk.value);
    if (seleccionados.length === 0) return;
    
    const folioInput = document.getElementById('inputFolioIDSE');
    folioInput.value = '';
    folioInput.removeAttribute('readonly');
    folioInput.removeAttribute('disabled');
    document.getElementById('inputFechaIDSE').value = '';
    
    // Guardar el modo de operación
    document.getElementById('modalDatosAlta').dataset.modo = 'alta';
    const modal = new bootstrap.Modal(document.getElementById('modalDatosAlta'));
    modal.show();
  });

  // Mostrar modal para prealta
  document.getElementById("btnPrealtaDatosAlta").addEventListener("click", function () {
    const seleccionados = Array.from(document.querySelectorAll(".chk-export:checked")).map(chk => chk.value);
    if (seleccionados.length === 0) return;
    
    const folioInput = document.getElementById('inputFolioIDSE');
    folioInput.value = '';
    folioInput.removeAttribute('readonly');
    folioInput.removeAttribute('disabled');
    document.getElementById('inputFechaIDSE').value = '';
    
    // Guardar el modo de operación
    document.getElementById('modalDatosAlta').dataset.modo = 'prealta';
    const modal = new bootstrap.Modal(document.getElementById('modalDatosAlta'));
    modal.show();
  });

  // Guardar datos de alta o prealta
  document.getElementById("btnConfirmarDatosAlta").addEventListener("click", function () {
    const seleccionados = Array.from(document.querySelectorAll(".chk-export:checked")).map(chk => chk.value);
    const folio = document.getElementById('inputFolioIDSE').value.trim();
    const fecha = document.getElementById('inputFechaIDSE').value;
    const modo = document.getElementById('modalDatosAlta').dataset.modo || 'alta';
    
    if (!folio || !fecha) {
      Swal.fire({icon: 'warning', title: 'Campos requeridos', text: 'Por favor ingresa el folio y la fecha.'});
      return;
    }
    
    Swal.fire({
      title: '¿Estás seguro?',
      text: modo === 'prealta' ? 'Se guardarán los datos de prealta para los seleccionados.' : 'Se marcarán los datos de alta como completados para los seleccionados.',
      icon: 'question',
      showCancelButton: true,
      confirmButtonText: 'Sí, guardar',
      cancelButtonText: 'Cancelar'
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire({
          title: 'Procesando...',
          allowOutsideClick: false,
          didOpen: () => {
            Swal.showLoading();
          }
        });
        let url = '';
        let body = '';
        if (modo === 'prealta') {
          url = '../../backend/contabilidad/activa_prealta.php'; // Debes crear este endpoint en backend
          body = 'curps=' + encodeURIComponent(JSON.stringify(seleccionados)) + '&folio=' + encodeURIComponent(folio) + '&fecha=' + encodeURIComponent(fecha);
        } else {
          url = '../../backend/contabilidad/activa_datos_alta.php';
          body = 'curps=' + encodeURIComponent(JSON.stringify(seleccionados)) + '&folio=' + encodeURIComponent(folio) + '&fecha=' + encodeURIComponent(fecha);
        }
        fetch(url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          body: body
        })
        .then(res => res.json())
        .then(resp => {
          if (resp.success) {
            Swal.fire({icon: 'success', title: '¡Listo!', text: modo === 'prealta' ? 'Datos de prealta guardados.' : 'Datos de alta marcados como completados.'})
              .then(() => location.reload());
          } else {
            Swal.fire({icon: 'error', title: 'Error', text: resp.message || 'No se pudo actualizar.'});
          }
        })
        .catch(() => {
          Swal.fire({icon: 'error', title: 'Error de conexión', text: 'No se pudo conectar con el servidor.'});
        });
      }
    });
  });

  function formatFecha(fechaISO) {
    const [y, m, d] = fechaISO.split('T')[0].split('-');
    return `${d}/${m}/${y}`;
  }
</script>
</body>
</html>