<?php
require_once "sqlite.class.php";
require_once "template.class.php";
$template = new Template();
class App {
	const DB_PATH = __DIR__ . "/db/perumdatab.sqlite";
}
function formatDate( $time ){
	$dow = array( "Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu" );
	$mo = array( "", "Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des" );
	$time = strtotime( $time );
	return $dow[ date( 'w', $time ) ] . ", " . date( "d", $time ) . "-" . $mo[ date( 'n', $time ) ] . "-" . date( 'Y', $time );
}
function formatDateLoose( $time ){
	if ( preg_match( "/^(\d\d\d\d-\d\d-\d\d|\d\d-\d\d-\d\d\d\d)(.*)$/", $time, $m ) )
		return formatDate( $m[1] ).$m[2];
	return $time;
}
$db = new DB();
$template->keywords = "Perumda Tirta Amertha Buana, PDAM Tabanan, PerumdaTAB.com";
$template->description = "PerumdaTAB.com - Situs resmi Perusahaan Umum Daerah Air Minum Tirta Amertha Buana Kabupaten Tabanan.";
$template->head();
?>
<style>
.ranger {background-image:url(assets/rangers.png);background-size:contain;background-repeat:no-repeat;background-position:50% 50%;}
.ranger img { width:100%; height:100%; }
@media ( max-width:799.5px ){
	.megazord { grid-column:1/span 2; position:relative; width:100vw; height:50vw; overflow:hidden; background:none; margin:0 -1rem;}
	.ranger { width:100vw; height:50vw; position:absolute; margin:0; float:left; animation:slide 16s infinite; }
	.ranger:nth-of-type(1) { left:0; }
	.ranger:nth-of-type(2) { left:100vw; }
	.ranger:nth-of-type(3) { left:200vw; }
	.ranger:nth-of-type(4) { left:300vw; }
	.ranger:nth-of-type(5) { left:400vw; }
	.ranger:nth-of-type(6) { left:500vw; }
}
@media ( min-width:799.5px ){
	.megazord { grid-column:1/span 2; position:relative; width:100%; height:400px; overflow:hidden; background:none;}
	.ranger { width:800px; height:400px; position:absolute; margin:0 auto;}
	.ranger:nth-of-type(1) { animation:ranger1 16s infinite;}
	.ranger:nth-of-type(2) { animation:ranger2 16s infinite;}
	.ranger:nth-of-type(3) { animation:ranger3 16s infinite;}
	.ranger:nth-of-type(4) { animation:ranger4 16s infinite;}
	.ranger:nth-of-type(5) { animation:ranger5 16s infinite;}
	.ranger:nth-of-type(6) { animation:ranger6 16s infinite;}
}
@keyframes ranger1{
	0%, 8%, 100% { left:calc(50% - 400px); transform:scale(1); z-index:99; }
	83%, 92% { left:calc(50% - 400px - 16.6667%); transform:scale(0.6667); z-index:98; }
	67%, 75% { left:calc(50% - 400px + 27.7778%); transform:scale(0.4444); z-index:97; }
	50%, 58% { left:calc(50% - 400px - 35.1852%); transform:scale(0.2962); z-index:96; }
	33%, 42% { left:calc(50% - 400px + 40.1235%); transform:scale(0.1975); z-index:95; }
	17%, 25% { left:calc(50% - 400px - 43.4156%); transform:scale(0.1317); z-index:94; }
}
@keyframes ranger2{
	17%, 25% { left:calc(50% - 400px); transform:scale(1); z-index:99; }
	0%, 8%, 100% { left:calc(50% - 400px - 16.6667%); transform:scale(0.6667); z-index:98; }
	83%, 92% { left:calc(50% - 400px + 27.7778%); transform:scale(0.4444); z-index:97; }
	67%, 75% { left:calc(50% - 400px - 35.1852%); transform:scale(0.2962); z-index:96; }
	50%, 58% { left:calc(50% - 400px + 40.1235%); transform:scale(0.1975); z-index:95; }
	33%, 42% { left:calc(50% - 400px - 43.4156%); transform:scale(0.1317); z-index:94; }
}
@keyframes ranger3{
	33%, 42% { left:calc(50% - 400px); transform:scale(1); z-index:99; }
	17%, 25% { left:calc(50% - 400px - 16.6667%); transform:scale(0.6667); z-index:98; }
	0%, 8%, 100% { left:calc(50% - 400px + 27.7778%); transform:scale(0.4444); z-index:97; }
	83%, 92% { left:calc(50% - 400px - 35.1852%); transform:scale(0.2962); z-index:96; }
	67%, 75% { left:calc(50% - 400px + 40.1235%); transform:scale(0.1975); z-index:95; }
	50%, 58% { left:calc(50% - 400px - 43.4156%); transform:scale(0.1317); z-index:94; }
}
@keyframes ranger4{
	50%, 58% { left:calc(50% - 400px); transform:scale(1); z-index:99; }
	33%, 42% { left:calc(50% - 400px - 16.6667%); transform:scale(0.6667); z-index:98; }
	17%, 25% { left:calc(50% - 400px + 27.7778%); transform:scale(0.4444); z-index:97; }
	0%, 8%, 100% { left:calc(50% - 400px - 35.1852%); transform:scale(0.2962); z-index:96; }
	83%, 92% { left:calc(50% - 400px + 40.1235%); transform:scale(0.1975); z-index:95; }
	67%, 75% { left:calc(50% - 400px - 43.4156%); transform:scale(0.1317); z-index:94; }
}
@keyframes ranger5{
	67%, 75% { left:calc(50% - 400px); transform:scale(1); z-index:99; }
	50%, 58% { left:calc(50% - 400px - 16.6667%); transform:scale(0.6667); z-index:98; }
	33%, 42% { left:calc(50% - 400px + 27.7778%); transform:scale(0.4444); z-index:97; }
	17%, 25% { left:calc(50% - 400px - 35.1852%); transform:scale(0.2962); z-index:96; }
	0%, 8%, 100% { left:calc(50% - 400px + 40.1235%); transform:scale(0.1975); z-index:95; }
	83%, 92% { left:calc(50% - 400px - 43.4156%); transform:scale(0.1317); z-index:94; }
}
@keyframes ranger6{
	83%, 92% { left:calc(50% - 400px); transform:scale(1); z-index:99; }
	67%, 75% { left:calc(50% - 400px - 16.6667%); transform:scale(0.6667); z-index:98; }
	50%, 58% { left:calc(50% - 400px + 27.7778%); transform:scale(0.4444); z-index:97; }
	33%, 42% { left:calc(50% - 400px - 35.1852%); transform:scale(0.2962); z-index:96; }
	17%, 25% { left:calc(50% - 400px + 40.1235%); transform:scale(0.1975); z-index:95; }
	0%, 8%, 100% { left:calc(50% - 400px - 43.4156%); transform:scale(0.1317); z-index:94; }
}
@keyframes slide{
	0%,8%,100%{ transform:translateX(0); }
	17%,25%{ transform:translateX(-100%); }
	33%,42%{ transform:translateX(-200%); }
	50%,58%{ transform:translateX(-300%); }
	67%,75%{ transform:translateX(-400%); }
	83%,92% { transform:translateX(-500%); }
}
[name=stopRangers]:checked ~ .ranger {animation-play-state: paused;
}
</style>
<div class=megazord >
	<input type=checkbox name=stopRangers style=display:none />
	<div class=ranger style="background-color:rgba(255,0,0,90%)"><img src=assets/slide-1.jpg /></div>
	<div class=ranger style="background-color:rgba(255,255,0,90%)"><img src=assets/slide-2.jpg /></div>
	<div class=ranger style="background-color:rgba(255,0,255,90%)"><img src=assets/slide-3.jpg /></div>
	<div class=ranger style="background-color:rgba(10,10,10,90%)"><img src=assets/slide-4.jpg /></div>
	<div class=ranger style="background-color:rgba(0,0,255,90%)"><img src=assets/slide-5.jpg /></div>
	<div class=ranger style="background-color:rgba(0,255,0,90%)"><img src=assets/slide-6.jpg /></div>
	
