<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <title>Finance Form</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/annotations.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <style>
        .col-form-label { width:140px; }
        html { font-size: 80%; }
    </style>
</head>
<body>
    <div class="containerfluid">
    <h3 align="center">Finance Tracker</h3>

    <form id="vals_form" class="ms-3 mt-3" action="/update" method="POST">
    {% for r in DISP %}
        <div class="row align-items-center">
        {% for el in r %}
            {% if COMP and ( COMP['vars'][el.varname] != finance[el.varname] or
                    (COMP['vars'][el.datevarname] is defined and COMP['vars'][el.datevarname] != finance[el.datevarname]) ) %}
                {% set extra=" text-primary" %}
            {% else %}
                {% set extra="" %}
            {% endif %}
            <div class="{{el.cl}}">
                <div class="input-group">
                    <label id="lbl-{{el.varname}}" for="{{el.varname}}" 
                    {% if el.display=="select" %}
                        {% if COMP and COMP['vars'][el.varname] != finance[el.varname] %}
                            data-bs-toggle="tooltip" title="Comparison was: {{COMP['vars'][el.varname]}}"
                        {% endif %}
                        class="col-form-label me-2 text-end float-end {{extra}}">{{el.label}}
                        </label>
                        <select class="form-select border border-primary text-primary text-end" id="{{el.varname}}" name="{{el.varname}}" style="width: 120px;" 
                            onchange="this.form.submit()">
                            {% for o in el.opts  %}
                                <option value="{{o.val}}">{{o.label}}</option>
                            {% endfor %}
                        </select>
                    {% elif el.display=="date" %}
                        {% if COMP and (COMP['vars'][el.varname] != finance[el.varname] or COMP['vars'][el.datevarname] != finance[el.datevarname]) %}
                            data-bs-toggle="tooltip" title="Comparison was: {{COMP['vars'][el.varname]}} on {{COMP['vars'][el.datevarname]}}"
                        {% endif %}
                            class="col-form-label me-2 text-end float-end {{extra}}">{{el.label}}
                        </label>
                        <input type="number" step="any" class="form-control text-end float-end border border-primary" onchange="this.form.submit()" style="max-width: 120px;"
                            id="{{el.varname}}" name="{{el.varname}}" value="{{ finance[el.varname] }}" {{el.display}}>
                        <input type="date" class="form-control text-end float-end border border-primary" id="{{el.datevarname}}" style="max-width: 150px;"
                            name="{{el.datevarname}}" value="{{ finance[el.datevarname] }}" onchange="this.form.submit()">
                    {% else %}
                        {% if COMP and COMP['vars'][el.varname] != finance[el.varname] %}
                            data-bs-toggle="tooltip" title="Comparison was: {{COMP['vars'][el.varname]}}"
                        {% endif %}
                            class="col-form-label me-2 text-end float-end {{extra}}">{{el.label}}
                        </label>
                        {% if el.display== "readonly" %}
                            {% set bg="bg-light" %}
                            {% set bd="" %}
                        {% else %}
                            {% set bg="" %}
                            {% set bd="border-1 border-primary" %}
                        {% endif %}
                        <input type="number" step="any" class="{{bg}} form-control text-end float-end {{bd}}" onchange="this.form.submit()" style="max-width: 120px;"
                            id="{{el.varname}}" name="{{el.varname}}" value="{{ finance[el.varname] }}" {{el.display}}>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
        </div>
    {% endfor %}

    <h5 align="center" class="mt-4">Fortnighthly Savings data:
    {% if COMP %}
        {# get comparison date so we can use it below in loop to know when to print it out #}
        {% set comp_yr=COMP['date'][:4] %}
        {% set comp_mon=COMP['date'][5:7] %}
        {% set comp_day=COMP['date'][8:10 ] %}
        {% set comp_done=namespace( val=0 ) %}
    {% else %}
        {# we dont need to do a comparison, so consider it done before we begin #}
        {% set comp_done=namespace( val=1 ) %}
    {% endif %}
    </h5>
    
    <div class="row">
      <div class="col-auto"> <div class="pt-1 pb-1 mb-0 alert text-center" style="background:lemonchiffon">2025</div>

      {% set first_yr=2025 %}
      {% for date, dollars in savings %}
          {% set yr=date[:4] %}
          {% set mon=date[5:7] %}
          {% set day=date[8:10 ] %}

          {% if yr|int > first_yr|int and mon == '01' and day|int <= 14 %}
            </div><div class="col-auto">
            <div class="pt-1 pb-1 mb-0 alert text-center" style="background:lemonchiffon">{{yr}}</div>
          {% endif %}
          <font color="black">
          {{ date }}:&nbsp;
          {{ '$%0.2f' % dollars|float }}<br>
          </font>
          {% if comp_done.val == 0 and yr == comp_yr and mon == comp_mon and day|int >= comp_day|int %}
            <font color="blue">
            {{ COMP['date'] }}:&nbsp;
            {{ '$%0.2f' % COMP['amount']|float }}<br>
            </font>
            {% set comp_done.val=1 %}
          {% endif %}
      {% endfor %}
        {% if depletion_date %}
            <div class="alert alert-danger">Run out of $'s:<br>{{depletion_date}}</div>
        {% else %}
            <div class="alert alert-success">Super kicks in!!!</div>
        {% endif %}
      </div>
      <div class="col-auto">
        <div class="alert alert-warning">
          <h6 class="alert-heading">SUMMARY/BUDGET</h6>
          {% for label, value in BUDGET %}
            <div>
            {{label}} {{value}}
            </div>
          {% endfor %}
            </div>
            <div id="comp_col" class="col-auto">
              <div class="input-group">
                  <button type="button" class="btn btn-primary me-2 rounded" data-bs-toggle="modal" data-bs-target="#save_modal">Save</button>
                  <button type="submit" class="disabled btn btn-primary rounded-start" onClick="$('#vals_form').submit() disabled">Compare to:</button>
                  <select class="form-select border border-primary text-primary" id="compare_to" name="compare_to" onchange="$('#vals_form').submit()">
                    {% for el in finance['COMP_SETS'] %}
                        <option value="{{el[0]}}">{{el[1]}}</option>
                    {% endfor %}
                  </select>
              </div>
            {% if COMP %}
              <div style="display:none" id="comp_alert" class="alert alert-info mt-2">Note: {{ '$%0.2f' % COMP['amount']|float }} is the final value of the compared to data. Hover over blue labels above to see what compared to values differed</div>
            {% endif %}
            </div>
      </div>
    </div>
    </form>
    <div class="row mt-4" id="container" style="width:100%; height:400px;"></div>   
    <script type="text/javascript">
        // make these global so we can also use them in the /save route (via modal)
        const savingsData = JSON.parse('{{ savings | tojson }}');
        const vars = JSON.parse('{{ finance | tojson }}');

        window.onload = function() { 
            $('#Sell_shares').val( {{finance['Sell_shares']}} )
            $('#compare_to').val( {{finance['compare_to']}} )
            $('#Ioniq6_future').val( {{finance['Ioniq6_future']}} )

            if( $("#Ioniq6_future option:selected"). text() == 'lease' )
            {
                // disable buyout
                $('#lbl-Car_buyout').addClass('bg-light text-secondary border-secondary')
                $('#Car_buyout').addClass('bg-light text-secondary border-secondary').attr('readonly', 'readonly' )
                $('#Car_buyout_date').addClass('bg-light text-secondary border-secondary').attr('readonly', 'readonly' )
            }
            else
            {
                // disable lease
                $('#lbl-Car_loan').addClass('bg-light text-secondary')
                $('#Car_loan').addClass('bg-light text-secondary')
                $('#lbl-Car_balloon').addClass('bg-light text-secondary')
                $('#Car_balloon').addClass('bg-light text-secondary')
            }

            var tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle='tooltip']"))
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) })

            var parentWidth = $('#comp_col').width();

            // Set the alert's `max-width` to the parent's width
            $('#comp_alert').css('max-width', parentWidth + 'px');
            $('#comp_alert').show()
        };

        document.addEventListener('DOMContentLoaded', function () {
            // Parse the savings_data from Flask
            const chartData = savingsData.map(entry => [new Date(entry[0]).getTime(), parseFloat(entry[1])]);
            {% if COMP %}
                const compSavingsData = JSON.parse('{{ COMP['savings_data'] | tojson }}');
                const compChartData = compSavingsData.map(entry => [new Date(entry[0]).getTime(), parseFloat(entry[1])]);
            {% endif %}

            // Get the legend name and vars for the tooltip
            const legendName = 'Savings';

            // Tooltip content from vars
            const tooltipContent = Object.entries(vars).map(([key, value]) => `${key}: ${value}`).join('<br>');

            // Calculate plot bands for each year with alternating background colors
            const plotBands = [];
            let year = new Date(savingsData[0][0]).getFullYear();
            let start = new Date(`${year}-01-01`).getTime();
            let end;

            for (let i = 1; i < savingsData.length; i++) {
                const currentYear = new Date(savingsData[i][0]).getFullYear();
                if (currentYear !== year) {
                    end = new Date(`${year + 1}-01-01`).getTime(); // End of the year
                    plotBands.push({
                        from: start,
                        to: end,
                        color: year % 2 === 0 ? 'white' : 'lemonchiffon' // Alternate colors
                    });
                    year = currentYear;
                    start = new Date(`${year}-01-01`).getTime();
                }
            }
            // Add the final year
            end = new Date(`${year + 1}-01-01`).getTime();
            plotBands.push({
                from: start,
                to: end,
                color: year % 2 === 0 ? 'white' : 'lemonchiffon'
            });

            const annotations = [];
            // the al, x, offset are used to make the altenrate annotations be on slightly different vertical offsets (size is based on $'s)
            // al alternates every 2 annotations left / right (so 2 left, then 2 right), x is just used to also move the label more left/right to get the connecting line
            var offset=13
            {% if not COMP %}
                // Add annotations for changes greater than 5000
                {% for a in finance['annotations'] %}
                    annotations.push({
                        labels: [{
                            point: {
                                x: {{a['x']}},
                                y: {{a['y']}},
                                crop: true,
                                xAxis: 0,
                                yAxis: 0
                            },
                            x: -70,
                            y: offset,
                            text: '{{a['label']}}'
                        }], labelOptions: { allowOverlap: true }
                    });
                    offset = ({{loop.index}} * 50 % 200) +50
                {% endfor %}
                document.keep = annotations
            {% endif %}

            // Highcharts configuration
            Highcharts.chart('container', {
                chart: { type: 'line' },
                title: { text: 'Savings Over Time' },
                xAxis: {
                    type: 'datetime',
                    title: { text: 'Date' },
                    plotBands: plotBands // Alternating background for years 
                },
                yAxis: { title: { text: 'Amount ($)' } },
                tooltip: { pointFormat: '{point.x:%Y-%m-%d}: <b>{point.y:.2f}</b>' },
                annotations: annotations, // Add annotations
                series: [
                    { name: "Savings", data: chartData, marker: { radius: 2 } }
                {% if COMP %}
                    ,{ name: "{{COMP['vars']['name']}}", data: compChartData, marker: { radius: 2 } }
                {% endif %}
                ]
            });
        });
    </script>
    <div id="save_modal" class="modal modal-lg" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Save </h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>Save data for future comparison</p>
            <div class="input-group">
                <label class="col-form-label me-2 text-end float-end">With name:</label>
                <input id="save_name" type="text" class="form-control"
                    value="{{now}}-LE={{finance['Living_Expenses']|replace('000','k')}},Inf={{finance['Inflation']}},sell={{finance['Sell_shares']}}"
                </input>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-primary"
                onClick="
                    vars['name']=$('#save_name').val();
                    $.ajax( { 
                        type: 'POST', 
                        url: '/save', 
                        contentType: 'application/json',
                        data: JSON.stringify( { 'vars': vars, 'savings_data' :savingsData } ),  
                        success: function() {  $('#save_modal').modal('hide'); } } )"
                >Save</button>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

