<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="load_data()">
                                </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="<?php echo base_url() ?>${row.image_cover}" height="150px" style="object-fit: cover;" alt="Card image cap">`;
            html += '<div class="card-body">';
            html += `<div><span><b>${row.pj_name}</b></span></div>`;
            html += `<span>${row.first_name} ${row.last_name}</span><br>`;
            html += `<span>อาจารย์ที่ปรึกษา : ${row.is_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>