<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<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">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}">

    <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/mouse-wheel-zoom.js"></script>
    <script src="https://code.highcharts.com/modules/annotations.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <script src="https://code.highcharts.com/themes/adaptive.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/fullscreen.js"></script>
    <style>
        .col-form-label { width:140px; }
        html { font-size: 75% !important; }
        @media (max-width: 2000px) { html { font-size: 69% !important; } }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="d-flex align-items-center justify-content-center position-relative">
            <h3 align="center">Finance Tracker (go to <a href="bills">Bills</a> or <a href="cset">Comparison Sets</a>)</h3>
            <!-- Clickable Question Mark Icon -->
            <a href="#" tabindex="0"
                class="position-absolute end-0 me-3"
                data-bs-toggle="popover"
                data-bs-trigger="click"
                data-bs-placement="right"
                data-bs-content="For now manually update the itmes below on day aftter original pay shcedule to compare saved version vs. our reality:
                    <ul>
                        <li>Savings (<a href='https://online.macquarie.com.au/personal/#/login'>Macquarie</a>
                            +<a href='https://ib.mebank.com.au/authR5/ib/login.jsp'>ME bank</a>
                            +<a href='https://ib.nab.com.au/login'>NAB</a>) -- noting ME bank is: $934.07</li>
                        <li><a href='https://www.google.com/search?q=asx+tls'>TLS</a>/<a href='https://www.google.com/search?q=asx+cba'>CBA</a> prices</li>
                        <li>Macq <a href='https://www.macquarie.com.au/everyday-banking/savings-account.html'>Interest rate</a></li>
                        <li><a href='https://deakinpeople.deakin.edu.au/psc/HCMP/EMPLOYEE/HRMS/c/NUI_FRAMEWORK.PT_AGSTARTPAGE_NUI.GBL?CONTEXTIDPARAMS=TEMPLATE_ID%3aPTPPNAVCOL&scname=ADMN_LEAVE&PTPPB_GROUPLET_ID=DU_LEAVE&CRefName=ADMN_NAVCOLL_3'>D_leave_owed_in_days</a> by: {{key_dates['D_quit_date']}}</li>
                        <li>update Inflation - using <a href='https://tradingeconomics.com/australia/core-inflation-rate'>RBA Trimmed Mean CPI YoY</a></li></li>
                    </ul>"
                data-bs-html="true">
                <i class="bi bi-question-circle" style="font-size: 2.0rem;"></i>
            </a>
        </div>
    </div>


    <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-info" %}
            {% 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-info text-info 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-info" 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-info" 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-body-tertiary" %}
                            {% set bd="" %}
                        {% else %}
                            {% set bg="" %}
                            {% set bd="border-1 border-info" %}
                        {% 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 %}

    <!-- create tabbed view for each bill type  -->
    <nav id="ft-nav" class="nav nav-tabs pt-3">
        <button class="nav-link" id="tab-but-findata" data-bs-toggle="tab" data-bs-target="#tab-findata" type="button" role="tab" aria-controls="tab1" aria-selected="true" >Fortnighthly Savings data</button>
        <button class="nav-link" id="tab-but-graph" data-bs-toggle="tab" data-bs-target="#tab-graph" type="button" role="tab" aria-controls="tab2" aria-selected="true" >Graph of savings over time</button>
        {% if COMP %}
        <button class="nav-link" id="tab-but-compgraph" data-bs-toggle="tab" data-bs-target="#tab-compgraph" type="button" role="tab" aria-controls="tab3" aria-selected="true" >Comparison graph</button>
        {% else %}
        <button class="nav-link" id="tab-but-compgraph" data-bs-toggle="tab" data-bs-target="#tab-compgraph" type="button" role="tab" aria-controls="tab3" aria-selected="true" disabled>Comparison graph</button>
        {% endif %}
    </nav>

    <div class="tab-content">
      <div id="tab-findata" class="tab-pane">
        <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 bg-secondary text-light">{{savings[0][0][:4]}}</div>

          {# inside started if below, we add blank lines to the start of the year so the dates line up #}
          {% for _ in range( 0, padding ) %}
             <br>
          {% endfor %}

          {% set car_done=namespace( val=0 ) %}

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

              {% set car_yr=key_dates['D_hyundai_owned'][:4] %}
              {% set car_mon=key_dates['D_hyundai_owned'][5:7] %}
              {% set car_day=key_dates['D_hyundai_owned'][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 bg-secondary text-light">{{yr}}</div>
              {% endif %}


              {% if date == key_dates['D_quit_date'] %}
              <font class="text-warning">
                <label data-bs-toggle="tooltip" title="D quits">
              {% elif (yr == car_yr and mon == car_mon and day >= car_day and car_done.val == 0) %}
              {%set car_done.val=1 %}
              <font class="text-warning">
                <label data-bs-toggle="tooltip" title="We own car">
              {% else %}
              <font class="text-secondary">
                <label>
              {% endif %}
                {{ date }}:&nbsp;
                {{ '$%0.2f' % dollars|float }}<br>
                </label>
              </font><br>
              {% if comp_done.val == 0 and yr == comp_yr and mon == comp_mon and day|int >= comp_day|int %}
                <font class="text-info">
                {{ 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-info me-2 rounded" data-bs-toggle="modal" data-bs-target="#save_modal">Save Comparison set</button>
                      <button type="submit" class="disabled btn btn-info rounded-start" onClick="$('#vals_form').submit() disabled">Compare to:</button>
                      <select class="form-select border border-info text-info" 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 (with a buffer of: {{ '$%0.2f' % COMP['buffer']|float }}). Hover over blue labels above to see what compared to values differed</div>
                {% endif %}
                </div>
          </div>
        </div>
    </div>
    </form>

    <div id="tab-graph" class="tab-pane">
      <div class="row mt-4 highcharts-dark" id="graph" style="width:100%; height:800px;"></div>
    </div>
    <div id="tab-compgraph" class="tab-pane">
      <div class="row mt-4 highcharts-dark" id="graph-comp" style="width:100%; height:800px;"></div>
    </div>
 </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 }}');
        const rawHistData = JSON.parse('{{ hist | tojson }}');
        const histData = rawHistData.map(entry => [ new Date(entry.snapshot_date).getTime(), parseFloat(entry.Savings || 0) ]);

        $(function() { $('[data-bs-toggle="popover"]').popover(); });
        window.onload = function() { 
            $('#Sell_shares').val( {{finance['Sell_shares']}} )
            {% if finance['compare_to'] %}
                $('#compare_to').val( {{finance['compare_to']}} )
            {% else %}
                // set this to Nothing by default
                $('#compare_to').val( 0 )
            {% endif %}
            $('#Ioniq6_future').val( {{finance['Ioniq6_future']}} )

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

            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 () {
            $('#tab-but-findata').click()
            // Parse the savings_data from Flask
            const chartData = savingsData.map(entry => [new Date(entry[0]).getTime(), parseFloat(entry[1])]);
            const histChartData = histData.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 ? '#101010' : 'black' // 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 ? 'charcoal' : 'black'
            });

            const annotations = [];
            // this annotation stuff is painful, its in y-coords for the point
            // (based on graphs y-axis, but then needs an offset in absolute pixels) so this two coord systems makes it hard to keep the labels going, there
            // are a few hacks below that probably will break if the data changes too much
            var last_y = {{finance['annotations'][0]['y']}}
            var how_many_up = 0
            var how_many_down = 0
            var offset_y = 0
            var offset_x = 0

            // Add annotations for changes greater than 5000
            {% for a in finance['annotations'] %}
                {% if '-$' in a['label'] %}
                    how_many_down += 1
                    offset_y = ({{a['y']}} - last_y)/650 + 25*how_many_down
                    offset_x = -60-10*how_many_down
                    if( how_many_down > 12 )
                        how_many_down =0
//                    console.log( "{{a['label']}} U:" + how_many_up + ", D: " + how_many_down + ", last_y=" + last_y + ", y={{a['y']}}, offset_y=" + offset_y + ", offset_x=" + offset_x )
                    last_y = {{a['y']}}
                {% else %}
                    how_many_up += 1
                    offset_y = -25
                    {% if a['y'] > 400000 %}
                        offset_x = -80 -30*(6-how_many_up)
                    {% else %}
                        offset_x = -50 -10*how_many_up
                    {% endif %}
                    if( how_many_up > 3 )
                        how_many_up=0
                {% endif %}

                {% if a['y'] < 250000 %}
                    offset_y -= 350
                {% endif %}
                {% if a['y'] < 250000 and a['y'] > 200000 %}
                    offset_x += 100
                {% endif %}
                annotations.push({
                    labels: [{
                        point: {
                            x: {{a['x']}},
                            y: {{a['y']}},
                            crop: true,
                            xAxis: 0,
                            yAxis: 0
                        },
                        x: offset_x,
                        y: offset_y,
                        text: '{{a['label']}}'
                    }], labelOptions: { allowOverlap: true }
                });
            {% endfor %}
            document.keep = annotations

            // Highcharts configuration
            Highcharts.chart('graph', {
                chart: { type: 'line', zooming: { type: 'x' } },
                colors: [ 'orange' ],
                title: { text: 'Savings Over Time' },
                xAxis: {
                    type: 'datetime',
                    title: { text: 'Date' },
                    min: Date.UTC(2024, 6, 1),
                    plotBands: plotBands // Alternating background for years 
                },
                yAxis: { title: { text: 'Amount ($)' } },
                tooltip: {
                    pointFormatter: function () 
                    {
                        if( this.series.symbol == 'circle' ) { s='\u25CF' } else { s='\u2B25' }
                        return '<span style="color:' + this.point.color + '">' + s + '</span> <b>' + this.point.y + ':</b> ' + this.series.name + '<br>'
                    }, shared:true 
                },
                annotations: annotations, // Add annotations
                series: [ 
                    { name: "Savings", data: chartData, marker: { enabled: true, symbol: 'circle', radius: 2}, lineWidth:1, dashStyle: 'ShortDash', color: 'orange' },
                    { name: "Historical", data: histChartData, marker: { enabled: true, symbol: 'circle', radius: 2 }, lineWidth:1 }
                ]
            });

            {% if COMP %}
            // Highcharts configuration
            Highcharts.chart('graph-comp', {
                chart: { type: 'line', zooming: { type: 'x' } },
                colors: [
                    'orange', // Custom color 1
                    'cyan', // Custom color 2
                ],
                title: { text: 'Savings Over Time' },
                xAxis: {
                    type: 'datetime',
                    title: { text: 'Date' },
                    plotBands: plotBands // Alternating background for years 
                },
                yAxis: { title: { text: 'Amount ($)' } },
                tooltip: {
                    pointFormatter: function () 
                    {
                        if( this.series.symbol == 'circle' ) { s='\u25CF' } else { s='\u2B25' }
                        return '<span style="color:' + this.point.color + '">' + s + '</span> <b>' + this.point.y + ':</b> ' + this.series.name + '<br>'
                    }, shared:true 
                },
                series: [
                    { name: "Savings", data: chartData, marker: { enabled: true, symbol: 'circle', radius: 2}, lineWidth:1, dashStyle: 'ShortDash', color: 'orange' }
                    ,{ name: "{{COMP['vars']['name']}}", data: compChartData, marker: { enabled: true, symbol: 'diamond', radius: 2 }, lineWidth:1, color: 'cyan' },
                    { name: "Historical", data: histChartData, marker: { enabled: true, symbol: 'circle', radius: 2 }, lineWidth:1 }
                ]
            });
            {% endif %}
        }

        );


        $(document).ready(function() {

    // 1. The Resizing Logic
    function fitChartsToWindow() {
        // Targets any div with your highcharts class that is currently visible
        $('.tab-pane.active .highcharts-dark').each(function() {
            var $chartDiv = $(this);
            var chart = $chartDiv.highcharts();

            if (chart) {
                // Get position of chart relative to the viewport
                var topPos = $chartDiv[0].getBoundingClientRect().top;

                // Calculate remaining height (subtracting 5-10px for safety)
                var remainingHeight = window.innerHeight - topPos - 10;

                // Apply height and reflow
                $chartDiv.css('height', remainingHeight + 'px');
                chart.reflow();
            }
        });
    }

    // 2. Trigger when switching tabs
    $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function() {
        fitChartsToWindow();
    });

    // 3. Trigger when window is resized
    $(window).on('resize', function() {
        fitChartsToWindow();
    });

    // 4. Initial call (in case the first tab is a graph)
    // Wrap in a small timeout to ensure Bootstrap finish rendering
    setTimeout(fitChartsToWindow, 100);
});
    </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-info"
                onClick="
                    vars['name'] = $('#save_name').val();
                    $.ajax({
                        type: 'POST',
                        url: '/save',
                        contentType: 'application/json',
                        data: JSON.stringify({ 'vars': vars, 'savings_data': savingsData }),
                        success: function(resp) {
                            $('#save_modal').modal('hide');
                            $('#compare_to').append($('<option>', { value: resp.cset_id, text: resp.name }));
                        }
                    });"
                >Save</button>
          </div>
        </div>
      </div>
    </div>
</body>
</html>
