<!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.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <title>Finance Form (Bill Details)</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: 75% !important; }
        @media (max-width: 2000px) { html { font-size: 70% !important; } }
    </style>
</head>
<body>
    <div class="pt-2 mx-2 container-fluid row">
    <h3 align="center">Bill Details (go to <a href="/">Finance Tracker</a>)</h3>

{# DEBUG totals if needed
    <table>
    {% for bt in total %}
        <tr><td></td><td>&nbsp;{{bt}}:</td>
        {% for yr in range( FIRST_YEAR, END_YEAR+1 ) %}
            {% if yr in total[bt] %}
                <td>
                {{total[bt][yr]}}
                </td>
            {% endif %}
        {% endfor %}
        </tr>
    {% endfor %}
    </table>
#}
    <div class="col-8">
        <div class="row">
            <div class="col-2 form-control-inline d-none new-bill-type-class">Bill Type</div>
            <div class="col-2 form-control-inline d-none new-bill-type-class">Frequency</div>
        </div>
        <div class="row align-items-center mb-3">
            <button id="new-bill-type-button" class="mt-4 px-0 offset-4 col-2 btn btn-success bg-success-subtle text-success" onCLick="StartNewBillType()"><span class="bi bi-plus-lg"> New Bill Type</span></button>
            <div class="new-bill-type-class px-0 col-2 d-none"> <input type="text" class="form-control text-end float-end border border-primary" id="new-bill-type-name"></div>
            <div class="new-bill-type-class px-0 col-2 d-none"><select id="new-bill-type-freq" class="form-select text-center">
                {% for bf in bill_freqs %}
                    <option value={{bf.id}}>{{bf.name}}</option>
                {% endfor %}
                </select>
            </div>
            <button id="save-bill-type" class="new-bill-type-class px-0 col-1 btn btn-success bg-success-subtle text-success d-none" onClick="NewBillType()"><span class="bi bi-floppy"></span> Save</button>
            <button id="canc-bill-type" class="new-bill-type-class px-0 col-1 btn btn-danger bg-danger-subtle text-danger d-none" onClick="CancelNewBillType()"><span class="bi bi-x"> Cancel</span></button>
            <button id="recalc-bills" class="mt-4 col-2 offset-3 btn btn-warning bg-warning-subtle text-warning" onClick="ForceRecalcBills()"><span class="bi bi-repeat"> Recalculate</span></button>
        </div>
        <div class="row">
            <div class="px-0 col"><label class="form-control d-flex
                align-items-end justify-content-center h-100 border-0 fw-bold bg-body-tertiary rounded-0">Name</ ></div>
            <div class="px-0 col"><label class="form-control d-flex
                align-items-end justify-content-center h-100 border-0 fw-bold bg-body-tertiary rounded-0">Frequency</ ></div>
            <div class="px-0 col"><label class="form-control d-flex
                align-items-end justify-content-center h-100 border-0 fw-bold
                bg-body-tertiary rounded-0">Annual Growth</ ></div>
            {% for yr in range( FIRST_YEAR, END_YEAR+1 ) %}
                <div class="px-0 col"><label class="form-control d-flex
                    align-items-end justify-content-center h-100 border-0
                    fw-bold bg-body-tertiary rounded-0">{{yr}} Total</ ></div>
            {% endfor %}
            <div class="px-0 col"><label class="form-control d-flex
                align-items-end justify-content-center h-100 border-0 fw-bold bg-body-tertiary rounded-0">Actions</ ></div>
            {# spacer to get header line right now we don't use forced col widths #}
            <div class="px-0 col"><label class="form-control d-flex
                align-items-end justify-content-center h-100 border-0 fw-bold bg-body-tertiary rounded-0"> </ ></div>
        </div>
        {% for bt in bill_types %}
            <div class="row">
                <div class="px-0 col-1"><input type="text" class="bill-type-{{bt.id}} form-control text-center" id="bill-type-name-{{bt.id}}" value="{{ bt.name }}" disabled> </div>
                <!--  bind Enter to save this bill-type -->
                <script>$("#bill-type-name-{{bt.id}}").keyup(function(event){ if(event.which == 13){ $('#bill-type-save-{{bt.id}}').click(); } event.preventDefault(); });</script>
                <div class="px-0 col-1"><select id="bill-type-freq-{{bt.id}}" class="bill-type-{{bt.id}} form-select text-center" disabled>
                    {% for bf in bill_freqs %}
                        <option value={{bf.id}}>{{bf.name}}</option>
                    {% endfor %}
                    </select>
                </div>
                <script>$('#bill-type-freq-{{bt.id}}').val( {{bt.freq}} );</script>
                <div class="px-0 col">
                    <div class="btn-group w-100" role="group">
                        <select id="{{bt.id}}_growth" class="form-select col" onChange="UseGrowth({{bt.id}})">
                        {% for gt in growth %}
                            {% if gt.name == 'Min' %}
                                <option value='min'
                                    {% if bt.which_growth == 'min' %}selected{% endif %}
                                >{{'%.2f'|format(bt.ann_growth_min)}}% {{gt.name}}</option>
                            {% elif gt.name == 'Avg' %}
                                <option value='avg'
                                    {% if bt.which_growth == 'avg' %}selected{% endif %}
                                >{{'%.2f'|format(bt.ann_growth_avg)}}% {{gt.name}}</option>
                            {% elif gt.name == 'Max' %}
                                <option value='max'
                                    {% if bt.which_growth == 'max' %}selected{% endif %}
                                >{{'%.2f'|format(bt.ann_growth_max)}}% {{gt.name}}</option>
                            {% elif gt.name == 'Simple' %}
                                <option value='simple'
                                    {% if bt.which_growth == 'simple' %}selected{% endif %}
                                >{{'%.2f'|format(bt.ann_growth_simple)}}% {{gt.name}}</option>
                            {% elif gt.name == 'CPI' %}
                                <option value='cpi'
                                    {% if bt.which_growth == 'cpi' %}selected{% endif %}
                                >{{'%.2f'|format(cpi)}}% {{gt.name}}</option>
                            {% else %}
                                <option value='flat-{{gt.value}}'
                                    {% if bt.which_growth == 'flat-'+gt.value|string %}selected{% endif %}
                                >{{'%.2f'|format(gt.value)}}% {{gt.name}}
                                </option>
                            {% endif %}
                        {% endfor %}
                        </select>
                    </div>
                </div>
                {% for yr in range( FIRST_YEAR, END_YEAR+1 ) %}
                    <div class="px-0 col"><input type="text" class="bill-type-total-{{bt.id}} form-control text-center" id="bill-type-total-{{bt.id}}" value="${{'%.2f'|format(total[bt.id][yr])}}" disabled> </div>
                {% endfor %}
                <button id="bill-type-chg-{{bt.id}}" class="px-0 col btn btn-success bg-success-subtle text-success" onClick="StartUpdateBillType( {{bt.id}} )"><span class="bi bi-pencil-square"> Change</button>
                <button id="bill-type-del-{{bt.id}}" class="px-0 col btn btn-danger bg-danger-subtle text-danger" onClick="DelBillType({{bt.id}})"><span class="bi bi-trash3"> Delete</button>
                <button id="bill-type-save-{{bt.id}}" class="px-0 col btn btn-success bg-success-subtle text-success d-none" onClick="UpdateBillType( {{bt.id}} )"><spam class="bi bi-floppy"> Save</button>
                <button id="bill-type-canc-{{bt.id}}" class="px-0 col btn btn-danger bg-danger-subtle text-danger d-none" onClick="CancelUpdateBillType({{bt.id}}, '{{bt.name}}')"><span class="bi bi-x"> Cancel</button>
            </div>
        {% endfor %}
        <div class="row">
            <div class="px-0 col-1"></div>
            <div class="px-0 col-1"></div>
            <div class="px-0 col"><input type="text" class="form-control text-end text-primary fs-5" value="TOTAL:"></div>
        {% for yr in range( this_year, END_YEAR+1) %}
            {% set tot=namespace( sum=0 ) %}
            {% for bt in bill_types %}
                {% if bt.id in total %}
                    {% set tot.sum = tot.sum + total[bt.id][yr] %}
                {% endif %}
            {% endfor %}
            <div class="px-0 col"><input type="text" class="form-control text-center text-primary bg-dark fs-5" value="${{'%.2f'|format(tot.sum)}}" disabled></div>
            {#
            {% set markup="h5" %}
            {% if yr == this_year %}
                {% set markup="h4 pt-4" %}
            {% endif %}
            <div class="row">
                <div class="offset-4 col text-end {{markup}}">
                    Total bills in {{yr}}
                </div>
                <div class="col {{markup}} text-primary">
                    ${{'%.2f'|format(tot.sum)}}
                </div>
            </div>
            #}
        {% endfor %}
        <div class="px-0 col"></div>
        <div class="px-0 col"></div>
        </div>
    </div>

    <!-- right-hand-side, bill types (e.g. gas, phone, etc.) -->

    <div class="col-4">
        <div class="row">
            <div class="col-2 form-control-inline d-none new-bill-data-class">Bill Type</div>
            <div id="new-bill-data-date-label" class="col-4 form-control-inline d-none new-bill-data-class">Date</div>
            <div id="new-bill-data-growth-label" class="col-4 form-control-inline d-none">Est. Annual Growth</div>
            <div class="col-2 form-control-inline d-none new-bill-data-class">Amount</div>
        </div>
        <div class="row align-items-center mb-3">
            <button id="new-bill-data-button" class="mt-4 px-0 offset-8 col-2 btn btn-success bg-success-subtle text-success" onCLick="StartNewBillData()"><span class="bi bi-plus-lg"> New Bill</span></button>
            <div class="new-bill-data-class px-0 col-2 d-none"> <select id="new-bill-data-type" class="form-select text-end float-end border border-primary">
                {% for bt in bill_types %}
                    <option value={{bt.id}}>{{bt.name}}</option>
                {% endfor %}
                </select>
            </div>
            <div class="new-bill-data-class px-0 col-4 d-none">
                <div class="input-group" style="max-width: 300px;">
                    <input type="date" class="form-control" id="new-bill-data-date">
                    <input type="text" class="form-control d-none" id="new-bill-data-growth">
                    <button class="btn btn-outline-danger" type="button" id="toggleDateBtn">When quit</button>
                </div>
            </div>
            <div class="new-bill-data-class px-0 col-2 d-none">
                <input type="number" class="form-control text-end float-end border border-primary" id="new-bill-data-amount">
            </div>
            <button id="save-bill" class="new-bill-data-class px-0 col-1 btn btn-success bg-success-subtle text-success d-none" onClick="NewBill()">
                <span class="bi bi-floppy"></span> Save </button>
            <button class="new-bill-data-class px-0 col-1 btn btn-danger bg-danger-subtle text-danger d-none" onClick="CancelNewBill()" >
                <span class="bi bi-x"> Cancel</span> </button>
        </div>


    <div class="d-flex align-items-start">
        <!-- create tabbed view for each bill type  -->
        <nav id="bills-nav" class="nav flex-column nav-pills me-3">
        {% for bt in bill_types %}
            <button class="nav-link w-100 text-end col px-1 py-2" id="tab-but-{{bt.id}}" data-bs-toggle="tab" data-bs-target="#tab-{{bt.id}}" type="button" role="tab" aria-controls="tab1" aria-selected="true" onClick="SaveTab('{{bt.id}}')">{{bt.name}}</button>
        {% endfor %}
        </nav>
 
        <div class="tab-content">
            <div class="col form-check form-switch form-check-inline">
                <input class="form-check-input" type="checkbox" value="" id="showEstimated" onChange="ToggleEstimated()">
                <label class="form-check-label" for="flexCheckDefault">Show Estimates</label>
            </div>
        {% for bt in bill_types %}
            {% if loop.first %}
                <div id="tab-{{bt.id}}" class="tab-pane active">
            {% else %}
                <div id="tab-{{bt.id}}" class="tab-pane">
            {% endif %}
            {% for bd in bill_data %}
                {% if loop.first %}
                <div class="row pt-2">
                    <div class="p-0 col"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Date</ ></div>
                    <div class="p-0 col"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Amount</ ></div>
                    <div class="px-0 col"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Actions</ ></div>
                    <div class="px-0 col"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0 h-100"></ ></div>
                </div>
                {% endif %}
                {% if bd.bill_type == bt.id %}
                    {% if bd.estimated == 1 %}
                        <div class="row est d-none fst-italic">
                        {% set classes="fst-italic form-control text-center" %}
                    {% else %}
                        <div class="row">
                        {% set classes="form-control text-center" %}
                    {% endif %}
                    <input type="hidden" id="bill-data-type-{{bd.id}}" value="{{ bd.name }}"> </input>
                    {% if bd.bill_date == 'future' %}
                        <div class="px-0 col"> <input type="text" class="{{classes}}" id="bill-data-date-{{bd.id}}" value="{{ bd.bill_date }}" disabled> </div>
                    {% else %}
                        <div class="px-0 col"> <input type="date" class="{{classes}}" id="bill-data-date-{{bd.id}}" value="{{ bd.bill_date }}" disabled> </div>
                        <script>
                            if( typeof future_id !== 'undefined' && future_id>0) { 
                                first_col_id={{bd.id}}
                                future_id=0
                            }
                        </script>
                    {% endif %}
                    <div class="px-0 col"> <input type="number" class="{{classes}}" id="bill-data-amount-{{bd.id}}" value="{{ bd.amount }}" disabled> </div>
                    {% if bd.estimated == 0 %}
                        <button id="bill-data-chg-{{bd.id}}" class="px-0 col btn btn-success bg-success-subtle text-success" onClick="StartUpdateBill( {{bd.id}} )"><span class="bi bi-pencil-square"> Change</button>
                        <button id="bill-data-del-{{bd.id}}" class="px-0 col btn btn-danger bg-danger-subtle text-danger" onClick="DeleteBill( {{bd.id }} )"><span class="bi bi-trash3"> Delete
                        <button id="bill-data-save-{{bd.id}}" class="px-0 col btn btn-success bg-success-subtle text-success d-none" onClick="UpdateBill( {{bd.id}} )"><span class="bi bi-floppy"> Save</button>
                        <button id="bill-data-canc-{{bd.id}}" class="px-0 col btn btn-danger bg-danger-subtle text-danger d-none" 
                            onClick="CancelUpdateBill({{bd.id}}, '{{bd.name}}', '{{bd.bill_date}}', '{{bd.amount}}')"> <span class="bi bi-x"> Cancel</button>
                        </button>
                    {% else %}
                        <div class="px-0 col"></div>
                        <div class="px-0 col"></div>
                    {% endif %}
                </div>
                {% endif %}
            {% endfor %}
        </div>
        {% endfor %}
        </div>
    </div>

    <script>
        function ToggleEstimated()
        {
            if( $("#showEstimated").is(":checked") )
            {
                val=1
                $('.est').removeClass('d-none')
            }
            else
            {
                val=0
                $('.est').addClass('d-none')
            }
            $.ajax( { type: 'POST', url: '/saveui', contentType: 'application/json', data: JSON.stringify( { 'show_estimated': val } ), success: function() { } } )
        }

        function StartNewBillData() 
        {
            $('.new-bill-data-class').removeClass('d-none')
            $('#new-bill-data-button').addClass('d-none')
            $('#new-bill-data-type').focus()
        }

        function NewBill() 
        {
            if( $('#new-bill-data-growth').hasClass('d-none') )
            {
                // if growth is hidden, then we have normal bill
                $.ajax( { type: 'POST', url: '/newbill',
                    contentType: 'application/json', 
                    data: JSON.stringify( { 
                        'bill_type': $('#new-bill-data-type').val(), 
                        'amount': $('#new-bill-data-amount').val(), 
                        'bill_date': $('#new-bill-data-date').val() } ),
                    success: function() { window.location='bills' } } )
            }
            else
            {
                // if growth is visible, then we have future bill/growth & no date
                $.ajax( { type: 'POST', url: '/newbill',
                    contentType: 'application/json', 
                    data: JSON.stringify( { 
                        'bill_type': $('#new-bill-data-type').val(), 
                        'amount': $('#new-bill-data-amount').val(), 
                        'growth': $('#new-bill-data-growth').val() } ),
                    success: function() { window.location='bills' } } )
            }
        }

        function CancelNewBill() 
        {
            $('.new-bill-data-class').addClass('d-none')
            $('#new-bill-data-button').removeClass('d-none')
            // reset select to first option
            $('#new-bill-data-type').val( $('#new-bill-data-type option:first').attr('value') )
            // clear out date and amount
            $('#new-bill-data-date').val('')
            $('#new-bill-data-amount').val('')
        }

        function StartUpdateBill( id )
        {
            val=$('#bill-data-amount-'+id).val()

            // enable date and amount fields
            $('#bill-data-type-'+id).removeClass('bg-white')
            $('#bill-data-date-'+id).prop('disabled', false )
            $('#bill-data-amount-'+id).prop('disabled', false )
            // "enable" name for edits
            $('#bill-data-amount-'+id).prop('disabled', false).focus()

            // move cursor to the end after 'focus()' above
            $('#bill-data-amount-'+id).val('').val( val )

            // alter change/delete buttons to be save/cancel
            $('#bill-data-chg-'+id).addClass('d-none')
            $('#bill-data-del-'+id).addClass('d-none')
            $('#bill-data-save-'+id).removeClass('d-none')
            $('#bill-data-canc-'+id).removeClass('d-none')
        }

        function UpdateBill(id) 
        { 
            $.ajax( { type: 'POST', url: '/updatebill',
                contentType: 'application/json', data: JSON.stringify( { 
                    'id': id, 
                    'bill_type': $('#bill-data-type-'+id).val(),
                    'bill_date' : $('#bill-data-date-'+id).val(),
                    'amount': $('#bill-data-amount-'+id).val() } ),
                success: function() { window.location='bills' } } )
        }

        function CancelUpdateBill( id, bill_type, bill_date, amount ) 
        {
            // fix-up type, date and amount fields
            $('#bill-data-date-'+id).prop('disabled', true )
            $('#bill-data-amount-'+id).prop('disabled', true )
            // alter change/delete buttons to be save/cancel
            $('#bill-data-chg-'+id).removeClass('d-none')
            $('#bill-data-del-'+id).removeClass('d-none')
            $('#bill-data-save-'+id).addClass('d-none')
            $('#bill-data-canc-'+id).addClass('d-none')
            // finally we might have modified the string, and then clicked cancel, so rest bill values to orig
            $('#bill-data-type-'+id).val(bill_type)
            $('#bill-data-date-'+id).val(bill_date)
            $('#bill-data-amount-'+id).val(amount)
        }

        function DeleteBill( id ) 
        {
            $.ajax( { type: 'POST', url: '/delbill', contentType: 'application/json', 
                data: JSON.stringify( { 'id': id } ), success: function() { window.location='bills' } } )
        }

        function StartNewBillType() 
        {
            $('.new-bill-type-class').removeClass('d-none')
            $('#new-bill-type-button').addClass('d-none')
            $('#new-bill-type-name').focus()
        }

        function CancelNewBillType() 
        {
            $('.new-bill-type-class').addClass('d-none')
            $('#new-bill-type-button').removeClass('d-none')
            $('#new-bill-type-name').val('')
            // reset select to first option
            $('#new-bill-type-freq').val( $('#new-bill-type-freq option:first').attr('value') )
        }

        function NewBillType() 
        {
            $.ajax( { type: 'POST', url: '/newbilltype',
                contentType: 'application/json', data: JSON.stringify( { 'bill_type': $('#new-bill-type-name').val(), 'freq': $('#new-bill-type-freq').val() } ),
                success: function() { window.location='bills' } } )
        }
        
        function StartUpdateBillType( id ) 
        {
            val=$('#bill-type-name-'+id).val()

            // "enable" fields for edits
            $('.bill-type-'+id).prop('disabled', false)

            // put focus into name field
            $('#bill-type-name-'+id).focus()

            // move cursor to the end after 'focus()' above
            $('#bill-type-name-'+id).val('').val( val )

            // alter change/delete buttons to be save/cancel
            $('#bill-type-chg-'+id).addClass('d-none')
            $('#bill-type-del-'+id).addClass('d-none')
            $('#bill-type-save-'+id).removeClass('d-none')
            $('#bill-type-canc-'+id).removeClass('d-none')
        }

        function UpdateBillType(id) 
        {
            $.ajax( { type: 'POST', url: '/updatebilltype',
                contentType: 'application/json', data: JSON.stringify( { 'id': id, 'bill_type': $('#bill-type-name-'+id).val(), 'freq': $('#bill-type-freq-'+id).val() } ),
                success: function() { window.location='bills' } } )
        }

        function CancelUpdateBillType(id,orig_name) 
        {
            // "disable" name for edits
            $('.bill-type-'+id).prop('disabled', true) 
            // alter change/delete buttons to be save/cancel
            $('#bill-type-chg-'+id).removeClass('d-none')
            $('#bill-type-del-'+id).removeClass('d-none')
            $('#bill-type-save-'+id).addClass('d-none')
            $('#bill-type-canc-'+id).addClass('d-none')
            // finally we might have modified the string, and then clicked cancel, so rest bill type to its orig name
            $('#bill-type-name-'+id).val(orig_name)
        }

        function DelBillType( id ) 
        {
            $.ajax( { type: 'POST', url: '/delbilltype', contentType: 'application/json', 
                data: JSON.stringify( { 'id': id } ), success: function() { window.location='bills' } } )
        }

        function UseGrowth( bt_id )
        {
            which = $('#'+bt_id+ '_growth option:selected').val()
            $.ajax( { type: 'POST', url: '/usegrowth', contentType: 'application/json',
                data: JSON.stringify( { 'bill_type': bt_id, 'which_growth': which } ), success: function() { window.location='bills' } } )
        }

        function SaveTab( last_tab )
        {
            // set the drop-down for new bill to be this tab now...
            $("#new-bill-data-type").val( $('.nav-link.active').prop('id').replace("tab-but-", "") )
            $.ajax( { type: 'POST', url: '/saveui', contentType: 'application/json', data: JSON.stringify( { 'last_tab': last_tab } ), success: function() { } } )
        }

        $(document).ready(function () {
            // if amount has enter key in it then save, but dont do this for other fields in new bill
            $("#new-bill-data-amount").keyup(function(event){ if(event.which == 13){ $("#save-bill").click(); } event.preventDefault(); });
            // if we hit enter in new bill type name field, save it
            $("#new-bill-type-name").keyup(function(event){ if(event.which == 13){ $("#save-bill-type").click(); } event.preventDefault(); });

            // note we also dynamically bound each bill-type-name to save on Enter when we create them in a loop

            // force something to be active
            $('#bills-nav .nav-link').first().addClass('active');
            {% if bill_ui %}
                // if we have data on it - go back to last tab
                $('#tab-but-{{bill_ui.last_tab}}').tab('show');
                {% if bill_ui.show_estimated %}
                    $('#showEstimated').click()
                {% endif %}
            {% else %}
                $('#tab-but-1').tab('show');
            {% endif %}
            // make the new bill drop-down default to the same as the current tab
            $("#new-bill-data-type").val( {{bill_ui.last_tab}} )
        } )

      $(function () {
        let disabled = false;

        $('#toggleDateBtn').on('click', function () {
          disabled = !disabled;

          if (disabled) {
            $('#new-bill-data-date').addClass('d-none')
            $('#new-bill-data-growth').removeClass('d-none')
            $(this)
              .removeClass('btn-outline-danger')
              .addClass('btn-outline-success')
              .html('Normal date');
            $('#new-bill-data-date-label').addClass('d-none')
            $('#new-bill-data-growth-label').removeClass('d-none')
          } else {
            $('#new-bill-data-date').removeClass('d-none')
            $('#new-bill-data-growth').addClass('d-none')
            $(this)
              .removeClass('btn-outline-success')
              .addClass('btn-outline-danger')
              .html('When quit');
            $('#new-bill-data-date-label').removeClass('d-none')
            $('#new-bill-data-growth-label').addClass('d-none')
          }
        });
      });

      function ForceRecalcBills()
      {
          $.ajax( { type: 'POST', url: '/force_recalc_bills', contentType: 'application/json', success: function() { window.location='bills' } } )
      }

/*
    $(document.ready() {
        for( bt in future_ids ) {
            $('#bill-data-date-'+future_ids[bt]).width( $('#bill-data-date-'+first_col_id[bt]).width() ) 
        }
    }
*/
    </script>
</body>
</html>
