<style>
    .card-content-head {
        /* Rectangle 341 */

        box-sizing: border-box;

        position: absolute;
        width: 375px;
        height: 80px;
        top: -30px;

        background: #0359BE;
        border: 1px solid #0359BE;
        border-radius: 16px;

        text-align: center;
        justify-content: center;

    }

    .card-content {
        /* Rectangle 340 */

        box-sizing: border-box;

        /* position: absolute; */
        width: 439px;
        height: 460px;

        background: #FFFFFF;
        border: 1px solid #EFEEEE;
        border-radius: 42px;

        align-items: center;
        justify-content: center;

    }

    .logo-incard {
        top: 30px
    }

    .button-mid {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 110px;
    }

    .year {
        /* position: absolute; */
        /* left: 50%; */
        /* transform: translate(-50%, -50%); */
        /* top: 120px; */
    }

    .button-mid {
        display: block;
        margin: auto;
        /* Rectangle 102 */

        box-sizing: border-box;

        position: absolute;
        width: 267px;
        height: 44px;

        background: #FFFFFF;
        border: 1px solid #000000;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 10px;

    }

    .card-container {
        display: flex;
    }

    h3,
    h3:hover {
        color: white;
    }

    a,
    a:hover {
        color: black;
    }

    p {
        padding: 20px 30px 30px 50px;
        text-align: justify;
    }

    .num_project {
        bottom: 10px;
    }

    ul.cloud {
        list-style: none;
        padding: 0px 300px 0px 300px;
        /* padding-left: 0; */
        margin: 50px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        line-height: 2.5rem;
    }

    ul.cloud a {
        color: #a33;
        display: block;
        font-size: 1.5rem;
        padding: 0.125rem 0.25rem;
        text-decoration: none;
        position: relative;
    }

    ul.cloud a {
        --size: attr(data-weight number, 2);
        font-size: calc(var(--size) * 1rem);
    }

    ul.cloud a[data-weight="1"] {
        --size: 1;
    }

    ul.cloud a[data-weight="2"] {
        --size: 2;
    }

    ul.cloud a[data-weight="3"] {
        --size: 3;
    }

    ul.cloud a[data-weight="4"] {
        --size: 4;
    }

    ul.cloud a[data-weight="5"] {
        --size: 5;
    }

    ul.cloud a[data-weight="6"] {
        --size: 6;
    }

    ul.cloud a[data-weight="7"] {
        --size: 7;
    }

    ul.cloud a[data-weight="8"] {
        --size: 8;
    }

    ul.cloud a[data-weight="9"] {
        --size: 9;
    }

    ul.cloud a {
        --size: 4;
        font-size: calc(var(--size) * 0.25rem + 0.5rem);
        /* ... */
    }

    ul.cloud[data-show-value] a::after {
        content: " (" attr(data-weight) ")";
        font-size: 1rem;
    }

    ul.cloud li:nth-child(2n+1) a {
        --color: #181;
        color: #181;
    }

    ul.cloud li:nth-child(3n+1) a {
        --color: #33a;
        color: #33a;
    }

    ul.cloud li:nth-child(4n+1) a {
        --color: #c38;
        color: #c38;
    }

    ul.cloud a {
        opacity: calc((15 - (9 - var(--size))) / 15);
        /* ... */
    }

    ul.cloud a:focus {
        outline: 1px dashed;
    }

    ul.cloud a::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 0;
        height: 100%;
        background: var(--color);
        transform: translate(-50%, 0);
        opacity: 0.15;
        transition: width 0.25s;
    }

    ul.cloud a:focus::before,
    ul.cloud a:hover::before {
        width: 100%;
    }

    @media (prefers-reduced-motion) {
        ul.cloud * {
            transition: none !important;
        }
    }

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

    .content-wrapper {
        background-image: url('https://img.freepik.com/free-vector/gradient-network-connection-background_23-2148865392.jpg?w=1380&t=st=1673897858~exp=1673898458~hmac=75ebd87bac4d7a1a3bd628c4b046af5c822d41bcaadf4ad8a9a39e24f110b394');
    }

    .card-footer {
        padding-top: 12px;
    }
