<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Multiple Cucumber HTML Reporter</title>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" 
    integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

    <!-- DataTables -->

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/cerulean/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap4.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.5.0/css/colReorder.bootstrap4.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.2/css/responsive.bootstrap4.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.4/css/rowReorder.bootstrap4.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/2.0.0/css/scroller.bootstrap4.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.0/css/select.bootstrap4.css"/>


    <!-- Custom Theme Style -->
    <style type="text/css">
        /* styles for the buttons of the webtables*/

        div.dt-buttons {
            float: right;
            margin-left: 10px;
        }

        body {
            background-color: #1D1D1D;
        }
    </style>
</head>

<body>
    <nav class="reportTitle">
        <div class="container-fluid title">
            <h1 align="center" style="color:aliceblue;">Reports History</h1>
        </div>
    </nav>

    <div class="main_container">
        <div class="x_panel col-md-12 col-sm-12 col-xs-12 mb-4 border-0">
            <div class="x_content">
                <div class="table-responsive table-dark ">
                    <table id="mongoDbResults-table" class="table table-bordered dt-responsive nowrap table-hover" cellspacing="0"
                        width="100%">
                        <thead>
                            <tr>

                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                            </tr>
                        </tbody>

                    </table>
                </div>
            </div>
        </div>

        <!-- DataTables -->        


        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.5.0/js/dataTables.colReorder.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.4/js/dataTables.rowReorder.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/scroller/2.0.0/js/dataTables.scroller.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {

                $('#mongoDbResults-table').DataTable({
                    dom: "<'row'<'col-md-6'l><'col-md-6'Bf>>" +
                        "<'row'<'col-md-6'><'col-md-6'>>" +
                        "<'row'<'col-md-12't>><'row'<'col-md-12'ip>>",
                    buttons: ['colvis'],
                    "order": [[0, "asc"]],
                    "lengthMenu": [[50, 100, 150, -1], [50, 100, 150, "All"]],
                    "processing": true,
                    "serverSide": true,
                    "rowReorder": true,
                    "ajax": '/mongo/get/datatable',
                    "columns": [
                        { "data": "_id" },
                        { "data": "results.name" },
                        { "data": "results.executionDate" },
                        { "data": "results.executionTime" }
                    ],
                    "columnDefs": [
                        {
                            "title": "Id",
                            "targets": [0],
                            "visible": false
                        },
                        {
                            "title": "Report Name", "targets": 1
                        },
                        {
                            "title": "Date", "targets": 2
                        },
                        {
                            "title": "Time", "targets": 3
                        },
                        {
                            "targets": [4],
                            "render": function (data, type, row) {
                                return '<a href="javascript:void(0);" onclick="generateReport( event ,\'' + row._id + '\');">Get Report</a>';
                            },
                        }

                    ]
                });
            });
        </script>

        <script type="text/javascript">
            function generateReport(event, reportId) {
                event.preventDefault();
                event.stopPropagation();
                event.stopImmediatePropagation();
                var xmlHttp = new XMLHttpRequest();
                xmlHttp.open("GET", '/generateReport?id=' + reportId, true); // false for synchronous request
                xmlHttp.send(null);
                console.log("request to create report initiated");

                return xmlHttp.responseText;
            };
        </script>
</body>

</html>