Untitled

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>List page</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link href="bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="bootstrap-datepicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
        <script src="functions.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div class="container">
            <ul style="width:100%;" class="nav nav-tabs">
                <li style="width:40%;text-align: center"><a href="./index.php">Register</a></li>
                <li style="width:30%;text-align: center" class="active"><a href="#">List</a></li>
                <li style="width:30%;text-align: center"><a href="./list-not-left.php">List not left</a></li>
            </ul>
        </div>
        <div class="container">
            <form action="./download.php" method="post" id="downloadForm" enctype="multipart/form-data">
                <h2 class='centerText'>List of Patients</h2>
                <div class="row">
                    <div class="col-md-5">
                        <label for="name">Fullname</label>
                        <input type="text" class="form-control" id="name" placeholder="Fullname" name="name" autocomplete="off" onkeyup="getList()">
                    </div>

                    <div class="col-md-3">
                        <label for="datepickerBegin">Date entered</label>
                        <div class='input-group date' id='datepickerBegin'>
                            <input placeholder="Date entered" id="dateFrom" name="dateFrom" type='text' class="form-control" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <label for="endDate">Date left</label>
                        <div class='input-group date' id='datepickerEnd'>

                            <input placeholder="Date left" type='text' id="dateTo" name="dateTo" class="form-control" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>

                    <div class="col-md-1">
                        <label for="csv">CSV</label>
                        <button class="btn btn-success" id="csv" type="button" onclick="download()" data-toggle="tooltip" title="Save list in CSV format"><span class="glyphicon glyphicon-download-alt"></span></button>
                    </div>

                    <div class="col-md-12" id="list">

                    </div>

                    <script type="text/javascript">

                        //begin
                        $('#datepickerBegin').attr("data-date", new Date().toLocaleDateString());
                        $('#datepickerBegin').datepicker({format: "dd/mm/yyyy", autoclose: true, clearBtn: true});
                        $('#datepickerBegin').datepicker('setDate', new Date());

                        $('#datepickerBegin').on('changeDate', function () {
                            var date = $('#datepickerBegin').datepicker('getFormattedDate');
                            getList();
                        });

                        //end
                        $('#datepickerEnd').attr("data-date", new Date().toLocaleDateString());
                        $('#datepickerEnd').datepicker({format: "dd/mm/yyyy", autoclose: true, clearBtn: true});
                        $('#datepickerEnd').datepicker('setDate', new Date());

                        $('#datepickerEnd').datepicker();

                        $('#datepickerEnd').on('changeDate', function () {
                            var date = $('#datepickerEnd').datepicker('getFormattedDate');
                            getList();
                        });

                        getList();
                    </script>


                </div>
                <br/>
            </form>

                        <!-- Modal -->
            <div id="patientDetails" class="modal fade" role="dialog">
              <div class="modal-dialog modal-lg">

                <!-- Modal content-->
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Patient details</h4>
                  </div>
                  <div class="modal-body" id="details">

                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>

              </div>
            </div>

                         <!-- Modal confirm-->
            <div id="confirmModal" class="modal fade" role="dialog">
              <div class="modal-dialog modal-sm">

                <!-- Modal content-->
                <div class="modal-content">

                  <div class="modal-body">
                      <h4>Are you sure?</h4>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-primary btn-sm" onclick="closeVisit()">Yes</button>
                      <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">No</button>
                  </div>
                </div>

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


    </body>
</html>