</style>
<div class="content-wrapper">
    <div class="content">
        <div class="container-fluid g-3">
            <button class="button button-mid" data-toggle="modal" data-target="#advanceSearcheModal">Advance Search</button><br><br><br><br>
        </div>
        <div class="year">
            <label for="year">ปี: </label>
            <select name="year" id="year" onchange="get_num_project()">
            </select>
            <br><br>
        </div>
        <div class="row justify-content-center">
            <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-info elevation-1"><i class="fas fa-cog"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">จำนวนผลงานทั้งหมด</span>
                        <span class="info-box-number" id="num_project_all">
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box mb-3">
                    <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-thumbs-up"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text" id="num_project_by_year_label">จำนวนผลงานในปี 2565</span>
                        <span class="info-box-number" id="num_project_by_year">
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-around">
            <a href="<?php echo site_url() . '/General/show_project_2' ?>" class="col-md-4">
                <div class="card card-widget widget-user">
                    <div class="widget-user-header text-white" style="background: url('https://images.theconversation.com/files/496840/original/file-20221122-22-gpfi1q.jpg?ixlib=rb-1.1.0&rect=198%2C77%2C5328%2C2664&q=45&auto=format&w=668&h=324&fit=crop') center center;">
                    </div>
                    <div class="card-footer">
                        <div class="">
                            <h5 class="description-header"><b>ชั้นปีที่ 2</b></h5>
                        </div>
                        <div class="">
                            <div class="description-block">
                                <h5 class="description-header">ผลงานนักศึกษาของรายวิชา 88823759</h5>
                            </div>
                        </div>
                        <div class="">
                            <div class="description-block">
                                <div class="num_project" id="num_project_2"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <a href="<?php echo site_url() . '/General/show_project_3' ?>" class="col-md-4">
                <div class="card card-widget widget-user">
                    <div class="widget-user-header text-white" style="background: url('https://www.investopedia.com/thmb/SPOl62NtucSLHi9-XyGJxm-Wo68=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/GettyImages-943067460-28883b8136b24330932cd4e2855c2508.jpg') center center;">
                    </div>
                    <div class="card-footer">
                        <div class="">
                            <h5 class="description-header"><b>ชั้นปีที่ 3</b></h5>
                        </div>
                        <div class="">
                            <div class="description-block">
                                <h5 class="description-header">ผลงานนักศึกษาของรายวิชา 88837259 </h5>
                            </div>
                        </div>
                        <div class="">
                            <div class="description-block">
                                <div class="num_project" id="num_project_3"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <a href="<?php echo site_url() . '/General/show_project_4' ?>" class="col-md-4">
                <div class="card card-widget widget-user">
                    <div class="widget-user-header text-white" style="background: url('https://images.theconversation.com/files/496840/original/file-20221122-22-gpfi1q.jpg?ixlib=rb-1.1.0&rect=198%2C77%2C5328%2C2664&q=45&auto=format&w=668&h=324&fit=crop') center center;">
                    </div>
                    <div class="card-footer">
                        <div class="">
                            <h5 class="description-header"><b>ชั้นปีที่ 4</b></h5>
                        </div>
                        <div class="">
                            <div class="description-block">
                                <h5 class="description-header">ผลงานนักศึกษาของรายวิชา 8841959</h5>
                            </div>
                        </div>
                        <div class="">
                            <div class="description-block">
                                <div class="num_project" id="num_project_4"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="card">
            <div class="card-body ">
                <ul class="cloud" role="navigation" aria-label="Webdev tag cloud">
                    <li><a data-weight="4" href="/tag/http">HTTP</a></li>
                    <li><a data-weight="2" href="/tag/ember">Ember</a></li>
                    <li><a data-weight="5" href="/tag/sass">Sass</a></li>
                    <li><a data-weight="8" href="/tag/html">HTML</a></li>
                    <li><a data-weight="6" href="/tag/flexbox">FlexBox</a></li>
                    <li><a data-weight="4" href="/tag/api">API</a></li>
                    <li><a data-weight="5" href="/tag/vuejs">VueJS</a></li>
                    <li><a data-weight="6" href="/tag/grid">Grid</a></li>
                    <li><a data-weight="3" href="/tag/rest">Rest</a></li>
                    <li><a data-weight="9" href="/tag/javascript">JavaScript</a></li>
                    <li><a data-weight="3" href="/tag/animation">Animation</a></li>
                    <li><a data-weight="7" href="/tag/react">React</a></li>
                    <li><a data-weight="8" href="/tag/css">CSS</a></li>
                    <li><a data-weight="1" href="/tag/cache">Cache</a></li>
                    <li><a data-weight="3" href="/tag/less">Less</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="advanceSearcheModal" tabindex="-1" role="dialog" aria-labelledby="advanceSearcheModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Advance Search</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="<?php echo site_url() . '/General/get_search' ?>">
                    <div class="row">
                        <div class="col-6">
                            <label class="form-label" for="grad">ชั้นปี: </label>
                            <select class="form-control" name="grad" id="">
                                <option value="all">ทั้งหมด</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label" for="year_search">ปี: </label>
                            <select class="form-control" name="year_search" id="year_search">
                                <option value="all">ทั้งหมด</option>
                            </select>
                        </div>
                    </div><br>
                    <div class="row">
                        <div class="col-6">
                            <label class="form-label" for="cluster">มกุล: </label>
                            <select class="form-control" name="cluster" id="">
                                <option value="all">ทั้งหมด</option>
                                <option value="0">0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                            </select>
                        </div>
                        <div class="col-md-6" id="team">
                            <div class="form-group">
                                <label class="form-label">ทีม: </label>
                                <select class="form-control" id="team_select">
                                    <option value="all">ทั้งหมด</option>
                                    <?php foreach ($teams as $team) { ?>
                                        <option value="<?php echo $team->team_id ?>"><?php echo $team->name ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="row p-t-20 center"> -->
                    <!-- <div class="col-md-6"> -->
                    <div class="form-group has-success">
                        <label class="form-label">บริษัท: </label>
                        <select class="form-control" id="company">
                            <option value="all">ทั้งหมด</option>
                            <?php foreach ($companies as $company) { ?>
                                <option value="<?php echo $company->company_id ?>"><?php echo $company->name ?></option>
                            <?php } ?>
                        </select>
                    </div>
                    <!-- </div> -->
                    <!-- <div class="col-md-6">
                            <div class="form-group has-success">
                                <label class="form-label">หมวดหมู่: </label>
                                <select class="js-example-basic-multiple form-control" name="states[]" multiple="multiple" id="muti">
                                    <?php //foreach ($tags as $tag) { 
                                    ?>
                                        <option value="<?php //echo $tag->tag_id 
                                                        ?>"><?php //echo $tag->name 
                                                            ?></option>
                                    <?php //  } 
                                    ?>
                                </select>
                            </div>
                        </div> -->
                    </label>

                    <!-- </div> -->
                    <div class="form-group has-success">
                        <label class="form-label">ชื่อโปรเจกต์: </label>
                        <input name="pname" type="text" class="form-control">
                    </div>
                    <div class="form-group has-success">
                        <label class="form-label">หมวดหมู่: </label>
                        <select class="js-example-basic-multiple form-control" name="states[]" multiple="multiple" id="muti">
                            <?php foreach ($tags as $tag) { ?>
                                <option value="<?php echo $tag->tag_id ?>"><?php echo $tag->name ?></option>
                            <?php  } ?>
                        </select>
                    </div>

                    <hr>
                    <div class="row justify-content-between">
                        <a type="hidden"></a>
                        <button type="submit" class="btn btn-primary">ค้นหา</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        get_project_year();
        $("#muti").select2().select2()

    });

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

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

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

    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_option_year_search(data) {
        let selectList = document.querySelector('#year_search')
        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 search() {
        // var year = document.getElementById("year").value;
        $.ajax({
            type: 'post',
            url: "<?php echo site_url() . '/General/get_search'; ?>",
            data: {
                // 'year': year
            },
            // dataType: 'json',
        })
    }

    function create_num_product(data, year) {
        let thai_year = parseInt(year) + 543;
        let selectDiv_2 = document.querySelector('#num_project_2')
        let selectDiv_3 = document.querySelector('#num_project_3')
        let selectDiv_4 = document.querySelector('#num_project_4')
        let selectDiv_all = document.querySelector('#num_project_all')
        let selectDiv_by_year = document.querySelector('#num_project_by_year')
        let selectDiv_by_year_label = document.querySelector('#num_project_by_year_label')
        selectDiv_2.innerHTML = 'จำนวนผลงาน : ' + data.cluster + ' ผลงาน';
        selectDiv_3.innerHTML = 'จำนวนผลงาน : ' + data.team + ' ผลงาน';
        selectDiv_4.innerHTML = 'จำนวนผลงาน : ' + data.project + ' ผลงาน';
        selectDiv_all.innerHTML = data.all_project + '<small> ผลงาน</small><br>';
        selectDiv_by_year.innerHTML = data.by_year + '<small> ผลงาน</small><br>';
        selectDiv_by_year_label.innerHTML = 'จำนวนผลงานในปี ' + thai_year;
    }
</script>