<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>
<link href="<?php echo base_url().'assets/plugins/page.css'?>" rel="stylesheet" />


<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;
}
.text-primary-custom {
	color: #007bff !important
}
.form-control:focus {
    border: 1px solid #767170;
    box-shadow: none;
    outline: 0!important;
    color: #2c2c2c;
}
.bg-light {
	background-color: while !important;
}
.center {
  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">
								<span style="font-family: Sarabun; font-size: 18px;"><?php echo $d->description ?></span>
								</div>
								<div class="col-6">
									<div class="row">
										<div class="col-12">
											<a href="<?php echo base_url().$d->image1 ?>" data-toggle="lightbox" data-gallery="example-gallery">
												<img class="image-detail center" src="<?php echo base_url().$d->image1 ?>" alt="">
											</a>
										</div>
									</div>
									<div class="row">
										<div class="col-12">
										<a href="<?php echo base_url().$d->image2 ?>" data-toggle="lightbox" data-gallery="example-gallery">
											<img class="image-detail center" src="<?php echo base_url().$d->image2 ?>" alt="">
										</a>
										</div>
									</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">
										<div class="col-12">
											<a href="<?php echo base_url().$d->image1 ?>" data-toggle="lightbox" data-gallery="example-gallery">
												<img class="image-detail center" src="<?php echo base_url().$d->image1 ?>" alt="">
											</a>
										</div>
									</div>
									<div class="row">
										<div class="col-12">
										<a href="<?php echo base_url().$d->image2 ?>" data-toggle="lightbox" data-gallery="example-gallery">
											<img class="image-detail center" src="<?php echo base_url().$d->image2 ?>" alt="">
										</a>
										</div>
									</div>
								</div>
								<div class="col-6">
									<span style="font-family: Sarabun; font-size: 18px;"><?php echo $d->description ?></span>
								</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">
									<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 class="col-12">
							<span style="font-family: Sarabun; font-size: 18px;"><?php echo $d->description ?></span>
							</div>
						</div>
						<?php } ?>
						<?php if($d->template == 4){ ?>
						<div class="card-body" style='padding: 20px; margin-left: 5px; text-align: justify;'>
							<div class="row">
								<div class="col-12">
									<span style="font-family: Sarabun; font-size: 18px;"><?php echo $d->description ?></span>
								</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 class="text-center">
						<h4 class="title" style="margin-top: 0px;">สมาชิก</h4>
					</div>
					<div class="row">
					<?php foreach($member as $m){ ?>
						<div class="col-md-4 article-loop" id="">
							<div class="card">
								<div class="text-center">
									<img class="my-image" src='<?php echo base_url().$m->image ?>'>
								</div>	
								<div class="card-body">
									<h5><?php echo $m->prefix.$m->first_name.' '.$m->last_name ?></h5>
									<span><h5><i class="fa fa-envelope icon"></i>  :  <?php echo $m->email ?></h5</span><br>
								</div>
							</div>
						</div>
					<?php } ?>
					</div>
					<hr>
					<div class="text-center">
						<h4 class="title" style="margin-top: 0px;">ความคิดเห็น</h4>
					</div>
					<div class="bg-light-custom p-2">
					<div class="form-group">
						<input type="text" id="sender" value="" placeholder="ชื่อ-นามสกุล" class="form-control">
					</div>
					<textarea class="form-control ml-1 shadow-none textarea" placeholder="เขียนความคิดเห็น..." id="detail"></textarea></div>
                    	<div class="mt-2 text-right"><button class="btn btn-info btn-sm shadow-none" type="button" onclick="insert_comment()">เพิ่มความคิดเห็น</button></div>
                	</div>
					<div class="data-container"></div>
					<div id="demo"></div>
				</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;">คณะวิทยาการสารสนเทศ</b> <br>
			<span>169 ถนนลงหาดบางแสน ตำบลแสนสุข</span><br>
			<span>อำเภอเมือง จังหวัดชลบุรี 20131</span>
		</div>
		<div class="col-md-7 ml-auto" style="margin-top: 20px;">
			<i class="fa fa-phone icon"></i>  <span>+66 (0)38-103061,+66 (0)38-10309</span>  <br>
			<i class="fa fa-envelope icon"></i> <span>Email : pr@informatics.buu.ac.th </span> 
		</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 © 2018-2022 Faculty of Informatics, Burapha University. All rights reserved.</span></div>
            </div>
        </div>
    </div>
</footer>
<script src="<?php echo base_url()?>assets/plugins/page.js"></script>
<script>
	
	$(document).ready(function() {
		get_comment()
	});
	$(document).on('click', '[data-toggle="lightbox"]', function(event) {
		event.preventDefault();
		$(this).ekkoLightbox();
    });

	function get_comment(){
		$.ajax({
        type: 'post',
        url: "<?php echo site_url() . '/General/get_comment'; ?>",
        data: {
			'id': '<?php echo $project->project_id ?>'
        },
        dataType: 'json',
        success: function(data) {
            create_table(data.comment);
		}
    })
	}

	function create_table(datas){
		var container = $('#demo');
		$('#demo').pagination({
			dataSource: datas,
			pageSize: 5,
			callback: function(data, pagination) {
					dataHtml = ''
					dataHtml += '<div class="headings d-flex justify-content-between align-items-center mb-3">'
                    dataHtml += '<h6>ความคิดเห็นทั้งหมด ('+datas.length+')</h6>'
                    dataHtml += '</div>'
					$.each(data, function (index, item) {
						console.log(item)
						dataHtml += '<div class="card p-3 mt-2">';
						dataHtml += '<div class="d-flex justify-content-between align-items-center">';
						dataHtml += '<div class="user d-flex flex-row align-items-center">';
						dataHtml += '<span><div class="font-weight-bold text-primary-custom">'+item.sender+'</div><br> <div>'+item.detail+'</div></span>';
						dataHtml += '</div>';
						dataHtml += ' <small>'+convertDate(item.date)+'</small>';
						dataHtml += '</div>';
						dataHtml += '</div>';

					});
				container.prev().html(dataHtml);
			}
		})
	}

	function convertDate(dateString){
		var p = dateString.split(/\D/g)
		return [p[2],p[1],p[0] ].join("/")
	}

	const Toast = Swal.mixin({
		toast: true,
		position: 'bottom-start',
		showConfirmButton: false,
		timer: 1500,
		timerProgressBar: true,
		didOpen: (toast) => {
			toast.addEventListener('mouseenter', Swal.stopTimer)
			toast.addEventListener('mouseleave', Swal.resumeTimer)
    	}
	})

	function insert_comment(){
		let sender = $('#sender').val()
		let detail = $('#detail').val()
		let check1 = ckeckrude(sender);
		let check2 = ckeckrude(detail);

		if(sender == '' || detail == ''){
			Toast.fire({
				icon: 'error',
				title: 'กรุณากรอกข้อมูลให้ครบถ้วน',
			})
		}else if(check1 == true || check2 == true){
			Toast.fire({
				icon: 'error',
				title: 'กรุณากรอกข้อมูลที่สุภาพ',
			})
		}else{
			Swal.fire({
				title: ' คุณยืนยันที่จะเพิ่มความคิดเห็นหรือไม่',
				text: "",
				icon: 'question',
				showCancelButton: true,
				confirmButtonColor: '#3177ce',
				cancelButtonColor: ' white ',
				confirmButtonText: 'ใช่',
				cancelButtonText:  '<Font color=black> ไม่ <Font>',
				reverseButtons: true
		}).then((result) => {
			if (result.value) {
				$.ajax({
					type: 'post',
					url: "<?php echo site_url().'/General/insert_comment'; ?>",
					data: {
						'sender': sender,
						'detail': detail,
						'id': '<?php echo $project->project_id ?>'
					},
					dataType: 'json',
					success: function(data) {
						if (data['message'] == true) {
							Toast.fire({
								icon: 'success',
								title: 'เพิ่มข้อมูลสำเร็จ',
							}).then((result) => {
								get_comment()
								$('#sender').val('')
								$('#detail').val('')
							})
						}else {
							Toast.fire({
								icon: 'error',
								title: "เพิ่มข้อมูลไม่สำเร็จ",
							})
						}
					}
				});
			}
		})
		$(".swal2-cancel").css("border", "1px solid #A79E9E");
		}
	}

	function ckeckrude( data ){
		var wordrude = new Array ( "ashole","a s h o l e","a.s.h.o.l.e","bitch","b i t c h","b.i.t.c.h","shit","s h i t","s.h.i.t","fuck","dick","f u c k","d i c k","f.u.c.k","d.i.c.k","มึง","มึ ง","ม ึ ง","ม ึง","มงึ","มึ.ง","มึ_ง","มึ-ง","มึ+ง","กู","ควย","ค ว ย","ค.ว.ย","คอ วอ ยอ","คอ-วอ-ยอ","ปี้","เหี้ย","ไอ้เหี้ย","เฮี้ย","ชาติหมา","ชาดหมา","ช า ด ห ม า","ช.า.ด.ห.ม.า","ช า ติ ห ม า","ช.า.ติ.ห.ม.า","สัดหมา","สัด","เย็ด","หี","สันดาน","แม่ง","ระยำ","ส้น ตีน","แตด" );
		for ( n = 0 ; n < wordrude.length ; n++ )
		{
			if (data.includes(wordrude[n])) {
				return true
			}
		};
		return false
	};
</script>
