<%- include('./includes/header.ejs') %>
</head>
<body>
<%- include('./includes/navigation.ejs') %>
    <div class="container">
        <h1 class="text-center">
            Pandemic Statistics 
        </h1>
        <div class="row">
            <div class="col col-md-3">
                <div class="card">
                    <div class="card-body">
                        <form method="POST" action= "/statistics" >
                            <div class="mb-3">
                                <label for="country" class="form-label">Region</label>
                                <select class="form-select" aria-label="Country" id="country" name="country">
                                        <option value="All" selected>All</option>
                                    <% for (country of  countries){ %>
                                        <option value="<%=country._id%>"><%=country.name%></option>
                                    <% } %>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="Date" class="form-label">Date</label>
                                <input type="date" class="form-control" name="date" id="Date" required/>
                            </div>
                            <button type="submit" class="btn btn-primary"> Filter </button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col col-md-9">
                <div class="card">
                    <div class="card-body">
                        <h1 class="text-center">
                            Region: <%= singleDay.country %> 
                        </h1>
                        <h3 class="text-center">
                            Date: <%= singleDay.datestr %> 
                        </h3>
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th scope="col">New Case</th>
                                <th scope="col">Death</th>
                                <th scope="col">Recovered</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <th scope="col"><%= singleDay.confirmed %></th>
                                <th scope="col"><%= singleDay.death %></th>
                                <th scope="col"><%= singleDay.recovered %></th>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <br>
        <div class="row">
            <div class="col col-md-12">
                <div class="card">
                    <div class="card-body">
                        <h1 class="text-center">
                            All Region : <%= singleDay.datestr %> 
                        </h1>
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th scope="col">Country</th>
                                <th scope="col">New Case</th>
                                <th scope="col">Death</th>
                                <th scope="col">Recovered</th>
                            </tr>
                            </thead>
                            <tbody>
                            <% if (allData.length > 0) { %>
                                <% for (data of allData) { %>
                                <tr>
                                    <td> <%= data.country %> </td>
                                    <td> <%= data.confirmed%> </td>
                                    <td> <%= data.death %> </td>
                                    <td> <%= data.recovered %> </td>
                                </tr>
                                <% } %>
                            <% } %>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

   </div>
<%- include('./includes/footer.ejs') %>