<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 card-grow {
        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;
    }

    a,
    a:hover {
        color: black;
    }

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

    [data-tooltip] {
        position: relative;
        z-index: 9999999;
        cursor: pointer;
    }

    /* Hide the tooltip content by default */
    [data-tooltip]:before,
    [data-tooltip]:after {
        visibility: hidden;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
        pointer-events: none;
    }

    /* Position tooltip above the element */
    [data-tooltip]:before {
        position: absolute;
        bottom: 80%;
        left: 50%;
        margin-bottom: 5px;
        margin-left: -30px;
        padding: 7px;
        width: 60px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background-color: #000;
        background-color: hsla(0, 0%, 20%, 0.9);
        color: #fff;
        content: attr(data-tooltip);
        text-align: center;
        font-size: 14px;
        line-height: 1.2;
    }

    /* Triangle hack to make tooltip look like a speech bubble */
    [data-tooltip]:after {
        position: absolute;
        bottom: 80%;
        left: 50%;
        margin-left: 1px;
        width: 0;
        border-top: 5px solid #000;
        border-top: 5px solid hsla(0, 0%, 20%, 0.9);
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        content: " ";
        font-size: 0;
        line-height: 0;
    }

    /* Show tooltip content on hover */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
        visibility: visible;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
        z-index: 9999999;
    }

    .grow {
        transition: all .2s ease-in-out;
    }

    .grow:hover {
        transform: scale(1.2);
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        color: black !important;
    }
