<link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css" />
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" /> -->
<!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap4.min.css" /> -->

<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>


<style>
/* .page-header.page-header-small {
    min-height: 60vh;
    max-height: 440px;
} */
body {
    background: #f4f4f4;
    background-color: white;

}




body {
    /* margin: 3rem; */
    font: 500 100%;
    font-size: 16px;
    line-height: 1.5;
    color: rgb(0, 0, 0);
}

@media (max-width: 1024px) {
    body {
        margin: 0;
        background: #f4f4f4;
    }
}

@media (max-width: 411px) {
    h5 {
        margin-top: 30px
    }
}

.img {
    background-image: url(small.jpg);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.description {
    font: 500 100%;
    font-size: 16px;
}

.card {
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
    transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);

    /* padding: 14px 80px 18px 36px; */
    /* cursor: pointer; */
}

.card:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
}

.section {
    padding: 40px 0;
}

.title {
    padding-top: 0px;
}

table,
th,
td {
    /* border: 1px solid black; */
    border-collapse: collapse;
    /* padding: 0px; margin: 0px;
  border-spacing: 0px; */
}

.test_text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;

}

span{
    font-size: 14px;
    color: #41474c;
}


.footer-bar{
    background-color: white;
    padding: 10px 0px;
}

.icon{
    color:#41474c;
}
.my-image{
	width:200px;
  	height:200px;
  	object-fit:cover;
  	border-radius:50%;
}
.tag-lg {
    font-size: .8em;
    border-radius: 4px;
}

.tag-custom {
    background: #ffffff;
    color: #000;
    border-style: solid;
    border-width: 0.7px;
}
.tag{
	display: inline-block;
    border-radius: 3px;
    padding: .0em .3em .0em;
    border-radius: 2px;
    font-weight: 400;
    margin: .25em .1em
}
.image-detail {
	object-fit: cover;
	width: auto;
	height: 300px;
	padding: 20px;
	display: block;
    margin-left: auto;
    margin-right: auto;
}
</style>
<div class="wrapper">
    <div class="container">
        <div class="section section-about-us" style="padding: 0px">
            <div class="content" style="padding: 20px">
                <div class="container-fluid">
					<div class="row">
						<div class="col-4">
							<div class="text-center">
								<img class="my-image" src='<?php echo base_url().$project->image_logo ?>'>
							</div>
						</div>
						<div class="col-8">
							<div class="row">
								<p style="white-space: pre-line; font-size: 20px; margin-left: 5px;"><?php echo $project->name_th ?></p>
							</div>
							<div class="row">
								<p style="white-space: pre-line; font-size: 20px; margin-left: 5px;"><?php echo $project->select ?></p>
							</div>
							<div class="row">
								<p style="white-space: pre-line; font-size: 20px; margin-left: 5px;">ปี : <?php echo $project->date ?></p>
							</div>
							<div class="row">
								<p style="white-space: pre-line; font-size: 20px; margin-left: 5px;">Tag : <?php foreach($project_tag as $tag){ ?> <span class="tag tag-custom tag-lg"><?php echo $tag->name ?></span> <?php } ?>
								</p>
							</div>
						</div>
					</div>
					<hr>
					<div class="text-center">
						<h4 class="title" style="margin-top: 0px;"><?php echo $project->name_th ?></h4>
						<p style="margin-top: 0px;"><?php echo '('.$project->name_en.')' ?></p>
					</div>
					<?php foreach($detail as $d){ ?>
						<?php if($d->template == 1){ ?>
						<div class="card-body " style='padding: 20px; margin-left: 5px;'>
							<div class="row">
								<div class="col-6">
									<?php echo $d->description ?>
								</div>
								<div class="col-6">
									<div class="row">
										<a href="<?php echo base_url().$d->image1 ?>" data-toggle="lightbox" data-gallery="example-gallery">
											<img class="image-detail" src="<?php echo base_url().$d->image1 ?>" alt="">
										</a>
									</div>
									<div class="row">
										<a href="<?php echo base_url().$d->image2 ?>" data-toggle="lightbox" data-gallery="example-gallery">
											<img class="image-detail" src="<?php echo base_url().$d->image2 ?>" alt="">
										</a>
									</div>
								</div>
							</div>
						</div>
						<?php } ?>
						<?php if($d->template == 2){ ?>
						<div class="card-body " style='padding: 20px; margin-left: 5px;'>
							<div class="row">
								<div class="col-6">
									<div class="row">
										<a href="<?php echo base_url().$d->image1 ?>" data-toggle="lightbox" data-gallery="example-gallery">
											<img class="image-detail" src="<?php echo base_url().$d->image1 ?>" alt="">
										</a>
									</div>
									<div class="row">
										<a href="<?php echo base_url().$d->image2 ?>" data-toggle="lightbox" data-gallery="example-gallery">
											<img class="image-detail" src="<?php echo base_url().$d->image2 ?>" alt="">
										</a>
									</div>
								</div>
								<div class="col-6">
									<?php echo $d->description ?>
								</div>
							</div>
						</div>
						<?php } ?>
						<?php if($d->template == 3){ ?>
						<div class="card-body " style='padding: 20px; margin-left: 5px;'>
							<div class="row">
								<div class="col-6">
									<div class="row">
										<a href="<?php echo base_url().$d->image1 ?>" data-toggle="lightbox" data-gallery="example-gallery">
											<img class="image-detail" src="<?php echo base_url().$d->image1 ?>" alt="">
										</a>
									</div>
									<div class="row">
										<a href="<?php echo base_url().$d->image2 ?>" data-toggle="lightbox" data-gallery="example-gallery">
											<img class="image-detail" src="<?php echo base_url().$d->image2 ?>" alt="">
										</a>
									</div>
								</div>
							</div>
							<div class="col-6">
									<?php echo $d->description ?>
							</div>
						</div>
						<?php } ?>
						<?php if($d->template == 4){ ?>
						<div class="card-body " style='padding: 20px; margin-left: 5px;'>
							<div class="row">
								<div class="col-12">
									<?php echo $d->description ?>
								</div>
								<div class="col-6">
									<a href="<?php echo base_url().$d->image1 ?>" data-toggle="lightbox" data-gallery="example-gallery">
											<img class="image-detail" src="<?php echo base_url().$d->image1 ?>" alt="">
									</a>
								</div>
								<div class="col-6">
										<a href="<?php echo base_url().$d->image2 ?>" data-toggle="lightbox" data-gallery="example-gallery">
											<img class="image-detail" src="<?php echo base_url().$d->image2 ?>" alt="">
										</a>
								</div>
							</div>
						</div>
						<?php } ?>
					<?php } ?>
					<hr>
                </div>
            </div>
        </div>
    </div>
