<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Portal de Autofactura</title>
  <style>
    :root{--ink:#1f2937;--muted:#7a8193;--line:#dbe1ee;--orange:#f97316;--blue:#3b5bdb;--green:#16b981;--panel:#fff}
    *{box-sizing:border-box} body{margin:0;min-height:100vh;color:var(--ink);font-family:"Segoe UI",Roboto,Arial,sans-serif;background:radial-gradient(circle at 8% 74%,rgba(255,255,255,.9) 0 95px,transparent 96px),radial-gradient(circle at 85% 19%,rgba(255,255,255,.72) 0 132px,transparent 133px),linear-gradient(120deg,#eceef3,#f8f9fc 48%,#e7e9ef);overflow-x:hidden}
    body:before{content:"";position:fixed;inset:-18%;background:radial-gradient(circle at 30% 16%,rgba(249,115,22,.10),transparent 24%),radial-gradient(circle at 72% 78%,rgba(59,91,219,.10),transparent 27%);animation:drift 12s ease-in-out infinite alternate;pointer-events:none}
    @keyframes drift{to{transform:translate3d(28px,-18px,0) scale(1.03)}} @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes float{50%{transform:translateY(-8px)}}
    .page{position:relative;z-index:1;width:min(1040px,calc(100% - 28px));min-height:calc(100vh - 56px);margin:28px auto;display:grid;grid-template-columns:200px minmax(360px,448px) 200px;gap:44px;align-items:center}.ad,.portal{animation:rise .55s ease both}.ad:nth-child(3){animation-delay:.12s}.portal{animation-delay:.06s}
    .ad{min-height:500px;padding:34px 18px;border-radius:10px;background:rgba(255,255,255,.78);box-shadow:0 18px 42px rgba(31,41,55,.10);backdrop-filter:blur(9px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}.ad:after{content:"";position:absolute;inset:auto -45px -80px 20px;height:180px;border-radius:50%;background:rgba(255,255,255,.45);transform:rotate(-24deg)}
    .logo-row{display:flex;align-items:center;gap:9px;font-weight:900;color:#263550}.logo-row img{width:26px;height:26px}.logo-row strong span{color:var(--orange)}.ad h2{margin:34px 0 18px;font-size:22px;line-height:1.06;letter-spacing:0}.ad h2 span{color:var(--orange)}.ad ul{margin:0;padding-left:18px;color:#fb5b14;font-size:13.5px;line-height:1.75}.ad p{color:#626b7d;line-height:1.55;font-size:13px}.ad-button{position:relative;z-index:1;border:0;border-radius:9px;background:var(--orange);color:#fff;font-weight:900;padding:13px 16px;box-shadow:0 12px 22px rgba(249,115,22,.25)}
    .mini-dashboard{position:relative;z-index:1;margin:20px 0;padding:14px;border-radius:12px;background:#fff;border:1px solid #edf0f6;box-shadow:0 10px 22px rgba(31,41,55,.08);animation:float 4s ease-in-out infinite}.bars{display:grid;gap:7px}.bars i{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--orange),#ffd1a7);display:block}.bars i:nth-child(2){width:72%;background:linear-gradient(90deg,var(--blue),#b8c6ff)}.bars i:nth-child(3){width:48%;background:linear-gradient(90deg,var(--green),#b9f4df)}
    .portal{background:rgba(255,255,255,.9);border-radius:11px;box-shadow:0 22px 56px rgba(31,41,55,.16);overflow:hidden;border:1px solid rgba(219,225,238,.85)}.portal-head{text-align:center;padding:18px 20px 14px}.store{width:72px;height:72px;margin:0 auto 10px;position:relative;animation:float 4.5s ease-in-out infinite}.store:before{content:"";position:absolute;inset:0 8px 18px;background:#7dd3fc;border-radius:7px 7px 3px 3px;box-shadow:inset 0 -18px #60a5fa}.store:after{content:"";position:absolute;left:0;right:0;top:0;height:25px;border-radius:6px;background:repeating-linear-gradient(90deg,#f97316 0 14px,#ffc033 14px 28px)}
    .welcome{margin:0 8px 12px;padding:14px 18px;text-align:left;border-radius:5px;background:#d5f6e7;border:1px solid #b7ebd4;color:#0b6b50;font-size:15px;line-height:1.58}.merchant{padding:0 18px 12px;text-align:center;color:#737988;font-weight:800;line-height:1.5}.merchant b{display:block;color:#444;font-size:15px;text-transform:uppercase}.form-wrap{border-top:1px solid var(--line);padding:18px 20px 20px}.row{display:grid;grid-template-columns:1fr 46px;gap:7px;margin-bottom:9px}.field{width:100%;height:50px;border:1px solid #cfd6e8;border-radius:12px;padding:0 16px;background:#fff;color:#4b5565;font-size:13px;outline:0;transition:.16s}.field:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(249,115,22,.12)}.info{border:0;border-radius:12px;background:#858899;color:#fff;font-weight:900}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}.consent{display:grid;grid-template-columns:42px 1fr;gap:8px;align-items:center;margin:14px 0;color:#687184;font-size:12.5px;line-height:1.35}.switch{width:40px;height:22px;appearance:none;border-radius:99px;background:#363b49;position:relative}.switch:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.16s}.switch:checked{background:var(--orange)}.switch:checked:after{transform:translateX(18px)}
    .actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.btn{border:0;border-radius:6px;padding:12px 20px;color:#fff;background:var(--blue);font-weight:800;cursor:pointer;box-shadow:0 10px 18px rgba(59,91,219,.22)}.btn.green{background:var(--green);box-shadow:0 10px 18px rgba(22,185,129,.22)}.btn:disabled{opacity:.55}.status{min-height:22px;margin-top:12px;text-align:center;color:var(--muted);font-weight:750}.ok{color:#078a63}.err{color:#c62828}.foot{position:fixed;left:24px;bottom:10px;color:#7f8799;font-size:12px}
    @media(max-width:980px){.page{grid-template-columns:1fr;gap:18px;align-items:start}.ad{min-height:auto}.ad.left{order:2}.ad.right{order:3}.portal{order:1}.ad h2{margin-top:18px}.foot{position:static;margin:0 18px 16px}} @media(max-width:520px){.page{width:min(100% - 18px,448px);margin:12px auto}.grid2,.row{grid-template-columns:1fr}.info{display:none}.form-wrap{padding:16px 14px}.ad{padding:22px 18px}}
  </style>
</head>
<body>
  <main class="page">
    <aside class="ad left">
      <div><div class="logo-row"><img src="/arkhon-mark.svg" alt=""><strong><span>ARKHON</span> Monitor</strong></div><h2>Lleva el control total de tu restaurante con <span>ARKHON</span>.</h2><ul><li>Ventas y cortes en tiempo real</li><li>Inventarios conectados</li><li>Facturacion electronica</li><li>Reportes por sucursal</li><li>Operacion en la nube</li></ul></div>
      <button class="ad-button" type="button">Descubre ARKHON</button>
    </aside>
    <section class="portal">
      <div class="portal-head"><div class="store"></div><div class="welcome">Bienvenido(a) al portal de facturacion. Recuerda que la informacion para generar tu factura se encuentra en tu ticket de compra.</div><div class="merchant"><b id="branchName">Sucursal</b><span>Portal Me-facturo por ARKHON Monitor</span></div></div>
      <form id="invoiceForm" class="form-wrap">
        <div class="row"><input class="field" id="csucursal" name="csucursal" placeholder="CODIGO DE SUCURSAL" required><button class="info" type="button">i</button></div>
        <div class="row"><input class="field" id="cfacturacion" name="cfacturacion" placeholder="CODIGO DE FACTURACION" required><button class="info" type="button">i</button></div>
        <input class="field" id="rfc" name="rfc" maxlength="13" placeholder="RFC" required>
        <div class="grid2" style="margin-top:9px"><select class="field" id="regimen_fiscal" name="regimen_fiscal" required></select><input class="field" id="codigo_postal" name="codigo_postal" placeholder="CODIGO POSTAL" required></div>
        <input class="field" id="razon_social" name="razon_social" placeholder="RAZON SOCIAL" style="margin-top:9px" required>
        <div class="grid2" style="margin-top:9px"><select class="field" id="uso_cfdi" name="uso_cfdi" required></select><select class="field" id="forma_pago" name="forma_pago" required></select></div>
        <input class="field" id="email" name="email" type="email" placeholder="EMAIL" style="margin-top:9px" required>
        <label class="consent"><input id="accept" class="switch" type="checkbox" required><span>Confirmo que mis datos son correctos conforme a mi constancia de situacion fiscal.</span></label>
        <div class="actions"><button id="submitBtn" class="btn" type="submit">Facturar</button><button id="resendBtn" class="btn green" type="button">Recuperar comprobante</button></div><div id="status" class="status"></div>
      </form>
    </section>
    <aside class="ad right">
      <div><div class="logo-row"><img src="/arkhon-mark.svg" alt=""><strong><span>ARKHON</span> Cloud</strong></div><h2>Automatiza tu operacion con datos <span>siempre disponibles</span>.</h2><p>Centraliza ventas, facturacion, reportes y sucursales desde un panel conectado a ARKHON Monitor.</p><div class="mini-dashboard"><div class="bars"><i></i><i></i><i></i></div></div></div>
      <button class="ad-button" type="button">Conocer mas</button>
    </aside>
  </main>
  <div class="foot">2026, portal de autofactura por ARKHON Monitor</div>
  <script>
    const fiscalRegimes=[['601','601 - General de Ley Personas Morales'],['603','603 - Personas Morales con Fines no Lucrativos'],['605','605 - Sueldos y Salarios'],['606','606 - Arrendamiento'],['612','612 - Actividades Empresariales'],['616','616 - Sin obligaciones fiscales'],['621','621 - Incorporacion Fiscal'],['626','626 - Regimen Simplificado de Confianza']];
    const cfdiUses=[['G01','G01 - Adquisicion de mercancias'],['G03','G03 - Gastos en general'],['S01','S01 - Sin efectos fiscales'],['CP01','CP01 - Pagos'],['D01','D01 - Honorarios medicos'],['D10','D10 - Servicios educativos']];
    const paymentForms=[['01','01 - Efectivo'],['03','03 - Transferencia electronica'],['04','04 - Tarjeta de credito'],['28','28 - Tarjeta de debito'],['99','99 - Por definir']];
    const $=id=>document.getElementById(id), params=new URLSearchParams(location.search);
    function fillSelect(id,items,placeholder){$(id).innerHTML=`<option value="">${placeholder}</option>`+items.map(([v,l])=>`<option value="${v}">${l}</option>`).join('')}
    function setStatus(message,type){$('status').textContent=message||'';$('status').className=`status ${type||''}`}
    async function api(path,options){const res=await fetch(path,{headers:{'Content-Type':'application/json',...(options&&options.headers||{})},...options});const data=await res.json().catch(()=>({ok:false,error:'Respuesta invalida del servidor'}));if(!res.ok||data.ok===false)throw new Error(data.error||'No se pudo completar la operacion');return data}
    function payload(){return{csucursal:$('csucursal').value.trim(),cfacturacion:$('cfacturacion').value.trim(),rfc:$('rfc').value.trim().toUpperCase(),regimen_fiscal:$('regimen_fiscal').value,razon_social:$('razon_social').value.trim(),codigo_postal:$('codigo_postal').value.trim(),uso_cfdi:$('uso_cfdi').value,forma_pago:$('forma_pago').value,email:$('email').value.trim()}}
    async function loadConfig(){fillSelect('regimen_fiscal',fiscalRegimes,'REGIMEN FISCAL');fillSelect('uso_cfdi',cfdiUses,'USO CFDI');fillSelect('forma_pago',paymentForms,'FORMA DE PAGO');$('csucursal').value=params.get('csucursal')||'';$('cfacturacion').value=params.get('cfacturacion')||'';try{const d=await api('/api/autofactura/config');const c=d.config||{};$('branchName').textContent=(c.branchName||'Sucursal').toUpperCase();if(!$('csucursal').value&&c.branchCode)$('csucursal').value=c.branchCode}catch(_){}}
    $('invoiceForm').addEventListener('submit',async e=>{e.preventDefault();if(!$('accept').checked)return setStatus('Confirma que tus datos son correctos.','err');$('submitBtn').disabled=true;setStatus('Generando factura...','');try{const d=await api('/api/autofactura/facturar',{method:'POST',body:JSON.stringify(payload())});setStatus(d.pending_sync?'Solicitud registrada. Se timbrara en cuanto haya conexion fiscal.':'Factura generada correctamente.','ok')}catch(err){setStatus(err.message,'err')}finally{$('submitBtn').disabled=false}});
    $('resendBtn').addEventListener('click',async()=>{const body=payload();if(!body.email||!body.cfacturacion)return setStatus('Captura email y codigo de facturacion para reenviar.','err');$('resendBtn').disabled=true;setStatus('Reenviando factura...','');try{await api('/api/autofactura/reenviar',{method:'POST',body:JSON.stringify(body)});setStatus('Factura reenviada al correo indicado.','ok')}catch(err){setStatus(err.message,'err')}finally{$('resendBtn').disabled=false}});
    loadConfig();
  </script>
</body>
</html>
