templates/website/page/indexes/support.html.twig line 1

  1. <!DOCTYPE html>
  2. <html lang="en" data-theme="dark">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  7.     <title>Vrshikyans — Support</title>
  8.     <meta name="description"
  9.           content="Support for Vrshikyans TOEFL, SAT, IELTS, ACT. Tutors, tests, subscriptions. Ask and track your requests." />
  10.     <link rel="preconnect" href="https://fonts.googleapis.com">
  11.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  12.     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap" rel="stylesheet">
  13.     <link rel="icon" href="{{ asset('students/Vrshikyan_logo.ico') }}" />
  14.     <meta name="color-scheme" content="dark light">
  16.     <style>
  17.         :root {
  18.             --bg: #0e1220;
  19.             --bg-2: #0c152b;
  20.             --surface: rgba(255, 255, 255, .07);
  21.             --surface-strong: rgba(12, 18, 40, .72);
  22.             --card: rgba(20, 26, 52, .85);
  23.             --border: rgba(140, 170, 255, .18);
  24.             --text: #f5f8ff;
  25.             --muted: #c7d1f2;
  26.             --accent: #78a6ff;
  27.             --accent-2: #66e6d2;
  28.             --green: #35d49f;
  29.             --violet: #a06bff;
  30.             --shadow-1: 0 10px 24px rgba(0, 0, 0, .28);
  31.             --shadow-2: 0 22px 60px rgba(0, 0, 0, .40);
  32.             --radius: 18px;
  33.             --blur: 14px;
  34.             --speed: .25s;
  35.             --fast: .15s;
  36.             --g1: #1c2550;
  37.             --g2: #142762;
  38.             --nav-h: 64px;
  39.         }
  41.         html[data-theme="light"] {
  42.             --bg: #f7f8fd;
  43.             --bg-2: #eef2ff;
  44.             --surface: rgba(255, 255, 255, .65);
  45.             --surface-strong: rgba(255, 255, 255, .92);
  46.             --card: rgba(255, 255, 255, .95);
  47.             --border: rgba(23, 32, 58, .12);
  48.             --text: #0f1428;
  49.             --muted: #3e4a74;
  50.             --shadow-1: 0 8px 20px rgba(23, 32, 58, .10);
  51.             --shadow-2: 0 24px 60px rgba(23, 32, 58, .16);
  52.             --g1: #dfe7ff;
  53.             --g2: #cfe0ff;
  54.         }
  56.         * {
  57.             box-sizing: border-box
  58.         }
  60.         html,
  61.         body {
  62.             height: 100%;
  63.             margin: 0
  64.         }
  66.         body {
  67.             font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  68.             color: var(--text);
  69.             line-height: 1.65;
  70.             overflow-x: hidden;
  71.             background:
  72.                     radial-gradient(160vw 120vh at -20vw -20vh, var(--g1) 0%, rgba(0, 0, 0, 0) 60%),
  73.                     radial-gradient(160vw 120vh at 120vw -10vh, var(--g2) 0%, rgba(0, 0, 0, 0) 55%),
  74.                     linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  75.             background-attachment: fixed, fixed, fixed;
  76.             -webkit-font-smoothing: antialiased;
  77.             -moz-osx-font-smoothing: grayscale;
  78.         }
  80.         body::before {
  81.             content: "";
  82.             position: fixed;
  83.             inset: 0;
  84.             z-index: 0;
  85.             pointer-events: none;
  86.             opacity: .05;
  87.             background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNjQnIGhlaWdodD0nNjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PGZpbHRlciBpZD0nbi1uJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44JyBudW1PY3RhdmVzPScyJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsbD0nd2hpdGUnIGZpbHRlcj0ndXJsKCMnKyc+PC9yZWN0Pjwvc3ZnPg==");
  88.             background-size: 240px 240px;
  89.             z-index: 0;
  90.         }
  92.         /* Nav */
  93.         .nav {
  94.             position: sticky;
  95.             top: 0;
  96.             z-index: 10;
  97.             height: var(--nav-h);
  98.             background: var(--surface-strong);
  99.             border-bottom: 1px solid var(--border);
  100.             backdrop-filter: blur(var(--blur)) saturate(140%);
  101.         }
  103.         .nav-inner {
  104.             width: min(1120px, 92%);
  105.             margin: 0 auto;
  106.             height: 100%;
  107.             display: flex;
  108.             align-items: center;
  109.             gap: 14px;
  110.         }
  112.         .brand {
  113.             display: flex;
  114.             gap: 12px;
  115.             align-items: center;
  116.             text-decoration: none;
  117.             color: var(--text);
  118.             font-weight: 900;
  119.             letter-spacing: .2px;
  120.         }
  122.         .logo {
  123.             width: 38px;
  124.             height: 38px;
  125.             border-radius: 12px;
  126.             background: linear-gradient(180deg, #6ea3ff, #4b82ff);
  127.             box-shadow: 0 10px 22px rgba(76, 130, 255, .22);
  128.             overflow: hidden;
  129.         }
  131.         .logo img {
  132.             width: 100%;
  133.             height: 100%;
  134.             object-fit: cover;
  135.             display: block
  136.         }
  138.         .spacer {
  139.             flex: 1
  140.         }
  142.         .theme-btn,
  143.         .cta {
  144.             display: inline-flex;
  145.             align-items: center;
  146.             justify-content: center;
  147.             height: 40px;
  148.             border-radius: 12px;
  149.         }
  151.         .theme-btn {
  152.             width: 40px;
  153.             border: 1px solid var(--border);
  154.             background: rgba(255, 255, 255, .08);
  155.             color: var(--text);
  156.             cursor: pointer;
  157.         }
  159.         .cta {
  160.             padding: 0 22px;
  161.             background: linear-gradient(180deg, #35d49f, #18b98a);
  162.             color: #061a11;
  163.             font-weight: 900;
  164.             text-decoration: none;
  165.             border: 0;
  166.             box-shadow: 0 10px 24px rgba(24, 185, 138, .22);
  167.         }
  169.         .inner {
  170.             width: min(1120px, 92%);
  171.             margin: 28px auto;
  172.             position: relative;
  173.             z-index: 1;
  174.         }
  176.         .h1 {
  177.             margin: 10px 0 4px;
  178.             font-size: clamp(34px, 4.8vw, 58px);
  179.             font-weight: 900;
  180.             text-shadow: 0 2px 16px rgba(0, 0, 0, .28);
  181.         }
  183.         .lead {
  184.             margin: 0;
  185.             color: var(--muted);
  186.         }
  188.         /*  layout */
  189.         .support-band {
  190.             margin-top: 18px;
  191.             border: 1px solid var(--border);
  192.             border-radius: var(--radius);
  193.             background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
  194.             padding: 16px;
  195.             display: flex;
  196.             align-items: center;
  197.             justify-content: space-between;
  198.             gap: 14px;
  199.             flex-wrap: wrap;
  200.         }
  202.         .support-layout {
  203.             margin-top: 18px;
  204.             display: grid;
  205.             grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  206.             gap: 16px;
  207.         }
  209.         @media (max-width:900px) {
  210.             .support-layout {
  211.                 grid-template-columns: 1fr;
  212.             }
  213.         }
  215.         .card {
  216.             padding: 16px;
  217.             border-radius: var(--radius);
  218.             border: 1px solid var(--border);
  219.             background: var(--card);
  220.             box-shadow: var(--shadow-1);
  221.             width: 100%;
  222.         }
  224.         .card h3 {
  225.             margin: 0 0 6px;
  226.         }
  228.         .btn {
  229.             height: 40px;
  230.             padding: 0 16px;
  231.             border-radius: 12px;
  232.             border: 0;
  233.             font-weight: 900;
  234.             cursor: pointer;
  235.             display: inline-flex;
  236.             align-items: center;
  237.             justify-content: center;
  238.             gap: 6px;
  239.         }
  241.         .btn.primary {
  242.             background: linear-gradient(180deg, #78a6ff, #4b82ff);
  243.             color: #08152c;
  244.             box-shadow: 0 10px 26px rgba(120, 166, 255, .26);
  245.         }
  247.         .btn.ghost {
  248.             background: rgba(255, 255, 255, .06);
  249.             border: 1px solid var(--border);
  250.             color: var(--text);
  251.         }
  253.         .btn.subtle {
  254.             background: transparent;
  255.             border: 0;
  256.             color: var(--muted);
  257.             font-size: 13px;
  258.             padding: 0 6px;
  259.             height: auto;
  260.         }
  262.         label {
  263.             font-weight: 800;
  264.             display: block;
  265.             margin: 10px 0 4px;
  266.             font-size: 14px;
  267.         }
  269.         input[type="text"],
  270.         select,
  271.         textarea {
  272.             width: 100%;
  273.             border: 1px solid var(--border);
  274.             background: rgba(255, 255, 255, .06);
  275.             padding: 9px 11px;
  276.             color: var(--text);
  277.             border-radius: 12px;
  278.             outline: none;
  279.             font: inherit;
  280.         }
  282.         textarea {
  283.             resize: vertical;
  284.             min-height: 130px;
  285.         }
  287.         /* bigger */
  288.         option {
  289.             color: navy;
  290.         }
  292.         .row {
  293.             display: grid;
  294.             grid-template-columns: 1fr 1fr;
  295.             gap: 10px;
  296.         }
  298.         @media (max-width:640px) {
  299.             .row {
  300.                 grid-template-columns: 1fr;
  301.             }
  302.         }
  304.         /* History panel */
  305.         .history-header {
  306.             display: flex;
  307.             align-items: center;
  308.             justify-content: space-between;
  309.             gap: 8px;
  310.             margin-bottom: 8px;
  311.         }
  313.         .history-list {
  314.             display: flex;
  315.             flex-direction: column;
  316.             gap: 8px;
  317.             max-height: 420px;
  318.             overflow: auto;
  319.             padding-right: 4px;
  320.         }
  322.         .ticket-row {
  323.             border-radius: 14px;
  324.             border: 1px solid var(--border);
  325.             background: rgba(255, 255, 255, .04);
  326.             padding: 10px 10px;
  327.             text-align: left;
  328.             width: 100%;
  329.             cursor: pointer;
  330.             display: flex;
  331.             flex-direction: column;
  332.             gap: 4px;
  333.             position: relative;
  334.         }
  336.         .ticket-row:hover {
  337.             background: rgba(255, 255, 255, .07);
  338.         }
  340.         .ticket-row.active {
  341.             border-color: var(--accent);
  342.             box-shadow: 0 0 0 1px rgba(120, 166, 255, .35);
  343.         }
  345.         .ticket-title {
  346.             font-weight: 800;
  347.             font-size: 14px;
  348.         }
  350.         .ticket-meta {
  351.             font-size: 13px;
  352.             color: var(--muted);
  353.         }
  355.         .ticket-badges {
  356.             display: flex;
  357.             flex-wrap: wrap;
  358.             gap: 6px;
  359.             margin-top: 2px;
  360.             font-size: 12px;
  361.         }
  363.         .ticket-badge {
  364.             padding: 3px 8px;
  365.             border-radius: 999px;
  366.             border: 1px solid var(--border);
  367.             background: rgba(255, 255, 255, .06);
  368.             color: var(--muted);
  369.             font-weight: 700;
  370.         }
  372.         .ticket-status {
  373.             position: absolute;
  374.             right: 10px;
  375.             top: 10px;
  376.             padding: 3px 8px;
  377.             border-radius: 999px;
  378.             font-size: 11px;
  379.             font-weight: 800;
  380.             letter-spacing: .03em;
  381.             text-transform: uppercase;
  382.             border: 1px solid rgba(210, 255, 230, .28);
  383.             color: #0f2016;
  384.             background: rgba(53, 212, 159, .86);
  385.         }
  387.         .ticket-status.closed {
  388.             background: rgba(160, 107, 255, .82);
  389.             border-color: rgba(230, 210, 255, .4);
  390.             color: #100621;
  391.         }
  393.         /* Chat card */
  394.         .chat-card {
  395.             display: flex;
  396.             flex-direction: column;
  397.             gap: 10px;
  398.             min-height: 360px;
  399.         }
  401.         .chat-header {
  402.             display: flex;
  403.             align-items: center;
  404.             justify-content: space-between;
  405.             gap: 8px;
  406.             flex-wrap: wrap;
  407.         }
  409.         .chat-header-main {
  410.             display: flex;
  411.             flex-direction: column;
  412.             gap: 2px;
  413.         }
  415.         .chat-title {
  416.             font-weight: 900;
  417.             font-size: 18px;
  418.         }
  420.         .chat-sub {
  421.             font-size: 13px;
  422.             color: var(--muted);
  423.         }
  425.         .chat-chips {
  426.             display: flex;
  427.             flex-wrap: wrap;
  428.             gap: 6px;
  429.             font-size: 12px;
  430.         }
  432.         .chip {
  433.             padding: 4px 9px;
  434.             border-radius: 999px;
  435.             border: 1px solid var(--border);
  436.             background: rgba(255, 255, 255, .08);
  437.             font-weight: 800;
  438.             color: var(--muted);
  439.         }
  441.         .back-btn {
  442.             display: none;
  443.         }
  445.         body.creating .back-btn {
  446.             display: inline-flex;
  447.         }
  449.         .chat-body {
  450.             flex: 1;
  451.             min-height: 260px;
  452.             border-radius: 16px;
  453.             border: 1px solid var(--border);
  454.             background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(15, 19, 32, .6));
  455.             padding: 12px;
  456.             overflow: auto;
  457.             max-height: 420px;
  458.             width: 100%;
  459.         }
  461.         .chat-empty {
  462.             height: 100%;
  463.             display: flex;
  464.             align-items: center;
  465.             justify-content: center;
  466.             text-align: center;
  467.             color: var(--muted);
  468.             font-size: 14px;
  469.             padding: 12px;
  470.         }
  472.         /* Messages */
  473.         .msg {
  474.             max-width: min(80%, 480px);
  475.             display: flex;
  476.             flex-direction: column;
  477.             gap: 3px;
  478.             margin-bottom: 10px;
  479.         }
  481.         .msg-user {
  482.             margin-left: auto;
  483.             align-items: flex-end;
  484.         }
  486.         .msg-admin {
  487.             margin-right: auto;
  488.             align-items: flex-start;
  489.         }
  491.         .msg-meta {
  492.             font-size: 11px;
  493.             color: var(--muted);
  494.             opacity: .9;
  495.         }
  497.         .msg-bubble {
  498.             padding: 9px 11px;
  499.             border-radius: 16px;
  500.             background: rgba(255, 255, 255, .10);
  501.             border: 1px solid rgba(255, 255, 255, .18);
  502.             font-size: 14px;
  503.             position: relative;
  504.         }
  506.         .msg-user .msg-bubble {
  507.             background: linear-gradient(180deg, #78a6ff, #4b82ff);
  508.             color: #050c1a;
  509.             border-color: rgba(24, 185, 138, .0);
  510.         }
  512.         .msg-admin .msg-bubble {
  513.             background: rgba(8, 14, 36, .9);
  514.             border-color: rgba(140, 170, 255, .35);
  515.         }
  517.         .msg-photos {
  518.             display: flex;
  519.             flex-wrap: wrap;
  520.             gap: 6px;
  521.             margin-top: 6px;
  522.         }
  524.         .msg-photos img {
  525.             width: 90px;
  526.             height: 90px;
  527.             border-radius: 10px;
  528.             object-fit: cover;
  529.             border: 1px solid rgba(255, 255, 255, .25);
  530.         }
  532.         /* Category step */
  533.         .category-step {
  534.             border-radius: 16px;
  535.             border: 1px dashed var(--border);
  536.             padding: 10px 10px 4px 10px;
  537.             background: rgba(255, 255, 255, .03);
  538.             font-size: 14px;
  539.             width: 100%;
  540.         }
  542.         .category-grid {
  543.             display: grid;
  544.             grid-template-columns: 1.1fr 1fr;
  545.             gap: 10px;
  546.         }
  548.         @media (max-width:640px) {
  549.             .category-grid {
  550.                 grid-template-columns: 1fr;
  551.             }
  552.         }
  554.         .subscription-extra {
  555.             margin-top: 6px;
  556.             display: none;
  557.         }
  559.         .topic-row {
  560.             margin-top: 2px;
  561.         }
  563.         /* Uploader for composer */
  564.         .composer {
  565.             margin-top: 8px;
  566.             border-radius: 16px;
  567.             border: 1px solid var(--border);
  568.             background: rgba(0, 0, 0, .18);
  569.             padding: 10px;
  570.             display: flex;
  571.             flex-direction: column;
  572.             gap: 8px;
  573.             width: 100%;
  574.         }
  576.         .composer-top {
  577.             display: flex;
  578.             gap: 10px;
  579.             align-items: flex-start;
  580.             flex-wrap: wrap;
  581.         }
  583.         .composer-top textarea {
  584.             flex: 1;
  585.         }
  587.         .composer-actions {
  588.             display: flex;
  589.             align-items: center;
  590.             justify-content: space-between;
  591.             gap: 10px;
  592.             flex-wrap: wrap;
  593.         }
  595.         .uploader {
  596.             border: 1px dashed var(--border);
  597.             border-radius: 12px;
  598.             padding: 8px;
  599.             text-align: center;
  600.             background: rgba(255, 255, 255, .04);
  601.             font-size: 13px;
  602.             flex: 1;
  603.         }
  605.         .uploader input {
  606.             display: none;
  607.         }
  609.         .uploader .hint {
  610.             color: var(--muted);
  611.             font-size: 12px;
  612.             margin-top: 2px;
  613.         }
  615.         .thumbs {
  616.             display: flex;
  617.             flex-wrap: wrap;
  618.             gap: 6px;
  619.             margin-top: 6px;
  620.         }
  622.         .thumb {
  623.             position: relative;
  624.             width: 80px;
  625.             height: 80px;
  626.             border-radius: 10px;
  627.             overflow: hidden;
  628.             border: 1px solid var(--border);
  629.             background: rgba(255, 255, 255, .08);
  630.             display: grid;
  631.             place-items: center;
  632.         }
  634.         .thumb img {
  635.             width: 100%;
  636.             height: 100%;
  637.             object-fit: cover;
  638.         }
  640.         .thumb button {
  641.             position: absolute;
  642.             top: 4px;
  643.             right: 4px;
  644.             border-radius: 999px;
  645.             border: 1px solid var(--border);
  646.             background: rgba(0, 0, 0, .5);
  647.             color: #fff;
  648.             font-size: 11px;
  649.             padding: 1px 6px;
  650.             cursor: pointer;
  651.         }
  653.         .category-step,
  654.         .composer {
  655.             display: none;
  656.         }
  658.         body.can-write .category-step,
  659.         body.can-write .composer {
  660.             display: block;
  661.         }
  663.         /* Mobile safety */
  664.         img,
  665.         video {
  666.             max-width: 100%;
  667.             height: auto;
  668.         }
  670.         .chat-body,
  671.         .card,
  672.         .support-layout {
  673.             max-width: 100%;
  674.             overflow-x: hidden;
  675.         }
  677.         /* Footer */
  678.         footer {
  679.             margin: 34px 0 18px;
  680.             position: relative;
  681.             z-index: 1;
  682.         }
  684.         .foot {
  685.             width: min(1120px, 92%);
  686.             margin: 0 auto;
  687.             border: 1px solid var(--border);
  688.             border-radius: var(--radius);
  689.             background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
  690.             padding: 16px;
  691.             display: grid;
  692.             grid-template-columns: 1fr 1fr;
  693.             gap: 14px;
  694.         }
  696.         @media (max-width:640px) {
  697.             .foot {
  698.                 grid-template-columns: 1fr;
  699.             }
  700.         }
  702.         body.creating .history-panel {
  703.             display: none;
  704.         }
  706.         body.creating .support-layout {
  707.             grid-template-columns: 1fr;
  708.         }
  709.     </style>
  710.     <link rel="stylesheet" href="{{ asset('css/navbar.css') }}" />
  711.     <script>
  712.   (() => {
  713.     const saved = localStorage.getItem('theme');
  714.     if (saved) {
  715.       document.documentElement.setAttribute('data-theme', saved);
  716.     } else {
  717.       document.documentElement.setAttribute(
  718.         'data-theme',
  719.         matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
  720.       );
  721.     }
  722.   })();
  723. </script>
  724. </head>
  726. <body>
  727.   <nav class="nav" role="navigation" aria-label="Primary">
  728.   <div class="nav-inner">
  729.     <a class="brand" href="/" aria-label="Exam-hub">
  730.       <span class="logo" aria-hidden="true" style="overflow: hidden;">
  731.         <img src="../students/Vrshikyan_logo.ico" width="39px" alt="Vrshikyans logo">
  732.       </span>
  733.       <span>Vrshikyans</span>&nbsp;&nbsp;
  734.     </a>
  736.     <div class="nav-links">
  737.       <a class="nav-link" data-section="toefl" href="./test-selection?type=toefl" id="toeflNav">TOEFL</a>
  738.       <a class="nav-link" data-section="sat" href="./test-sat-selection#sat" >SAT</a>
  739.       <a class="nav-link" data-section="act" href="./test-sat-selection#act">ACT</a>
  740.       <a class="nav-link" data-section="reading" href="./test-selection?type=readingPractice" id="readingPrNav">Reading Practice</a>
  741.       <a class="nav-link active" data-section="support" href="./support">Support</a>
  742.       <a class="nav-link" data-section="reviews" href="./reviews">Reviews</a>
  743.     </div>
  745.     <button class="mobile-menu-btn" id="mobileMenuBtn">☰</button>
  747.     <div class="spacer"></div>
  748.     <button id="themeToggle" class="theme-btn" aria-label="Toggle theme">🌑</button>
  749.     <a class="cta" id="startTop" href="../indexes/account" aria-label="Account"
  750.       style="width: 40px; height: 40px; background: whitesmoke;">👤</a>
  751.   </div>
  752. </nav>
  753. <div class="mobile-menu" id="mobileMenu">
  754.   <div class="mobile-nav-links">
  755.     <a class="mobile-nav-link" href="./test-selection?type=toefl">TOEFL</a>
  756.     <a class="mobile-nav-link" href="./test-sat-selection#sat">SAT</a>
  757.     <a class="mobile-nav-link" href="./test-sat-selection#act">ACT</a>
  758.     <a class="mobile-nav-link" href="./test-selection?type=readingPractice">Reading Practice</a>
  759.     <a class="mobile-nav-link" href="./support">Support</a>
  760.     <a class="mobile-nav-link" href="./reviews">Reviews</a>
  761.   </div>
  762. </div>
  764. <header class="inner">
  765.     <h1 class="h1">Support</h1>
  766.     <p class="lead">Tutors, tests, subscriptions — ask anything and keep all your requests in one place.</p>
  768.     <div class="support-band">
  769.         <div>
  770.             <strong>Need help fast?</strong>
  771.             <p class="lead" style="margin:.2rem 0 0 0; font-size:14px;">
  772.                 Open a new request and we’ll reply in the same chat, just like a messenger.
  773.             </p>
  774.         </div>
  775.         <button class="btn primary" id="newRequestBandBtn">
  776.             ✨ New request
  777.         </button>
  778.     </div>
  780.     <div class="support-layout" id="supportMain">
  781.         <aside class="card history-panel" aria-label="Support history">
  782.             <div class="history-header">
  783.                 <div>
  784.                     <h3>Your requests</h3>
  785.                     <p class="lead" style="margin:.1rem 0 0 0; font-size:13px;">
  786.                         Tap any request to reopen the chat.
  787.                     </p>
  788.                 </div>
  789.                 <button class="btn ghost" id="newRequestBtn">+ New</button>
  790.             </div>
  791.             <div class="history-list" id="historyList"></div>
  792.         </aside>
  794.         <section class="card chat-card" aria-label="Support conversation">
  795.             <div class="chat-header">
  796.                 <div class="chat-header-main">
  797.                     <div class="chat-title" id="chatTitle">Support inbox</div>
  798.                     <div class="chat-sub" id="chatSubtitle">
  799.                         Choose a request on the left or start a new one.
  800.                     </div>
  801.                 </div>
  802.                 <div style="display:flex; gap:6px; align-items:center; flex-wrap:wrap;">
  803.                     <div class="chat-chips" id="chatChips"></div>
  804.                     <button class="btn ghost back-btn" id="backToList">← Back to requests</button>
  805.                 </div>
  806.             </div>
  808.             <div class="category-step" id="categoryStep">
  809.                 <div style="display:flex; justify-content:space-between; align-items:center; gap:8px;">
  810.                         <span
  811.                                 style="font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800;">
  812.                             Request details
  813.                         </span>
  814.                     <span id="categoryHint" style="font-size:12px; color:var(--muted);">
  815.                             Pick a category to unlock the message box.
  816.                         </span>
  817.                 </div>
  818.                 <div class="category-grid" style="margin-top:4px;">
  819.                     <div>
  820.                         <label for="categorySelect">I need help with</label>
  821.                         <select id="categorySelect">
  822.                             <option value="">Choose a category</option>
  823.                             <option value="Tutors">Tutors</option>
  824.                             <option value="Info">Information about tests</option>
  825.                             <option value="Subscriptions">Subscriptions</option>
  826.                         </select>
  827.                     </div>
  828.                     <div id="categorySecondaryWrapper" style="display:none;">
  829.                         <label id="secondaryLabel" for="secondarySelect">Exam</label>
  830.                         <select id="secondarySelect"></select>
  831.                     </div>
  832.                 </div>
  834.                 <div class="subscription-extra" id="subscriptionExtra">
  835.                     <p class="lead" style="font-size:13px; margin:.4rem 0 0 0;">
  836.                         Billing questions, upgrades, cancellations — you can also check your plan here:
  837.                     </p>
  838.                     <a href="/#pricing" id="subscriptionLink" class="btn primary"
  839.                        style="margin-top:6px; font-size:13px;">
  840.                         ↗ Open subscription page
  841.                     </a>
  842.                 </div>
  844.                 <div class="row topic-row">
  845.                     <div>
  846.                         <label for="topicInput">Topic (optional)</label>
  847.                         <input id="topicInput" type="text"
  848.                                placeholder="e.g., SAT tutor, TOEFL test date, Subscription plan">
  849.                         <div class="lead" style="font-size:12px; margin:.2rem 0 0 0;">
  850.                             This short title will appear in your history.
  851.                         </div>
  852.                     </div>
  853.                 </div>
  854.             </div>
  856.             <div class="chat-body" id="chatBody">
  857.                 <div class="chat-empty" id="chatEmpty">
  858.                     <div>
  859.                         <p style="margin:0 0 4px 0;"><strong>No request selected</strong></p>
  860.                         <p style="margin:0; font-size:13px;">
  861.                             Start a new request or choose one from the left.
  862.                         </p>
  863.                     </div>
  864.                 </div>
  865.             </div>
  867.             <form class="composer" id="composerForm" autocomplete="off">
  868.                 <div class="composer-top">
  869.                         <textarea id="messageInput"
  870.                                   placeholder="Type your message… (at least a few characters)"></textarea>
  871.                     <div class="uploader" id="uploader">
  872.                         <p style="margin:0 0 2px 0;">
  873.                             <strong>Attach images</strong> or
  874.                             <label style="text-decoration:underline; cursor:pointer;">
  875.                                 <input type="file" id="photosInput" accept="image/*" multiple>
  876.                                 browse
  877.                             </label>
  878.                         </p>
  879.                         <div class="hint">Screenshots of tasks, scores, billing pages, etc. (~1MB each is ideal).
  880.                         </div>
  881.                         <div class="thumbs" id="thumbs"></div>
  882.                     </div>
  883.                 </div>
  884.                 <div class="composer-actions">
  885.                     <div style="display:flex; flex-direction:column; gap:2px;">
  886.                             <span style="font-size:11px; color:var(--muted);" id="composerStatus">
  887.                                 Choose a category above to send your first message.
  888.                             </span>
  889.                     </div>
  890.                     <button type="submit" class="btn primary" id="sendBtn">Send</button>
  891.                 </div>
  892.             </form>
  893.         </section>
  894.     </div>
  895. </header>
  897. <footer>
  898.     <div class="foot">
  899.         <div>
  900.             <b>Contact</b>
  901.             <p class="lead" style="margin:.4rem 0 0 0">examHubYerevan@gmail.com</p>
  902.             <p class="lead" style="margin:.2rem 0 0 0">+374 96 361 236</p>
  903.         </div>
  904.         <div>
  905.             <b>Vrshikyans</b>
  906.             <p class="lead" style="margin:.4rem 0 0 0">Yerevan • Since 2025</p>
  907.             <small>© <span id="year"></span> Vrshikyans — All rights reserved.</small>
  908.         </div>
  909.     </div>
  910. </footer>
  911. <script src="{{ asset('js/navbar.js') }}"></script>
  912. <script>
  913.     document.getElementById('year').textContent = new Date().getFullYear();
  915.     const supportApi = {
  916.         KEY: 'vrshikyans_support_v1',
  918.         async _request(url, method = 'GET', params = {}) {
  919.             const reqParams = {
  920.                 method: method,
  921.             }
  923.             if (Object.keys(params).length) {
  924.                 reqParams.body = JSON.stringify(params)
  925.             }
  926.             if (params instanceof FormData) {
  927.                 reqParams.body = params
  928.             }
  930.             const response = await fetch(url, reqParams);
  931.             return await response.json();
  932.         },
  933.         async _loadAll() {
  934.             return await this._request("/support/list");
  935.         },
  936.         async _saveAll(list) {
  937.             localStorage.setItem(this.KEY, JSON.stringify(list));
  938.         },
  939.         async list() {
  940.             const all = await this._loadAll();
  941.             all.sort((a, b) => (b.lastUpdated || b.createdAt) - (a.lastUpdated || a.createdAt));
  942.             return all;
  943.         },
  944.         async get(id) {
  945.             return await this._request(`/support/list/${id}`);
  946.         },
  947.         async create(ticket) {
  948.             return await this._request(`/support/create`, 'POST', ticket);
  949.         },
  950.         async createMsg(msg) {
  951.             const fileInput = document.querySelector('#photosInput')
  952.             const files = fileInput.files; // get selected files
  953.             const formData = new FormData();
  955.             for (const key in msg) {
  956.                 const value = msg[key];
  957.                 formData.append(key, value);
  958.             }
  960.             // Append all files
  961.             for (let i = 0; i < files.length; i++) {
  962.                 formData.append('photos[]', files[i]);
  963.             }
  965.             return await this._request(`/support/${uiState.activeTicketId}/create-msg`, 'POST', formData);
  966.         },
  967.         async update(ticket) {
  968.             const all = await this._loadAll();
  969.             const idx = all.findIndex(t => t.id === ticket.id);
  970.             if (idx !== -1) {
  971.                 all[idx] = ticket;
  972.                 await this._saveAll(all);
  973.                 return { ok: true };
  974.             }
  975.             return { ok: false };
  976.         }
  977.     };
  978.     const uiState = {
  979.         creating: false,
  980.         activeTicketId: null,
  981.         files: []
  982.     };
  984.     const historyList = document.getElementById('historyList');
  985.     const newRequestBtn = document.getElementById('newRequestBtn');
  986.     const newRequestBandBtn = document.getElementById('newRequestBandBtn');
  987.     const backToList = document.getElementById('backToList');
  989.     const chatTitle = document.getElementById('chatTitle');
  990.     const chatSubtitle = document.getElementById('chatSubtitle');
  991.     const chatChips = document.getElementById('chatChips');
  992.     const chatBody = document.getElementById('chatBody');
  993.     const chatEmpty = document.getElementById('chatEmpty');
  995.     const categorySelect = document.getElementById('categorySelect');
  996.     const categorySecondaryWrapper = document.getElementById('categorySecondaryWrapper');
  997.     const secondarySelect = document.getElementById('secondarySelect');
  998.     const secondaryLabel = document.getElementById('secondaryLabel');
  999.     const subscriptionExtra = document.getElementById('subscriptionExtra');
  1000.     const topicInput = document.getElementById('topicInput');
  1001.     const composerStatus = document.getElementById('composerStatus');
  1003.     const composerForm = document.getElementById('composerForm');
  1004.     const messageInput = document.getElementById('messageInput');
  1005.     const sendBtn = document.getElementById('sendBtn');
  1007.     const uploader = document.getElementById('uploader');
  1008.     const photosInput = document.getElementById('photosInput');
  1009.     const thumbs = document.getElementById('thumbs');
  1011.     function escapeHtml(s) {
  1012.         return String(s)
  1013.             .replaceAll('&', '&amp;')
  1014.             .replaceAll('<', '&lt;')
  1015.             .replaceAll('>', '&gt;')
  1016.             .replaceAll('"', '&quot;')
  1017.             .replaceAll("'", "&#39;");
  1018.     }
  1019.     function formatDate(ts) {
  1020.         const d = new Date(ts);
  1021.         return d.toLocaleDateString(undefined, {
  1022.             year: 'numeric', month: 'short', day: 'numeric'
  1023.         });
  1024.     }
  1025.     function formatTime(ts) {
  1026.         const d = new Date(ts);
  1027.         return d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
  1028.     }
  1029.     function shortCategory(main, sub) {
  1030.         if (!main && !sub) return '';
  1031.         if (main === 'Tutors') return 'Tutors' + (sub ? ' • ' + sub : '');
  1032.         if (main === 'Info') return 'Information • ' + (sub || 'Tests');
  1033.         if (main === 'Subscriptions') return 'Subscriptions';
  1034.         return [main, sub].filter(Boolean).join(' • ');
  1035.     }
  1037.     function isCategoryValidForNew() {
  1038.         const main = categorySelect.value;
  1039.         if (!main) return false;
  1040.         if (main === 'Tutors' || main === 'Info') {
  1041.             return !!secondarySelect.value;
  1042.         }
  1043.         return true;
  1044.     }
  1046.     function updateComposerStatus() {
  1047.         const hasTicket = !!uiState.activeTicketId;
  1048.         const main = categorySelect.value;
  1049.         const sec = secondarySelect.value;
  1051.         if (hasTicket) {
  1052.             composerStatus.textContent = 'You can continue writing in this chat.';
  1053.             messageInput.disabled = false;
  1054.             sendBtn.disabled = false;
  1055.             messageInput.placeholder = 'Type your message…';
  1056.             return;
  1057.         }
  1059.         if (!main) {
  1060.             composerStatus.textContent = 'Choose a category above to send your first message.';
  1061.             messageInput.disabled = true;
  1062.             sendBtn.disabled = true;
  1063.             messageInput.placeholder = 'Select a category to start typing…';
  1064.             messageInput.style.border = "1px solid red"
  1065.         } else if ((main === 'Tutors' || main === 'Info') && !sec) {
  1066.             composerStatus.textContent = 'Pick the exam to unlock the message box.';
  1067.             messageInput.disabled = true;
  1068.             sendBtn.disabled = true;
  1069.             messageInput.style.border = "1px solid red"
  1070.             messageInput.placeholder = 'Choose the exam first…';
  1071.         } else {
  1072.             composerStatus.textContent = 'Ready. Your first message will create a new support request.';
  1073.             messageInput.disabled = false;
  1074.             sendBtn.disabled = false;
  1075.             messageInput.style.border = ''
  1076.             messageInput.placeholder = 'Type your message… (at least a few characters)';
  1077.         }
  1078.     }
  1081.     function populateSecondary(main) {
  1082.         secondarySelect.innerHTML = '';
  1083.         const optEmpty = document.createElement('option');
  1084.         optEmpty.value = '';
  1085.         optEmpty.textContent = 'Choose an exam';
  1086.         secondarySelect.appendChild(optEmpty);
  1088.         const examsTutors = ['SAT', 'TOEFL', 'ACT', 'IELTS'];
  1089.         const examsInfo = ['SAT', 'TOEFL', 'ACT', 'IELTS', 'Overall information about all tests'];
  1091.         let list = [];
  1092.         if (main === 'Tutors') list = examsTutors;
  1093.         if (main === 'Info') list = examsInfo;
  1095.         list.forEach((name, idx) => {
  1096.             const o = document.createElement('option');
  1097.             o.value = (idx + 1);
  1098.             o.textContent = name;
  1099.             secondarySelect.appendChild(o);
  1100.         });
  1101.     }
  1103.     categorySelect.addEventListener('change', () => {
  1104.         const main = categorySelect.value;
  1105.         secondarySelect.value = '';
  1106.         subscriptionExtra.style.display = 'none';
  1107.         categorySecondaryWrapper.style.display = 'none';
  1109.         if (main === 'Tutors') {
  1110.             secondaryLabel.textContent = 'Which exam?';
  1111.             populateSecondary(main);
  1112.             categorySecondaryWrapper.style.display = '';
  1113.         } else if (main === 'Info') {
  1114.             secondaryLabel.textContent = 'About which test?';
  1115.             populateSecondary(main);
  1116.             categorySecondaryWrapper.style.display = '';
  1117.         } else if (main === 'Subscriptions') {
  1118.             subscriptionExtra.style.display = "block";
  1119.         }
  1121.         updateComposerStatus();
  1122.     });
  1124.     secondarySelect.addEventListener('change', updateComposerStatus);
  1126.     function addFiles(list) {
  1127.         const arr = [...list];
  1128.         arr.forEach(file => {
  1129.             if (!file.type.startsWith('image/')) return;
  1130.             const reader = new FileReader();
  1131.             reader.onload = () => {
  1132.                 uiState.files.push({ file, dataUrl: reader.result });
  1133.                 renderThumbs();
  1134.             };
  1135.             reader.readAsDataURL(file);
  1136.         });
  1137.     }
  1139.     photosInput.addEventListener('change', e => addFiles(e.target.files));
  1141.     uploader.addEventListener('dragover', e => {
  1142.         e.preventDefault();
  1143.         uploader.style.borderColor = 'var(--accent)';
  1144.     });
  1145.     uploader.addEventListener('dragleave', () => {
  1146.         uploader.style.borderColor = 'var(--border)';
  1147.     });
  1148.     uploader.addEventListener('drop', e => {
  1149.         e.preventDefault();
  1150.         uploader.style.borderColor = 'var(--border)';
  1151.         addFiles(e.dataTransfer.files);
  1152.     });
  1154.     function renderThumbs() {
  1155.         thumbs.innerHTML = '';
  1156.         uiState.files.forEach((f, idx) => {
  1157.             const el = document.createElement('div');
  1158.             el.className = 'thumb';
  1159.             el.innerHTML = `
  1160.           <img alt="preview ${idx + 1}">
  1161.           <button type="button">✕</button>
  1162.         `;
  1163.             el.querySelector('img').src = f.dataUrl;
  1164.             el.querySelector('button').addEventListener('click', () => {
  1165.                 uiState.files.splice(idx, 1);
  1166.                 renderThumbs();
  1167.             });
  1168.             thumbs.appendChild(el);
  1169.         });
  1170.     }
  1172.     function clearComposer() {
  1173.         messageInput.value = '';
  1174.         uiState.files = [];
  1175.         renderThumbs();
  1176.     }
  1178.     let cachedTickets = [];
  1180.     async function loadHistory() {
  1181.         cachedTickets = await supportApi.list();
  1182.         renderHistory();
  1183.     }
  1185.     function renderHistory() {
  1186.         historyList.innerHTML = '';
  1187.         if (!cachedTickets.length) {
  1188.             const p = document.createElement('p');
  1189.             p.className = 'lead';
  1190.             p.style.fontSize = '13px';
  1191.             p.style.margin = '0';
  1192.             p.textContent = 'No requests yet. Start with “New”.';
  1193.             historyList.appendChild(p);
  1194.             return;
  1195.         }
  1196.         cachedTickets.forEach(t => {
  1197.             const btn = document.createElement('button');
  1198.             btn.className = 'ticket-row' + (t.id === uiState.activeTicketId ? ' active' : '');
  1199.             btn.dataset.id = t.id;
  1200.             const subject = t.subject || shortCategory(t.categoryMain, t.categorySub) || 'Support request';
  1201.             const created = formatDate(t.createdAt);
  1202.             const statusClass = t.status === 'closed' ? 'ticket-status closed' : 'ticket-status';
  1204.             btn.innerHTML = `
  1205.           <div class="ticket-title">${escapeHtml(subject)}</div>
  1206.           <div class="ticket-meta">${escapeHtml(created)}</div>
  1207.           <div class="ticket-badges">
  1208.             ${t.categoryMain ? `<span class="ticket-badge">${escapeHtml(t.categoryMain === 'Info' ? 'Information about tests' : t.categoryMain)}</span>` : ''}
  1209.             ${t.categorySub ? `<span class="ticket-badge">${escapeHtml(t.categorySub)}</span>` : ''}
  1210.           </div>
  1211.           <span class="${statusClass}">${t.status === 'closed' ? 'Closed' : 'Open'}</span>
  1212.         `;
  1213.             btn.addEventListener('click', () => openExistingTicket(t.id));
  1214.             historyList.appendChild(btn);
  1215.         });
  1216.     }
  1218.     function renderChat(ticket) {
  1219.         chatBody.innerHTML = '';
  1220.         chatEmpty.style.display = 'none';
  1222.         if (!ticket || !ticket.messages || !ticket.messages.length) {
  1223.             const empty = document.createElement('div');
  1224.             empty.className = 'chat-empty';
  1225.             empty.innerHTML = `
  1226.           <div>
  1227.             <p style="margin:0 0 4px 0;"><strong>No messages yet</strong></p>
  1228.             <p style="margin:0; font-size:13px;">Write your first message below to start the conversation.</p>
  1229.           </div>
  1230.         `;
  1231.             chatBody.appendChild(empty);
  1232.             return;
  1233.         }
  1235.         ticket.messages.forEach(m => {
  1236.             const el = document.createElement('div');
  1237.             const isUser = m.from === 'user';
  1238.             el.className = 'msg ' + (isUser ? 'msg-user' : 'msg-admin');
  1239.             const fromLabel = isUser ? 'You' : 'Vrshikyans support';
  1240.             el.innerHTML = `
  1241.           <div class="msg-meta">${escapeHtml(fromLabel)} · ${escapeHtml(formatTime(m.createdAt))}</div>
  1242.           <div class="msg-bubble">
  1243.             ${m.text ? `<div>${escapeHtml(m.text)}</div>` : ''}
  1244.             ${m.photos && m.photos.length ? `
  1245.               <div class="msg-photos">
  1246.                 ${m.photos.map((p, idx) => `<img src="${p.url}" alt="attachment ${idx + 1}">`).join('')}
  1247.               </div>
  1248.             `: ''}
  1249.           </div>
  1250.         `;
  1251.             chatBody.appendChild(el);
  1252.         });
  1254.         chatBody.scrollTop = chatBody.scrollHeight;
  1255.     }
  1257.     function updateChatHeader(ticket) {
  1258.         chatChips.innerHTML = '';
  1260.         if (!ticket) {
  1261.             chatTitle.textContent = 'New support request';
  1262.             chatSubtitle.textContent = 'Pick a category and send your first message.';
  1263.             return;
  1264.         }
  1266.         const subject = ticket.subject || shortCategory(ticket.categoryMain, ticket.categorySub) || 'Support request';
  1267.         chatTitle.textContent = subject;
  1268.         const created = formatDate(ticket.createdAt);
  1269.         chatSubtitle.textContent = `Created ${created} • ${ticket.status === 'closed' ? 'Closed' : 'Open'}`;
  1271.         if (ticket.categoryMain) {
  1272.             const chipMain = document.createElement('span');
  1273.             chipMain.className = 'chip';
  1274.             chipMain.textContent = ticket.categoryMain === 'Info' ? 'Information about tests' : ticket.categoryMain;
  1275.             chatChips.appendChild(chipMain);
  1276.         }
  1277.         if (ticket.categorySub) {
  1278.             const chipSub = document.createElement('span');
  1279.             chipSub.className = 'chip';
  1280.             chipSub.textContent = ticket.categorySub;
  1281.             chatChips.appendChild(chipSub);
  1282.         }
  1283.     }
  1285.     function syncCategoryUI(ticket) {
  1286.         if (!ticket) {
  1287.             categorySelect.disabled = false;
  1288.             secondarySelect.disabled = false;
  1289.             topicInput.disabled = false;
  1291.             categorySelect.value = '';
  1292.             secondarySelect.innerHTML = '';
  1293.             categorySecondaryWrapper.style.display = 'none';
  1294.             subscriptionExtra.style.display = 'none';
  1295.             topicInput.value = '';
  1296.         } else {
  1297.             categorySelect.disabled = true;
  1298.             secondarySelect.disabled = true;
  1299.             topicInput.disabled = true;
  1301.             categorySelect.value = ticket.categoryMain || '';
  1302.             if (ticket.categoryMain === 'Tutors') {
  1303.                 populateSecondary('Tutors');
  1304.                 categorySecondaryWrapper.style.display = '';
  1305.             } else if (ticket.categoryMain === 'Info') {
  1306.                 populateSecondary('Info');
  1307.                 categorySecondaryWrapper.style.display = '';
  1308.             } else {
  1309.                 categorySecondaryWrapper.style.display = 'none';
  1310.             }
  1312.             if (ticket.categoryMain === 'Subscriptions') {
  1313.                 subscriptionExtra.style.display = '';
  1314.             } else {
  1315.                 subscriptionExtra.style.display = 'none';
  1316.             }
  1318.             if (ticket.categorySub) {
  1319.                 secondarySelect.value = ticket.categorySub;
  1320.             }
  1322.             topicInput.value = ticket.subject || '';
  1323.         }
  1325.         updateComposerStatus();
  1326.     }
  1328.     function startNewRequest() {
  1329.         uiState.creating = true;
  1330.         uiState.activeTicketId = null;
  1331.         document.body.classList.add('creating', 'can-write');
  1333.         chatTitle.textContent = 'New support request';
  1334.         chatSubtitle.textContent = 'Pick a category and send your first message.';
  1335.         chatChips.innerHTML = '';
  1336.         chatBody.innerHTML = '';
  1337.         chatEmpty.style.display = 'block';
  1338.         chatEmpty.innerHTML = `
  1339.         <div>
  1340.           <p style="margin:0 0 4px 0;"><strong>Describe your issue</strong></p>
  1341.           <p style="margin:0; font-size:13px;">Once you send the first message, this will turn into a chat thread.</p>
  1342.         </div>
  1343.       `;
  1344.         syncCategoryUI(null);
  1345.         clearComposer();
  1346.         renderHistory();
  1347.     }
  1349.     async function openExistingTicket(id) {
  1350.         uiState.creating = false;
  1351.         uiState.activeTicketId = id;
  1352.         document.body.classList.remove('creating');
  1353.         document.body.classList.add('can-write');
  1355.         const ticket = await supportApi.get(id);
  1356.         if (!ticket) return;
  1357.         updateChatHeader(ticket);
  1358.         syncCategoryUI(ticket);
  1359.         renderChat(ticket);
  1360.         renderHistory();
  1361.     }
  1363.     composerForm.addEventListener('submit', async (e) => {
  1364.         e.preventDefault();
  1365.         const text = messageInput.value.trim();
  1366.         const hasText = text.length >= 3;
  1367.         const hasPhotos = uiState.files.length > 0;
  1369.         if (!uiState.activeTicketId) {
  1370.             if (!isCategoryValidForNew()) {
  1371.                 updateComposerStatus();
  1372.                 messageInput.focus();
  1373.                 return;
  1374.             }
  1375.             if (!hasText && !hasPhotos) {
  1376.                 messageInput.focus();
  1377.                 return;
  1378.             }
  1379.         } else {
  1380.             if (!hasText && !hasPhotos) return;
  1381.         }
  1383.         const photos = uiState.files.map(f => ({ url: f.dataUrl }));
  1384.         clearComposer();
  1386.         let ticket;
  1387.         if (!uiState.activeTicketId) {
  1388.             const id = 't_' + Math.random().toString(36).slice(2);
  1389.             const now = Date.now();
  1390.             const main = categorySelect.value || '';
  1391.             const sub = (main === 'Tutors' || main === 'Info') ? (secondarySelect.value || '') : '';
  1392.             const subject = topicInput.value.trim() || shortCategory(main, sub) || 'Support request';
  1394.             ticket = {
  1395.                 subject,
  1396.                 categoryMain: main,
  1397.                 categorySub: sub,
  1398.                 status: 'open',
  1399.                 createdAt: now,
  1400.                 lastUpdated: now,
  1401.                 messages: []
  1402.             };
  1403.             const res = await supportApi.create(ticket);
  1404.             uiState.activeTicketId = res.id;
  1405.             uiState.creating = false;
  1406.             document.body.classList.remove('creating');
  1407.             document.body.classList.add('can-write');
  1408.         }
  1410.         ticket = await supportApi.get(uiState.activeTicketId);
  1411.         if (!ticket) return;
  1413.         const msg = {
  1414.             id: 'm_' + Math.random().toString(36).slice(2),
  1415.             from: 'user',
  1416.             text: text,
  1417.             photos: photos,
  1418.             createdAt: Date.now()
  1419.         };
  1420.         ticket.messages.push(msg);
  1421.         ticket.lastUpdated = msg.createdAt;
  1422.         await supportApi.createMsg(msg);
  1424.         updateChatHeader(ticket);
  1425.         syncCategoryUI(ticket);
  1426.         renderChat(ticket);
  1427.         await loadHistory();
  1428.     });
  1430.     newRequestBtn.addEventListener('click', startNewRequest);
  1431.     newRequestBandBtn.addEventListener('click', startNewRequest);
  1432.     backToList.addEventListener('click', () => {
  1433.         uiState.creating = false;
  1434.         document.body.classList.remove('creating', 'can-write');
  1435.         uiState.activeTicketId = null;
  1436.         chatTitle.textContent = 'Support inbox';
  1437.         chatSubtitle.textContent = 'Choose a request on the left or start a new one.';
  1438.         chatChips.innerHTML = '';
  1439.         chatBody.innerHTML = '';
  1440.         chatEmpty.style.display = 'block';
  1441.         chatEmpty.innerHTML = `
  1442.         <div>
  1443.           <p style="margin:0 0 4px 0;"><strong>No request selected</strong></p>
  1444.           <p style="margin:0; font-size:13px;">Pick a request from your history or create a new one.</p>
  1445.         </div>
  1446.       `;
  1447.         syncCategoryUI(null);
  1448.         clearComposer();
  1449.         renderHistory();
  1450.     });
  1452.     (async () => {
  1453.         const existing = await supportApi.list();
  1454.         if (!existing.length) {
  1455.             const seed = [
  1456.                 {
  1457.                     id: 't_seed1',
  1458.                     subject: 'SAT tutor',
  1459.                     categoryMain: 'Tutors',
  1460.                     categorySub: 'SAT',
  1461.                     status: 'closed',
  1462.                     createdAt: new Date('2024-12-22T10:00:00').getTime(),
  1463.                     lastUpdated: new Date('2024-12-22T11:05:00').getTime(),
  1464.                     messages: [
  1465.                         {
  1466.                             id: 'm1',
  1467.                             from: 'user',
  1468.                             text: 'Hi! I need a SAT tutor for March 2025. Can you recommend someone from Vrshikyans?',
  1469.                             photos: [],
  1470.                             createdAt: new Date('2024-12-22T10:00:00').getTime()
  1471.                         },
  1472.                         {
  1473.                             id: 'm2',
  1474.                             from: 'admin',
  1475.                             text: 'Of course! We can connect you with a tutor who focuses on the math section and one for Reading/English. We’ll email you the options today.',
  1476.                             photos: [],
  1477.                             createdAt: new Date('2024-12-22T10:20:00').getTime()
  1478.                         },
  1479.                         {
  1480.                             id: 'm3',
  1481.                             from: 'user',
  1482.                             text: 'Perfect, thank you so much!',
  1483.                             photos: [],
  1484.                             createdAt: new Date('2024-12-22T11:05:00').getTime()
  1485.                         }
  1486.                     ]
  1487.                 },
  1488.                 {
  1489.                     id: 't_seed2',
  1490.                     subject: 'TOEFL practice tests',
  1491.                     categoryMain: 'Info',
  1492.                     categorySub: 'TOEFL',
  1493.                     status: 'open',
  1494.                     createdAt: new Date('2023-11-14T15:00:00').getTime(),
  1495.                     lastUpdated: new Date('2023-11-14T15:35:00').getTime(),
  1496.                     messages: [
  1497.                         {
  1498.                             id: 'm1',
  1499.                             from: 'user',
  1500.                             text: 'Hi, are your TOEFL tests updated to the new format?',
  1501.                             photos: [],
  1502.                             createdAt: new Date('2023-11-14T15:00:00').getTime()
  1503.                         },
  1504.                         {
  1505.                             id: 'm2',
  1506.                             from: 'admin',
  1507.                             text: 'Yes! Our TOEFL Practice 2026 set follows the short reading + new speaking timing. Let us know which sections you care about most.',
  1508.                             photos: [],
  1509.                             createdAt: new Date('2023-11-14T15:20:00').getTime()
  1510.                         },
  1511.                         {
  1512.                             id: 'm3',
  1513.                             from: 'user',
  1514.                             text: 'I need more listening practice sets. How many do you have?',
  1515.                             photos: [],
  1516.                             createdAt: new Date('2023-11-14T15:35:00').getTime()
  1517.                         }
  1518.                     ]
  1519.                 }
  1520.             ];
  1521.             localStorage.setItem(supportApi.KEY, JSON.stringify(seed));
  1522.         }
  1523.         await loadHistory();
  1524.         updateComposerStatus();
  1525.     })();
  1526. </script>
  1527. </body>
  1529. </html>