{% extends "base.html" %}
{% block content %}
<h3>Accounts {{ account["mail"] }}</h3>
<span id="info"></span>
<table class="table">
    <tr>
        <th>Owner</th>
        <td>{{ account["owner"] }}</td>
    </tr>
    <tr>
        <th>Mail</th>
        <td>{{ account["mail"] }}</td>
    </tr>
    <tr>
        <th>Number</th>
        <td>{{ account["number"] }}</td>
    </tr>
    <tr>
        <th>Current Plan</th>
        <td>{{ account["currentPlan"]["name"] }}</td>
    </tr>
    <tr>
        <th>Default Plan</th>
        <td>{{ account["defaultPlan"]["name"] }}</td>
    </tr>
    <tr>
        <th>Updatet min ago</th>
        <td>
            {{ ((currentTime - account["lastUpdate"]) /60)|round(1) }}
        </td>
    </tr>
    <tr>
        <th>Data Usage</th>
        <td>{{ account["dataUsed"]|round(2) }}% <a href="#" class="btn btn-sm btn-success">See Statistics</a></td>
    </tr>
</table>
<a href="#" class="btn btn-warning btn-sm updateNow">Update now</a>
<hr>
<h4>Update Default Plan</h4>
<p>The Default Plan will be set if no other Rule is enabled for the Day.</p>
<select class="form-control" id="defaultPlan">
    {% for plan in plans %}
    {% if plan["canBeBooked"] %}
    <option value="{{ plan["number"] }}" {% if account["defaultPlan"]["number"] == plan["number"] %}selected{% endif %}>{{ plan["name"] }}</option>
    {% endif %}
    {% endfor %}
</select><br>
<input type="button" class="btn btn-warning" value="Save" id="changeDefaultPlan">

<hr>
<h4>Special Days</h4>
<p>Add some Special Days</p>
<b>From</b>
<form method="post" action="/account/{{ account['number'] }}/special">
<div class="row">
    <div class="col-md-4">
        <select name="from_day" class="form-control">
            <option>01</option>
            <option>02</option>
            <option>03</option>
            <option>04</option>
            <option>05</option>
            <option>06</option>
            <option>07</option>
            <option>08</option>
            <option>09</option>
            <option>11</option>
            <option>12</option>
            <option>13</option>
            <option>14</option>
            <option>15</option>
            <option>16</option>
            <option>17</option>
            <option>18</option>
            <option>19</option>
            <option>21</option>
            <option>22</option>
            <option>23</option>
            <option>24</option>
            <option>25</option>
            <option>26</option>
            <option>27</option>
            <option>28</option>
            <option>29</option>
            <option>30</option>
            <option>31</option>
        </select>
    </div>
    <div class="col-md-4">
            <select name="from_month" class="form-control">
                <option value="1">Januar</option>
                <option value="2">Feburar</option>
                <option value="3">März</option>
                <option value="4">April</option>
                <option value="5">Mai</option>
                <option value="6">Juni</option>
                <option value="7">Juli</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">Okbotber</option>
                <option value="11">November</option>
                <option value="12">Dezember</option>
            </select>
        </div>
        <div class="col-md-4">
                <select name="from_year" class="form-control">
                    <option>2019</option>
                    <option>2020</option>
                    <option>2021</option>
                </select>
            </div>
</div>
<b>To</b>
<div class="row">
    <div class="col-md-4">
        <select name="to_day" class="form-control">
            <option>01</option>
            <option>02</option>
            <option>03</option>
            <option>04</option>
            <option>05</option>
            <option>06</option>
            <option>07</option>
            <option>08</option>
            <option>09</option>
            <option>11</option>
            <option>12</option>
            <option>13</option>
            <option>14</option>
            <option>15</option>
            <option>16</option>
            <option>17</option>
            <option>18</option>
            <option>19</option>
            <option>21</option>
            <option>22</option>
            <option>23</option>
            <option>24</option>
            <option>25</option>
            <option>26</option>
            <option>27</option>
            <option>28</option>
            <option>29</option>
            <option>30</option>
            <option>31</option>
        </select>
    </div>
    <div class="col-md-4">
            <select name="to_month" class="form-control">
                <option value="1">Januar</option>
                <option value="2">Feburar</option>
                <option value="3">März</option>
                <option value="4">April</option>
                <option value="5">Mai</option>
                <option value="6">Juni</option>
                <option value="7">Juli</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">Okbotber</option>
                <option value="11">November</option>
                <option value="12">Dezember</option>
            </select>
        </div>
        <div class="col-md-4">
                <select name="to_year" class="form-control">
                    <option>2019</option>
                    <option>2020</option>
                    <option>2021</option>
                </select>
            </div>
</div>
<b>Plan</b>
<select name="plan" class="form-control">

                {% for plan in plans %}
                {% if plan["canBeBooked"] %}
                <option value="{{ plan["number"] }}" >{{ plan["name"] }}</option>
                {% endif %}
                {% endfor %}

</select><br>
<input type="submit" class="btn btn-success"  value="Save">
</form>
<hr>
<h4>Next Special Days</h4>
<table class="table">
    {% for day in special_days %}
    <tr>
        <td> {{ day["day"] }}</td>
        <td> {{ day["plan"]["name"] }}</td>
    </tr>
    {% endfor %}
</table>
<a href="/account/{{account["number"]}}/days" class="btn btn-sm btn-success">See next 2 Month</a>
<script>
    $(".updateNow").click(function() {
        $("#info").html("Update Account");
        $.get("/api/account/{{account['number']}}/update", function() {
            $("#info").html("Update Account done");
            location.reload();
        });
    });
    $("#changeDefaultPlan").click(function () {
        $("#info").html("Update Default Plan");
        $.post("/api/account/{{account['number']}}/changeDafault", {"plan": $("#defaultPlan").val()}, function() {
            location.reload();
        });
    });
</script>
{% endblock %}