<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hack @ WPI</title>
    <link rel="icon" href="../static/favicon.png" type="image/png">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
    <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
    <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.4.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
    <script src="../static/js/admin.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>


<style>
    .table-striped > tbody > tr:nth-of-type(odd) {
        background-color: rgba(255, 255, 255, 0.15);
    }

    .table-hover > tbody > tr:hover {
        background-color: rgba(255, 255, 255, 0.25);
    }

    table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
        content: " \25B4\25BE"
    }

    canvas {
        max-width: 500px;
        max-height: 500px;
    }
</style>

<div class="contact-section" style="height: auto; background-repeat: repeat; background-size: contain;">
    <div class="container-fluid" style="margin-left: 3%; margin-right: 3%;">
        <div class="row" style="margin-top: 10%;">
            <h2><a href="{{ mlh_url }}">Get JSON object of users from MLH. <b>Do NOT share this URL.</b></a></h2>
        </div>
        <div class="row">
            <div class="col-md-4">
                <h2 style="">Gender:</h2>
                <canvas id="genderCanvas" width="400" height="400"></canvas>
                <script>
                    let genderCtx = document.getElementById('genderCanvas')
                    let genderChart = new Chart(genderCtx, {
                        type: 'doughnut',
                        data: {
                            labels: ['Female', 'Male'],
                            datasets: [
                                {
                                    data: [{{ female_count }}, {{ male_count }}]
                                }
                            ]
                        },
                        options: {
                            title: {
                                display: false
                            },
                            legend: {
                                display: false
                            },
                            labels: {
                                display: false
                            }
                        }
                    })
                </script>
            </div>
            <div class="col-md-4">
                <h2 style="">Schools:</h2>
                <canvas id="schoolCanvas" width="400" height="400"></canvas>
                <script>
                    let schoolNames = []
                    let schoolNums = []

                    {% for school in schools %}
                        schoolNames.push('{{ school }}')
                        schoolNums.push({{ schools[school] }})
                    {% endfor %}

                    let schoolCtx = document.getElementById('schoolCanvas')
                    let schoolChart = new Chart(schoolCtx, {
                        type: 'doughnut',
                        data: {
                            labels: schoolNames,
                            datasets: [
                                {
                                    data: schoolNums
                                }
                            ]
                        },
                        options: {
                            title: {
                                display: false
                            },
                            legend: {
                                display: false
                            },
                            labels: {
                                display: false
                            }
                        }
                    })
                </script>
            </div>
            <div class="col-md-4">
                <h2 style="">Majors:</h2>
                <canvas id="majorCanvas" width="400" height="400"></canvas>
                <script>
                    let majorNames = []
                    let majorNums = []

                    {% for major in majors %}
                        majorNames.push('{{ major }}')
                        majorNums.push({{ majors[major] }})
                    {% endfor %}

                    let majorCtx = document.getElementById('majorCanvas')
                    let majorChart = new Chart(majorCtx, {
                        type: 'doughnut',
                        data: {
                            labels: majorNames,
                            datasets: [
                                {
                                    data: majorNums
                                }
                            ]
                        },
                        options: {
                            title: {
                                display: false
                            },
                            legend: {
                                display: false
                            },
                            labels: {
                                display: false
                            }
                        }
                    })
                </script>
            </div>
        </div>
        <div class="row" style="">
            <h2 style="">Counts:</h2>
            <table id="counts" class="table table-striped table-hover table-condensed sortable">
                <thead>
                <tr>
                    <th>Total</th>
                    <th>Attendees</th>
                    <th>Waitlist</th>
                    <th>Checked In</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{{ total_count }}</td>
                    <td>{{ (total_count - waitlist_count) }}</td>
                    <td>{{ waitlist_count }}</td>
                    <td>{{ check_in_count }}</td>
                </tr>
                </tbody>
            </table>

            <h2 style="margin-top: 2%;">Shirts:</h2>
            <table id="shirts" class="table table-striped table-hover table-condensed sortable">
                <thead>
                <tr>
                    <th>XXS</th>
                    <th>XS</th>
                    <th>S</th>
                    <th>M</th>
                    <th>L</th>
                    <th>XXL</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{{ shirt_count['xxs'] }}</td>
                    <td>{{ shirt_count['xs'] }}</td>
                    <td>{{ shirt_count['s'] }}</td>
                    <td>{{ shirt_count['m'] }}</td>
                    <td>{{ shirt_count['l'] }}</td>
                    <td>{{ shirt_count['xl'] }}</td>
                    <td>{{ shirt_count['xxl'] }}</td>
                </tr>
                </tbody>
            </table>

            <h2 style="margin-top: 2%;">Hackers:</h2>
            <table id="hackers" class="table table-striped table-hover table-condensed sortable">
                <thead>
                <tr>
                    <th>Options</th>
                    <th>Checked In?</th>
                    <th>Waitlisted?</th>
                    <th>Admin</th>
                    <th>MLH ID</th>
                    <th>Time Registered</th>
                    <th>Email</th>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Diet</th>
                    <th>Special</th>
                    <th>School</th>
                </tr>
                </thead>
                <tbody>
                {% for hacker in hackers %}
                    <tr id="{{ hacker['id'] }}-row">
                        <td>
                            <div class="btn-group">
                                <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span
                                        class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    {% if not hacker['checked_in'] %}
                                        <li><a class="check_in" id="{{ hacker['id'] }}-check_in" href="#">Check In</a>
                                        </li>
                                    {% endif %}
                                    {% if hacker['waitlisted'] and not hacker['checked_in'] %}
                                        <li><a class="promote_from_waitlist"
                                               id="{{ hacker['id'] }}-promote_from_waitlist"
                                               href="#">Promote From Waitlist</a></li>
                                    {% endif %}
                                    <li class="divider"></li>
                                    {% if not hacker['checked_in'] %}
                                        <li><a class="drop" id="{{ hacker['id'] }}-drop" href="#">Drop Application</a>
                                        </li>
                                    {% endif %}
                                    {% if hacker['admin'] %}
                                        <li><a class="demote_admin" id="{{ hacker['id'] }}-demote_admin" href="#">Demote
                                            Admin</a>
                                        </li>
                                    {% else %}
                                        <li><a class="promote_admin" id="{{ hacker['id'] }}-promote_admin" href="#">Promote
                                            Admin</a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </div>
                        </td>
                        <td id="{{ hacker['id'] }}-checked_in">{{ hacker['checked_in'] }}</td>
                        <td id="{{ hacker['id'] }}-waitlisted">{{ hacker['waitlisted'] }}</td>
                        <td>{{ hacker['admin'] }}</td>
                        <td>{{ hacker['id'] }}</td>
                        <td>{{ hacker['registration_time'] }}</td>
                        <td>{{ hacker['email'] }}</td>
                        <td>{{ hacker['first_name'] + ' ' + hacker['last_name'] }}</td>
                        <td>{{ hacker['phone_number'] }}</td>
                        <td>{{ hacker['dietary_restrictions'] }}</td>
                        <td>{{ hacker['special_needs'] }}</td>
                        <td>{{ hacker['school']['name'] }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    $(document).ready(() => {
        setTimeout('let myTh = document.getElementsByTagName("th")[14]; sorttable.innerSortFunction.apply(myTh, []); sorttable.innerSortFunction.apply(myTh, []);', 50)
    })
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="../static/js/jquery.easing.min.js"></script>
</body>
</html>
