<style type="text/css">
    .mt {
        margin-top: 10px;
    }
</style>
<main id="js-page-content" role="main" class="page-content">


    <ol class="breadcrumb page-breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);">IC Portal</a></li>
        <li class="breadcrumb-item">Daily Surveillance Report</li>

        <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
    </ol>

    <div id="content">
        <div class="row">
            <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
                <h1> <span class="page-title txt-color-blueDark">Daily Surveillance Report</span></h1>
            </div>
        </div>
		<div class="row">
		<form method="post" action="/viewdata" id="searchform">
		<input type="hidden" name="date1" id="date1" value="" />
		</form>
      <div class="col-md-3 col-sm-3">
        <label class="form-label">Date</label>
        <div class="input-group">
          <input type="text" class="form-control aa" id="search_date" readonly="" placeholder="Select date" value="" name="search_date">
          <div class="input-group-append assa">
            <span class="input-group-text fs-xl">
              <i class="fal fa-calendar"></i>
            </span>
          </div>
        </div>
      </div>
      <div class="col-md-2 col-sm-2">
        <div class="form-group" style="margin-top:22px">
          <button type="button" class="btn btn-primary bg-brand-gradient" onclick="SearchDate()"><i class="fas fa-search" style="margin-right: 4px"></i>Search Now</button>
        </div>
      </div>
            </div>
		<section id="" class="">
            <div class="row">
                <!-- NEW WIDGET START -->
                <div class="col-lg-12 mt">
                    <div id="panel-1" class="panel">
                        <div class="panel-container show">
                            <div class="panel-content">
                                <table id="datatable_tabletools" class="table table-bordered table-hover table-striped w-100">
                                    <thead class="bg-primary-600 bg-brand-gradient">
                                        <tr>
                                            <th nowrap>
                                                <center>Day</center>
                                            </th>
                                            <th nowrap>
                                                <center>Date</center>
                                            </th>
                                            <th nowrap>
                                                <center># of Patients</center>
                                            </th>
                                            <th nowrap>
                                                <center># of patients with cannula</center>
                                            </th>
                                            <th nowrap>
                                                <center># of new patients with phlebitis</center>
                                            </th>
                                            <th nowrap>
                                                <center># of patients with urinary catheter</center>
                                            </th>
                                            <th nowrap>
                                                <center># of patients with new CAUTI</center>
                                            </th>
                                            <th nowrap>
                                                <center># of patients with central line</center>
                                            </th>
                                            <th nowrap>
                                                <center># of patients with new CLABSI</center>
                                            </th><th nowrap>
                                                <center># of patients with HAP</center>
                                            </th><th nowrap>
                                                <center># of patients with ventilator</center>
                                            </th><th nowrap>
                                                <center># of patients with VAP</center>
                                            </th><th nowrap>
                                                <center># of patients with surgery</center>
                                            </th>
											<th nowrap>
                                                <center># of patients with SSI post op</center>
                                            </th>
											<th nowrap>
                                                <center># of patients with MDRO (in hosp)</center>
                                            </th>
											<th nowrap>
                                                <center># of patients with MDRO (outside hosp)</center>
                                            </th>
                                            
                                        </tr>
                                    </thead>
                                    <tbody>

                                        

                                    </tbody>
                                </table>
                            </div>
                            <!-- end widget content -->
                        </div>
                        <!-- end widget div -->
                    </div>
                    <!-- end widget -->
                </div>
            </div>
        </section>
    </div>


</main>
<!-- this overlay is activated only when mobile menu is triggered -->
<div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div>
<script type="text/javascript">
	
	function SearchDate(){
		var date = $("#search_date").val();
		
		$("#date1").val(date);
		$("#searchform").submit();
		
		// location.href = "/viewdata/"+date;
	}

    $(document).ready(function() {
		
		$('.aa').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
        });
		
        // initialize datatable
        $('#datatable_tabletools').dataTable({
            responsive: true,
            lengthChange: false,
			scrollX: true,
            dom:
                /*  --- Layout Structure 
                  --- Options
                  l - length changing input control
                  f - filtering input
                  t - The table!
                  i - Table information summary
                  p - pagination control
                  r - processing display element
                  B - buttons
                  R - ColReorder
                  S - Select

                  --- Markup
                  < and >       - div element
                  <"class" and >    - div with a class
                  <"#id" and >    - div with an ID
                  <"#id.class" and >  - div with an ID and a class

                  --- Further reading
                  https://datatables.net/reference/option/dom
                  --------------------------------------
                 */
                "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'lB>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            buttons: [
                /*{
                  extend:    'colvis',
                  text:      'Column Visibility',
                  titleAttr: 'Col visibility',
                  className: 'mr-sm-3'
                },*/
                {
                    extend: 'pdfHtml5',
                    text: 'PDF',
                    titleAttr: 'Generate PDF',
                    className: 'btn-outline-danger btn-sm mr-1'
                },
                {
                    extend: 'excelHtml5',
                    text: 'Excel',
                    titleAttr: 'Generate Excel',
                    className: 'btn-outline-success btn-sm mr-1'
                },
                {
                    extend: 'csvHtml5',
                    text: 'CSV',
                    titleAttr: 'Generate CSV',
                    className: 'btn-outline-primary btn-sm mr-1'
                },
                {
                    extend: 'copyHtml5',
                    text: 'Copy',
                    titleAttr: 'Copy to clipboard',
                    className: 'btn-outline-primary btn-sm mr-1'
                },
                {
                    extend: 'print',
                    text: 'Print',
                    titleAttr: 'Print Table',
                    className: 'btn-outline-primary btn-sm'
                }
            ],

        });
    });
</script>