</style>
<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-md-2">
                            <div class="form-group">
                                <select name="year" class="form-control form-control" id="year" onchange="get_num_project()">
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group form-group">
                                <input type="search" class="form-control form-control" id='pname_search' placeholder="ชื่อโปรเจกต์..">
                                <div class="input-group-append">
                                    <button type="submit" class="btn btn btn-default" onclick="search_pname()">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <button style="background-color:white;border-color:#A79E9E" class="btn" data-toggle="modal" data-target="#advanceSearcheModal">ค้นหาขั้นสูง</button><br><br><br><br>
                        </div>
                    </div>
                    <div>
                        <h5><b>ผลงานที่เพิ่มล่าสุด</b></h5>
                    </div>
                    <div class="row" id="trend">
                    </div>
                    <div>
                        <h5><b>Category</b></h5>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <a id="project_2" href="<?php echo site_url() . '/General/show_project_2' ?>">
                                <div class="card card-grow">
                                    <img class="card-img-top" src="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" height="200px" style="object-fit: cover;" alt="card card-growimage cap">
                                    <div class="card-body">
                                        <div>
                                            <h5 class="description-header"><b>ชั้นปีที่ 2</b></h5>
                                        </div>
                                        <span>
                                            <h5 class="description-header">ผลงานนักศึกษาของรายวิชา 88823759</h5>
                                        </span>
                                        <span>
                                            <div class="num_project" id="num_project_2"></div>
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4">
                            <a id="project_3" href="<?php echo site_url() . '/General/show_project_3' ?>">
                                <div class="card card-grow">
                                    <img class="card-img-top" src="https://www.investopedia.com/thmb/SPOl62NtucSLHi9-XyGJxm-Wo68=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/GettyImages-943067460-28883b8136b24330932cd4e2855c2508.jpg" height="200px" style="object-fit: cover;" alt="card card-growimage cap">
                                    <div class="card-body">
                                        <div>
                                            <h5 class="description-header"><b>ชั้นปีที่ 3</b></h5>
                                        </div>
                                        <span>
                                            <h5 class="description-header">ผลงานนักศึกษาของรายวิชา 88837259 </h5>
                                        </span>
                                        <span>
                                            <div class="num_project" id="num_project_3"></div>
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4">
                            <a id="project_4" href="<?php echo site_url() . '/General/show_project_4' ?>">
                                <div class="card card-grow">
                                    <img class="card-img-top" src="https://www.devprojournal.com/wp-content/uploads/2022/12/software-developer-velocity.jpeg" height="200px" style="object-fit: cover;" alt="card card-growimage cap">
                                    <div class="card-body">
                                        <div>
                                            <h5 class="description-header"><b>ชั้นปีที่ 4</b></h5>
                                        </div>
                                        <span>
                                            <h5 class="description-header">ผลงานนักศึกษาของรายวิชา 8841959</h5>
                                        </span>
                                        <span>
                                            <div class="num_project" id="num_project_4"></div>
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h5>Tag Cloud</h5>
                            </div>
                            <div class="card-body">
                                <div id="tagCloud" style="width: auto; height: 350px; "></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header row">
                                <div class="col-9">
                                    <h5>สถิติ</h5>
                                </div>
                                <div class="col-3 float-right">
                                    <select name="year_chart" class="form-control form-control " id="year_chart" onchange="del_chart(), get_data_chart()">
                                        <option value="all">ทั้งหมด</option>
                                    </select>
                                </div>
                            </div>
                            <div class="card-body" style=" width: auto; height: 390px;">
                                <div id="cardMyChart">
                                    <canvas id="myChart" style="width:100%;max-width:600px; margin: auto;"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </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">ค้นหาขั้นสูง</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 method="POST" action="<?php echo site_url() . '/General/get_search' ?>">
                    <div class="row">
                        <div class="col-6">
                            <label class="form-label" for="grade">ชั้นปี: </label>
                            <select class="form-control" name="grade" id="grade">
                                <option value="">ทั้งหมด</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="">ทั้งหมด</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="">ทั้งหมด</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" name="team">
                                    <option value="">ทั้งหมด</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">
                        <div class="col-12">
                            <div class="form-group has-success">
                                <label class="form-label">บริษัท: </label>
                                <select class="form-control" id="company" name="company">
                                    <option value="">ทั้งหมด</option>
                                    <?php foreach ($companies as $company) { ?>
                                        <option value="<?php echo $company->company_id ?>"><?php echo $company->name ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group has-success">
                                <label class="form-label">ชื่อโปรเจกต์: </label>
                                <input name="pname" type="text" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group has-success">
                                <label class="form-label">หมวดหมู่: </label><br>
                                <select class="js-example-basic-multiple form-control" name="tag[]" 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>
                    </div>
                    <hr>
                    <div class="row justify-content-between">
                        <a type="hidden"></a>
                        <button class="btn btn-primary">ค้นหา</button>
                    </div>
                </form>
            </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_year();
        get_trend();
        $("#muti").select2();
        let year = document.getElementById("year").value;
        $('#project_2').attr('href', '<?php echo site_url() . "/General/show_project_2" ?>?y=' + year);
        $('#project_3').attr('href', '<?php echo site_url() . "/General/show_project_3" ?>?y=' + year);
        $('#project_4').attr('href', '<?php echo site_url() . "/General/show_project_4" ?>?y=' + year);
        get_tag();
        get_data_chart();
    });

    function del_chart() {
        let element = document.getElementById("myChart");
        element.parentNode.removeChild(element);
        let html = '';
        html = '<canvas id="myChart" style="width:100%;max-width:600px"></canvas>';
        document.getElementById('cardMyChart').innerHTML = html;
    }

    function create_chart(data) {
        let year = document.getElementById('year_chart').value;
        year == 'all' ? year = 'ทั้งหมด' : year = +year + 543;
        var xValues = [];
        var yValues = [];
        console.log('xxx'.xValues);
        data.forEach((row, index) => {
            xValues.push(row.cp_name)
            yValues.push(row.num)
        })
        new Chart("myChart", {
            type: "bar",
            data: {
                labels: xValues,
                datasets: [{
                    backgroundColor: "Navy",
                    data: yValues
                }]
            },
            options: {
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    text: `ข้อมูลผลงานที่ทำกับบริษัทในปี ${year}`
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            stepSize: 1
                        }
                    }]
                }
            }
        });
    }

    function get_data_chart() {
        let year = document.getElementById('year_chart').value;
        $.ajax({
            type: 'get',
            url: "<?php echo site_url() . '/General/get_data_chart'; ?>",
            data: {
                'year': year
            },
            dataType: 'json',
            success: function(data) {
                create_chart(data.chart);
            }
        })
    }

    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_chart(data.year)
                create_option_year_search(data.year)
                get_num_project()
            }
        })
    }

    function get_num_project() {
        let year = document.getElementById("year").value;
        $('#project_2').attr('href', '<?php echo site_url() . "/General/show_project_2" ?>?y=' + year);
        $('#project_3').attr('href', '<?php echo site_url() . "/General/show_project_3" ?>?y=' + year);
        $('#project_4').attr('href', '<?php echo site_url() . "/General/show_project_4" ?>?y=' + year);
        $.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_chart(data) {
        let selectList = document.querySelector('#year_chart')
        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 get_trend() {
        $.ajax({
            type: 'get',
            url: "<?php echo site_url() . '/General/get_trend'; ?>",
            data: {},
            dataType: 'json',
            success: function(data) {
                console.log(data)
                create_trend(data.trend)
            }
        })
    }

    function search_pname() {
        let pname = document.getElementById('pname_search').value;
        (pname == '') ? '' : window.location.href = `http://localhost/exhi/index.php/General/get_search_pname/${pname}`;
    }

    function create_tag(data) {
        let tag = [];
        let url = "<?php echo site_url() . '/General/get_search_tag/' ?>"
        data.forEach((row, index) => {
            tag.push({
                text: row.tag,
                weight: row.num,
                link: url + row.id,
                html: {
                    "data-tooltip": row.num,
                    "class": "grow"
                }
            })
        })
        console.log('node', tag)
        $("#tagCloud").jQCloud(tag);
    }

    function get_tag() {
        $.ajax({
            type: 'get',
            url: "<?php echo site_url() . '/General/get_tag'; ?>",
            data: {},
            dataType: 'json',
            success: function(data) {
                console.log(data)
                create_tag(data.tag)
            }
        })
    }

    function create_trend(data) {
        let html = '';
        data.forEach((row, index) => {
            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 card-grow">`;
            html += '<div class="card card-grow">';
            html += `<img class="card-img-top" src="<?php echo base_url() ?>${row.image_cover}" height="150px" style="object-fit: cover;" alt="card card-growimage cap">`;
            html += '<div class="card-body">';
            html += `<div><span><b>${row.name_th}</b></span></div>`;
            (row.cluster_id == 0 & row.team_id == 0) ? html += `<span>${row.first_name} ${row.last_name}</span><br>`: html += `<span>บริษัท : ${row.cp_name}</span><br>`;
            (row.cluster_id == 0 & row.team_id == 0) ? html += `<span>อาจารย์ที่ปรึกษา : ${row.is_name}</span><br>`: (row.cluster_id != 0) ? html += `<span>มกุล : ${row.ct_name}</span><br>` : html += `<span>ทีม : ${row.t_name}</span><br>`;
            html += '</div>';
            html += '</div>';
            html += '</a>';
            html += '</div>';
        })
        document.getElementById('trend').innerHTML = html;
    }

    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')
        selectDiv_2.innerHTML = 'จำนวนผลงาน : ' + data.cluster + ' ผลงาน';
        selectDiv_3.innerHTML = 'จำนวนผลงาน : ' + data.team + ' ผลงาน';
        selectDiv_4.innerHTML = 'จำนวนผลงาน : ' + data.project + ' ผลงาน';
    }
</script>