SetTitle("Title"); ?><!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Согласия — создание и список</title>
<style>
:root{--bg:#f7f8fc;--paper:#fff;--text:#0c1224;--muted:#6b7280;--line:#e7ecf3;--pill:#e9eff9;--shadow:0 10px 34px rgba(18,27,106,.12)}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif}
.wrap{max-width:980px;margin:0 auto;padding:28px 16px}
h1{text-align:center;margin:0 0 18px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.col-6{grid-column:span 6}.col-12{grid-column:span 12}
.pill{width:100%;border:0;background:var(--pill);padding:14px 18px;border-radius:999px;font-size:16px}
.btn{border:0;border-radius:14px;background:#0d1556;color:#fff;padding:12px 18px;font-weight:700;box-shadow:var(--shadow);cursor:pointer}
.btn.light{background:#e7ecff;color:#0d1556}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.card-body{padding:18px}
.paper{border:1px solid #cbd2e1;border-radius:16px;padding:20px}
.ph{display:inline-block;border:2px solid #ef4444;border-radius:8px;padding:2px 6px;line-height:1;margin:0 2px}
.toolbar{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
.muted{color:#6b7280}
table{width:100%;border-collapse:separate;border-spacing:0;margin-top:14px}
th,td{padding:10px;border-bottom:1px solid #e6eaf4;text-align:left;font-size:14px}
.pager{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
</style>
</head>
<body>
<main class="wrap">
<h1>Согласие на приобретение доп. услуг</h1>


<section class="card card-body">
<form id="form" class="grid" autocomplete="off">
<div class="col-12"><input id="fio" class="pill" placeholder="ФИО" required></div>
<div class="col-6"><input id="service" class="pill" placeholder="тип услуги" required></div>
<div class="col-6"><input id="date" type="date" class="pill" placeholder="Дата" required></div>
<div class="col-6"><input id="ticket" class="pill" placeholder="№ авиабилета" required></div>
<div class="col-6"><input id="route" class="pill" placeholder="Маршрут" required></div>
<div class="col-12" style="display:flex;gap:12px">
<button class="btn" type="submit">Сформировать</button>
<button class="btn light" id="go-next" type="button" disabled>Далее → страница подписи</button>
<span class="muted" id="share" hidden>Ссылка: <a id="share-url" target="_blank" rel="noopener"></a></span>
</div>
</form>


<article class="paper" id="doc" style="margin-top:14px">
<h3 style="margin:0 0 6px;text-align:center">СОГЛАСИЕ</h3>
<p class="muted" style="text-align:center;margin:0 0 10px">на приобретение дополнительных услуг</p>
<p>Я, <span class="ph" id="d-fio">ФИО</span>, соглашаюсь на приобретение услуг: <span class="ph" id="d-service">тип услуги</span> (код EMD).</p>
<p>№ <span class="ph" id="d-ticket">авиабилета</span> от <span class="ph" id="d-date1">дата</span> по маршруту <span class="ph" id="d-route">маршрут</span>.</p>
<p>«<span id="d-date2" class="ph">дата</span>» г.</p>
</article>
</section>


<section class="card card-body" style="margin-top:18px">
<div style="display:flex;justify-content:space-between;align-items:center">
<h3 style="margin:0">Сохранённые соглашения</h3>
<div class="pager">
<button class="btn light" id="prev">Назад</button>
<span class="muted" id="pageinfo"></span>
<button class="btn light" id="next">Вперёд</button>
</div>
</div>
<table id="tbl"><thead><tr><th>ID</th><th>ФИО</th><th>Дата</th><th>Тип услуги</th><th>Статус</th><th></th></tr></thead><tbody></tbody></table>
</section>
</main>

<script>
const fmtDate = v => v ? new Date(v).toLocaleDateString('ru-RU') : '';
let createdId = null;

// 1) Сформировать -> создаём запись на сервере, заполняем превью, даём ссылку и активируем «Далее»
document.getElementById('form').addEventListener('submit', async (e)=>{
e.preventDefault();
const fio = fioEl.value.trim(), service = serviceEl.value.trim(),
ticket = ticketEl.value.trim(), route = routeEl.value.trim(),
dateISO = dateEl.value, dateDisplay = fmtDate(dateISO);

// заполнить превью
d_fio.textContent = fio || '—';
d_service.textContent = service || '—';
d_ticket.textContent = ticket || '—';
d_route.textContent = route || '—';
d_date1.textContent = dateDisplay || '—';
d_date2.textContent = dateDisplay || '—';

// создать на сервере
const res = await fetch('/api/agreements', {
method:'POST', headers:{'Content-Type':'application/json'},
body: JSON.stringify({ fio, service, ticket, route, dateISO, dateDisplay })
}).then(r=>r.json());

createdId = res.id;
const url = location.origin + res.link;
document.getElementById('go-next').disabled = false;
const share = document.getElementById('share'); share.hidden = false;
const a = document.getElementById('share-url'); a.href = url; a.textContent = url;

await loadList(); // обновим таблицу
});

document.getElementById('go-next').addEventListener('click', ()=>{
if (!createdId) return;
location.href = `/agreement.html?id=${encodeURIComponent(createdId)}`;
});

// ===== список c пагинацией =====
const PAGE_SIZE = 8;
let page = 1, pages = 1;

async function loadList(){
const data = await fetch(`/api/agreements?page=${page}&limit=${PAGE_SIZE}`).then(r=>r.json());
pages = data.pages; page = data.page;
document.getElementById('pageinfo').textContent = `стр. ${page} из ${pages}`;

const tbody = document.querySelector('#tbl tbody');
tbody.innerHTML = '';
data.items.forEach(it=>{
const tr = document.createElement('tr');
const url = `/agreement.html?id=${it.id}`;
tr.innerHTML = `
<td class="muted" style="font-family:ui-monospace,monospace">${it.id.slice(0,8)}…</td>
<td>${it.fio||'—'}</td>
<td>${it.date||'—'}</td>
<td>${it.service||'—'}</td>
<td>${it.signed ? 'подписано' : 'ожидает подписи'}</td>
<td>
<a class="btn light" href="${url}">Открыть</a>
${it.image ? `<a class="btn" href="${it.image}" download>Скачать PNG</a>` : ''}
</td>`;
tbody.appendChild(tr);
});
}

document.getElementById('prev').addEventListener('click', ()=>{ if(page>1){ page--; loadList(); }});
document.getElementById('next').addEventListener('click', ()=>{ if(page<pages){ page++; loadList(); }});

// элементы
const fioEl = document.getElementById('fio');
const serviceEl = document.getElementById('service');
const ticketEl = document.getElementById('ticket');
const routeEl = document.getElementById('route');
const dateEl = document.getElementById('date');

const d_fio = document.getElementById('d-fio');
const d_service = document.getElementById('d-service');
const d_ticket = document.getElementById('d-ticket');
const d_route = document.getElementById('d-route');
const d_date1 = document.getElementById('d-date1');
const d_date2 = document.getElementById('d-date2');

loadList();
</script>
</body>
</html>