{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}
{% block styles %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
    box-sizing: border-box;
}

.boldtext {
    text-align: center;
    font-size: 19px;
    font-weight: 900;
    padding:10px;
}

.highlight {
    font-size: 19px;
    font-weight: 900;
    color: royalblue;
}

.normaltext {
    text-align: center;
    width:90%;
    font-size: 20px;
    font-weight: 900;
}

.subinfo {
    text-align: center;
    font-size: 17px;
    font-weight: 900;
    color: red;
}


.choiceback{
    width: 35%;
    float: left;
    font-family: "Calibri", Serif;
    height: 230px;
    margin-top: 20px;
    border-style:solid;
    border-width: 5px;
    border-color:lightskyblue;
    background-color: floralwhite;
    vertical-align: middle;
    font-size: 20px;
}



.choiceback button {
    width: 90%;
}

.blank {
    width:2%;
    margin-top: 20px;
    height: 230px;
    float: left;
}

.gameback{
    width: 63%;
    font-family: "Calibri", Serif;
    height: 230px;
    float: left;
    margin-top: 20px;
    border-style:solid;
    border-width: 5px;
    border-color:lightskyblue;
    background-color: floralwhite;
    align: center;
}

.infoback{
    width: 100%;
    font-family: "Calibri", Serif;
    /*height: 300px;*/
    margin-top: 280px;
    border-style:solid;
    border-width: 5px;
    border-color:lightskyblue;
    background-color: floralwhite;
}

.fishback{
    width: 100%;
    font-family: "Calibri", Serif;
    /*height: 300px;*/
    margin-top: 20px;
    border-style:solid;
    border-width: 5px;
    border-color:lightskyblue;
    background-color: floralwhite;
}


.title {
    color: white;
    margin-top: 60px;
    text-align: center;
    font-size: 35px;
}


table {
    border-collapse: collapse;
    width: 100%;
    border: 2px solid white;
}

th, td {
    height: 50px;
    text-align: center;
}

/* Responsive Design */
/* Uses a media query to add a break point at 800px:*/
@media (max-width:650px) {
    .title {
        font-size: 20px;
        font-weight: 800;
    }
    .normaltext {
        font-size: 10px;
    }

    .choiceback {
        width: 100%;
        height: 220px;
    }

    .gameback {
        margin-top: 5px;
        width: 100%;
    }

    .blank {
        width: 0%;
    }


    .infoback {
        font-size: 10px;
        margin-top: 520px;
        width: 100%;
        height: 190px;
    }

    .fishback {
        font-size: 10px;
        margin-top: 30px;
        width: 100%;
    }
}

.otree-timer {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}

</style>
{% endblock %}