</div> 
<footer class="footer footer-default" >
<div class="container" >
	<div class="row">
		<div class="col-md-5" >
			<b style="font-size:16px;">CLICKNEXT COMPANY LIMITED</b> <br>
			<span>128/323-333  30th FL.  Phayathai Plaza Bldg.  Phayathai road, Thung Phayathai, Ratchathewi, Bangkok, 10400, Thailand. </span>
		</div>
		<div class="col-md-3 ml-auto" style="margin-top: 20px;">
			<i class="fa fa-phone icon"></i>  <span>02-217-7900</span>  <br>
			<i class="fa fa-envelope icon"></i> <span>Email : info@clicknext.com </span> 
		</div>
		<div class="col-md-3 ml-auto" style="margin-top: 20px;">
		<a style="color: black;" target="_blank" href="https://www.facebook.com/clicknext/">
			<i class="fa-brands fa-facebook icon"></i>    
			<span>Clicknext Facebook Fanpage</span> 
		</a>
		<br>
		<a style="color: black;" target="_blank" href="https://www.youtube.com/channel/UCm3Qapv2K4lj4h6F4aod1Fw">
			<i class="fa-brands fa-youtube icon"></i>
			<span>Youtube Channel</span> 
		</a>
		</div>
    </div>
</div>
</div>
</footer>

<footer class="footer-bar">
    
    <div class=" container ">

        <div class="row justify-content-md-center">
            <div class="col-md-12">
                <div style="text-align: left;" data-mce-style="text-align: left;"><span style="font-size: 12px; font-family: Barlow_Regular0, Tahoma; color: rgb(157, 157, 157);" open="" sans="" color:="" rgb="" 157="" data-mce-style="font-size: 16px; font-family: Barlow_Regular0, Tahoma; color: #9d9d9d;">Copyright © ClickNext Co.,Ltd All right reserved.</span></div>
            </div>
        </div>

    </div>
    


</footer>
<script>
	$(document).on('click', '[data-toggle="lightbox"]', function(event) {
		event.preventDefault();
		$(this).ekkoLightbox();
    });
</script>
