{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block body %}
<div class="dashboard-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <h1>DSP Report</h1>
                <form class="form-inline">
                    <div class="form-group">
                        <label for="start_date">Start Date</label>
                        <input type="date" class="form-control" id="start_date">
                    </div>
                    <div class="form-group">
                        <label for="end_date">End Date</label>
                        <input type="date" class="form-control" id="end_date">
                    </div>
                    <button id="get_report" type="button" class="btn btn-default"><i class="fa fa-refresh"></i> Generate</button>
                </form>
                <hr>
                <table id="report_table" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Brand</th>
                            <th>Sub Brand</th>
                            <th>Ad Campaign Id</th>
                            <th>Ad Campaign</th>
                            <th>DSP</th>
                            <th>DSP Campaign Id</th>
                            <th>DSP Campaign</th>
                            <th>Ad Impressions</th>
                            <th>Ad Clicks</th>
                            <th>Ad Reach</th>
                            <th>DSP Impressions</th>
                            <th>DSP Clicks</th>
                            <th>DSP Cost</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>Date</th>
                            <th>Brand</th>
                            <th>Sub Brand</th>
                            <th>Ad Campaign Id</th>
                            <th>Ad Campaign</th>
                            <th>DSP</th>
                            <th>DSP Campaign Id</th>
                            <th>DSP Campaign</th>
                            <th>Ad Impressions</th>
                            <th>Ad Clicks</th>
                            <th>Ad Reach</th>
                            <th>DSP Impressions</th>
                            <th>DSP Clicks</th>
                            <th>DSP Cost</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>

<script type=text/javascript>
$(function() {
    var table = $('#report_table').DataTable();
    $("#report_table").hide();
    var refresh_table = function () {
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        $("#report_table").show();

        table.destroy();
        table = $('#report_table').DataTable( {
            ajax: '/report?start_date=' + start_date + '&end_date=' + end_date,
            columns: [
                { data: 'date' },
                { data: 'brand' },
                { data: 'sub_brand' },
                { data: 'ad_campaign_id' },
                { data: 'ad_campaign' },
                { data: 'dsp' },
                { data: 'dsp_campaign_id' },
                { data: 'dsp_campaign' },
                { data: 'ad_impressions' },
                { data: 'ad_clicks' },
                { data: 'ad_reach' },
                { data: 'dsp_impressions' },
                { data: 'dsp_clicks' },
                { data: 'dsp_cost' },
            ]
        } );
    };
    refresh_table();
    $('#get_report').bind('click', frefresh_table);
});
</script>

{% endblock %}