<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Анкета кандидата — КОІН Group</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --navy: #1a2f4a;
    --navy-deep: #0f1d30;
    --cream: #f7f3ec;
    --cream-warm: #efe9dd;
    --burgundy: #7d2330;
    --burgundy-soft: #a13d4a;
    --ink: #1c1c1c;
    --ink-soft: #4a4a4a;
    --line: #d6cfc0;
    --green: #3d6b3d;
    --amber: #b8860b;
    --red: #8b2929;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { background: var(--cream); color: var(--ink); font-family: 'Manrope', sans-serif; line-height: 1.55; min-height: 100vh; }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(26,47,74,0.04) 1px, transparent 0);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
  }
  .container { max-width: 760px; margin: 0 auto; padding: 48px 28px 80px; position: relative; z-index: 1; }
  .container.wide { max-width: 1200px; }
  .brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--navy);
    padding-bottom: 18px;
    margin-bottom: 36px;
  }
  .brand-mark {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.5px;
    color: var(--navy);
  }
  .brand-mark span { color: var(--burgundy); }
  .brand-meta { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); }
  .preamble {
    background: var(--cream-warm);
    border-left: 4px solid var(--burgundy);
    padding: 28px 32px;
    margin-bottom: 40px;
  }
  .preamble h1 {
    font-family: 'Lora', serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.15;
    color: var(--navy-deep);
    margin-bottom: 14px;
    letter-spacing: -0.5px;
  }
  .preamble p { font-size: 15px; color: var(--ink-soft); margin-bottom: 12px; }
  .preamble a { color: var(--burgundy); text-decoration: none; border-bottom: 1px solid var(--burgundy-soft); padding-bottom: 1px; font-weight: 500; }
  .preamble a:hover { color: var(--burgundy-soft); }
  .position-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 14px;
    background: var(--navy);
    color: var(--cream);
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 600;
  }
  .form-section { margin-bottom: 36px; }
  .section-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .section-num {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--burgundy);
    line-height: 1;
  }
  .section-title {
    font-family: 'Lora', serif;
    font-weight: 600;
    font-size: 19px;
    color: var(--navy-deep);
    line-height: 1.3;
  }
  .field-group { margin-bottom: 22px; }
  .field-group label.field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-deep);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
  }
  .required { color: var(--burgundy); margin-left: 2px; }
  input[type="text"], input[type="email"], input[type="tel"], textarea {
    width: 100%;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 2px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--ink);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  input:focus, textarea:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(26,47,74,0.08);
  }
  textarea { resize: vertical; min-height: 90px; font-family: 'Manrope', sans-serif; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }
  .options { display: flex; flex-direction: column; gap: 8px; }
  .option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .option:hover { border-color: var(--navy); background: #fdfcf8; }
  .option input[type="radio"] { margin-top: 3px; accent-color: var(--burgundy); cursor: pointer; flex-shrink: 0; }
  .option.selected { border-color: var(--burgundy); background: #fdf6f0; }
  .option-text { font-size: 14px; color: var(--ink); line-height: 1.45; }
  .file-zone {
    border: 2px dashed var(--line);
    background: #fff;
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    border-radius: 2px;
  }
  .file-zone:hover { border-color: var(--burgundy); background: #fdf6f0; }
  .file-zone.has-file { border-style: solid; border-color: var(--green); background: #f4f8f4; }
  .file-zone-icon { font-size: 32px; margin-bottom: 8px; opacity: 0.6; }
  .file-zone-text { font-size: 14px; color: var(--ink-soft); }
  .file-zone-hint { font-size: 12px; color: var(--ink-soft); margin-top: 4px; opacity: 0.7; }
  .file-zone.has-file .file-zone-text { color: var(--green); font-weight: 600; }
  #resume-input { display: none; }
  .submit-row {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 2px solid var(--navy);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
  }
  button.primary {
    background: var(--navy);
    color: var(--cream);
    padding: 14px 36px;
    border: none;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 2px;
  }
  button.primary:hover { background: var(--burgundy); }
  button.primary:disabled { opacity: 0.5; cursor: not-allowed; }
  .submit-hint { font-size: 12px; color: var(--ink-soft); }
  .thanks {
    text-align: center;
    padding: 80px 24px;
    background: var(--cream-warm);
    border: 1px solid var(--line);
  }
  .thanks-mark { font-family: 'Lora', serif; font-size: 64px; color: var(--green); margin-bottom: 20px; }
  .thanks h2 { font-family: 'Lora', serif; font-weight: 600; font-size: 28px; color: var(--navy-deep); margin-bottom: 12px; }
  .thanks p { color: var(--ink-soft); font-size: 15px; max-width: 480px; margin: 0 auto; }
  .admin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid var(--navy);
    padding-bottom: 16px;
    margin-bottom: 28px;
  }
  .admin-header h1 {
    font-family: 'Lora', serif;
    font-weight: 600;
    font-size: 28px;
    color: var(--navy-deep);
  }
  .admin-stats { display: flex; gap: 24px; font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1px; }
  .admin-stats strong { display: block; font-family: 'Lora', serif; font-size: 22px; color: var(--navy); margin-top: 2px; font-weight: 600; }
  .admin-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    align-items: center;
  }
  .admin-toolbar button, .admin-toolbar select {
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--line);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    cursor: pointer;
    color: var(--ink);
    border-radius: 2px;
  }
  .admin-toolbar button:hover { border-color: var(--navy); }
  .admin-toolbar button.danger { color: var(--red); }
  .admin-toolbar button.danger:hover { border-color: var(--red); background: #fef5f5; }
  table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 13px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  thead th {
    background: var(--navy);
    color: var(--cream);
    text-align: left;
    padding: 12px 14px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: sticky;
    top: 0;
  }
  tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
  }
  tbody tr:hover { background: var(--cream-warm); cursor: pointer; }
  tbody tr.expanded { background: var(--cream-warm); }
  .score-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 12px;
    font-family: 'Lora', serif;
  }
  .score-5 { background: #d4e8d4; color: #1f4a1f; }
  .score-4 { background: #e0ecda; color: #3d6b3d; }
  .score-3 { background: #fdf2d8; color: #806000; }
  .score-2 { background: #fbe5d6; color: #843c0c; }
  .score-1 { background: #f5d4d4; color: #6b1818; }
  .detail-row td { background: #fdfcf8; padding: 24px 28px; border-bottom: 2px solid var(--navy); }
  .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  @media (max-width: 800px) { .detail-grid { grid-template-columns: 1fr; } }
  .detail-block h4 { font-family: 'Lora', serif; font-weight: 600; color: var(--navy-deep); margin-bottom: 10px; font-size: 15px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .qa-item { margin-bottom: 14px; font-size: 13px; }
  .qa-q { color: var(--ink-soft); font-weight: 500; margin-bottom: 3px; }
  .qa-a { color: var(--ink); }
  .qa-points { display: inline-block; margin-left: 6px; font-size: 11px; color: var(--burgundy); font-weight: 600; }
  .empty-state {
    text-align: center;
    padding: 80px 24px;
    background: #fff;
    border: 1px dashed var(--line);
  }
  .empty-state h2 { font-family: 'Lora', serif; color: var(--navy-deep); margin-bottom: 8px; }
  .empty-state p { color: var(--ink-soft); font-size: 14px; }
  .gate {
    max-width: 420px;
    margin: 100px auto;
    padding: 40px 36px;
    background: #fff;
    border: 1px solid var(--line);
    text-align: center;
  }
  .gate h2 { font-family: 'Lora', serif; font-size: 22px; color: var(--navy-deep); margin-bottom: 8px; }
  .gate p { font-size: 13px; color: var(--ink-soft); margin-bottom: 22px; }
  .gate input { text-align: center; font-size: 16px; letter-spacing: 2px; }
  .gate button { margin-top: 16px; }
  .gate-error { color: var(--red); font-size: 12px; margin-top: 8px; }
  .resume-link {
    color: var(--burgundy);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px dotted var(--burgundy-soft);
  }
  .resume-link:hover { color: var(--burgundy-soft); }
  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--ink-soft);
    font-size: 14px;
  }
  .field-error { font-size: 12px; color: var(--red); margin-top: 4px; }
</style>
</head>
<body>
<!-- ====== CANDIDATE VIEW ====== -->
<div id="candidate-view" class="container">

  <header class="brand">
    <div class="brand-mark">КО<span>І</span>Н Group</div>
    <div class="brand-meta">Анкета · Кандидат</div>
  </header>

  <section class="preamble">
    <h1>Дякуємо за інтерес до роботи в нашій компанії</h1>
    <p>«КОІН Group» — одеська група компаній, яка управляє житловою та комерційною нерухомістю: 11 житлових і комерційних комплексів, понад 10 років на ринку.</p>
    <p>Сайт компанії: <a href="https://www.ykkoin.com/uk/home-ua/" target="_blank" rel="noopener">www.ykkoin.com</a></p>
    <div class="position-badge">Бухгалтер з первинної документації</div>
  </section>

  <div id="form-wrap">
    <form id="application-form" onsubmit="return false;">

      <!-- Контакти -->
      <section class="form-section">
        <div class="section-header">
          <div class="section-num">·</div>
          <div class="section-title">Контактні дані</div>
        </div>
        <div class="field-group">
          <label class="field-label">Прізвище, ім'я, по батькові<span class="required">*</span></label>
          <input type="text" name="fullname" required placeholder="Іваненко Олена Петрівна">
        </div>
        <div class="grid-2">
          <div class="field-group">
            <label class="field-label">Телефон<span class="required">*</span></label>
            <input type="tel" name="phone" required placeholder="+380 XX XXX XX XX">
          </div>
          <div class="field-group">
            <label class="field-label">E-mail<span class="required">*</span></label>
            <input type="email" name="email" required placeholder="example@gmail.com">
          </div>
        </div>
        <div class="grid-2">
          <div class="field-group">
            <label class="field-label">Місто проживання</label>
            <input type="text" name="city" placeholder="Одеса">
          </div>
          <div class="field-group">
            <label class="field-label">Очікувана зарплата (грн)</label>
            <input type="text" name="salary" placeholder="Наприклад: 25 000 грн">
          </div>
        </div>
      </section>

      <!-- Q1 -->
      <section class="form-section">
        <div class="section-header">
          <div class="section-num">1</div>
          <div class="section-title">Збір первинної документації від підрядників</div>
        </div>
        <p style="font-size:13px;color:var(--ink-soft);margin-bottom:14px;">Кожного кварталу потрібно збирати акти звіряння від десятків контрагентів та ФОП. Частина не відповідає — потрібно дзвонити, нагадувати, домагатися відповіді. Як вам такий формат роботи?</p>
        <div class="options" data-question="q1">
          <label class="option"><input type="radio" name="q1" value="5"><span class="option-text">Маю системний досвід: веду реєстри статусів, дзвоню та пишу регулярно — це частина роботи, а не виняток</span></label>
          <label class="option"><input type="radio" name="q1" value="4"><span class="option-text">Робила подібне, телефонні переговори з контрагентами не складають проблему</span></label>
          <label class="option"><input type="radio" name="q1" value="3"><span class="option-text">Робила час від часу, в основному пишу електронною поштою, дзвоню рідко</span></label>
          <label class="option"><input type="radio" name="q1" value="2"><span class="option-text">Не люблю дзвонити, надаю перевагу письмовому спілкуванню</span></label>
          <label class="option"><input type="radio" name="q1" value="1"><span class="option-text">Не маю такого досвіду, цим займались інші</span></label>
        </div>
      </section>

      <!-- Q2 -->
      <section class="form-section">
        <div class="section-header">
          <div class="section-num">2</div>
          <div class="section-title">«Вчасно», «М.E.Doc» та рознесення банку</div>
        </div>
        <p style="font-size:13px;color:var(--ink-soft);margin-bottom:14px;">У нас 5 юридичних осіб з рахунками в ПриватБанку та МТБ. Щоденне рознесення виписок, обробка вхідних документів у «Вчасно» та «М.E.Doc». Ваш досвід?</p>
        <div class="options" data-question="q2">
          <label class="option"><input type="radio" name="q2" value="5"><span class="option-text">Впевнений користувач «Вчасно» та «М.E.Doc», вела рознесення банку по 3+ юрособах паралельно</span></label>
          <label class="option"><input type="radio" name="q2" value="4"><span class="option-text">Працювала з обома сервісами, рознесення банку по 1–2 юрособах</span></label>
          <label class="option"><input type="radio" name="q2" value="3"><span class="option-text">Знаю один із сервісів («Вчасно» або «М.E.Doc»), банк рознесення робила</span></label>
          <label class="option"><input type="radio" name="q2" value="2"><span class="option-text">Бачила в роботі, але самостійно не вела</span></label>
          <label class="option"><input type="radio" name="q2" value="1"><span class="option-text">Не працювала з цими програмами</span></label>
        </div>
      </section>

      <!-- Q3 -->
      <section class="form-section">
        <div class="section-header">
          <div class="section-num">3</div>
          <div class="section-title">Робота під жорсткий щомісячний дедлайн</div>
        </div>
        <p style="font-size:13px;color:var(--ink-soft);margin-bottom:14px;">Щомісяця до 7-го числа потрібно зібрати показники, заповнити шаблони актів та надіслати в «Нафтогаз». Пропуск — штраф. Як ви організовуєте такі задачі?</p>
        <div class="options" data-question="q3">
          <label class="option"><input type="radio" name="q3" value="5"><span class="option-text">Завжди ставлю собі внутрішній дедлайн на 1–2 дні раніше офіційного, веду календарні нагадування, маю чек-листи</span></label>
          <label class="option"><input type="radio" name="q3" value="4"><span class="option-text">Веду календар та нагадування, дедлайни не пропускала</span></label>
          <label class="option"><input type="radio" name="q3" value="3"><span class="option-text">Орієнтуюсь по обставинах, зазвичай встигаю</span></label>
          <label class="option"><input type="radio" name="q3" value="2"><span class="option-text">Бувало, що затримувалась через зовнішні фактори</span></label>
          <label class="option"><input type="radio" name="q3" value="1"><span class="option-text">Не працювала з регулярними жорсткими дедлайнами</span></label>
        </div>
      </section>

      <!-- Q4 -->
      <section class="form-section">
        <div class="section-header">
          <div class="section-num">4</div>
          <div class="section-title">Акти звіряння з контрагентами</div>
        </div>
        <p style="font-size:13px;color:var(--ink-soft);margin-bottom:14px;">Якщо акт звіряння показав розходження на користь постачальника — ваші дії?</p>
        <div class="options" data-question="q4">
          <label class="option"><input type="radio" name="q4" value="5"><span class="option-text">Підіймаю первинку обох сторін, шукаю джерело розбіжності, оформлюю бухгалтерську довідку, не підписую акт до з'ясування</span></label>
          <label class="option"><input type="radio" name="q4" value="4"><span class="option-text">Перевіряю свою сторону, звіряю з постачальником по документах, виправляю помилки</span></label>
          <label class="option"><input type="radio" name="q4" value="3"><span class="option-text">Передаю розходження головному бухгалтеру для з'ясування</span></label>
          <label class="option"><input type="radio" name="q4" value="2"><span class="option-text">Підпишу як у постачальника та потім розберуся</span></label>
          <label class="option"><input type="radio" name="q4" value="1"><span class="option-text">Не робила звірянь самостійно</span></label>
        </div>
      </section>

      <!-- Q5 -->
      <section class="form-section">
        <div class="section-header">
          <div class="section-num">5</div>
          <div class="section-title">Програмні навички</div>
        </div>
        <p style="font-size:13px;color:var(--ink-soft);margin-bottom:14px;">Які програми ви знаєте на робочому рівні?</p>
        <div class="options" data-question="q5">
          <label class="option"><input type="radio" name="q5" value="5"><span class="option-text">1С/BAS/УНФ + «Вчасно» + «М.E.Doc» + Excel (зведені таблиці, ВПР) + Google Sheets/Drive</span></label>
          <label class="option"><input type="radio" name="q5" value="4"><span class="option-text">1С/BAS + «М.E.Doc» + Excel на середньому рівні, Google Drive для обміну файлами</span></label>
          <label class="option"><input type="radio" name="q5" value="3"><span class="option-text">1С/BAS + Excel базовий, готова вчити нове</span></label>
          <label class="option"><input type="radio" name="q5" value="2"><span class="option-text">Тільки 1С та базовий Excel</span></label>
          <label class="option"><input type="radio" name="q5" value="1"><span class="option-text">Працюю переважно з паперами, програми освоюю повільно</span></label>
        </div>
      </section>

      <!-- Q6 -->
      <section class="form-section">
        <div class="section-header">
          <div class="section-num">6</div>
          <div class="section-title">Мотивація та довгостроковість</div>
        </div>
        <p style="font-size:13px;color:var(--ink-soft);margin-bottom:14px;">Скільки часу ви плануєте працювати на одному місці?</p>
        <div class="options" data-question="q6">
          <label class="option"><input type="radio" name="q6" value="5"><span class="option-text">Шукаю роботу на 5+ років, мене приваблює стабільність та галузь управління нерухомістю</span></label>
          <label class="option"><input type="radio" name="q6" value="4"><span class="option-text">3–5 років, цікавить специфіка УК/ЖКГ та можливість зростання</span></label>
          <label class="option"><input type="radio" name="q6" value="3"><span class="option-text">2–3 роки, далі — за обставинами</span></label>
          <label class="option"><input type="radio" name="q6" value="2"><span class="option-text">1–2 роки, шукаю де краще</span></label>
          <label class="option"><input type="radio" name="q6" value="1"><span class="option-text">Потрібна будь-яка робота, плани не маю</span></label>
        </div>
      </section>

      <!-- Уточнения -->
      <section class="form-section">
        <div class="section-header">
          <div class="section-num">7</div>
          <div class="section-title">Короткі уточнення</div>
        </div>
        <div class="field-group">
          <label class="field-label">Опишіть коротко свій досвід роботи бухгалтером (де, скільки років, ділянка)</label>
          <textarea name="experience" placeholder="Наприклад: ТОВ «Назва», 2020–2025, ділянка первинної документації, 3 юрособи паралельно..."></textarea>
        </div>
        <div class="field-group">
          <label class="field-label">Чому ви хочете працювати саме в «КОІН Group»?</label>
          <textarea name="motivation" placeholder="Декілька речень — що приваблює, чим ви будете корисні..."></textarea>
        </div>
      </section>

      <!-- Резюме -->
      <section class="form-section">
        <div class="section-header">
          <div class="section-num">·</div>
          <div class="section-title">Резюме</div>
        </div>
        <label class="file-zone" id="file-zone" for="resume-input">
          <div class="file-zone-icon">⌥</div>
          <div class="file-zone-text" id="file-text">Натисніть, щоб завантажити резюме</div>
          <div class="file-zone-hint">PDF, DOC, DOCX · до 2 МБ</div>
        </label>
        <input type="file" id="resume-input" accept=".pdf,.doc,.docx" onchange="handleFile(this)">
      </section>

      <div class="submit-row">
        <div class="submit-hint">Заповнюючи анкету, ви погоджуєтесь на обробку персональних даних</div>
        <button type="button" class="primary" id="submit-btn" onclick="submitForm()">Надіслати анкету</button>
      </div>

    </form>
  </div>

  <div id="thanks-wrap" style="display:none;">
    <div class="thanks">
      <div class="thanks-mark">✓</div>
      <h2>Дякуємо!</h2>
      <p>Ваша анкета отримана. Якщо ваш досвід нам підійде, ми зв'яжемося протягом 5 робочих днів.</p>
    </div>
  </div>

</div>

<!-- ====== ADMIN VIEW ====== -->
<div id="admin-view" class="container wide" style="display:none;">

  <div id="gate-wrap">
    <div class="gate">
      <h2>Адміністративний доступ</h2>
      <p>Введіть пароль для перегляду заявок</p>
      <input type="password" id="gate-password" placeholder="••••••" onkeyup="if(event.key==='Enter')checkPassword()">
      <button class="primary" onclick="checkPassword()">Увійти</button>
      <div class="gate-error" id="gate-error" style="display:none;">Невірний пароль</div>
    </div>
  </div>

  <div id="admin-content" style="display:none;">
    <header class="admin-header">
      <div>
        <h1>Заявки кандидатів</h1>
        <div style="font-size:12px;color:var(--ink-soft);margin-top:4px;">Бухгалтер з первинної документації · КОІН Group</div>
      </div>
      <div class="admin-stats">
        <div>Всього заявок<strong id="stat-total">0</strong></div>
        <div>Середній бал<strong id="stat-avg">—</strong></div>
        <div>Топ-кандидатів<strong id="stat-top">0</strong></div>
      </div>
    </header>

    <div class="admin-toolbar">
      <select id="sort-select" onchange="renderApplications()">
        <option value="score-desc">За балом (спочатку високі)</option>
        <option value="score-asc">За балом (спочатку низькі)</option>
        <option value="date-desc">За датою (нові)</option>
        <option value="date-asc">За датою (старі)</option>
      </select>
      <select id="filter-select" onchange="renderApplications()">
        <option value="all">Всі кандидати</option>
        <option value="top">Тільки бал ≥ 4</option>
        <option value="middle">Бал 3</option>
        <option value="low">Бал ≤ 2</option>
      </select>
      <button onclick="exportCSV()">Експорт CSV</button>
      <button onclick="loadApplications()">Оновити</button>
      <button class="danger" onclick="clearAll()">Очистити все</button>
    </div>

    <div id="applications-container">
      <div class="loading">Завантаження...</div>
    </div>
  </div>
</div>
<script>
// ============================================================
// КОНФИГУРАЦИЯ
// ============================================================

// URL твоего Apps Script веб-приложения (замени если изменится)
const APPS_SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbwBaGpH5AGgxSmsdwjv8-0T3joDtwb541H2NRCVz3lEw6jLBQHKoLpcknsoNF1O2ORb/exec';

// ============================================================
// ROUTING & MODE
// ============================================================
let currentMode = 'candidate';

function getInitialMode() {
  const params = new URLSearchParams(window.location.search);
  const role = params.get('role');
  if (role === 'admin') return 'admin';
  return 'candidate';
}

function init() {
  currentMode = getInitialMode();
  if (currentMode === 'admin') {
    document.getElementById('candidate-view').style.display = 'none';
    document.getElementById('admin-view').style.display = 'block';
    const authed = sessionStorage.getItem('koin-admin-authed');
    if (authed === 'yes') {
      document.getElementById('gate-wrap').style.display = 'none';
      document.getElementById('admin-content').style.display = 'block';
      loadApplications();
    } else {
      document.getElementById('gate-wrap').style.display = 'block';
      document.getElementById('admin-content').style.display = 'none';
    }
  } else {
    document.getElementById('candidate-view').style.display = 'block';
    document.getElementById('admin-view').style.display = 'none';
  }
}

// ============================================================
// CANDIDATE FORM
// ============================================================
let resumeData = null;

function handleFile(input) {
  const file = input.files[0];
  if (!file) return;
  if (file.size > 2 * 1024 * 1024) {
    alert('Файл занадто великий. Максимум 2 МБ.');
    input.value = '';
    return;
  }
  const reader = new FileReader();
  reader.onload = (e) => {
    resumeData = {
      name: file.name,
      type: file.type,
      size: file.size,
      data: e.target.result
    };
    document.getElementById('file-zone').classList.add('has-file');
    document.getElementById('file-text').textContent = '✓ ' + file.name;
  };
  reader.readAsDataURL(file);
}

// Подсветка выбранной опции
document.querySelectorAll('.options').forEach(group => {
  group.addEventListener('change', (e) => {
    if (e.target.type === 'radio') {
      group.querySelectorAll('.option').forEach(o => o.classList.remove('selected'));
      e.target.closest('.option').classList.add('selected');
    }
  });
});

async function submitForm() {
  const form = document.getElementById('application-form');
  const fd = new FormData(form);
  const data = {};
  for (const [k, v] of fd.entries()) data[k] = v;

  // Валидация
  const required = ['fullname', 'phone', 'email'];
  for (const r of required) {
    if (!data[r] || !data[r].trim()) {
      alert('Будь ласка, заповніть всі обов\'язкові поля (ПІБ, телефон, e-mail)');
      return;
    }
  }
  for (let i = 1; i <= 6; i++) {
    if (!data['q' + i]) {
      alert('Будь ласка, дайте відповідь на питання ' + i);
      return;
    }
  }

  const submitBtn = document.getElementById('submit-btn');
  submitBtn.disabled = true;
  submitBtn.textContent = 'Надсилання...';

  try {
    const payload = {
      action: 'submit',
      data: {
        fullname: data.fullname.trim(),
        phone: data.phone.trim(),
        email: data.email.trim(),
        city: (data.city || '').trim(),
        salary: (data.salary || '').trim(),
        experience: (data.experience || '').trim(),
        motivation: (data.motivation || '').trim(),
        q1: data.q1, q2: data.q2, q3: data.q3,
        q4: data.q4, q5: data.q5, q6: data.q6,
        resume: resumeData
      }
    };

    const response = await fetch(APPS_SCRIPT_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'text/plain;charset=utf-8' },
      body: JSON.stringify(payload)
    });

    const result = await response.json();

    if (result.ok) {
      document.getElementById('form-wrap').style.display = 'none';
      document.getElementById('thanks-wrap').style.display = 'block';
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } else {
      throw new Error(result.error || 'Помилка сервера');
    }
  } catch (err) {
    console.error('Submit error:', err);
    alert('Помилка під час надсилання. Перевірте інтернет-з\'єднання та спробуйте ще раз.');
    submitBtn.disabled = false;
    submitBtn.textContent = 'Надіслати анкету';
  }
}

// ============================================================
// ADMIN
// ============================================================
let allApplications = [];

const QUESTION_LABELS = {
  q1: '1. Збір первички та обзвон підрядників',
  q2: '2. «Вчасно»/«М.E.Doc» та банк',
  q3: '3. Дисципліна під дедлайн',
  q4: '4. Акти звіряння',
  q5: '5. Програмні навички',
  q6: '6. Мотивація'
};

async function checkPassword() {
  const val = document.getElementById('gate-password').value;
  if (!val) return;

  try {
    const url = APPS_SCRIPT_URL + '?action=list&password=' + encodeURIComponent(val);
    const response = await fetch(url);
    const result = await response.json();

    if (result.ok) {
      sessionStorage.setItem('koin-admin-authed', 'yes');
      sessionStorage.setItem('koin-admin-password', val);
      document.getElementById('gate-wrap').style.display = 'none';
      document.getElementById('admin-content').style.display = 'block';
      allApplications = result.applications || [];
      renderApplications();
    } else {
      document.getElementById('gate-error').style.display = 'block';
      document.getElementById('gate-error').textContent = result.error || 'Невірний пароль';
    }
  } catch (err) {
    document.getElementById('gate-error').textContent = 'Помилка з\'єднання';
    document.getElementById('gate-error').style.display = 'block';
  }
}

async function loadApplications() {
  const container = document.getElementById('applications-container');
  container.innerHTML = '<div class="loading">Завантаження заявок...</div>';

  try {
    const password = sessionStorage.getItem('koin-admin-password');
    const url = APPS_SCRIPT_URL + '?action=list&password=' + encodeURIComponent(password);
    const response = await fetch(url);
    const result = await response.json();

    if (!result.ok) {
      throw new Error(result.error || 'Unknown error');
    }

    allApplications = result.applications || [];
    renderApplications();
  } catch (err) {
    console.error('Load error:', err);
    container.innerHTML = '<div class="empty-state"><h2>Помилка завантаження</h2><p>' +
      escapeHtml(err.message) + '</p></div>';
  }
}

function renderApplications() {
  const container = document.getElementById('applications-container');
  let apps = [...allApplications];

  // Filter
  const filter = document.getElementById('filter-select').value;
  if (filter === 'top') apps = apps.filter(a => a.score >= 4);
  else if (filter === 'middle') apps = apps.filter(a => a.score >= 2.5 && a.score < 4);
  else if (filter === 'low') apps = apps.filter(a => a.score < 2.5);

  // Sort
  const sort = document.getElementById('sort-select').value;
  apps.sort((a, b) => {
    if (sort === 'score-desc') return b.score - a.score;
    if (sort === 'score-asc') return a.score - b.score;
    if (sort === 'date-desc') return new Date(b.submitted_at) - new Date(a.submitted_at);
    if (sort === 'date-asc') return new Date(a.submitted_at) - new Date(b.submitted_at);
    return 0;
  });

  // Stats
  document.getElementById('stat-total').textContent = allApplications.length;
  if (allApplications.length > 0) {
    const avg = allApplications.reduce((s, a) => s + a.score, 0) / allApplications.length;
    document.getElementById('stat-avg').textContent = avg.toFixed(1);
    document.getElementById('stat-top').textContent = allApplications.filter(a => a.score >= 4).length;
  } else {
    document.getElementById('stat-avg').textContent = '—';
    document.getElementById('stat-top').textContent = '0';
  }

  if (apps.length === 0) {
    container.innerHTML = '<div class="empty-state"><h2>Заявок немає</h2><p>Поки що жоден кандидат не заповнив анкету (або жодна не відповідає фільтру)</p></div>';
    return;
  }

  let html = '<table><thead><tr>';
  html += '<th style="width:32px;"></th>';
  html += '<th>ПІБ</th>';
  html += '<th>Контакти</th>';
  html += '<th style="width:90px;">Бал</th>';
  html += '<th>Досвід</th>';
  html += '<th style="width:130px;">Дата</th>';
  html += '<th style="width:90px;">Резюме</th>';
  html += '</tr></thead><tbody>';

  for (const app of apps) {
    const date = new Date(app.submitted_at).toLocaleDateString('uk-UA', { day: '2-digit', month: '2-digit', year: 'numeric' });
    const scoreClass = 'score-' + Math.round(app.score);
    const expSnippet = (app.experience || '—').slice(0, 80) + (app.experience && app.experience.length > 80 ? '…' : '');

    html += `<tr onclick="toggleDetail('${app.id}')">`;
    html += `<td style="font-family:'Lora',serif;color:var(--ink-soft);">▸</td>`;
    html += `<td style="font-weight:600;">${escapeHtml(app.fullname)}</td>`;
    html += `<td style="font-size:12px;">${escapeHtml(app.phone)}<br><span style="color:var(--ink-soft);">${escapeHtml(app.email)}</span></td>`;
    html += `<td><span class="score-pill ${scoreClass}">${(app.score * 1).toFixed(1)} / 5</span></td>`;
    html += `<td style="color:var(--ink-soft);font-size:12px;">${escapeHtml(expSnippet)}</td>`;
    html += `<td style="color:var(--ink-soft);">${date}</td>`;
    html += `<td>`;
    if (app.resume_drive_id) {
      html += `<a href="#" class="resume-link" onclick="event.stopPropagation();downloadResume('${app.id}');return false;">Завантажити</a>`;
    } else {
      html += `<span style="color:var(--ink-soft);">—</span>`;
    }
    html += `</td>`;
    html += `</tr>`;

    // Detail row
    html += `<tr id="detail-${app.id}" class="detail-row" style="display:none;"><td colspan="7">`;
    html += `<div class="detail-grid">`;
    html += `<div class="detail-block"><h4>Відповіді на питання</h4>`;
    for (const qk of ['q1','q2','q3','q4','q5','q6']) {
      html += `<div class="qa-item">`;
      html += `<div class="qa-q">${QUESTION_LABELS[qk]}</div>`;
      html += `<div class="qa-a">Бал: <strong>${app[qk] || '—'}/5</strong></div>`;
      html += `</div>`;
    }
    html += `</div>`;
    html += `<div class="detail-block"><h4>Контекст</h4>`;
    html += `<div class="qa-item"><div class="qa-q">Місто:</div><div class="qa-a">${escapeHtml(app.city || '—')}</div></div>`;
    html += `<div class="qa-item"><div class="qa-q">Очікувана зарплата:</div><div class="qa-a">${escapeHtml(app.salary || '—')}</div></div>`;
    html += `<div class="qa-item"><div class="qa-q">Досвід роботи:</div><div class="qa-a">${escapeHtml(app.experience || '—')}</div></div>`;
    html += `<div class="qa-item"><div class="qa-q">Мотивація:</div><div class="qa-a">${escapeHtml(app.motivation || '—')}</div></div>`;
    html += `<div class="qa-item"><div class="qa-q">Статус:</div><div class="qa-a">${escapeHtml(app.status || 'New')}</div></div>`;
    html += `<div class="qa-item"><div class="qa-q">Нотатки:</div><div class="qa-a">${escapeHtml(app.admin_notes || '—')}</div></div>`;
    html += `<div class="qa-item" style="margin-top:14px;padding-top:10px;border-top:1px dashed var(--line);">`;
    html += `<button onclick="deleteApplication('${app.id}')" style="background:none;border:1px solid var(--red);color:var(--red);padding:4px 10px;font-size:11px;cursor:pointer;border-radius:2px;">Видалити заявку</button>`;
    html += `</div>`;
    html += `</div>`;
    html += `</div>`;
    html += `</td></tr>`;
  }

  html += '</tbody></table>';
  container.innerHTML = html;
}

function toggleDetail(id) {
  const row = document.getElementById('detail-' + id);
  if (!row) return;
  const isVisible = row.style.display !== 'none';
  row.style.display = isVisible ? 'none' : 'table-row';
}

function downloadResume(id) {
  const app = allApplications.find(a => a.id === id);
  if (!app || !app.resume_drive_id) return;
  const password = sessionStorage.getItem('koin-admin-password');
  const url = APPS_SCRIPT_URL + '?action=resume&id=' + app.resume_drive_id +
              '&password=' + encodeURIComponent(password);
  window.open(url, '_blank');
}

async function deleteApplication(id) {
  if (!confirm('Видалити заявку?')) return;
  try {
    const password = sessionStorage.getItem('koin-admin-password');
    const response = await fetch(APPS_SCRIPT_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'text/plain;charset=utf-8' },
      body: JSON.stringify({ action: 'delete', id: id, password: password })
    });
    const result = await response.json();
    if (result.ok) {
      await loadApplications();
    } else {
      alert('Помилка: ' + (result.error || 'Невідома помилка'));
    }
  } catch (e) {
    alert('Помилка видалення: ' + e.message);
  }
}

async function clearAll() {
  if (!confirm('Видалити ВСІ заявки? Це незворотно.')) return;
  if (!confirm('Точно? Останнє підтвердження.')) return;
  try {
    const password = sessionStorage.getItem('koin-admin-password');
    for (const app of [...allApplications]) {
      await fetch(APPS_SCRIPT_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'text/plain;charset=utf-8' },
        body: JSON.stringify({ action: 'delete', id: app.id, password: password })
      });
    }
    await loadApplications();
  } catch (e) {
    alert('Помилка: ' + e.message);
    await loadApplications();
  }
}

function exportCSV() {
  if (allApplications.length === 0) return alert('Немає заявок для експорту');
  const headers = ['ПІБ', 'Телефон', 'E-mail', 'Місто', 'Очікувана ЗП', 'Бал', 'Досвід', 'Мотивація', 'Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Дата'];
  const rows = allApplications.map(a => [
    a.fullname, a.phone, a.email, a.city || '', a.salary || '',
    (a.score * 1).toFixed(1),
    (a.experience || '').replace(/\n/g, ' '),
    (a.motivation || '').replace(/\n/g, ' '),
    a.q1, a.q2, a.q3, a.q4, a.q5, a.q6,
    new Date(a.submitted_at).toLocaleDateString('uk-UA')
  ]);
  const csv = [headers, ...rows].map(r => r.map(c => '"' + String(c).replace(/"/g, '""') + '"').join(',')).join('\n');
  const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'koin_candidates_' + new Date().toISOString().slice(0, 10) + '.csv';
  link.click();
  URL.revokeObjectURL(url);
}

function escapeHtml(s) {
  if (s === null || s === undefined) return '';
  return String(s).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
}

// Init
init();
</script>
</body>
</html>