<style>
    a,
    a:hover {
        color: black;
    }

    #divR {
        align-items: center;
        justify-content: center;
    }

    .content {
        max-width: 1500px;
        max-height: auto;
        margin: auto;
        background: white;
        padding: 10px;
    }

    .info-box {
        height: 120px;
    }

    .info-box-icon {
        height: 100px;
        width: 100px;
    }

    .info-box-text {
        text-align: center;
        font-weight: bold;
    }

    /* p {
        text-align: justify;
    } */
</style>
<div class="content-wrapper h-100">
    <div class="content-header">
        <div class="container-fluid g-3">
            Home/ <a href="<?php echo site_url() . '/General/show_general_home/' ?>">Dashboard</a> /ผลงานกิจกรรมชั้นปีที่ 2
        </div>
    </div>
    <div class="content">
        <div class="mb-3"></div>
        <div class="card-container">
            <div>
                <label for="year">ปี: </label>
                <select name="year" id="year" onchange="get_project_2()">
                </select>
                <br><br>
            </div>
        </div>
        <div id="project" class="row">
        </div>
    </div>
</div>

<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() {
        var 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)
            const number = parseInt(row.year) + 543
            option.text = number
            selectList.appendChild(option)
        })
    }

    function create_project(data) {
        let html = '';
        data.forEach((row, index) => {

            html += `<a href="<?php echo site_url() . '/General/show_project_2?' ?> ` + row.project_id + `" class="col-md-4">`;
            html += `<div class="info-box mb-3">`;
            html += `<span class="info-box-icon bg-info elevation-1"><img src=""></img></span>`;
            html += `<div class="info-box-content">`;
            html += `<span class="info-box-text">` + row.ct_name + `</span>`;
            html += `<span class="info-box-text">` + row.pj_name + `</span>`;
            html += `</div>`;
            html += `</div>`;
            html += `</a>`;
        })
        document.getElementById('project').innerHTML = html;
    }
</script>