{% block scripts %}

    <!-- Highchart stuff -->
    <script src="{% static "highcharts/highcharts.js" %}"></script>
    <script src="{% static "highcharts/modules/exporting.js" %}"></script>
    <script>
        var is_upgrade = ("{{ is_upgrade }}" == "True")
        if (is_upgrade) {
            $('#upgrade-alert').removeClass('hide');
        }

        var game_level = {{ game_level }};
        // Treat level 0 and 1 as the same
        game_level = (game_level == 0) ? 1 : game_level;
        var img_target_id = "#img_" + game_level;
        $(img_target_id).removeClass('hide');

    var data = {{ each_year_fish_history|json }}
    if (data.length > -1) {
        Highcharts.chart('graph', {
            title: {
                text: 'Fishery History'
            },
            chart: {
                backgroundColor: 'floralwhite'
            },
            yAxis: {
                title: {
                    text: 'Number of fish'
                }
            },
            xAxis: {
                allowDecimals: false
            },
            legend: {
                y: -40, // make room for subtitle
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                series: {
                // Remember to change hard-coded value!!!!!
                pointStart: 2017,
                }
            },
            series: [{
                name: 'Fish count',
                data: {{ each_year_fish_history|json }},
                marker: {
                    fillColor: '#FFFFFF',
                    lineColor: null,
                    lineWidth: 2
                    }
                }, {
                    name: 'Yield',
                    data: {{ each_year_yield_history|json }},
                    marker: {
                        fillColor: '#8E44AD',
                        lineColor: '#8E44AD',
                        lineWidth: 2
                    }
                }, {
                    name: 'Sustainable Yield',
                    data: {{ each_year_sustainable_yield_history|json }},
                    marker: {
                        //symbol: 'cross',
                        fillColor: '#F5B041',
                        lineColor: '#F5B041',
                        lineWidth: 2
                    }
            }],

            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
    }

    // Catch buttons
    $(".choice-button").click(function(){
        $($(this).data("target")).trigger('click');
        $(".next-button").trigger('click');
    });
    </script>
{% endblock %}


{% block content %}

<div>
    <p class="top">
        LSM4255 GONE FISHING
    </p>

    <p class="title">
        Welcome, {{ player_name }}!
    </p>
    <div id="upgrade-alert" class="hide alert alert-success" role="alert">
        <p class="boldtext">
            Congratulations! 👍 You reached level {{ game_level }}!
            {{ level_reward }}! 🤗
        </p>
    </div>
    <div class="choiceback">
        <!-- Page padding-->

        <div class="hide">
            {% formfield player.num_fish_caught_this_year%}
            {% next_button %}
        </div>

        <p class="boldtext">How many fish do you want to <mark>catch</mark> this year?</p>
        <p class="subinfo"> · Yield per person last year : {{ last_year_average_student_caught }}</p>
        <p class="subinfo"> · Yield per person in total : {{ total_average_student_caught }}</p>
            <!-- <p class="normaltext">No. of fish required to upgrade: {{ upgrade_distance }} </p>-->

        <div class="choice-buttons">
            <table class="table1" width="100%">
                <tr width="100%">
                    <td width = "33.33%">
                        <button data-target="#id_num_fish_caught_this_year_1" class="choice-button btn btn-info btn-lg">0</button>
                    </td>
                    <td width = "33.33%">
                        <button data-target="#id_num_fish_caught_this_year_2" class="choice-button btn btn-info btn-lg">1</button>
                    </td>
                    <td width = "33.33%">
                        <button data-target="#id_num_fish_caught_this_year_3" class="choice-button btn btn-info btn-lg">2</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="blank"></div>

    <div class="gameback">
        <p>
            <img class="hide" id="img_1" src="{% static "global/level-1.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_2" src="{% static "global/level-2.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_3" src="{% static "global/level-3.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_4" src="{% static "global/level-4.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_5" src="{% static "global/level-5.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_6" src="{% static "global/level-6.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_7" src="{% static "global/level-7.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_8" src="{% static "global/level-8.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_9" src="{% static "global/level-9.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_10" src="{% static "global/level-10.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_11" src="{% static "global/level-11.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_12" src="{% static "global/level-12.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_13" src="{% static "global/level-13.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_14" src="{% static "global/level-14.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_15" src="{% static "global/level-15.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_16" src="{% static "global/level-16.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_17" src="{% static "global/level-17.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_18" src="{% static "global/level-18.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_19" src="{% static "global/level-19.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_20" src="{% static "global/level-20.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_21" src="{% static "global/level-21.jpg" %}" width=100% height=220px>
            <img class="hide" id="img_22" src="{% static "global/level-22.jpg" %}" width=100% height=220px>
        </p>
    </div>

    <div class="infoback">
        </br>
         <table class="normaltext" width="90%" align="center">
               <tr>
                   <th>
                       <p width="80%" align="center">
                           Intrinsic growth rate
                       </p>
                       <p width="80%" align="center">
                           (r)
                       </p>

                   </th>
                   <th>
                       <p width="80%" align="center">
                            Strength of density regulation
                       </p>
                       <p width="80%" align="center">
                            (a)
                       </p>
                   </th>
                   <th>
                       <p width="80%" align="center">
                            Sustainable yield
                       </p>
                       <p width="80%" align="center">
                            (H<sub>max</sub>)
                       </p>
                   </th>
                   <th>
                       <p width="80%" align="center">
                            Total number of fish
                       </p>

                       <p width="80%" align="center">
                            (<><)
                       </p>
                   </th>
               </tr>
               <tr class="highlight">
                   <td>{{ intrinsic_growth_rate }}</td>
                   <td>{{ strength_of_density_regulation }}</td>
                   <td>{{ sustainable_yield }}</td>
                   <td>{{ num_fish_left_in_fishery }}</td>
               </tr>
           </table>
           <br/>
         <p class="normaltext">
             Total number of fish you've caught :
             <mark style="font-size:17px"> {{ player.participant.payoff }}</mark>
         </p>
    </div>

    <div class="fishback">
        <p class="normaltext">
            <div id="graph"></div>
        </p>
        <p>

        </p>
    </div>

    <div class="margin">
        <p>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </p>
    </div>


    <div class="bottom">
        <p>
            @National University of Singapore - <a href="http://www.lifesciences.nus.edu.sg/">Life Sciences</a>
        </p>
    </div>
</div>

{% endblock %}