<div class="container">
	<div class="row">
		<div class="col site-select">
			@@include("../partials/bot-select.html")
		</div>

		<div class="col time-period">
			@@include("../partials/period-select.html")
		</div>
	</div>
	<div class="row">
		<div class="col">
			<table class="table table-striped-columns">
			  <thead>
			  	<tr>
			  		<th>Дата</th>
			  		<th>Тип запиту</th>
			  		<th>Оцінка</th>
			  		<th>Переглянути</th>
			  	</tr>
			  </thead>
			  <tbody>
			  	<tr>
			  		<td>10.05.2025 12:24</td>
			  		<td>Партнерство</td>
			  		<td><span class="mdi mdi-thumb-up"></span></td>
			  		<td>
			  			<a href="#">Переглянути</a>
			  		</td>
			  	</tr>
			  	<tr>
			  		<td>10.05.2025 12:20</td>
			  		<td>Партнерство</td>
			  		<td><span class="mdi mdi-thumb-down-outline"></span></td>
			  		<td>
			  			<a href="#">Переглянути</a>
			  		</td>
			  	</tr>
			  	<tr>
			  		<td>10.05.2025 12:15</td>
			  		<td>Партнерство</td>
			  		<td><span class="mdi mdi-thumb-up"></span></td>
			  		<td>
			  			<a href="#">Переглянути</a>
			  		</td>
			  	</tr>
			  	<tr>
			  		<td>10.05.2025 12:24</td>
			  		<td>Партнерство</td>
			  		<td><span class="mdi mdi-thumb-up"></span></td>
			  		<td>
			  			<a href="#">Переглянути</a>
			  		</td>
			  	</tr>
			  	<tr>
			  		<td>10.05.2025 12:20</td>
			  		<td>Партнерство</td>
			  		<td><span class="mdi mdi-thumb-down-outline"></span></td>
			  		<td>
			  			<a href="#">Переглянути</a>
			  		</td>
			  	</tr>
			  	<tr>
			  		<td>10.05.2025 12:15</td>
			  		<td>Партнерство</td>
			  		<td><span class="mdi mdi-thumb-up"></span></td>
			  		<td>
			  			<a href="#">Переглянути</a>
			  		</td>
			  	</tr>
			  </tbody>
			</table>
			<div class="paginator-container mt-3 mb-3">
				@@include("../partials/paginator.html")
			</div>
		</div>
	</div>
</div>		

<script>
	document.addEventListener("DOMContentLoaded", e => {
		const table = document.querySelector("#pills-log .table");
		const tbody = table.querySelector("tbody");
		const siteSelector = document.querySelector("#pills-log .site-select select");
		const timePeriod = document.querySelector("#pills-log .time-period select");

		table.rendering = function(resp){
			this.querySelector("tbody").innerHTML = "";

			for(let item of resp.logs) {
				const create_at = formattedTimestamp(item.create_at);

				let rating = "";
				if(item.rating == -1) {
					rating = `<span class="mdi mdi-thumb-down-outline"></span>`;
				} else if(item.rating == 1) {
					rating = `<span class="mdi mdi-thumb-up"></span>`;
				}

				const dialogUrl = `${BACKSERV}?action=logs.dialog&chat_id=${item.chat_id}`;

				let entry = `
					<td>${create_at}</td>
					<td>${item.auto_type}</td>
					<td>${rating}</td>
					<td>
						<a href="${dialogUrl}" class="btn btn-link btn-sm" target="_blank">Переглянути</a>
					</td>
				`;

				let row = document.createElement("tr");
				row.innerHTML = entry;

				this.querySelector("tbody").appendChild(row);
			}
		}

		table.loadDataFromServer = function() {
			let pagenum = document.querySelector("#pills-log .paginator-container [data-goto-pagenum]")?.dataset.gotoPagenum;
			pagenum = (typeof pagenum == "undefined") ? 1 : pagenum;

			doAction("logs.list", {
				"site": siteSelector.value,
				"period": timePeriod.value,
				"pagenum": pagenum
			}, resp => {
				table.rendering(resp);
				if(typeof resp.paginator != "undefined") {
					paginator_handler(
						document.querySelector("#pills-log .paginator-container"), 
						resp.paginator, 
						table.loadDataFromServer
					);
				}
			});
		}

		siteSelector.addEventListener("change", e => {
			table.loadDataFromServer();
		});

		timePeriod.addEventListener("change", e => {
			table.loadDataFromServer();
		});

		table.loadDataFromServer();

	});
</script>