</div>
<script>
document.querySelector('.megazord').addEventListener('click', function(){
	document.querySelector('[name=stopRangers]').checked = ! document.querySelector('[name=stopRangers]').checked
})
</script>
		<div class=main-left >
			<?php $pengumumans = json_decode( file_get_contents( "pengumuman.json" ) )?>
			<?php if ( $pengumumans ):?>
				<section>
					<h1>📢 Pengumuman</h1>
					<?php foreach ( $pengumumans as $k => $v ):?>
						<?php if ( $k ):?><hr/><?php endif?>
						<p><?=htmlentities( $v )?>
					<?php endforeach?>
				</section>
			<?php endif?>
			<section class=news >
				<h1>📰 Berita Perumda</h1>
				<p style=text-align:right><a href=feed.php >RSS Feed</a></p>
				<?php foreach ( $db->table( "SELECT * FROM news WHERE is_published = 1 ORDER BY is_pinned DESC, id DESC LIMIT 5" ) as $_news ):?>
				<div class=item >
					<img class=preview src=files/<?=$_news->thumbnail?> />
					<h1><a href=news.php?id=<?=$_news->id?> ><?=$_news->title?></a></h1>
					<div class=datetime-author >
						<div class=datetime ><?=$_news->datetime ? formatDate( $_news->datetime ) : ''?></div>
						<div class=author >oleh <i><?=$_news->user?></i></div>
					</div>
					<p><?=$_news->preview?>
				</div>
				<?php endforeach?>
				<p><a href=news.php >Berita Perumda Selengkapnya</a>
			</section>
		</div>
		<sidebar class=main-right >
			<section class=cek-tagihan>
				<h1>🔗 Tautan Cepat</h1>
				<ul>
					<li><a href=tgh.php >Cek Tagihan Air</a>
					<!--
					<li><a href=assets/Laporan-Tahunan-Tahun-2023.pdf >Laporan Tahunan Direksi 2023 (PDF)</a>
					<li><a href=assets/Laporan-Tahunan-Tahun-2024.pdf >Laporan Tahunan Direksi 2024 (PDF)</a>
					-->
					<li><a href=assets/pedoman-seleksi-bakal-calon-dewas.pdf >Pedoman Seleksi Bakal Calon Dewas (PDF)</a>
					<?php if ( $_SESSION['ptc~username'] ):?>
						<li><a href=sim-tarif.php >Simulasi tarif</a>
					<?php endif?>
				</ul>
			</section>
			<section class=cek-tagihan>
				<h1>🚰 Cek Tagihan Air</h1>
				<form method=post action=tgh.php >
					No. SBG <input type=text name=sbg size=6 />
					<button type=submit name=submit value=submit >Cek</button>
				</form><br/><br/>
			</section>
			<section>
				<h1>💬 Pengaduan</h1>
				<form action=https://wa.me/6287816143624 target=_blank data-id=adu-form >
					<p>Pilih kategori dan lengkapi data pertanyaan/keluhan Anda di bawah ini,</p>
					<div style=text-align:center >
						<select data-name=kategori style="width:99%" onchange="let t=document.querySelector('[data-id=adu-form] [name=text]');let c=document.querySelector('[data-id=adu-form] [data-name=kategori]');t.value=t.value.replace(/\*\[.*\]\*/,'*['+c.value+']*')">
							<option>(Pilih kategori)</option>
							<option>Pertanyaan</option>
							<option>Air Mati</option>
							<option>Air Keruh</option>
							<option>Air Kecil</option>
							<option>Stop Kran Bocor</option>
							<option>Water Meter Bocor</option>
							<option>Pipa Bocor</option>
							<option>Lainnya</option>
						</select>
						<textarea name=text style="width:99%" rows=7>*[Pertanyaan/Keluhan]*
