<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: 16px;
        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-grow:hover {
        transform: scale(1.02);
        box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
    }

    .rancolor span {
        color: white;
    }



    .card-pj {
        padding: 0px 10px 0px 10px;
    }
</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>
                    <div id="project" class="row">
                    </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>
    $(document).ready(function() {
        get_project_2_year();
    });

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

            },
            dataType: 'json',
            success: function(data) {
                console.log(data)
                create_option_year(data.year)
                get_project_2()
            }
        })
    }

    function get_project_2() {
        let year = document.getElementById("year").value;
        console.log(year);
        $.ajax({
            type: 'get',
            url: "<?php echo site_url() . '/General/get_project_2'; ?>",
            data: {
                'year': year
            },
            dataType: 'json',
            success: function(data) {
                console.log(data)
                create_project(data.project_2)
            }
        })
    }

    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) => {
            html += '<div class="col-md-3 article-loop card-pj" >';
            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.name_th}</b></span></div>`;
            html += `<span>บริษัท : ${row.cp_name}</span><br>`;
            html += `<span>มกุล : ${row.ct_name}</span><br>`;
            html += '<div class="row mt-2">';
            row.tags.forEach((t_row, t_index) => {
                html += `<div class='col-md-4 '>`;
                html += `<div class='card text-center rancolor'>`;
                html += `<span>${t_row.tag_name}</span>`;
                html += `</div>`;
                html += `</div>`;
            });
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '</a>';
            html += '</div>';
        })
        document.getElementById('project').innerHTML = html;
        random_color()
    }
</script>