
<div class="container-fluid dashboard-content">
    <!-- Header -->
    {% set title = "Invoices" %}
    {% set navigation = [('Reports', ''), ('Invoices', '')] %}
    {% include 'include_header.html' %}


<div class="row col-12 mb-4 mr-0">
    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-3 ml-0 mb-1">
        <button type="submit" id="overall-btn" class="btn btn-outline-dark" onclick="onOverallClick()">
                See Overall Time Distribution
        </button>
    </div>

    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-9 col-9 mr-0">
        <div class="row">
            <div class="col text-right" style="margin-top: 7px;">
                <h5> Date Range </h5>
            </div>
            <div class="col col-auto nopadding">
                <input class="form-control" type="text" name="daterange" value="{{ start }} - {{ end }}" />
            </div>
        </div>
    </div>
</div>

{% include 'invoices_list.html' %}


<script>
    var start_date = new Date({{ start|tojson }});
    var end_date  = new Date({{ end|tojson }});

    $('select').selectpicker();

    $('.datetimepicker-input').datetimepicker({
        format: 'YYYY/MM/DD'
    });

    /* Register when the Booking type change */
    $('input[type=radio][name=booking-type-radio]').change(function() {
        booking_type = this.value;
        $('#booking-slot-auth').prop('readonly', this.value != 'slot');
    });

    $('input[type=radio][name=booking-repeat-radio]').change(function() {
        repeat_value = this.value;
    });

    $('input[type=radio][name=booking-modify-radio]').change(function() {
        modify_all = this.value == 'yes';
    });


    $('input[name="daterange"]').daterangepicker({
        "locale": {
            "format": "YYYY/MM/DD",
            "firstDay": 1},
        opens: 'left'
    }, function(start, end, label) {
        const base_url = "{{ url_for('main', content_id='reports_invoices') | safe }}";
        window.location.href = base_url + "&start=" + start.format('YYYY/MM/DD') + "&end=" + end.format('YYYY/MM/DD');
    });

    function onOverallClick() {
        // alert("Start: " +  start_date + " end:  " + end_date);
        const base_url = "{{ url_for('main', content_id='reports_time_distribution') | safe }}";
        window.location.href = base_url + "&start=" + dateStr(start_date) + "&end=" + dateStr(end_date);
    }

</script>