view

<div class="content-wrapper">
    <br>
    <br>
    <br>

    <section>
        <div class="col-md-12" >
            <div class="nav-tabs-custom" id="menu_chart">
                <!-- menu -->
                <div class="btn-group">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" data-menu="1"
                        aria-haspopup="true" aria-expanded="false" id="open_disc">
                        DISC
                    </button>
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" data-menu="1"
                        aria-haspopup="true" aria-expanded="false" id="open_temp">
                        temprament
                    </button>
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false" id="open_prbs">
                        Problem Solving
                    </button>
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false" id="open_eq">
                        EQ
                    </button>
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false" id="open_brain">
                        Brain Dominant
                    </button>
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false" id="open_leadership">
                        Leadership
                    </button>
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false" id="open_lifemotivation">
                        Life Motivation
                    </button>
                </div>
                <!-- <div class="btn-group">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false" id="open_industry">
                        Industry
                    </button>
                </div> -->
            </div>
            <!-- content -->
            <div class="col-md-9">
                <div class="col-md-12" id="sortable">
                <!-- Start Disc View -->
                    <div class="col-md-4 chart_list" id="disc_col">
                        <div class="chart_content">
                            <button type="button" class="close" aria-label="Close" id="close_disc">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <div  id="disc"></div>
                        </div>
                    </div>

                    <!-- Close view Dics -->

                    <!-- Start view Temprament -->
                    <div class="col-md-4 chart_list"  id="temp_col">
                        <div class="chart_content">
                            <button type="button" class="close" aria-label="Close" id="close_temp">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <div id="temprament"></div>
                        </div>
                    </div>
                    <!-- Close View Temprament -->

                    <!-- start View Problem Solving -->
                    <div class="col-md-4 chart_list"  id ="prbs_col">
                        <div class="chart_content">
                            <button type="button" class="close" aria-label="Close" id="close_prbs">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <div id="problemsolving">
                            </div>
                        </div>
                        <?php

                         $ttl_cmpt  = ($hasil_cmpt / $ttl_disc) * 100 ;
                         $ttl_lgc   = ($hasil_lgc / $ttl_disc) * 100 ;
                         $ttl_ct    = ($hasil_ct / $ttl_disc) * 100 ;
                        ?>
                        <script>
                            Highcharts.chart('problemsolving', {
                                chart: {
                                    type: 'pie',
                                    height : 200 ,
                                    options3d: {
                                        enabled: true,
                                        alpha: 45,
                                        beta: 0
                                    }
                                },
                                title: {
                                    text: '',
                                    style: {
                                        display: 'none'
                                    }
                                },
                                subtitle: {
                                    text: 'Problem Solving',

                                },

                                tooltip: {
                                    pointFormat: '{labels.name}: <b>{point.percentage:.1f}%</b>'
                                },
                                plotOptions: {
                                    pie: {
                                        allowPointSelect: true,
                                        cursor: 'pointer',
                                        depth: 35,
                                        dataLabels: {
                                            enabled: true,
                                            format: '{point.name}'
                                        }
                                    }
                                },
                                series: [{
                                    type: 'pie',
                                    name: 'Problem Solving',
                                    data: [
                                        ['LGC', <?php echo $ttl_lgc ?>],
                                        ['CT', <?php echo $ttl_ct ?>],
                                        ['CMPT', <?php echo $ttl_cmpt ?>]
                                    ]
                                }]
                            });

                        </script>
                    </div>
                    <!-- Close View Problem Solving -->
                    <!-- Start View EQ  -->
                    <div class="col-md-4 chart_list"  id ="eq_col" >
                        <div class="chart_content">
                            <button type="button" class="close" aria-label="Close" id="close_eq">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <div id="eq">
                            </div>
                        </div>
                        <?php
                            $st = ($stress_tolerance / $ttl_disc) *100 ;
                            $ad = ($adaptability / $ttl_disc) * 100 ;
                            $aw = ($self_awareness / $ttl_disc) * 100 ;
                            $em = ($empathy / $ttl_disc) * 100 ;


                        ?>
                        <script>
                            Highcharts.chart('eq', {
                                chart: {
                                    type: 'pie',
                                    height : 200 ,
                                    options3d: {
                                        enabled: true,
                                        alpha: 45,
                                        beta: 0
                                    }
                                },
                                title: {
                                    text: '',
                                    style: {
                                        display: 'none'
                                    }
                                },
                                subtitle: {
                                    text: 'EQ',
                                },

                                tooltip: {
                                    pointFormat: '{labels.name}: <b>{point.percentage:.1f}%</b>'
                                },
                                plotOptions: {
                                    pie: {
                                        allowPointSelect: true,
                                        cursor: 'pointer',
                                        depth: 35,
                                        dataLabels: {
                                            enabled: true,
                                            format: '{point.name}'
                                        }
                                    }
                                },
                                series: [{
                                    type: 'pie',
                                    name: 'Problem Solving',
                                    data: [
                                        ['Stress Tolerance', <?php echo $st ?>],
                                        ['Adaptability', <?php echo $ad ?>],
                                        ['Self Awarness', <?php echo $aw ?>],
                                        ['Empathy', <?php echo $em ?>]
                                    ]
                                }]
                            });

                        </script>
                    </div>
                    <!-- Close View EQ -->
                    <!-- Start View Brain Dominan -->
                    <div class="col-md-4 chart_list"  id ="brain_col">
                        <div class="chart_content">
                            <button type="button" class="close" aria-label="Close" id="close_brain">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <div id="brain">
                            </div>
                        </div>
                        <?php
                                $ttl_left  = ($brain_left / $ttl_disc) * 100 ;
                                $ttl_right = ($brain_right / $ttl_disc) * 100 ;
                                $ttl_equal = ($brain_equal / $ttl_disc) * 100 ;
                        ?>
                        <script>
                            Highcharts.chart('brain', {
                                chart: {
                                    type: 'pie',
                                    height : 200 ,
                                    options3d: {
                                        enabled: true,
                                        alpha: 45,
                                        beta: 0
                                    }
                                },
                                title: {
                                    text: '',
                                    style: {
                                        display: 'none'
                                    }
                                },
                                subtitle: {
                                    text: 'Brain Dominant',
                                },

                                tooltip: {
                                    pointFormat: '{labels.name}: <b>{point.percentage:.1f}%</b>'
                                },
                                plotOptions: {
                                    pie: {
                                        allowPointSelect: true,
                                        cursor: 'pointer',
                                        depth: 35,
                                        dataLabels: {
                                            enabled: true,
                                            format: '{point.name}'
                                        }
                                    }
                                },
                                series: [{
                                    type: 'pie',
                                    name: 'Problem Solving',
                                    data: [
                                        ['Right Brain Dominan', <?php echo $ttl_right ?>],
                                        ['Left Brain Dominan', <?php echo $ttl_left ?>],
                                        ['Equally dominant', <?php echo $ttl_equal ?>]
                                    ]
                                }]
                            });

                        </script>
                    </div>
                    <!-- Close View Brain Dominan -->

                    <!-- Start View leadership -->
                    <div class="col-md-8 chart_list"  id ="leadership_col">
                        <div class="col-md-12 chart_content">
                            <!-- <div class="chart_content"> -->
                                <button type="button" class="close" aria-label="Close" id="close_leadership">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <div id="leadership">
                                </div>
                            <!-- </div> -->
                            <?php

                                $ttl_manage             = ($Manage / $ttl_disc)      * 100 ;
                                $ttl_Adapt              = ($Adapt / $ttl_disc)       * 100 ;
                                $ttl_Communicate        = ($Communicate / $ttl_disc) * 100 ;
                                $ttl_Dare               = ($Dare / $ttl_disc)        * 100 ;
                                $ttl_Excel              = ($Manage / $ttl_disc)      * 100 ;

                                $a_manage               = array_sum($ldi["Manage"]);
                                $ttl_leading            = ($ldi["Manage"]["Leading"] / $a_manage) * 100  ;
                                $ttl_tkr                = ($ldi['Manage']['Taking_Responsibility'] / $a_manage) * 100;
                                $ttl_Organization       = ($ldi['Manage']['Organization'] / $a_manage) * 100 ;
                                $ttl_vison              = ($ldi['Manage']['Vision'] / $a_manage) * 100;

                                $a_adapt                = array_sum($ldi['Adapt']);
                                $ttl_stres_mg           = ($ldi['Adapt']['Stress_Management'] / $a_adapt) * 100 ;
                                $ttl_ROA                = ($ldi['Adapt']['Respect_Of_Authority'] / $a_adapt) * 100 ;
                                $ttl_Respon             = ($ldi['Adapt']['Responsiveness'] / $a_adapt) * 100 ;
                                $ttl_pat                = ($ldi['Adapt']['Patience'] / $a_adapt) * 100 ;

                                $a_communitcate         = array_sum($ldi['Communicate']);
                                $ttl_persuasion         = ($ldi['Communicate']['Persuasion'] / $a_communitcate) * 100 ;
                                $ttl_Ease_In_Public     = ($ldi['Communicate']['Ease_In_Public'] / $a_communitcate) * 100 ;
                                $ttl_Opn_u              = ($ldi['Communicate']['Opening_Up_To_Others'] / $a_communitcate) * 100 ;
                                $ttl_Diplomacy          = ($ldi['Communicate']['Diplomacy'] / $a_communitcate) * 100 ;

                                $a_dare                 = array_sum($ldi['Dare']);
                                $ttl_slfc               = ($ldi['Dare']['Self_Confidence'] / $a_dare) * 100 ;
                                $ttl_indm               = ($ldi['Dare']['Independent_Mind'] / $a_dare) * 100 ;
                                $ttl_crt                = ($ldi['Dare']['Creativity'] / $a_dare) * 100 ;
                                $ttl_auton              = ($ldi['Dare']['Autonomy'] / $a_dare) * 100 ;

                                $a_excel                = array_sum($ldi['Excel']);
                                $ttl_deter              = ($ldi['Excel']['Determination'] / $a_excel) * 100 ;
                                $ttl_ambt               = ($ldi['Excel']['Ambition'] / $a_excel) * 100 ;
                                $ttl_wrketh             = ($ldi['Excel']['Work_Ethic'] / $a_excel) * 100 ;
                                $ttl_cmptspr            = ($ldi['Excel']['Competitive_Spirit'] / $a_excel) * 100 ;
                            ?>
                            <script>
                                Highcharts.chart('leadership', {
                                    chart:{
                                        height:200,
                                        marginLeft: 200,
                                    },
                                    title: {
                                        text: 'Leadership'
                                    },
                                    xAxis: {
                                        //  categories: ['Manage', 'Adapt', 'Communicate', 'Dare', 'Excel']
                                    },
                                    tooltip: {
                                                pointFormat: '{label.name}: <b>{point.y:.1f}%</b>'
                                            },
                                    labels: {
                                        items: [{
                                            html: '',
                                            style: {
                                                left: '50px',
                                                top: '18px',
                                                color: ( // theme
                                                    Highcharts.defaultOptions.title.style &&
                                                    Highcharts.defaultOptions.title.style.color
                                                ) || 'black'
                                            }
                                        }]
                                    },

                                    series: [
                                    {
                                        type: 'column',
                                        name : 'Manage',
                                        data: [
                                                {name:'Leading', y:<?php echo $ttl_leading ?>},
                                                {name:'Taking Responsibility' , y:<?php echo $ttl_tkr ?>},
                                                {name:'Organization' , y:<?php echo $ttl_Organization ?>},
                                                {name:'Vision' , y:<?php echo $ttl_vison ?>},
                                            ],
                                    },
                                    {
                                        type: 'column',
                                        name: 'Adapt',
                                        data: [
                                                {name:'Stress Management', y:<?php echo $ttl_stres_mg ?>},
                                                {name:'Respect Of Authority' , y:<?php echo $ttl_ROA ?>},
                                                {name:'Responsiveness' , y:<?php echo $ttl_Respon ?>},
                                                {name:'Patience' , y:<?php echo $ttl_pat ?>},
                                              ]
                                    },
                                    {
                                        type: 'column',
                                        name: 'Communicate',
                                        data: [
                                                {name:'Persuasion', y:<?php echo $ttl_persuasion ?>},
                                                {name:'Ease In Public' , y:<?php echo $ttl_Ease_In_Public ?>},
                                                {name:'Opening Up To Others' , y:<?php echo $ttl_Opn_u ?>},
                                                {name:'Diplomacy' , y:<?php echo $ttl_Diplomacy ?>},
                                            ]
                                    },
                                    {
                                        type: 'column',
                                        name: 'Dare',
                                        data: [
                                                {name:'Self Confidence', y:<?php echo $ttl_slfc ?>},
                                                {name:'Independent_Mind' , y:<?php echo $ttl_indm ?>},
                                                {name:'Creativity' , y:<?php echo $ttl_crt ?>},
                                                {name:'Autonomy' , y:<?php echo $ttl_auton ?>},
                                        ]
                                    },
                                    {
                                        type: 'column',
                                        name: 'Excel',
                                        data: [
                                                {name:'Determination', y:<?php echo $ttl_deter ?>},
                                                {name:'Ambition' , y:<?php echo $ttl_ambt ?>},
                                                {name:'Work Ethic' , y:<?php echo $ttl_wrketh ?>},
                                                {name:'Competitive Spirit' , y:<?php echo $ttl_cmptspr ?>},
                                        ]
                                    },
                                    // pie Chart
                                    {

                                        type: 'pie',
                                        name: 'Leadership',
                                        data: [
                                            {
                                                name: 'Manage',
                                                y: <?php echo $ttl_manage ?>,
                                                color: Highcharts.getOptions().colors[0] // Manage's color
                                            },
                                            {
                                                name: 'Adapt',
                                                y: <?php echo $ttl_Adapt ?>,
                                                color: Highcharts.getOptions().colors[1] // Adapt's color
                                            },
                                            {
                                                name: 'Communicate',
                                                y: <?php echo $ttl_Communicate ?>,
                                                color: Highcharts.getOptions().colors[2] // Communicate's color
                                            },
                                            {
                                                name: 'Dare',
                                                y: <?php echo $ttl_Dare ?>,
                                                color: Highcharts.getOptions().colors[3] // Dare's color
                                            },
                                            {
                                                name: 'Excel',
                                                y: <?php echo $ttl_Excel ?>,
                                                color: Highcharts.getOptions().colors[4] // Excel's color
                                            }

                                        ],
                                        tooltip: {
                                                pointFormat: '{labels.name}: <b>{point.percentage:.1f}%</b>'
                                            },
                                        center: [-150, 20],
                                        size: 90,
                                        showInLegend: false,
                                        dataLabels: {
                                            enabled: false
                                        }
                                    }]
                                });

                            </script>
                        </div>

                    </div>
                    <!-- Close View leadership -->

                    <!-- Start View Life Motivation -->
                    <div class="col-md-4 chart_list"  id ="lifemotivation_col">
                        <div class="chart_content">
                            <button type="button" class="close" aria-label="Close" id="close_lifemotivation">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <div id="lifemotivation">
                            </div>
                        </div>
                        <?php
                            $ttl_Social_Recognations        = ($Social_Recognations / $ttl_disc) * 100 ;
                            $ttl_Security                   = ($Security / $ttl_disc) * 100 ;
                            $ttl_Need_For_Relations         = ($Need_For_Relations / $ttl_disc) * 100 ;
                            $ttl_Need_For_Variety           = ($Need_For_Variety / $ttl_disc) * 100 ;
                            $ttl_Need_To_Belong             = ($Need_To_Belong / $ttl_disc) * 100 ;
                            $ttl_Pay                        = ($Pay / $ttl_disc) * 100 ;
                            $ttl_Private_Or_Professional_Life = ($Private_Or_Professional_Life / $ttl_disc) * 100 ;
                            $ttl_Philanthropy               = ($Philanthropy / $ttl_disc) * 100 ;

                        ?>
                        <script>
                            Highcharts.chart('lifemotivation', {
                                chart: {
                                    type: 'pie',
                                    height : 200 ,
                                    options3d: {
                                        enabled: true,
                                        alpha: 45,
                                        beta: 0
                                    }
                                },
                                title: {
                                    text: '',
                                    style: {
                                        display: 'none'
                                    }
                                },
                                subtitle: {
                                    text: 'Life Motivation',
                                },

                                tooltip: {
                                    pointFormat: '{labels.name}: <b>{point.percentage:.1f}%</b>'
                                },
                                plotOptions: {
                                    pie: {
                                        allowPointSelect: true,
                                        cursor: 'pointer',
                                        depth: 35,
                                        dataLabels: {
                                            enabled: true,
                                            format: '{point.name}'
                                        }
                                    }
                                },
                                series: [{
                                    type: 'pie',
                                    name: 'Problem Solving',
                                    data: [
                                        ['Social Recognations', <?php echo $ttl_Social_Recognations  ?>],
                                        ['Security', <?php echo $ttl_Security ?>],
                                        ['Need For Relations', <?php echo $ttl_Need_For_Relations ?>],
                                        ['Need For Variety', <?php echo $ttl_Need_For_Variety ?>],
                                        ['Need To Belong', <?php echo $ttl_Need_To_Belong ?>],
                                        ['Pay', <?php echo $ttl_Pay ?>],
                                        ['Private Or Professional Life', <?php echo $ttl_Private_Or_Professional_Life ?>],
                                        ['Philanthropy', <?php echo $ttl_Philanthropy ?>]
                                    ]
                                }]
                            });


                        </script>
                    </div>
                    <!-- Close View Life Motivation -->

                    <!-- Start View Industry -->

                    <!-- Close View Industry -->


                </div>
            </div>
            <!-- right box -->
            <div class="col-md-3" style="border:1px solid">
                <div class="row">
                    <div class="col-md-12" style="border:1px solid red ; margin-buttom:5px;">
                        <form class="form-horizontal">
                            <!-- status -->
                            <div class="form-group">
                                <div class="col-md-4">
                                    <label class="control-label">Status :</label>
                                </div>
                                <div class="col-md-7">
                                    <select name="status" id="status" class="form-control">
                                        <option value="siswa">Siswa</option>
                                        <option value="" disabled>Teacher</option>
                                    </select>
                                </div>
                            </div>
                            <!-- prodi -->
                            <div class="form-group">
                                <div class="col-md-4">
                                    <label class="control-label">Prodi :</label>
                                </div>
                                <div class="col-md-7">
                                    <select name="prodi" id="prodi" class="form-control">
                                        <?php
                                            foreach($user_prodi as $row_prodi):
                                        ?>
                                            <option value="<?= $row_prodi -> prodi ?>"><?= $row_prodi -> prodi ?></option>
                                        <?php
                                            endforeach;
                                        ?>
                                    </select>
                                </div>
                            </div>
                            <!-- Kelas -->
                            <div class="form-group">
                                <div class="col-md-4">
                                    <label class="control-label">Kelas :</label>
                                </div>
                                <div class="col-md-7">
                                    <select name="kelas" id="kelas" class=" kelas form-control">
                                        <option value=""> Kelas</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- right box 2 -->

                    <div class="col-md-12 right_box_2">
                        <form class="form-horizontal form_right_box_2" action="" id="form_right_box_2">
                            <div class="form-group">
                                <div class="col-md-6">
                                    <label class="control-label"> Introvet</label>
                                    <input class="radio-inline" name="radio_1" type="radio" value="I">
                                </div>
                                <div class="col-md-6">
                                    <input class="radio-inline" name="radio_1" type="radio" value="E">
                                    <label class="control-label"> Extrovert</label>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-6">
                                    <label class="control-label"> Sensing</label>
                                    <input class="radio-inline" name="radio_2" type="radio" value="S">
                                </div>
                                <div class="col-md-6">
                                    <input class="radio-inline" type="radio" name="radio_2" value="N">
                                    <label class="control-label"> Intuitive</label>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-6">
                                    <label class="control-label"> Thinking</label>
                                    <input class="radio-inline" type="radio" name="radio_3" value="T">
                                </div>
                                <div class="col-md-6">
                                    <input class="radio-inline" type="radio" name="radio_3" value="F">
                                    <label class="control-label"> Feeling</label>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-6">
                                    <label class="control-label"> Judging</label>
                                    <input class="radio-inline" type="radio" value="J" name="radio_4">
                                </div>
                                <div class="col-md-6">
                                    <input class="radio-inline" type="radio" value="P" name="radio_4">
                                    <label class="control-label"> Perceiving</label>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="" id="change">
                        <input type="hidden" class="hidden" name="form-disc" id="form-disc" value="">
                        <input type="hidden" class="hidden" name="form-temp" id="form-temp" value="">
                        <input type="hidden" class="hidden" id="form-probs" value="">
                        <input type="hidden" class="hidden" id="form-eq" value="">
                        <input type="hidden" class="hidden" id="form-brain" value="">
                        <input type="hidden" class="hidden" id="form-leader" value="">
                        <input type="hidden" class="hidden" id="form-life" value="">
                    </div>

                    <!-- right box 3 -->
                    <div class="col-md-12 right_box_3">
                        <div class="table-responsive" id="list-table">
                            <table id="data-table" class="table table-striped table-fixed">
                                    <thead>
                                            <tr>
                                                <th>Nama</th>
                                                <th>Kelas</th>
                                            </tr>
                                    </thead>
                                    <tbody>
                                        <?php foreach($nama as $row_nama) : ?>
                                            <tr>
                                                <?php
                                                    $kls    = str_replace("." , " " , $row_nama -> None);
                                                ?>
                                                <td><?php echo $row_nama -> NAME ?></td>
                                                <td><?php echo $kls ?></td>
                                            </tr>
                                        <?php endforeach; ?>
                                    </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Buat comment -->
        <div class="col-md-12" style="border:1px solid; height:85px;">
            <div class="row">
                <div class="col-md-6">
                    <form class="form-horizontal" method="post">
                        <div class="form-group">
                            <textarea class="form-control" name="isi_comment" id="isi_comment" cols="1" rows="1" placeholder="Comment :" style="height: 48px" ></textarea>
                            <input class="btn btn-success form-control" type="submit" name="kirim" value="Send">
                        </div>
                    </form>
                </div>

                <div class="col-md-6"  style="overflow-y:scroll; height:80px ; font-size:10px">
                    <ul class="list-group">
                        <?php for($i=0 ; $i < 20 ; $i++): ?>
                            <li class="list-group-item"><?= $i ?></li>
                        <?php endfor ; ?>
                    </ul>
                </div>
            </div>
        </div>
        <!-- close comment -->
    </section>

    <script>

    // $(document).ready(function(){

    //  $('#send').on("click" , function(){

    //      var a = $('#isi_comment').$(this).val();

    //      console.log(a);
    //  });

    // });

    </script>


    <script>
    $(document).ready(function() {
      $('#data-table').dataTable( {

        "aaSorting": [[ 0, "desc" ]],
        "pageLength": 3,
        "responsive": true,
        "pagingType": "simple",
        "retrieve": true,
        "lengthChange": false
      });

    });



    $(document).ready(function(){
        var limit = 4;
        $("#menu_chart").on("click change" , function(e){
            e.preventDefault();
            var jml = 0;

            // var s = $('.btn.btn-danger').data('menu');

            // $(this).each(function(){
            //  var dat =  $('.btn.btn-danger').data('menu');
            //  jml = jml + parseInt(dat);

            // });
            // console.log(jml);


            if($('.btn.active').length >= limit){
                jml += parseInt($(this));

                console.log(jml);
                $('.btn.btn-danger').attr("disabled", true);

            }else{
                var a = $('.btn.btn-danger').attr("disabled", false);
                // console.log(a);
            };
        });
    });
  </script>
    <script type="text/javascript">
        // right box

        $(document).ready(function(){

            $('#prodi').change(function(){
                var prodi_val   = $(this).val();

                $.ajax({
                    url : "<?php echo base_url('personality/get_kelas') ?>",
                    method : "POST",
                    data   : {prodi : prodi_val},
                    async : false,
                    dataType : 'json',
                    success : function(data , textStatus, xhr){
                        // console.log(data);

                        if(prodi_val == "XI IPA"){
                            var prodi = "XI MIPA";
                        }else{
                            var prodi = prodi_val ;
                        }
                        var html = '' ;
                        var i ;
                        html = '<option value="">Select Kelas</option><option value="' + prodi +'">ALL</option>';
                        for( i = 0 ; i < data.length ; i ++){
                            html += '<option value="'+data[i].prallel+'">' + data[i].prallel + '</option>';
                        }
                        // console.log(data);
                        $('.kelas').html(html);

                    }
                });
            });

            $('#kelas').change(function(e){
                e.preventDefault();
                var kelas = $(this).val();

                // var a = $("#chart_list").load('http://localhost/inadata.net/school/page/personality?kelas=')+this.value
                // console.log(a)
                // console.log(kelas);
                // window.location.href = "http://localhost/inadata.net/school/page/personality?kelas="+ this.value
                $.ajax({

                    url : "<?php echo base_url('page/personality') ?>",
                    type : "get",
                    data   : {kelas : this.value},
                    success : function(data , xhr , textStatus , response){
                        var result = $('#sortable').append(data).find('#sortable').html();
                        var result2 = $('#list-table').append(data).find('#list-table').html();
                        $('#sortable').empty();
                        $('#sortable').html(result);
                        $('#menu_chart .btn.btn-danger').removeClass("active");
                        var menu = $('#menu_chart .btn.btn-danger').attr("disabled", false);
                        $('#list-table').empty();
                        // $("#data-table").DataTable().clear().draw();
                        // $("#data-table").DataTable().destroy();
                        $("#list-table").html(result2);
                        // console.log(result2);
                        //  var a = $('body').html(data).fadeIn(2000);
                        // console.log(data);
                    },
                });



            });

            $('#form_right_box_2').change(function(e){
                e.preventDefault();
                var radio1 = $("input[name='radio_1']:checked").val();
                var radio2 = $("input[name='radio_2']:checked").val();
                var radio3 = $("input[name='radio_3']:checked").val();
                var radio4 = $("input[name='radio_4']:checked").val();
                var kelas  = $('#kelas').val();
                var url = window.location.href;

                if(radio1){
                    var radio_1 = radio1;
                }else{
                    var radio_1 = '';
                }

                if(radio2){
                    var radio_2 = radio2
                }else{
                    var radio_2 = '';
                }

                if(radio3){
                    var radio_3 = radio3
                }else{
                    var radio_3 = '';
                }

                if(radio4){
                    var radio_4 = radio4
                }else{
                    var radio_4 = '';
                }

                var data_radio = radio_1 + radio_2 + radio_3  + radio_4;
                $.ajax({

                    url  : "<?php echo base_url('page/personality') ?>",
                    type : "get",
                    data : {kelas : kelas , MBTI : data_radio},
                    success : function(data , xhr , textStatus , response){
                        var result = $('#sortable').append(data).find('#sortable').html();
                        var result2 = $('#list-table').append(data).find('#list-table').html();
                        $('#sortable').empty();
                        $('#sortable').html(result);
                        $('#menu_chart .btn.btn-danger').removeClass("active");
                        var menu = $('#menu_chart .btn.btn-danger').attr("disabled", false);
                        $('#list-table').empty();
                        // $("#data-table").DataTable().clear().draw();
                        // $("#data-table").DataTable().destroy();
                        $("#list-table").html(result2);
                    },
                });

            });

        });
        // close Right  Box

        $(function(){
            $( "#sortable" ).sortable();
            $( "#sortable" ).disableSelection();
        });
        // ini function buat generate pie chart
        function myFunction(id_class , isi , title){
            var chart = Highcharts.chart(id_class, {
            chart: {
                type: 'pie',
                height : 200 ,
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }
            },
            title: {
                text: '',
                style: {
                    display: 'none'
                }
            },
            subtitle: {
                text: title,
            },
            tooltip: {
                pointFormat: '{labels.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth: 35,
                    dataLabels: {
                        enabled: true,

                        formatter: function(e){
                                return this.point.name
                            }
                        },
                }

            },
            series: [{
                type: 'pie',
                data: isi ,
                point: {
                    events: {
                        click: function() {
                            // nah di sini saya sudah bisa ngambil data sesuai dngan yang di klik.
                            // tapi saya sudah cari dan baca d9oukemntasinya tetap saja saya belom paham2
                            // apakah ada yang bisa solving permasahalhan saya ? nanti soal fee bisa di atur
                            if( title == "DISC"){
                                var disc = this.name ;
                                $('#form-disc').val(disc);
                            }else{
                                var disc = ''
                            }
                            if( title == "Temprament"){
                                var temp = this.name ;
                                $('#form-temp').val(temp);
                            }else{
                                var temp = ''
                            }

                            $('#form-disc').val();
                            $('#form-temp').val();
                            // $.ajax({
                            //  url : url ,
                            //  Type : 'GET' ,
                            //  dataType: 'Json',
                            //  data : {"disc" : val_disc , "temp" : val_temp} ,
                            //  success : function(data){
                            //      callback(data);
                            //      console.log(this.url);
                            //  }

                            // });


                            // console.log(gt);
                        }
                    }
                }
            }]
        });

        return chart ;
        }


        // var a = $("#chart_list").load('http://localhost/inadata.net/school/page/personality?kelas=')+this.value
        // console.log(a)
        // console.log(kelas);
        // window.location.href = "http://localhost/inadata.net/school/page/personality?kelas="+ this.valu
        var url = '<?php echo base_url('personality/get_data_json   ') ?>' ;

        var val = $('input')[0]
        if( val === ''){
            var uri = ''
        }else{
            uri = val
        }
        if($('#form-disc').on('change keyup ' , function(){
            var uri = this.value;
            console.log(uri)
        }));
        $(function(){


            $('#disc_col').hide();
            $('#close_disc').on('click' , function(){
                $('#disc_col').hide();
                $('#open_disc').removeClass("active");
                $('#open_disc').removeAttr("disabled");

            });

            $('#open_disc').on('click' , function(){
                $('#disc_col').show();
                $('#open_disc').addClass("active");
                // console.log(url1);
                var obj = $.getJSON(url , function(data){

                    var ttl_D = data['ttl_D'];
                    var ttl_I = data['ttl_I'];
                    var ttl_S = data['ttl_S'];
                    var ttl_C = data['ttl_C'];
                    var ttl_disc = data['ttl_disc'];

                    var isi =   [
                                ['D',(ttl_D / ttl_disc) * 100],
                                ['I',(ttl_I / ttl_disc) * 100],
                                ['S',(ttl_S / ttl_disc) * 100],
                                ['C',(ttl_C / ttl_disc) * 100]
                            ] ;
                    var a = myFunction('disc' , isi , 'DISC');


                });

            });

        });

        // temprament
        $(function(){
            $('#temp_col').hide();
            $('#close_temp').on('click' , function(){
                $('#temp_col').hide();
                $('#open_temp').removeClass("active");
                $('#open_temp').removeAttr("disabled");
            });

            $('#open_temp').on('click' , function(){
                $('#temp_col').show();
                $('#open_temp').addClass("active");
                var obj = $.getJSON(url , function(data){

                var ttl_sj = data['hasil_sj'];
                var ttl_sp = data['hasil_sp'];
                var ttl_nf = data['hasil_nf'];
                var ttl_nt = data['hasil_nt'];
                var ttl_disc = data['ttl_disc'];

                var isi =   [
                            ['SJ',(ttl_sj / ttl_disc) * 100],
                            ['SP',(ttl_sp / ttl_disc) * 100],
                            ['NF',(ttl_nf / ttl_disc) * 100],
                            ['NT',(ttl_nt / ttl_disc) * 100]
                        ] ;
                var a = myFunction('temprament' , isi , 'Temprament');
                });
            });

        });

        // ProblemSolving
        $(function(){
            $('#prbs_col').hide();
            $('#close_prbs').on('click' , function(){
                $('#prbs_col').hide();
                $('#open_prbs').removeClass("active");
                $('#open_prbs').removeAttr("disabled");
            });

            $('#open_prbs').on('click' , function(){
                $('#prbs_col').show();
                $('#open_prbs').addClass("active");
            });

        });

        // EQ
        $(function(){
            $('#eq_col').hide();
            $('#close_eq').on('click' , function(){
                $('#eq_col').hide();
                $('#open_eq').removeClass("active");
                $('#open_eq').removeAttr("disabled");
            });

            $('#open_eq').on('click' , function(){
                $('#eq_col').show();
                $('#open_eq').addClass("active");
            });
        });
        // brain dominan
            $(function(){
            $('#brain_col').hide();
            $('#close_brain').on('click' , function(){
                $('#brain_col').hide();
                $('#open_brain').removeClass("active");
                $('#open_brain').removeAttr("disabled");
            });

            $('#open_brain').on('click' , function(){
                $('#brain_col').show();
            });

        });

        // leadership
        $(function(){
            $('#leadership_col').hide();
            $('#close_leadership').on('click' , function(){
                $('#leadership_col').hide();
                $('#open_leadership').removeClass("active");
                $('#open_leadership').removeAttr("disabled");
            });

            $('#open_leadership').on('click' , function(){
                $('#leadership_col').show();
            });

        });


        // lifemotivation
            $(function(){
            $('#lifemotivation_col').hide();
            $('#close_lifemotivation').on('click' , function(){
                $('#lifemotivation_col').hide();
                $('#open_lifemotivation').removeClass("active").removeAttr("disabled");
            });

            $('#open_lifemotivation').on('click' , function(){
                $('#lifemotivation_col').show();
            });

        });

    </script>