<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);
}

.section {
    padding: 40px 0;
}

.title {
    padding-top: 0px;
}

table,
th,
td {
    border-collapse: collapse;
}

.test_text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    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: auto;
	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;
}
.card:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
}
.notfound {
	text-align: center;
}
</style>
<?php $y = $_GET['y']; ?>
<div class="wrapper">
    <div class="container-fluid">
        <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-2 position-relative">
							<div class="form-group">
								<label for="year" class="form-label">ปี</label>
								<select name="year" class="form-control form-sm" id="year" onchange="get_project_2()">
								</select>
							</div>
						</div>
						<div class="col-2 position-relative">
							<label for="limit" class="form-label">จำนวนต่อหน้า</label>
							<select name="limit" id="limit" class="form-control form-sm" onchange="load_num_project(), reset_page(), load_data()">
								<option value="10">10</option>
								<option value="20">20</option>
								<option value="50">50</option>
								<option value="100">100</option>
							</select>
						</div>
					</div>
					<div id="project" class="row">
					</div>
					<nav aria-label="Page navigation">
					<ul class="pagination" id="select-page">
					</ul>
       				</nav>
				</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>
	 $(document).ready(function() {
        get_project_4_year();
    });

    function get_project_4_year() {
        $.ajax({
            type: 'get',
            url: "<?php echo site_url() . '/General/get_project_4_year'; ?>",
            data: {

            },
            dataType: 'json',
            success: function(data) {
                console.log(data)
                create_option_year(data.year)
                if (data.year != '') {
                    load_data();
                    load_num_project();
                } else {
                    let selectList = document.querySelector('#project')
                    document.getElementById('project').innerHTML = "";
                    selectList.setAttribute("class", "notfound")
                    h2 = document.createElement("h2")
                    h2.setAttribute("class", "notfound")
                    const text = document.createTextNode('- ไม่พบข้อมูล -')
                    h2.appendChild(text)
                    selectList.appendChild(h2)
                }

            }
        })
    }

    let current_page = 1;

    function load_data() {
        let year = document.getElementById("year").value;
        let limit = document.getElementById("limit").value;
        $.ajax({
            type: "get",
            url: "<?php echo site_url() . '/General/get_data_pagination' ?>",
            data: {
                'year': year,
                'page': current_page,
                'limit': limit
            },
            dataType: "json",
            success: function(data) {
                create_project(data.pagination)
            }
        });
    }

    function load_num_project() {
        let year = document.getElementById("year").value;
        let limit = document.getElementById("limit").value;
        $.ajax({
            type: "get",
            url: "<?php echo site_url() . '/General/get_num_page' ?>",
            data: {
                'year': year,
            },
            dataType: "json",
            success: function(data) {
                console.log(data)
                let num = Math.ceil(data.num[0].num_project / limit);
                create_page_select(num);
            }
        });
    }

    function reset_page() {
        current_page = 1;
    }

    function set_page(page) {
        current_page = page;
        console.log('page' + page);
        load_data();
    }

    function previous_page() {
        if (current_page > 1) {
            current_page--;
            console.log('page' + current_page);
            load_data();
        }
    }

    function next_page(maxPage) {
        if (current_page < maxPage) {
            current_page++;
            console.log('page' + current_page);
            load_data();
        }
    }

    function create_option_year(data) {
        let selectList = document.querySelector('#year')
        data.forEach((row, index) => {
            option = document.createElement("option")
            option.setAttribute("value", row.year)
            if (row.year == <?php echo $y ?>) {
                option.setAttribute("selected", "selected")
            }
            const number = parseInt(row.year) + 543
            option.text = number
            selectList.appendChild(option)
        })
    }
    function create_project(data) {
        let html = '';
        data.forEach((row, index) => {
			console.log(row)
            html += '<div class="col-md-3 article-loop" >';
			html += `<a href="<?php echo site_url().'/General/show_select/' ?>${row.project_id} style="color:black" class="custom-card ">`;
			html += '<div class="card">';
			html += '<img class="card-img-top" src="http://localhost/exhi//project/year_2023/y3/team3/image_cover_23-03-14.png" height="150px" style="object-fit: cover;" alt="Card image cap">';
			html += '<div class="card-body">';
			html += `<div><span><b>${row.name_th}</b></span></div>`;
			html += `<span>บริษัท : </span><br>`;
			html += `<span>ทีม : ${row.ct_name}</span><br>`;
			html += '</div>';
			html += '</div>';
			html += '</a>';
			html += '</div>';
        })
        document.getElementById('project').innerHTML = html;
    }

	function create_page_select(data) {
        let html = '';
        html += `<li><button class="page-link" onclick="previous_page()">ก่อนหน้า</button></li>`;
        for (i = 0; i < data; i++) {
            let page = i + 1;
            console.log('i' + i);
            html += `<li><button class="page-link" onclick="set_page(` + page + `)">` + page + `</button></li>`;
        }
        html += `<li><button class="page-link" onclick="next_page(` + data + `)">ถัดไป</button></li>`;
        document.getElementById('select-page').innerHTML = html;
    }
</script>
