{% extends "/AdminTheme/base_admin.html" %}
{% block content %}
            <!-- Main Container -->
            <main id="main-container">

                <!-- Hero -->
                <div class="bg-body-light">
                    <div class="content content-full">
                        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                            <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">Dashboard</li>
                                    <li class="breadcrumb-item" aria-current="page">Leads</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
                <!-- END Hero -->

                <!-- Page Content -->
                <div class="content">
                    <!-- Dynamic Table Full -->
                    <div class="block block-rounded">
                        <div class="block-header block-header-default">
                            <!--<p ><b>All</b>({{pages|length}}) | Published(0) | Drafts(0) | Trash(0)</p>-->
                        </div>
                        <div class="block-content block-content-full">
                                
                                <table id="tabel" class="table table-bordered table-striped table-vcenter js-dataTable-buttons">
                                    <thead>
                                        <tr>
                                            <th style="width: 5%;">No</th>
                                            <th>Fields</th>
                                            <th style="width: 15%;">Date</th>
                                            <th style="width: 10%;">Time</th>
                                        </tr>
                                    </thead>
                                    
                                </table>
                            
                        </div>
                    </div>
                    <!-- END Dynamic Table Full -->
                </div>
                <!-- END Page Content -->
            </main>
            <!-- END Main Container -->
{% endblock %}
{% block script %}
<script>
   var tabel = $('#tabel').DataTable({
        'order': [[ 2, 'desc' ],[3, 'desc']],
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/mlebet/leads/get-hits",
            "type": "POST",
            "datatype": "json",
           "data": function (data) {
                var startDate = $('#StartDate').val();
                var endDate = $('#EndDate').val();
                data.startDate = startDate;
                data.endDate = endDate;
            }
        },
        responsive: true,
        pageLength: 100,
        lengthMenu: [
            [5, 10, 20, 100, -1],
            [5, 10, 20, 100, "All"]
        ],
        language: {
            "infoFiltered": ""
        },
        autoWidth: !1,
        buttons: [{
            extend: "copy",
            className: "btn btn-sm btn-primary"
        }, {
            extend: "csv",
            className: "btn btn-sm btn-primary"
        }, {
            extend: "print",
            className: "btn btn-sm btn-primary"
        }],
        dom: "<'row'<'col-sm-12'<'text-center bg-body-light py-2 mb-2'B>>><'row'<'col-sm-12 col-md-8'l><'col-sm-12 col-md-4'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
        //"dom": '<"dataTables_filter">frtip'
    });
    $("div.dataTables_length").append('&nbsp;<label> Date: <input type="date" id="StartDate" onchange="tDraw()" class="form-control form-control-sm"/> Start</label>&nbsp;<label> Date: <input type="date" id="EndDate" onchange="tDraw()" class="form-control form-control-sm"/> End</label>');
    
    function tDraw(){
        tabel.draw();
    }
</script>
<script>
    
    function setClipboard(value) {
        var tempInput = document.createElement("input");
        tempInput.style = "position: absolute; left: -1000px; top: -1000px";
        tempInput.value = value;
        document.body.appendChild(tempInput);
        tempInput.select();
        document.execCommand("copy");
        document.body.removeChild(tempInput);
    }
</script>
{% endblock %}