<?= $this->extend('layout/tempadmin');?>

<?= $this->section('css') ?>
<style type="text/css">
	* { box-sizing:border-box; }
	body { font-family:'Inter',sans-serif; background:#f1f5f9; }
	.mono { font-family:'JetBrains Mono',monospace; }

	/* ══════ SIDEBAR ══════ */
	.sidebar { width:256px; background:#0a1628; min-height:100vh; position:fixed; top:0; left:0; display:flex; flex-direction:column; z-index:40; }
	.sidebar-link { display:flex; align-items:center; gap:11px; padding:10px 18px; margin:0 10px; border-radius:10px; font-size:13px; font-weight:600; color:#94a3b8; text-decoration:none; transition:all .12s; cursor:pointer; }
	.sidebar-link:hover { background:rgba(255,255,255,.05); color:#e2e8f0; }
	.sidebar-link.active { background:#0099b8; color:#fff; box-shadow:0 4px 14px rgba(0,153,184,.35); }
	.sidebar-link i { width:18px; text-align:center; font-size:14px; }
	.sidebar-section { font-size:9.5px; font-weight:700; color:#475569; text-transform:uppercase; letter-spacing:.1em; padding:18px 20px 8px; }
	.sidebar-badge { margin-left:auto; background:#dc2626; color:#fff; font-size:9.5px; font-weight:800; padding:1px 7px; border-radius:20px; }

	.main-area { margin-left:256px; }

	/* ══════ TOPBAR ══════ */
	.topbar { background:#fff; border-bottom:1px solid #e2e8f0; height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; position:sticky; top:0; z-index:30; }
	.topbar-icon-btn { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#64748b; cursor:pointer; transition:all .12s; position:relative; }
	.topbar-icon-btn:hover { background:#f1f5f9; }
	.notif-dot { position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 3px; border-radius:50%; background:#3b82f6; color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }

	/* ══════ PANEL ══════ */
	.panel2 { background:#fff; border:1px solid #e2e8f0; border-radius:16px; overflow:hidden; }
	.panel2-head { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid #f1f5f9; flex-wrap:wrap; gap:12px; }
	.panel2-title { font-size:14px; font-weight:700; color:#1e293b; display:flex; align-items:center; gap:9px; }
	.count-badge { font-size:11px; font-weight:800; color:#0099b8; background:#e0f7fb; padding:2px 9px; border-radius:20px; }

	/* ══════ STAT CARDS ══════ */
	.stat-card { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:16px 18px; display:flex; align-items:center; gap:14px; }
	.stat-icon { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
	.stat-val { font-size:19px; font-weight:800; color:#1e293b; line-height:1.1; }
	.stat-label { font-size:10.5px; color:#94a3b8; font-weight:600; margin-top:2px; }

	/* ══════ SEARCH / FILTER ══════ */
	.search-wrap { position:relative; }
	.search-wrap i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:12px; }
	.search-input { padding:8px 12px 8px 34px; border:1px solid #e2e8f0; border-radius:9px; font-size:12px; font-weight:500; width:220px; outline:none; transition:all .12s; }
	.search-input:focus { border-color:#0099b8; box-shadow:0 0 0 3px rgba(0,153,184,.1); }
	.filter-select { border:1px solid #e2e8f0; border-radius:9px; padding:8px 12px; font-size:11.5px; font-weight:700; color:#64748b; outline:none; background:#fff; cursor:pointer; }

	/* ══════ TABLE ══════ */
	.data-table { width:100%; border-collapse:collapse; }
	.data-table thead th { text-align:left; font-size:10px; font-weight:800; color:#94a3b8; text-transform:uppercase; letter-spacing:.06em; padding:11px 20px; background:#f8fafc; border-bottom:1px solid #e2e8f0; white-space:nowrap; }
	.data-table tbody td { padding:13px 20px; font-size:12.5px; color:#334155; border-bottom:1px solid #f1f5f9; vertical-align:top; }
	.data-table tbody tr:last-child td { border-bottom:none; }
	.data-table tbody tr:hover { background:#fafcff; }
	.data-table .cell-name { font-weight:700; color:#1e293b; }
	.data-table .cell-sub { font-size:11px; color:#94a3b8; margin-top:2px; }
	.data-table .cell-msg { max-width:280px; color:#475569; line-height:1.5; }
	.data-table .cell-msg .more-link { color:#0099b8; font-weight:700; cursor:pointer; font-size:11px; }

	.badge { font-size:10px; font-weight:800; padding:4px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
	.badge.baru { background:#fef3e2; color:#c2760a; }
	.badge.diproses { background:#e0f0ff; color:#1d5fd6; }
	.badge.selesai { background:#e3f9ec; color:#0f9d58; }
	.badge.ditolak { background:#fde8e8; color:#dc2626; }
	.badge-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }

	.ext-chip { font-size:10px; font-weight:700; color:#475569; background:#f1f5f9; border:1px solid #e2e8f0; padding:3px 8px; border-radius:6px; font-family:'JetBrains Mono',monospace; }

	.row-actions { display:flex; align-items:center; gap:4px; }
	.action-btn { width:29px; height:29px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#94a3b8; cursor:pointer; transition:all .12s; border:1px solid transparent; font-size:11.5px; }
	.action-btn:hover { background:#f1f5f9; color:#0099b8; border-color:#e2e8f0; }
	.action-btn.danger:hover { color:#dc2626; background:#fef2f2; }
	.action-btn.success:hover { color:#0f9d58; background:#f0fdf4; }

	.status-select { font-size:10.5px; font-weight:700; border:1px solid #e2e8f0; border-radius:7px; padding:4px 7px; outline:none; cursor:pointer; background:#fff; color:#475569; }

	.empty-row td { text-align:center; padding:38px 20px; color:#94a3b8; }
	.empty-row i { font-size:22px; color:#cbd5e1; display:block; margin-bottom:8px; }

	.tab-switch { display:flex; gap:6px; background:#f1f5f9; padding:4px; border-radius:11px; }
	.tab-switch-btn { font-size:12px; font-weight:700; color:#64748b; padding:9px 18px; border-radius:8px; cursor:pointer; transition:all .12s; display:flex; align-items:center; gap:7px; }
	.tab-switch-btn.active { background:#fff; color:#0099b8; box-shadow:0 1px 4px rgba(0,0,0,.08); }

	.pagination-bar { display:flex; align-items:center; justify-content:space-between; padding:14px 22px; border-top:1px solid #f1f5f9; }
	.page-info { font-size:11px; color:#94a3b8; font-weight:600; }
	.page-btn { width:28px; height:28px; border-radius:7px; border:1px solid #e2e8f0; display:flex; align-items:center; justify-content:center; font-size:11px; color:#64748b; cursor:pointer; }
	.page-btn:hover { border-color:#0099b8; color:#0099b8; }
</style>
<?= $this->endSection(); ?>

<?= $this->section('conten');?>
<div class="main-area">

	<!-- TOPBAR -->
	<div class="topbar">
		<div class="flex items-center gap-4">
			<button class="topbar-icon-btn"><i class="fa-solid fa-bars"></i></button>
			<div>
				<div class="text-[10.5px] text-slate-400 font-semibold flex items-center gap-1.5">
					<span class="text-slate-600">Komentar & Request</span>
				</div>
				<h1 class="text-lg font-bold text-slate-800">Kelola Komentar & Request Dokumen</h1>
			</div>
		</div>
		<div class="flex items-center gap-2">
			<button class="topbar-icon-btn">
				<i class="fa-regular fa-bell"></i>
				<span class="notif-dot">3</span>
			</button>
			<div class="h-7 w-px bg-slate-200 mx-2"></div>
			<div class="flex items-center gap-2.5 cursor-pointer">
				<div class="w-9 h-9 rounded-full bg-gradient-to-br from-[#0099b8] to-[#0066cc] flex items-center justify-center text-white text-sm font-bold">A</div>
				<div class="hidden md:block">
					<div class="text-xs font-bold text-slate-700">Administrator</div>
					<div class="text-[10px] text-slate-400">Super Admin</div>
				</div>
			</div>
		</div>
	</div>

	<div class="p-7 space-y-6">

		<!-- STAT SUMMARY -->
		<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
			<div class="stat-card">
				<div class="stat-icon" style="background:#fef3e2;color:#c2760a;"><i class="fa-solid fa-inbox"></i></div>
				<div>
					<div class="stat-val" id="statBaru">5</div>
					<div class="stat-label">Belum Ditinjau</div>
				</div>
			</div>
			<div class="stat-card">
				<div class="stat-icon" style="background:#e0f0ff;color:#1d5fd6;"><i class="fa-solid fa-file-circle-plus"></i></div>
				<div>
					<div class="stat-val" id="statReq">6</div>
					<div class="stat-label">Total Request Dokumen</div>
				</div>
			</div>
			<div class="stat-card">
				<div class="stat-icon" style="background:#fdeaf3;color:#c2266e;"><i class="fa-solid fa-comment-dots"></i></div>
				<div>
					<div class="stat-val" id="statSaran">6</div>
					<div class="stat-label">Total Saran / Kontak</div>
				</div>
			</div>
			<div class="stat-card">
				<div class="stat-icon" style="background:#e3f9ec;color:#0f9d58;"><i class="fa-solid fa-circle-check"></i></div>
				<div>
					<div class="stat-val" id="statSelesai">3</div>
					<div class="stat-label">Sudah Selesai</div>
				</div>
			</div>
		</div>

		<!-- TAB SWITCH (mobile-friendly quick jump) -->
		<div class="flex items-center justify-between flex-wrap gap-3">
			<div class="tab-switch">
				<div class="tab-switch-btn active" onclick="scrollToPanel('panelRequest', this)"><i class="fa-solid fa-file-circle-plus"></i> Request Dokumen Baru</div>
				<div class="tab-switch-btn" onclick="scrollToPanel('panelSaran', this)"><i class="fa-solid fa-comment-dots"></i> Saran & Kontak</div>
			</div>
		</div>

		<!-- ══════════════════ TABEL 1: REQUEST DOKUMEN BARU ══════════════════ -->
		<div class="panel2" id="panelRequest">
			<div class="panel2-head">
				<div class="panel2-title">
					<i class="fa-solid fa-file-circle-plus text-[#0099b8]"></i> Request Dokumen Baru
					<span class="count-badge" id="countRequest">6</span>
				</div>
				<div class="flex items-center gap-2">
					<div class="search-wrap">
						<i class="fa-solid fa-magnifying-glass"></i>
						<input type="text" class="search-input" placeholder="Cari nama / judul dokumen..." id="searchRequest" onkeyup="filterTable('request')">
					</div>
					<select class="filter-select" id="filterRequestStatus" onchange="filterTable('request')">
						<option value="">Semua Status</option>
						<option value="baru">Baru</option>
						<option value="diproses">Diproses</option>
						<option value="selesai">Selesai</option>
						<option value="ditolak">Ditolak</option>
					</select>
				</div>
			</div>

			<div class="overflow-x-auto">
				<table class="data-table">
					<thead>
						<tr>
							<th>Tanggal</th>
							<th>Pemohon</th>
							<th>Judul Dokumen Diminta</th>
							<th>Format</th>
							<th>Kategori</th>
							<th>Detail Tambahan</th>
							<th>Status</th>
							<th class="text-right">Aksi</th>
						</tr>
					</thead>
					<tbody>
						<?php if (empty($permintaan)) : ?>
							<tr class="empty-row">
								<td colspan="5">
									<i class="fa-solid fa-comment-dots"></i>
									Tidak ada data saran.
								</td>
							</tr>
						<?php else : ?>
							<?php foreach ($permintaan as $row) : ?>
								<tr>

									<td class="whitespace-nowrap text-slate-500">
										<?= esc($row['tanggal']) ?>
									</td>

									<td>
										<div class="cell-name"><?= esc($row['nama']) ?></div>
										<div class="cell-sub"><?= esc($row['email']) ?></div>
									</td>

									<td class="font-semibold text-slate-800">
										<?= esc($row['judul']) ?>
									</td>

									<td class="cell-msg">
										<?= esc($row['format']) ?>
									</td>

									<td class="cell-msg">
										<?= esc($row['kategori']) ?>
									</td>

									<td class="cell-msg">
										<?= esc($row['detail']) ?>
									</td>
									<td>
										<select class="status-select" >
											<option> Baru </option>
											<option> Diproses </option>
											<option> Selesai </option>
											<option> Ditolak </option>
										</select>
									</td>

									<td>
										<div class="row-actions justify-end">

											<div class="action-btn"
											onclick="viewDetail('saran',<?= $row['id'] ?>)">
											<i class="fa-solid fa-eye"></i>
										</div>

										<div class="action-btn success"
										onclick="window.location.href='mailto:<?= esc($row['email']) ?>'">
										<i class="fa-solid fa-reply"></i>
									</div>

									<div class="action-btn danger"
									onclick="deleteRow('saran',<?= $row['id'] ?>)">
									<i class="fa-solid fa-trash"></i>
								</div>
							</div>
						</td>
					</tr>
				<?php endforeach ?>
			<?php endif ?>
					</tbody>
				</table>
			</div>

			<div class="pagination-bar">
				<span class="page-info" id="pageInfoRequest">Menampilkan 6 dari 6 data</span>
				<div class="flex items-center gap-1.5">
					<div class="page-btn"><i class="fa-solid fa-chevron-left"></i></div>
					<div class="page-btn" style="background:#0099b8;color:#fff;border-color:#0099b8;">1</div>
					<div class="page-btn"><i class="fa-solid fa-chevron-right"></i></div>
				</div>
			</div>
		</div>

		<!-- ══════════════════ TABEL 2: SARAN & KONTAK ══════════════════ -->
		<div class="panel2" id="panelSaran">
			<div class="panel2-head">
				<div class="panel2-title">
					<i class="fa-solid fa-comment-dots text-[#0099b8]"></i> Saran & Kontak Admin
					<span class="count-badge" id="countSaran">6</span>
				</div>
				<div class="flex items-center gap-2">
					<div class="search-wrap">
						<i class="fa-solid fa-magnifying-glass"></i>
						<input type="text" class="search-input" placeholder="Cari nama / perihal..." id="searchSaran" onkeyup="filterTable('saran')">
					</div>
					<select class="filter-select" id="filterSaranStatus" onchange="filterTable('saran')">
						<option value="">Semua Status</option>
						<option value="baru">Baru</option>
						<option value="diproses">Diproses</option>
						<option value="selesai">Selesai</option>
					</select>
				</div>
			</div>

			<div class="overflow-x-auto">
				<table class="data-table">
					<thead>
						<tr>
							<th>Tanggal</th>
							<th>Pengirim</th>
							<th>Perihal / Subjek</th>
							<th>Pesan</th>
							<th>Status</th>
							<th class="text-right">Aksi</th>
						</tr>
					</thead>
					<tbody >
						<?php if (empty($saran)) : ?>
							<tr class="empty-row">
								<td colspan="5">
									<i class="fa-solid fa-comment-dots"></i>
									Tidak ada data saran.
								</td>
							</tr>
						<?php else : ?>
							<?php foreach ($saran as $row) : ?>
								<tr>

									<td class="whitespace-nowrap text-slate-500">
										<?= esc($row['tanggal']) ?>
									</td>

									<td>
										<div class="cell-name"><?= esc($row['nama']) ?></div>
										<div class="cell-sub"><?= esc($row['email']) ?></div>
									</td>

									<td class="font-semibold text-slate-800">
										<?= esc($row['perihal']) ?>
									</td>

									<td class="cell-msg">
										<?= esc($row['pesan']) ?>
									</td>

									<td>
										<select class="status-select" >
											<option> Baru </option>
											<option> Diproses </option>
											<option> Selesai </option>
											<option> Ditolak </option>
										</select>
									</td>

									<td>
										<div class="row-actions justify-end">

											<div class="action-btn"
											onclick="viewDetail('saran',<?= $row['id'] ?>)">
											<i class="fa-solid fa-eye"></i>
										</div>

										<div class="action-btn success"
										onclick="window.location.href='mailto:<?= esc($row['email']) ?>'">
										<i class="fa-solid fa-reply"></i>
									</div>

									<div class="action-btn danger"
									onclick="deleteRow('saran',<?= $row['id'] ?>)">
									<i class="fa-solid fa-trash"></i>
								</div>
							</div>
						</td>
					</tr>
				<?php endforeach ?>
			<?php endif ?>
		</tbody>
	</table>
</div>

<div class="pagination-bar">
	<span class="page-info" id="pageInfoSaran">Menampilkan 6 dari 6 data</span>
	<div class="flex items-center gap-1.5">
		<div class="page-btn"><i class="fa-solid fa-chevron-left"></i></div>
		<div class="page-btn" style="background:#0099b8;color:#fff;border-color:#0099b8;">1</div>
		<div class="page-btn"><i class="fa-solid fa-chevron-right"></i></div>
	</div>
</div>
</div>

<!-- FOOTER -->
<div class="flex items-center justify-between pt-2 text-[11px] text-slate-400 font-medium">
	<span>&copy; 2026 Pena Ilmu. All rights reserved.</span>
	<span>Versi 1.0.0</span>
</div>

</div>
</div>
<?= $this->endSection(); ?>

<?= $this->section('myscript') ?>
<script>

	function escapeHtml(str){
		return String(str).replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));
	}

	function badgeHtml(status) {
		const map = {
			baru:{cls:'baru', label:'Baru'},
			diproses:{cls:'diproses', label:'Diproses'},
			selesai:{cls:'selesai', label:'Selesai'},
			ditolak:{cls:'ditolak', label:'Ditolak'}
		};
		const s = map[status] || map.baru;
		return `<span class="badge ${s.cls}"><span class="badge-dot"></span>${s.label}</span>`;
	}

	function statusOptions(current, includeDitolak) {
		const opts = ['baru','diproses','selesai'];
		if (includeDitolak) opts.push('ditolak');
		return opts.map(o => `<option value="${o}" ${o===current?'selected':''}>${o.charAt(0).toUpperCase()+o.slice(1)}</option>`).join('');
	}

	function truncate(text, len) {
		return text.length > len ? text.substring(0, len) + '…' : text;
	}

        // ══════ RENDER TABEL REQUEST DOKUMEN ══════
	function renderRequest(list) {
		const tbody = document.getElementById('tbodyRequest');
		if (!list.length) {
			tbody.innerHTML = `<tr class="empty-row"><td colspan="8"><i class="fa-solid fa-inbox"></i>Tidak ada data request yang cocok.</td></tr>`;
			document.getElementById('pageInfoRequest').textContent = 'Menampilkan 0 dari ' + dataRequest.length + ' data';
			return;
		}
		tbody.innerHTML = list.map(r => `
			<tr>
			<td class="whitespace-nowrap text-slate-500">${r.tanggal}</td>
			<td>
			<div class="cell-name">${escapeHtml(r.nama)}</div>
			<div class="cell-sub">${escapeHtml(r.email)}</div>
			</td>
			<td class="font-semibold text-slate-800" style="max-width:200px;">${escapeHtml(r.judul)}</td>
			<td><span class="ext-chip">.${r.format}</span></td>
			<td class="whitespace-nowrap">${escapeHtml(r.kategori)}</td>
			<td class="cell-msg">${escapeHtml(truncate(r.detail, 70))}</td>
			<td>
			<select class="status-select" onchange="updateStatus('request', ${r.id}, this.value)">
			${statusOptions(r.status, true)}
			</select>
			</td>
			<td>
			<div class="row-actions justify-end">
			<div class="action-btn" title="Lihat detail" onclick="viewDetail('request', ${r.id})"><i class="fa-solid fa-eye"></i></div>
			<div class="action-btn success" title="Balas via email" onclick="window.location.href='mailto:${escapeHtml(r.email)}'"><i class="fa-solid fa-reply"></i></div>
			<div class="action-btn danger" title="Hapus" onclick="deleteRow('request', ${r.id})"><i class="fa-solid fa-trash"></i></div>
			</div>
			</td>
			</tr>
			`).join('');
		document.getElementById('pageInfoRequest').textContent = 'Menampilkan ' + list.length + ' dari ' + dataRequest.length + ' data';
	}

        // ══════ RENDER TABEL SARAN & KONTAK ══════
	
        // ══════ FILTER + SEARCH ══════
	function filterTable(type) {
		if (type === 'request') {
			const q = document.getElementById('searchRequest').value.toLowerCase();
			const st = document.getElementById('filterRequestStatus').value;
			const filtered = dataRequest.filter(r =>
				(r.nama.toLowerCase().includes(q) || r.judul.toLowerCase().includes(q)) &&
				(st === '' || r.status === st)
				);
			renderRequest(filtered);
		} else {
			const q = document.getElementById('searchSaran').value.toLowerCase();
			const st = document.getElementById('filterSaranStatus').value;
			const filtered = dataSaran.filter(s =>
				(s.nama.toLowerCase().includes(q) || s.subjek.toLowerCase().includes(q)) &&
				(st === '' || s.status === st)
				);
			renderSaran(filtered);
		}
	}

        // ══════ UPDATE STATUS (inline dropdown di tabel) ══════
	function updateStatus(type, id, newStatus) {
		const arr = type === 'request' ? dataRequest : dataSaran;
		const item = arr.find(x => x.id === id);
		if (item) item.status = newStatus;
		console.log(`Update status ${type} #${id} -> ${newStatus}`);
            // TODO: kirim ke backend, mis:
            // fetch(`/api/${type}/${id}/status`, { method:'PATCH', body: JSON.stringify({ status:newStatus }) })
		updateStats();
	}

        // ══════ DETAIL & HAPUS ══════
	function viewDetail(type, id) {
		const arr = type === 'request' ? dataRequest : dataSaran;
		const item = arr.find(x => x.id === id);
		if (!item) return;
		if (type === 'request') {
			alert(`Detail Request Dokumen\n\nPemohon: ${item.nama} (${item.email})\nJudul: ${item.judul}\nFormat: .${item.format}\nKategori: ${item.kategori}\nStatus: ${item.status}\n\nDetail Tambahan:\n${item.detail}`);
		} else {
			alert(`Detail Saran/Kontak\n\nPengirim: ${item.nama} (${item.email})\nSubjek: ${item.subjek}\nStatus: ${item.status}\n\nPesan:\n${item.pesan}`);
		}
	}

	function deleteRow(type, id) {
		if (!confirm('Yakin ingin menghapus data ini?')) return;
		if (type === 'request') {
			dataRequest = dataRequest.filter(x => x.id !== id);
			filterTable('request');
		} else {
			dataSaran = dataSaran.filter(x => x.id !== id);
			filterTable('saran');
		}
		updateStats();
            // TODO: fetch(`/api/${type}/${id}`, { method:'DELETE' })
	}

        // ══════ STAT SUMMARY ══════
	function updateStats() {
		document.getElementById('statReq').textContent = dataRequest.length;
		document.getElementById('statSaran').textContent = dataSaran.length;
		document.getElementById('countRequest').textContent = dataRequest.length;
		document.getElementById('countSaran').textContent = dataSaran.length;

		const allBaru = dataRequest.filter(x=>x.status==='baru').length + dataSaran.filter(x=>x.status==='baru').length;
		const allSelesai = dataRequest.filter(x=>x.status==='selesai').length + dataSaran.filter(x=>x.status==='selesai').length;
		document.getElementById('statBaru').textContent = allBaru;
		document.getElementById('statSelesai').textContent = allSelesai;
		document.getElementById('sideCount').textContent = allBaru;
	}

        // ══════ SMOOTH SCROLL TAB SHORTCUT ══════
	function scrollToPanel(id, btn) {
		document.querySelectorAll('.tab-switch-btn').forEach(b => b.classList.remove('active'));
		btn.classList.add('active');
		document.getElementById(id).scrollIntoView({ behavior:'smooth', block:'start' });
	}

        // init
	renderRequest(dataRequest);
	renderSaran(dataSaran);
	updateStats();
</script>
<?= $this->endSection(); ?>