{"id":8574,"date":"2025-06-30T11:19:21","date_gmt":"2025-06-30T16:19:21","guid":{"rendered":"https:\/\/ugelputina.edu.pe\/site\/?page_id=8574"},"modified":"2025-12-22T11:57:34","modified_gmt":"2025-12-22T16:57:34","slug":"libro-de-reclamaciones","status":"publish","type":"page","link":"https:\/\/ugelputina.edu.pe\/site\/?page_id=8574","title":{"rendered":"LIBRO DE RECLAMACIONES VIRTUAL"},"content":{"rendered":"\n<style>\n.lr-container{\n  max-width:900px;margin:30px auto;background:#fff;\n  padding:25px;border-radius:8px;\n  box-shadow:0 2px 10px rgba(0,0,0,.1);\n  font-family:Arial,Helvetica,sans-serif\n}\n.lr-header{border:3px solid #222;padding:15px;display:flex;gap:15px;align-items:center}\n.lr-header img{height:70px}\n.lr-title{text-align:center;flex:1}\n.lr-title h1{margin:0;font-size:20px}\n.lr-group{margin-bottom:15px}\n.lr-group label{font-weight:bold;display:block;margin-bottom:6px}\n.lr-group span{color:red}\n.lr-group input,.lr-group select,.lr-group textarea{\n  width:100%;padding:10px;border:1px solid #ccc;border-radius:4px\n}\n.lr-btn{background:#0d6efd;color:#fff;padding:12px 25px;border:none;border-radius:4px;cursor:pointer}\n.lr-btn:hover{background:#0b5ed7}\n.lr-error{color:red;font-size:13px;margin-top:4px}\n@media(max-width:600px){.lr-header{flex-direction:column;text-align:center}}\n\n.msg-success{\n  position:fixed;\n  top:0;left:0;\n  width:100%;height:100%;\n  background:rgba(0,0,0,.5);\n  display:flex;\n  justify-content:center;\n  align-items:center;\n  z-index:9999;\n}\n\n.msg-box{\n  background:#fff;\n  max-width:420px;\n  width:90%;\n  padding:30px;\n  border-radius:8px;\n  text-align:center;\n  animation:fadeIn .3s ease;\n}\n\n.msg-icon{\n  font-size:48px;\n  color:#28a745;\n  margin-bottom:10px;\n}\n\n.msg-code{\n  background:#f1f3f5;\n  padding:10px;\n  margin:10px 0;\n  font-weight:bold;\n  letter-spacing:1px;\n  border-radius:4px;\n}\n\n.msg-note{\n  font-size:13px;\n  color:#555;\n}\n\n.msg-btn{\n  margin-top:15px;\n  background:#0d6efd;\n  color:#fff;\n  border:none;\n  padding:10px 25px;\n  border-radius:4px;\n  cursor:pointer;\n}\n\n.msg-btn:hover{\n  background:#0b5ed7;\n}\n\n@keyframes fadeIn{\n  from{opacity:0;transform:scale(.9)}\n  to{opacity:1;transform:scale(1)}\n}\n\n<\/style>\n\n<div class=\"lr-container\">\n  <div class=\"lr-header\">\n    <img decoding=\"async\" src=\"https:\/\/ugelputina.edu.pe\/site\/wp-content\/uploads\/2025\/12\/logougel.jpg\">\n    <div class=\"lr-title\">\n      <h1>LIBRO DE RECLAMACIONES VIRTUAL<\/h1>\n      <h2>UGEL SAN ANTONIO DE PUTINA<\/h2>\n    <\/div>\n    <img decoding=\"async\" src=\"https:\/\/ugelputina.edu.pe\/site\/wp-content\/uploads\/2025\/12\/logo-reclamaciones.jpg\">\n  <\/div>\n\n<form id=\"lrForm\" action=\"javascript:void(0);\">\n  <div class=\"lr-group\">\n    <label>Nombres y Apellidos <span>*<\/span><\/label>\n    <input type=\"text\" id=\"nombre\" required>\n  <\/div>\n\n  <div class=\"lr-group\">\n    <label>DNI <span>*<\/span><\/label>\n    <input type=\"text\" id=\"dni\" maxlength=\"8\" placeholder=\"Solo n\u00fameros\">\n    <div class=\"lr-error\" id=\"errDni\"><\/div>\n  <\/div>\n\n  <div class=\"lr-group\">\n    <label>Celular <span>*<\/span><\/label>\n    <input type=\"tel\" id=\"celular\" required>\n  <\/div>\n\n  <div class=\"lr-group\">\n    <label>Correo electr\u00f3nico <span>*<\/span><\/label>\n    <input type=\"email\" id=\"correo\" required>\n  <\/div>\n\n  <div class=\"lr-group\">\n    <label>\u00c1rea <span>*<\/span><\/label>\n    <select id=\"area\" required>\n      <option value=\"\">Seleccione<\/option>\n      <option>Gesti\u00f3n Institucional<\/option>\n      <option>Gesti\u00f3n Pedag\u00f3gica<\/option>\n      <option>Administraci\u00f3n<\/option>\n    <\/select>\n  <\/div>\n\n  <div class=\"lr-group\">\n    <label>Detalle del reclamo <span>*<\/span><\/label>\n    <textarea id=\"detalle\" required><\/textarea>\n  <\/div>\n\n  <div class=\"lr-group\">\n    <input type=\"checkbox\" id=\"terminos\"> Declaro que soy el AUTOR del Reclamo y ACEPTO el contenido de este formulario bajo Declaraci\u00f3n Jurada. \n    <div class=\"lr-error\" id=\"errTerm\"><\/div>\n  <\/div>\n\n  <button type=\"button\" class=\"lr-btn\" id=\"btnEnviar\">Enviar Reclamo<\/button>\n<\/form>\n<div id=\"mensajeExito\" style=\"display:none;\" class=\"msg-success\">\n  <div class=\"msg-box\">\n    <div class=\"msg-icon\">\u2714<\/div>\n    <h3>Reclamo enviado correctamente<\/h3>\n    <p>\n      Su reclamo ha sido registrado con \u00e9xito.<br>\n      <strong>C\u00f3digo de Reclamo:<\/strong>\n    <\/p>\n    <div class=\"msg-code\" id=\"codigoReclamo\"><\/div>\n\n    <p class=\"msg-note\">\n      Conserve este c\u00f3digo para cualquier seguimiento.\n    <\/p>\n\n    <button onclick=\"cerrarMensaje()\" class=\"msg-btn\">Aceptar<\/button>\n  <\/div>\n<\/div>\n\n<\/div>\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  const btn      = document.getElementById(\"btnEnviar\");\n  const form     = document.getElementById(\"lrForm\");\n\n  const nombreEl   = document.getElementById(\"nombre\");\n  const dniEl      = document.getElementById(\"dni\");\n  const celularEl  = document.getElementById(\"celular\");\n  const correoEl   = document.getElementById(\"correo\");\n  const areaEl     = document.getElementById(\"area\");\n  const detalleEl  = document.getElementById(\"detalle\");\n  const terminosEl = document.getElementById(\"terminos\");\n\n  \/\/ DNI solo n\u00fameros\n  dniEl.addEventListener(\"input\", function () {\n    this.value = this.value.replace(\/[^0-9]\/g, \"\");\n  });\n\n  btn.addEventListener(\"click\", function () {\n\n    \/\/ ===== VALIDACIONES =====\n    if (nombreEl.value.trim() === \"\") {\n      mostrarError(\"Debe ingresar sus nombres y apellidos.\");\n      return;\n    }\n\n    if (dniEl.value.length !== 8) {\n      mostrarError(\"El DNI debe tener exactamente 8 d\u00edgitos.\");\n      return;\n    }\n\n    if (correoEl.value.trim() === \"\") {\n      mostrarError(\"Debe ingresar un correo electr\u00f3nico v\u00e1lido.\");\n      return;\n    }\n\n    if (areaEl.value === \"\") {\n      mostrarError(\"Debe seleccionar un \u00e1rea.\");\n      return;\n    }\n\n    if (detalleEl.value.trim() === \"\") {\n      mostrarError(\"Debe detallar el reclamo.\");\n      return;\n    }\n\n    if (!terminosEl.checked) {\n      mostrarError(\"Debe aceptar la declaraci\u00f3n jurada.\");\n      return;\n    }\n\n    \/\/ ===== BLOQUEAR BOT\u00d3N =====\n    btn.disabled = true;\n    btn.innerText = \"Enviando...\";\n\n    \/\/ ===== AJAX =====\n    fetch(\"https:\/\/ugelputina.edu.pe\/site\/wp-admin\/admin-ajax.php\", {\n      method: \"POST\",\n      headers: {\n        \"Content-Type\": \"application\/x-www-form-urlencoded\"\n      },\n      body: new URLSearchParams({\n        action: \"enviar_reclamacion\",\n        nombre: nombreEl.value,\n        dni: dniEl.value,\n        celular: celularEl.value,\n        correo: correoEl.value,\n        area: areaEl.value,\n        detalle: detalleEl.value\n      })\n    })\n    .then(response => response.text())\n    .then(data => {\n\n      \/\/ Espera respuesta tipo: OK|LR-20251222-1234\n      let partes = data.split(\"|\");\n\n      if (partes[0] === \"OK\") {\n        mostrarExito(partes[1]);\n        form.reset();\n      } else {\n        mostrarError(\"No se pudo enviar el reclamo. Intente nuevamente.\");\n      }\n\n      btn.disabled = false;\n      btn.innerText = \"Enviar Reclamo\";\n    })\n    .catch(() => {\n      mostrarError(\"Error de conexi\u00f3n. Intente m\u00e1s tarde.\");\n      btn.disabled = false;\n      btn.innerText = \"Enviar Reclamo\";\n    });\n\n  });\n\n});\n\n\/* =========================\n   FUNCIONES DE MENSAJE\n========================= *\/\n\nfunction mostrarExito(codigo) {\n  document.getElementById(\"codigoReclamo\").innerText = codigo;\n  document.getElementById(\"mensajeExito\").style.display = \"flex\";\n}\n\nfunction cerrarMensaje() {\n  document.getElementById(\"mensajeExito\").style.display = \"none\";\n}\n\nfunction mostrarError(texto) {\n  alert(texto); \/\/ puedes cambiarlo luego por modal de error\n}\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LIBRO DE RECLAMACIONES VIRTUAL UGEL SAN ANTONIO DE PUTINA Nombres y Apellidos * DNI * Celular * Correo<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8574","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ugelputina.edu.pe\/site\/index.php?rest_route=\/wp\/v2\/pages\/8574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ugelputina.edu.pe\/site\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ugelputina.edu.pe\/site\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ugelputina.edu.pe\/site\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ugelputina.edu.pe\/site\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8574"}],"version-history":[{"count":15,"href":"https:\/\/ugelputina.edu.pe\/site\/index.php?rest_route=\/wp\/v2\/pages\/8574\/revisions"}],"predecessor-version":[{"id":9526,"href":"https:\/\/ugelputina.edu.pe\/site\/index.php?rest_route=\/wp\/v2\/pages\/8574\/revisions\/9526"}],"wp:attachment":[{"href":"https:\/\/ugelputina.edu.pe\/site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}