1. Nama: ...
2. Alamat Lengkap: ...
3. Nomor Sambungan (SBG): ...
4. Pertanyaan/Keluhan: ...</textarea>
						<button type=submit >Kirim ke 0878-1614-3624</button>
					</div>
					<br/><br/>
				</form>
			</section>
			<section class=info-gangguan >
				<h1>🔧 Pengumuman Gangguan</h1>
				<p style=text-align:right><a href=feed-info-gangguan.php >RSS Feed</a></p>
				<?php foreach ( $db->table( "SELECT * FROM info_trouble WHERE is_published = 1 ORDER BY id DESC LIMIT 5" ) as $_trouble ):?>
					<div class=item >
						<table border=0 width=100% valign=top >
							<tr>
								<td colspan=2 style="text-align:justify"><a href=info-gangguan.php?id=<?=$_trouble->id?> ><?=$_trouble->summary?></a>
							<tr>
								<td style="width:1rem" >📌
								<td><?=$_trouble->location?>
							<tr>
								<td>📅
								<td><?=formatDateLoose( $_trouble->time_from )?> s.d. <?=formatDateLoose( $_trouble->time_to )?>
							<!--
							<tr>
								<td>🔧
								<td><?=$_trouble->state?>
							-->
						</table>
					</div>
				<?php endforeach?>
				<p><a href=info-gangguan.php >Pengumuman Gangguan Selengkapnya</a>
			</section>
			<section class=situs-terkait >
				<h1>🌍 Situs Terkait</h1>
				<a href=https://s.id/tabananofficial ><img src=assets/landing-pemkab-tab.png style="width:100%"/></a>
				<a href=https://www.tabanankab.go.id/ ><img src=assets/tabanan.jpg style="width:100%"/></a>
				<a href=https://perpamsi.or.id/ ><img src=assets/perpamsi.jpg style="width:100%"/></a>
				<a href=https://www.dapenmapamsi.co.id/canvas.php ><img src=assets/dapenma.jpg style="width:100%"/></a>
				<a href=https://lapor.go.id/ ><img src=assets/lapor.jpg style="width:100%"/></a>
			</section>
		</sidebar>
<style>
.main { display:grid; width:100%; grid-gap:0.5rem 2rem; grid-template-columns:6fr 4fr; padding:0; }
@media ( max-width:800px ) { .main { display:block; } }

.news .item { min-height:128px; }
.news .preview { width:128px; height:128px; float:left; margin:0 1rem 1rem 0; }
.news h1 { margin:0; padding:0; }
.news .datetime-author {display:table; margin:0.5rem 0; width:calc(100% - 128px - 1rem); }
.news .datetime-author>div {display:table-cell}
.news .author { text-align:right; }

.situs-terkait { text-align:center; }
.situs-terkait img { border:1px solid skyblue; width:99% }

</style>
<?php
$template->foot();
