<?php include("assets/header.php");?>

<div class="container">
	<div id="carousel-main" class="carousel slide" data-ride="carousel" style="padding:0;margin-bottom:30px;">
	  <ol class="carousel-indicators">
		<li data-target="#carousel-main" data-slide-to="0" class="active"></li>
		<li data-target="#carousel-main" data-slide-to="1"></li>
	  </ol>
	  <div class="carousel-inner" role="listbox">
		<div class="item active">
		  <img src="assets/img/blog/blog1.jpg" width="100%">
		  <div class="carousel-caption">
			...
		  </div>
		</div>
	  </div>
	  <a class="left carousel-control" href="#carousel-main" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	  </a>
	  <a class="right carousel-control" href="#carousel-main" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	  </a>
	</div>
	<div class="row" align="center" style="margin-bottom: 30px;">
		<p class="service-text-service" style="margin-bottom: 5px;">YukiFix บทความ</p>
		<p style="font-size: 16px;color: #999;">Believe in Something Better</p>
	</div>
	
<?php
$s="select * from topic_list order by topic_date desc, topic_time desc";
//$s.="limit 10";
$q=mysql_query($s);
while($f=mysql_fetch_array($q)){
$newDate = strtoupper(date("M d, Y", strtotime($f['topic_date'])));
?>        
	<div class="row" style="background-color:#fff;box-shadow:0 0 5px #CCC;margin-bottom:25px;">
		<div class="col-xs-12 col-sm-6" style="padding:10px;">
		<?php
		$filename = "assets/article/".$f['topic_id']."/".$f['topic_img'];
	//echo $filename;
		if (file_exists($filename)) {
		?>
			<img src="assets/article/<?=$f['topic_id']?>/<?=$f['topic_img']?>" width="100%" style="max-height: 300px;"> 
		<?php
		}else{
			?><img src="https://via.placeholder.com/600x300" width="100%"><?php
		}
		?>
			<!--img src="https://via.placeholder.com/600x300" alt="..." width="100%;" style="padding:0px;"-->
		</div>
		<div class="col-xs-12 col-sm-6" style="padding:10px;">
			<div class="row">
				<div class="col-xs-12" style="height:200px;">
					<p style="font-weight:700;"><span style="border-bottom:solid 1px #333"><?=$newDate?></span></p>
					<p style="font-size:22px;color:#FE7A15;font-weight:300"><?=$f['topic_head']?></p>
					<p style="line-height:20px;">by Administrator</p>
					<p style="font-size:12px;line-height:18px;"><?=$f['topic_sub']?></p>
				</div>
				<div class="col-xs-12">
					<a href="topic?id=<?=$f['topic_id']?>" class="btn btn-warning btn-lg" style="border:solid 2px #fe7a15;color:#fff;border-radius:0;font-size:16px;background-color: #fe7a15">READ MORE</a>
				</div>
			</div>
		</div>
	</div>
<?php } ?>  
	<div class="row" align="center" style="margin-bottom: 30px;">
		<p class="service-text-service" style="margin-bottom: 5px;">VDO การซ่อม</p>
		<p style="font-size: 16px;color: #999;">So Much More Than Cell Phone Repair</p>
	</div>
	<div class="row" style="margin-bottom: 30px;">
	<?php
	$s="select * from yt_list order by yt_id desc limit 4";
	$q=mysql_query($s);
	while($f=mysql_fetch_array($q)){
	?>
		<div class="col-xs-12 col-sm-3" style="margin-bottom:10px;">
			<iframe width="100%" height="250" src="https://www.youtube.com/embed/<?=$f['yt_link']?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
		</div>
	<?php }?>
	</div>
	<div class="col-xs-12" align="center" style="margin-bottom: 50px;">
		<a href="vdo" style="color: #d32f2f;">ดู VDO ทั้งหมด</a>
	</div>      
</div>
<?php include 'assets/footer.php'; ?>