<main id="js-page-content" role="main" class="page-content">

    <div id="panel-12" class="panel">
        <div class="panel-hdr border-faded border-top-0 border-right-0 border-left-0 shadow-0">
            <h2>
                Surveillance Form</span>
            </h2>
            <div class="panel-toolbar pr-3 align-self-end">
                <ul id="demo_panel-tabs" class="nav nav-tabs border-bottom-0" role="tablist">
                    <li class="nav-item" id="link-1">
                        <a class="nav-link active" data-toggle="tab" href="#js_pill_border_icon-1" role="tab">Basic Info</a>
                    </li>
                    <li class="nav-item" id="link-2">
                        <a class="nav-link disabled" data-toggle="tab" href="#js_pill_border_icon-2" role="tab">Other Basic Info</a>
                    </li>
                    <li class="nav-item" id="link-3">
                        <a class="nav-link disabled" data-toggle="tab" href="#js_pill_border_icon-3" role="tab">Indweliing Devices</a>
                    </li>
                    <!-- <li class="nav-item" id="link-4">
                        <a class="nav-link disabled"  data-toggle="tab" href="#" role="tab">Disabled</a>
                    </li> -->
                </ul>
            </div>
        </div>
        <form class="needs-validation" name='infectionform' id='infectionform' method='post' novalidate>
            <div class="panel-container show">
                <div class="panel-content">

                    <div class="tab-content py-3">
                        <div class="tab-pane fade show active" id="js_pill_border_icon-1" role="tabpanel">

                            <div class="form-row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Name <span style="color: red">*</span></label>
                                    <input class="form-control" value="" placeholder="Enter Name" type="text" id='names' name='names' required>
                                    <div class="invalid-feedback">
                                        Please Enter Name.
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Bed # <span style="color: red">*</span></label>
                                    <input class="form-control" value="" placeholder="Enter Bed Number" type="Number" min="0" id='bed' name='bed' required>
                                    <div class="invalid-feedback">
                                        Please Enter Bed Number.
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">M.R.# <span style="color: red">*</span></label>
                                    <input class="form-control" value="" placeholder="Enter M.R. Number" type="Number" min="0" id='mr_num' name='mr_num' required>
                                    <div class="invalid-feedback">
                                        Please Enter M.R. Number.
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Date Of Admission <span style="color: red">*</span></label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" value="07/17/2021" id="date_of_admission" name="date_of_admission">
                                        <div class="input-group-append">
                                            <span class="input-group-text fs-xl">
                                                <i class="fal fa-calendar-alt"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback">
                                        Please Select Date Of Admission.
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Date Of Cannula Insertion <span style="color: red">*</span></label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" value="07/17/2021" id="date_of_cannula_insertion" name="date_of_cannula_insertion">
                                        <div class="input-group-append">
                                            <span class="input-group-text fs-xl">
                                                <i class="fal fa-calendar-alt"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback">
                                        Please Select Date Of Cannula Insertion.
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Date Of Urinary Catheter Insertion <span style="color: red">*</span></label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" value="07/17/2021" id="date_of_urinary_catheter_insertion" name="date_of_urinary_catheter_insertion">
                                        <div class="input-group-append">
                                            <span class="input-group-text fs-xl">
                                                <i class="fal fa-calendar-alt"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback">
                                        Please Select Date Of Urinary Catheter Insertion.
                                    </div>
                                </div>

                            </div>
                            <div class="form-row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Date Of Central Line Insertion <span style="color: red">*</span></label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" value="07/17/2021" id="date_of_central_line_insertion" name="date_of_central_line_insertion">
                                        <div class="input-group-append">
                                            <span class="input-group-text fs-xl">
                                                <i class="fal fa-calendar-alt"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback">
                                        Please Select Date Of Central Line Insertion.
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Date of Intubation <span style="color: red">*</span></label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" value="07/17/2021" id="date_of_intubation" name="date_of_intubation">
                                        <div class="input-group-append">
                                            <span class="input-group-text fs-xl">
                                                <i class="fal fa-calendar-alt"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback">
                                        Please Select Date of Intubation.
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Date Of Surgery <span style="color: red">*</span></label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" value="07/17/2021" id="date_of_surgery" name="date_of_surgery">
                                        <div class="input-group-append">
                                            <span class="input-group-text fs-xl">
                                                <i class="fal fa-calendar-alt"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback">
                                        Please Select Date Of Surgery.
                                    </div>
                                </div>

                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                </div>
                                <div class="demo col-md-6 pull-right">
                                    <!-- <a  id="next_to_other_info" class="btn btn-primary btn-md float-right nav-link" data-toggle="tab"  role="tab"><i class="fas fa-angle-right" style="margin-right: 4px"></i> Next</a> -->
                                    <button id="next_to_other_info" class="btn btn-primary btn-md float-right nav-link" data-toggle="tab" role="tab"><i class="fas fa-angle-right" style="margin-right: 4px"></i> Next</button>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="js_pill_border_icon-2" role="tabpanel">
                            <div class="form-row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Fever</label> <span style="color: red">*</span>
                                    <select class="custom-select" name="fever" id="fever" onchange="Fever(this.value)" required="">
                                        <option value="">Select Fever</option>
                                        <option value="yes">Yes</option>
                                        <option value="no">No</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please Select Fever.
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Temperature <span style="color: red">*</span></label>
                                    <div class="input-group">
                                        <input class="form-control" value="" placeholder="Enter Name" type="number" id='temperature' name='temperature ' required disabled="">
                                        <div class="input-group-append">
                                            <span class="input-group-text fs-xl">
                                                <i style="font-size: 13px"><b>&#8451;</b></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback">
                                        Please Enter Temperature .
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Tachycardia </label> <span style="color: red">*</span>
                                    <select class="custom-select" name="tachycardia" id="tachycardia" onchange="Tachycardia(this.value)" required="">
                                        <option value="">Select Tachycardia</option>
                                        <option value="yes">Yes</option>
                                        <option value="no">No</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please Select Tachycardia.
                                    </div>
                                </div>

                            </div>
                            <div class="form-row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Pulse <span style="color: red">*</span></label>
                                    <div class="input-group">
                                        <input class="form-control" value="" placeholder="Enter Pulse" type="number" id='pulse' name='pulse' required disabled>
                                        <div class="input-group-append">
                                            <span class="input-group-text fs-xl">
                                                <i class="fas fa-heart-rate"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback">
                                        Please Enter Pulse .
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Hypotension</label> <span style="color: red">*</span>
                                    <select class="custom-select" name="hypotension" id="hypotension" onchange="Hypotension(this.value)" required="">
                                        <option value="">Select Hypotension</option>
                                        <option value="yes">Yes</option>
                                        <option value="no">No</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please Select Hypotension.
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">BP <span style="color: red">*</span></label>
                                    <div class="input-group">
                                        <input class="form-control" value="" placeholder="Enter BP" type="number" id='bp' name='bp' required disabled="">
                                        <div class="input-group-append">
                                            <span class="input-group-text fs-xl">
                                                <i style="font-size: 13px"><b>mm Hg</b></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback">
                                        Please Enter BP .
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Chills</label> <span style="color: red">*</span>
                                    <select class="custom-select" name="chills" id="chills" onchange="Chills(this.value)" required="">
                                        <option value="">Select Chills</option>
                                        <option value="yes">Yes</option>
                                        <option value="no">No</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please Select Chills.
                                    </div>
                                </div>
                                <div class="col-md-8 mb-8">
                                    <label class="form-label">WBC <span style="color: red">*</span></label>
                                    <div class="input-group">
                                        <input class="form-control" value="" placeholder="Enter WBC " type="number" id='wbc' name='wbc' required disabled="">
                                        <div class="input-group-append">
                                            <span class="input-group-text fs-xl">
                                                <i style="font-size: 13px"><b>x 10<sup>9</sup> / L N%</b></i>
                                            </span>
                                        </div>
                                        <input class="form-control" value="" placeholder="Enter LN " type="number" id='ln' name='ln' required disabled="">
                                    </div>
                                    <div class="invalid-feedback">
                                        Please Enter WBP And LN % .
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Worsening CXR</label> <span style="color: red">*</span>
                                    <select class="custom-select" name="worsening_cxr" id="worsening_cxr" required="">
                                        <option value="">Select Worsening CXR</option>
                                        <option value="yes">Yes</option>
                                        <option value="no">No</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please Select Worsening CXR.
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Worsening Tracheal Secretions</label> <span style="color: red">*</span>
                                    <select class="custom-select" name="worsening_tracheal_secretions" id="worsening_tracheal_secretions" required="">
                                        <option value="">Select Worsening CXR</option>
                                        <option value="yes">Yes</option>
                                        <option value="no">No</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please Select Worsening Tracheal Secretions.
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                </div>
                                <div class="demo col-md-6 pull-right">
                                    <!-- <button id="prev_to_info" class="btn btn-primary btn-md float-right nav-link" data-toggle="tab" href="#js_pill_border_icon-3" role="tab"><i class="fas fa-angle-right" style="margin-right: 4px"></i> Prev</button> -->
                                    <button id="next_to_devices" class="btn btn-primary btn-md float-right nav-link" data-toggle="tab" href="#js_pill_border_icon-3" role="tab"><i class="fas fa-angle-right" style="margin-right: 4px"></i> Next</button>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="js_pill_border_icon-3" role="tabpanel">
                            <div id="content">
                                <!-- Intravenous Cannula -->
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div id="panel-1" class="panel">
                                            <div class="panel-container show">
                                                <div class="panel-content">

                                                    <div class="form-row">
                                                        <div class="col-md-4 mb-3">
                                                            <label class="form-label">Intravenous Cannula</label> <span style="color: red">*</span>
                                                            <select class="custom-select" name="intravenous_cannula" id="intravenous_cannula" onclick="Intravenous()" required="">
                                                                <option value="">Select Intravenous Cannula</option>
                                                                <option value="yes">Yes</option>
                                                                <option value="no">No</option>
                                                            </select>
                                                            <div class="invalid-feedback">
                                                                Please Select Intravenous Cannula.
                                                            </div>
                                                        </div>

                                                    </div>
                                                    <div id="demo" style="display: none">
                                                        <div class="form-row">
                                                            <div class="col-md-4 mb-3">
                                                                <label class="form-label">Date Of Inferieren <span style="color: red">*</span></label>
                                                                <div class="input-group">
                                                                    <input type="text" class="form-control" value="07/17/2020" id="datepicker-3">
                                                                    <div class="input-group-append">
                                                                        <span class="input-group-text fs-xl">
                                                                            <i class="fal fa-calendar-alt"></i>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                                <div class="invalid-feedback">
                                                                    Please Select Date Of Inferieren.
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 mb-3">
                                                                <label class="form-label">Sife <span style="color: red">*</span></label>
                                                                <input class="form-control" value="" placeholder="Enter sife" type="text" id='sife' name='sife' required>
                                                                <div class="invalid-feedback">
                                                                    Please Enter Sife.
                                                                </div>
                                                            </div>



                                                            <div class="col-md-4 mb-3">
                                                                <label class="form-label">Phlebitis </label> <span style="color: red">*</span>
                                                                <select class="custom-select" name="phlebitis" id="phlebitis" required="">
                                                                    <option value="">Select Phlebitis</option>
                                                                    <option value="yes">Yes</option>
                                                                    <option value="no">No</option>
                                                                </select>
                                                                <div class="invalid-feedback">
                                                                    Please Select Phlebitis.
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-row">
                                                            <div class="col-md-4 mb-3">
                                                                <label class="form-label">Culture Report </label> <span style="color: red">*</span>
                                                                <select class="custom-select" name="culture_report" id="culture_report" onclick="Culture()" required="">
                                                                    <option value="">Select Culture Report</option>
                                                                    <option value="yes">Yes</option>
                                                                    <option value="no">No</option>
                                                                </select>
                                                                <div class="invalid-feedback">
                                                                    Please Select Culture Report.
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div id="culture_div" style="display: none;">
                                                        <div class="col-md-12">
                                                            <div id="panel-3" class="">
                                                                <div class="panel-hdr">
                                                                    <h2>
                                                                        Culture Report
                                                                    </h2>
                                                                    <div id="dynamicCheck">
                                                                        <button type="button" class="btn btn-primary" onclick="createNewElement();"><i class="fas fa-plus" style="margin-right: 4px"></i>Add More Report</button>
                                                                    </div>
                                                                </div>
                                                                <div class="panel-container show">
                                                                    <div class="panel-content">
                                                                        <div id="newElementId">
                                                                            <div class="form-row">
                                                                                <div class="col-md-4 mb-3">
                                                                                    <label class="form-label">Date <span style="color: red">*</span></label>
                                                                                    <div class="input-group">
                                                                                        <input type="text" class="form-control" value="07/17/2020" id="datepicker">
                                                                                        <div class="input-group-append">
                                                                                            <span class="input-group-text fs-xl">
                                                                                                <i class="fal fa-calendar-alt"></i>
                                                                                            </span>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Select Date .
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-md-4 mb-3">
                                                                                    <label class="form-label">Source <span style="color: red">*</span></label>
                                                                                    <input class="form-control" value="" placeholder="Enter Source" type="text" id='source' name='source' required>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Enter Source.
                                                                                    </div>
                                                                                </div>



                                                                                <div class="col-md-3 mb-3">
                                                                                    <label class="form-label">Result </label> <span style="color: red">*</span>
                                                                                    <select class="custom-select" name="result" id="result" required="">
                                                                                        <option value="">Select result</option>
                                                                                        <option value="Positive">Positive</option>
                                                                                        <option value="Negative">Negative</option>
                                                                                    </select>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Select Result.
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>

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

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

                                <!-- Urinary Catheter -->
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div id="panel-1" class="panel">
                                            <div class="panel-container show">
                                                <div class="panel-content">

                                                    <div class="form-row">
                                                        <div class="col-md-4 mb-3">
                                                            <label class="form-label">Urinary Catheter</label> <span style="color: red">*</span>
                                                            <select class="custom-select" name="intravenous_cannula" id="intravenous_cannula" onclick="Intravenous()" required="">
                                                                <option value="">Select</option>
                                                                <option value="yes">Yes</option>
                                                                <option value="no">No</option>
                                                            </select>
                                                            <div class="invalid-feedback">
                                                                Please Select Intravenous Cannula.
                                                            </div>
                                                        </div>

                                                    </div>
                                                    <div>
                                                        <div class="form-row">
                                                            <div class="col-md-4 mb-3">
                                                                <label class="form-label">Date Of Insertion <span style="color: red">*</span></label>
                                                                <div class="input-group">
                                                                    <input type="text" class="form-control" value="07/17/2020" id="datepicker-3">
                                                                    <div class="input-group-append">
                                                                        <span class="input-group-text fs-xl">
                                                                            <i class="fal fa-calendar-alt"></i>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                                <div class="invalid-feedback">
                                                                    Please Select Date Of Inferieren.
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 mb-3">
                                                                <label class="form-label">Culture Report </label> <span style="color: red">*</span>
                                                                <select class="custom-select" name="culture_report" id="culture_report" onclick="Culture()" required="">
                                                                    <option value="">Select Culture Report</option>
                                                                    <option value="yes">Yes</option>
                                                                    <option value="no">No</option>
                                                                </select>
                                                                <div class="invalid-feedback">
                                                                    Please Select Culture Report.
                                                                </div>
                                                            </div>

                                                        </div>
                                                        <div class="form-row">

                                                        </div>
                                                    </div>

                                                    <div id="culture_div" style="display: none;">
                                                        <div class="col-md-12">
                                                            <div id="panel-3" class="">
                                                                <div class="panel-hdr">
                                                                    <h2>
                                                                        Culture Report
                                                                    </h2>
                                                                    <div id="dynamicCheck">
                                                                        <button type="button" class="btn btn-primary" onclick="createNewElement();"><i class="fas fa-plus" style="margin-right: 4px"></i>Add More Report</button>
                                                                    </div>
                                                                </div>
                                                                <div class="panel-container show">
                                                                    <div class="panel-content">
                                                                        <div id="newElementId">
                                                                            <div class="form-row">
                                                                                <div class="col-md-4 mb-3">
                                                                                    <label class="form-label">Date <span style="color: red">*</span></label>
                                                                                    <div class="input-group">
                                                                                        <input type="text" class="form-control" value="07/17/2020" id="datepicker">
                                                                                        <div class="input-group-append">
                                                                                            <span class="input-group-text fs-xl">
                                                                                                <i class="fal fa-calendar-alt"></i>
                                                                                            </span>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Select Date .
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-md-4 mb-3">
                                                                                    <label class="form-label">Source <span style="color: red">*</span></label>
                                                                                    <input class="form-control" value="" placeholder="Enter Source" type="text" id='source' name='source' required>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Enter Source.
                                                                                    </div>
                                                                                </div>



                                                                                <div class="col-md-3 mb-3">
                                                                                    <label class="form-label">Result </label> <span style="color: red">*</span>
                                                                                    <select class="custom-select" name="result" id="result" required="">
                                                                                        <option value="">Select result</option>
                                                                                        <option value="Positive">Positive</option>
                                                                                        <option value="Negative">Negative</option>
                                                                                    </select>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Select Result.
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>

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

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

                                <!-- Central Line -->
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div id="panel-1" class="panel">
                                            <div class="panel-container show">
                                                <div class="panel-content">

                                                    <div class="form-row">
                                                        <div class="col-md-4 mb-3">
                                                            <label class="form-label">Central Line</label> <span style="color: red">*</span>
                                                            <select class="custom-select" name="intravenous_cannula" id="intravenous_cannula" onclick="Intravenous()" required="">
                                                                <option value="">Select</option>
                                                                <option value="yes">Yes</option>
                                                                <option value="no">No</option>
                                                            </select>
                                                            <div class="invalid-feedback">
                                                                Please Select Intravenous Cannula.
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <label class="form-label">Tpye</label> <span style="color: red">*</span>
                                                            <select class="custom-select" name="intravenous_cannula" id="intravenous_cannula" onclick="Intravenous()" required="">
                                                                <option value="">Select</option>
                                                                <option value="CVP">CVP</option>
                                                                <option value="DICFD">Double Lumen catheter for dialysis</option>
                                                                <option value="hickman">Hickman</option>
                                                                <option value="jo-cath">Jo-cath</option>
                                                                <option value="perma-cath">Perma-cath</option>
                                                                <option value="single-lumen">Single Lumen</option>
                                                                <option value="double-lumen">Double Lumen</option>
                                                            </select>
                                                            <div class="invalid-feedback">
                                                                Please Select Intravenous Cannula.
                                                            </div>
                                                        </div>

                                                    </div>
                                                    <div>
                                                        <div class="form-row">
                                                            <div class="col-md-4 mb-3">
                                                                <label class="form-label">Date Of Insertion <span style="color: red">*</span></label>
                                                                <div class="input-group">
                                                                    <input type="text" class="form-control" value="07/17/2020" id="datepicker-3">
                                                                    <div class="input-group-append">
                                                                        <span class="input-group-text fs-xl">
                                                                            <i class="fal fa-calendar-alt"></i>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                                <div class="invalid-feedback">
                                                                    Please Select Date Of Inferieren.
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 mb-3">
                                                                <label class="form-label">Check <span style="color: red">*</span></label>

                                                                <div class="frame-wrap mb-0">
                                                                    <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                                                        <label class="btn btn-info active">
                                                                            <input type="radio" name="options" id="option1" checked="checked">CLABSI no
                                                                        </label>
                                                                        <label class="btn btn-info">
                                                                            <input type="radio" name="options" id="option2"> Suspected
                                                                        </label>
                                                                        <label class="btn btn-info">
                                                                            <input type="radio" name="options" id="option3"> Confirm
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>
                                                        <div class="form-row">
                                                            <div class="col-md-4 mb-3">
                                                                <label class="form-label">Culture Report </label> <span style="color: red">*</span>
                                                                <select class="custom-select" name="culture_report" id="culture_report" onclick="Culture()" required="">
                                                                    <option value="">Select Culture Report</option>
                                                                    <option value="yes">Yes</option>
                                                                    <option value="no">No</option>
                                                                </select>
                                                                <div class="invalid-feedback">
                                                                    Please Select Culture Report.
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div id="culture_div" style="display: none;">
                                                        <div class="col-md-12">
                                                            <div id="panel-3" class="">
                                                                <div class="panel-hdr">
                                                                    <h2>
                                                                        Culture Report
                                                                    </h2>
                                                                    <div id="dynamicCheck">
                                                                        <button type="button" class="btn btn-primary" onclick="createNewElement();"><i class="fas fa-plus" style="margin-right: 4px"></i>Add More Report</button>
                                                                    </div>
                                                                </div>
                                                                <div class="panel-container show">
                                                                    <div class="panel-content">
                                                                        <div id="newElementId">
                                                                            <div class="form-row">
                                                                                <div class="col-md-4 mb-3">
                                                                                    <label class="form-label">Date <span style="color: red">*</span></label>
                                                                                    <div class="input-group">
                                                                                        <input type="text" class="form-control" value="07/17/2020" id="datepicker">
                                                                                        <div class="input-group-append">
                                                                                            <span class="input-group-text fs-xl">
                                                                                                <i class="fal fa-calendar-alt"></i>
                                                                                            </span>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Select Date .
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-md-4 mb-3">
                                                                                    <label class="form-label">Source <span style="color: red">*</span></label>
                                                                                    <input class="form-control" value="" placeholder="Enter Source" type="text" id='source' name='source' required>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Enter Source.
                                                                                    </div>
                                                                                </div>



                                                                                <div class="col-md-3 mb-3">
                                                                                    <label class="form-label">Result </label> <span style="color: red">*</span>
                                                                                    <select class="custom-select" name="result" id="result" required="">
                                                                                        <option value="">Select result</option>
                                                                                        <option value="Positive">Positive</option>
                                                                                        <option value="Negative">Negative</option>
                                                                                    </select>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Select Result.
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>

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

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

                                <!-- New Respiratory Symtoms -->
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div id="panel-1" class="panel">
                                            <div class="panel-container show">
                                                <div class="panel-content">

                                                    <div class="form-row">
                                                        <div class="col-md-4 mb-3">
                                                            <label class="form-label">New Respiratory Symtoms</label> <span style="color: red">*</span>
                                                            <div class="frame-wrap mb-0">
                                                                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                                                    <label class="btn btn-info active">
                                                                        <input type="radio" name="options" id="option1" checked="checked">HAP no
                                                                    </label>
                                                                    <label class="btn btn-info">
                                                                        <input type="radio" name="options" id="option2"> Suspected
                                                                    </label>
                                                                    <label class="btn btn-info">
                                                                        <input type="radio" name="options" id="option3"> Confirm
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4 mb-3">
                                                            <label class="form-label">Culture Report </label> <span style="color: red">*</span>
                                                            <select class="custom-select" name="culture_report" id="culture_report" onclick="Culture()" required="">
                                                                <option value="">Select Culture Report</option>
                                                                <option value="yes">Yes</option>
                                                                <option value="no">No</option>
                                                            </select>
                                                            <div class="invalid-feedback">
                                                                Please Select Culture Report.
                                                            </div>
                                                        </div>

                                                    </div>
                                                    <div>
                                                        <div class="form-row">
                                                            <div class="col-md-4 mb-3">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div id="culture_div" style="display: none;">
                                                        <div class="col-md-12">
                                                            <div id="panel-3" class="">
                                                                <div class="panel-hdr">
                                                                    <h2>
                                                                        Culture Report
                                                                    </h2>
                                                                    <div id="dynamicCheck">
                                                                        <button type="button" class="btn btn-primary" onclick="createNewElement();"><i class="fas fa-plus" style="margin-right: 4px"></i>Add More Report</button>
                                                                    </div>
                                                                </div>
                                                                <div class="panel-container show">
                                                                    <div class="panel-content">
                                                                        <div id="newElementId">
                                                                            <div class="form-row">
                                                                                <div class="col-md-4 mb-3">
                                                                                    <label class="form-label">Date <span style="color: red">*</span></label>
                                                                                    <div class="input-group">
                                                                                        <input type="text" class="form-control" value="07/17/2020" id="datepicker">
                                                                                        <div class="input-group-append">
                                                                                            <span class="input-group-text fs-xl">
                                                                                                <i class="fal fa-calendar-alt"></i>
                                                                                            </span>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Select Date .
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-md-4 mb-3">
                                                                                    <label class="form-label">Source <span style="color: red">*</span></label>
                                                                                    <input class="form-control" value="" placeholder="Enter Source" type="text" id='source' name='source' required>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Enter Source.
                                                                                    </div>
                                                                                </div>



                                                                                <div class="col-md-3 mb-3">
                                                                                    <label class="form-label">Result </label> <span style="color: red">*</span>
                                                                                    <select class="custom-select" name="result" id="result" required="">
                                                                                        <option value="">Select result</option>
                                                                                        <option value="Positive">Positive</option>
                                                                                        <option value="Negative">Negative</option>
                                                                                    </select>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Select Result.
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>

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

                                <!-- Ventilator -->
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div id="panel-1" class="panel">
                                            <div class="panel-container show">
                                                <div class="panel-content">

                                                    <div class="form-row">
                                                        <div class="col-md-4 mb-3">
                                                            <label class="form-label">Ventilator</label> <span style="color: red">*</span>
                                                            <select class="custom-select" name="intravenous_cannula" id="intravenous_cannula" onclick="Intravenous()" required="">
                                                                <option value="">Select</option>
                                                                <option value="yes">Yes</option>
                                                                <option value="no">No</option>
                                                            </select>
                                                            <div class="invalid-feedback">
                                                                Please Select Intravenous Cannula.
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4 mb-3">
                                                            <label class="form-label">Check <span style="color: red">*</span></label>

                                                            <div class="frame-wrap mb-0">
                                                                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                                                    <label class="btn btn-info active">
                                                                        <input type="radio" name="options" id="option1" checked="checked">VAP no
                                                                    </label>
                                                                    <label class="btn btn-info">
                                                                        <input type="radio" name="options" id="option2"> Suspected
                                                                    </label>
                                                                    <label class="btn btn-info">
                                                                        <input type="radio" name="options" id="option3"> Confirm
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>


                                                    </div>
                                                    <div>
                                                        <div class="form-row">

                                                            <div class="col-md-4 mb-3">
                                                                <label class="form-label">Date Of Intubation <span style="color: red">*</span></label>
                                                                <div class="input-group">
                                                                    <input type="text" class="form-control" value="07/17/2020" id="datepicker-3">
                                                                    <div class="input-group-append">
                                                                        <span class="input-group-text fs-xl">
                                                                            <i class="fal fa-calendar-alt"></i>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                                <div class="invalid-feedback">
                                                                    Please Select Date Of Inferieren.
                                                                </div>
                                                            </div>



                                                            <div class="col-md-4 mb-3">
                                                                <label class="form-label">Date Of extubation <span style="color: red">*</span></label>
                                                                <div class="input-group">
                                                                    <input type="text" class="form-control" value="07/17/2020" id="datepicker-3">
                                                                    <div class="input-group-append">
                                                                        <span class="input-group-text fs-xl">
                                                                            <i class="fal fa-calendar-alt"></i>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                                <div class="invalid-feedback">
                                                                    Please Select Date Of Inferieren.
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-row">
                                                            <div class="col-md-4 mb-3">
                                                                <label class="form-label">Culture Report </label> <span style="color: red">*</span>
                                                                <select class="custom-select" name="culture_report" id="culture_report" onclick="Culture()" required="">
                                                                    <option value="">Select Culture Report</option>
                                                                    <option value="yes">Yes</option>
                                                                    <option value="no">No</option>
                                                                </select>
                                                                <div class="invalid-feedback">
                                                                    Please Select Culture Report.
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div id="culture_div" style="display: none;">
                                                        <div class="col-md-12">
                                                            <div id="panel-3" class="">
                                                                <div class="panel-hdr">
                                                                    <h2>
                                                                        Culture Report
                                                                    </h2>
                                                                    <div id="dynamicCheck">
                                                                        <button type="button" class="btn btn-primary" onclick="createNewElement();"><i class="fas fa-plus" style="margin-right: 4px"></i>Add More Report</button>
                                                                    </div>
                                                                </div>
                                                                <div class="panel-container show">
                                                                    <div class="panel-content">
                                                                        <div id="newElementId">
                                                                            <div class="form-row">
                                                                                <div class="col-md-4 mb-3">
                                                                                    <label class="form-label">Date <span style="color: red">*</span></label>
                                                                                    <div class="input-group">
                                                                                        <input type="text" class="form-control" value="07/17/2020" id="datepicker">
                                                                                        <div class="input-group-append">
                                                                                            <span class="input-group-text fs-xl">
                                                                                                <i class="fal fa-calendar-alt"></i>
                                                                                            </span>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Select Date .
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-md-4 mb-3">
                                                                                    <label class="form-label">Source <span style="color: red">*</span></label>
                                                                                    <input class="form-control" value="" placeholder="Enter Source" type="text" id='source' name='source' required>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Enter Source.
                                                                                    </div>
                                                                                </div>



                                                                                <div class="col-md-3 mb-3">
                                                                                    <label class="form-label">Result </label> <span style="color: red">*</span>
                                                                                    <select class="custom-select" name="result" id="result" required="">
                                                                                        <option value="">Select result</option>
                                                                                        <option value="Positive">Positive</option>
                                                                                        <option value="Negative">Negative</option>
                                                                                    </select>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Select Result.
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>

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

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

                                <!-- Surgery -->
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div id="panel-1" class="panel">
                                            <div class="panel-container show">
                                                <div class="panel-content">

                                                    <div class="form-row">
                                                        <div class="col-md-4 mb-3">
                                                            <label class="form-label">Surgery</label> <span style="color: red">*</span>
                                                            <select class="custom-select" name="intravenous_cannula" id="intravenous_cannula" onclick="Intravenous()" required="">
                                                                <option value="">Select</option>
                                                                <option value="yes">Yes</option>
                                                                <option value="no">No</option>
                                                            </select>
                                                            <div class="invalid-feedback">
                                                                Please Select Surgery
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4 mb-3">
                                                            <label class="form-label">Date Of Surgery <span style="color: red">*</span></label>
                                                            <div class="input-group">
                                                                <input type="text" class="form-control" value="07/17/2020" id="datepicker-3">
                                                                <div class="input-group-append">
                                                                    <span class="input-group-text fs-xl">
                                                                        <i class="fal fa-calendar-alt"></i>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                            <div class="invalid-feedback">
                                                                Please Select Date Of Inferieren.
                                                            </div>
                                                        </div>

                                                    </div>
                                                    <div>
                                                        <div class="form-row">
                                                            <div class="col-md-4 mb-3">
                                                                <label class="form-label">Check <span style="color: red">*</span></label>

                                                                <div class="frame-wrap mb-0">
                                                                    <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                                                        <label class="btn btn-info active">
                                                                            <input type="radio" name="options" id="option1" checked="checked">SSI no
                                                                        </label>
                                                                        <label class="btn btn-info">
                                                                            <input type="radio" name="options" id="option2"> Suspected
                                                                        </label>
                                                                        <label class="btn btn-info">
                                                                            <input type="radio" name="options" id="option3"> Confirm
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 mb-3">
                                                                <label class="form-label">Culture Report </label> <span style="color: red">*</span>
                                                                <select class="custom-select" name="culture_report" id="culture_report" onclick="Culture()" required="">
                                                                    <option value="">Select Culture Report</option>
                                                                    <option value="yes">Yes</option>
                                                                    <option value="no">No</option>
                                                                </select>
                                                                <div class="invalid-feedback">
                                                                    Please Select Culture Report.
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div id="culture_div" style="display: none;">
                                                        <div class="col-md-12">
                                                            <div id="panel-3" class="">
                                                                <div class="panel-hdr">
                                                                    <h2>
                                                                        Culture Report
                                                                    </h2>
                                                                    <div id="dynamicCheck">
                                                                        <button type="button" class="btn btn-primary" onclick="createNewElement();"><i class="fas fa-plus" style="margin-right: 4px"></i>Add More Report</button>
                                                                    </div>
                                                                </div>
                                                                <div class="panel-container show">
                                                                    <div class="panel-content">
                                                                        <div id="newElementId">
                                                                            <div class="form-row">
                                                                                <div class="col-md-4 mb-3">
                                                                                    <label class="form-label">Date <span style="color: red">*</span></label>
                                                                                    <div class="input-group">
                                                                                        <input type="text" class="form-control" value="07/17/2020" id="datepicker">
                                                                                        <div class="input-group-append">
                                                                                            <span class="input-group-text fs-xl">
                                                                                                <i class="fal fa-calendar-alt"></i>
                                                                                            </span>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Select Date .
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-md-4 mb-3">
                                                                                    <label class="form-label">Source <span style="color: red">*</span></label>
                                                                                    <input class="form-control" value="" placeholder="Enter Source" type="text" id='source' name='source' required>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Enter Source.
                                                                                    </div>
                                                                                </div>



                                                                                <div class="col-md-3 mb-3">
                                                                                    <label class="form-label">Result </label> <span style="color: red">*</span>
                                                                                    <select class="custom-select" name="result" id="result" required="">
                                                                                        <option value="">Select result</option>
                                                                                        <option value="Positive">Positive</option>
                                                                                        <option value="Negative">Negative</option>
                                                                                    </select>
                                                                                    <div class="invalid-feedback">
                                                                                        Please Select Result.
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>

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

                                <!-- Submit -->
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div id="panel-1" class="panel">
                                            <div class="panel-container show">
                                                <div class="panel-content">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                        </div>
                                                        <div class="demo col-md-6 pull-right">
                                                            <button id="jsbtn" class="btn btn-primary btn-md float-right" type="button" onclick=""><i class="fas fa-plus" style="margin-right: 4px"></i> Submit</button>
                                                            <button class="btn btn-primary btn-md float-right reset-btn" type="button" onclick=""><i class="fas fa-times-circle" style="margin-right: 4px"></i>Cancel</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
        </form>
    </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> <!-- END Page Content -->


<script>
    function Fever(fever) {
        if (fever == 'yes') {
            document.getElementById("temperature").disabled = false;
        } else {
            document.getElementById("temperature").disabled = true;
        }

    }

    function Tachycardia(tachycardia) {
        if (tachycardia == 'yes') {
            document.getElementById("pulse").disabled = false;
        } else {
            document.getElementById("pulse").disabled = true;
        }

    }

    function Hypotension(hypotension) {
        if (hypotension == 'yes') {
            document.getElementById("bp").disabled = false;
        } else {
            document.getElementById("bp").disabled = true;
        }

    }

    function Chills(chills) {
        if (chills == 'yes') {
            document.getElementById("wbc").disabled = false;
            document.getElementById("ln").disabled = false;
        } else {
            document.getElementById("wbc").disabled = true;
            document.getElementById("ln").disabled = true;

        }

    }

    function ValidateFrom() {
        // Name=document.getElementById('names').value;
        // if(Name=="")
        // {
        //     document.getElementById('names').style.borderColor = "red";
        //     $("#names").focus();
        //     return false;

        // }

        a = document.getElementById('next_to_other_info');
        a.href = '#js_pill_border_icon-2';

        return true;
    }

    function Intravenous() {
        var x = document.getElementById("intravenous_cannula").value;
        if (x == 'yes') {
            var show = document.getElementById("demo");
            show.style.display = "block";
        } else {
            var show = document.getElementById("demo");
            show.style.display = "none"
        }

    }

    function Culture() {
        var x = document.getElementById("culture_report").value;
        if (x == 'yes') {
            var show = document.getElementById("culture_div");
            show.style.display = "block";
        } else {
            var show = document.getElementById("culture_div");
            show.style.display = "none"
        }

    }


    var count = 0;

    function createNewElement() {
        count++;
        var txtNewInputBox = document.createElement('div');

        txtNewInputBox.innerHTML = '<div class="" id="remove' + count + '" ><div class="form-row"><div class="col-md-4 mb-3"><label>Date #' + count + '</label><div class="input-group"><input type="text" class="form-control" value="07/17/2020" id="date_' + count + '" name="date[]" ><div class="input-group-append"><span class="input-group-text fs-xl"><i class="fal fa-calendar-alt"></i></span></div></div><div class="invalid-feedback"> Please Select Date .</div></div><div class="col-md-4 mb-3"><label class="form-label" >Source #' + count + '</label><input class="form-control" value="" placeholder="Enter Source" type="text" id="source' + count + '" name="source[]" required><div class="invalid-feedback">Please Enter Source.</div></div>  <div class="col-md-3 mb-3"> <label class="form-label">Result #' + count + ' </label><select class="custom-select" name="result[]" id="result' + count + '" required=""><option value="">Select result</option><option value="Positive">Positive</option><option value="Negative">Negative</option></select><div class="invalid-feedback">Please Select Result.</div></div> <div class="col-md-1" style="margin-top: 23px"><button class="btn btn-danger"  onclick="delrows(' + count + ');" type="button" ><i class="fal fa-times"></i></button></div></div></div>';

        document.getElementById("newElementId").appendChild(txtNewInputBox);

        $('input[name="date[]"]').each(function(index) {

            var i = index + 1;

            $('#date_' + i).daterangepicker({

                singleDatePicker: true,
                showDropdowns: true
            });
            console.log('date_' + i);

        });

    }

    function delrows(count) {
        if (confirm("Are you sure you want to Delete?")) {
            var el = count;
            $('#remove' + el).remove();
        }

    }

    $(document).ready(function() {

        $('#date_of_surgery').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true
        });

        $('#date_of_intubation').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true
        });

        $('#date_of_central_line_insertion').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true
        });
        $('#date_of_cannula_insertion').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true
        });
        $('#date_of_urinary_catheter_insertion').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true
        });
        $('#date_of_admission').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true
        });

        $('#datepicker').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true
        });

        $('#datepicker-3').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true
        });

        $(".reset-btn").click(function() {
            $("#infectionform").trigger("reset");
        });

        $('.nav-tabs a').removeClass('active');
        $('.nav-tabs a[href="#js_pill_border_icon-1"]').tab('show');
    });

    $('#next_to_other_info').click(function(e) {
        e.preventDefault();
        $('.nav-tabs a[href="#js_pill_border_icon-2"]').removeClass('disabled');
        $('.nav-tabs a[href="#js_pill_border_icon-2"]').tab('show');
    });

    $('#next_to_devices').click(function(e) {
        e.preventDefault();
        $('.nav-tabs a[href="#js_pill_border_icon-3"]').removeClass('disabled');
        $('.nav-tabs a[href="#js_pill_border_icon-3"]').tab('show');
    });

    $('#prev_to_info').click(function(e) {
        e.preventDefault();
        $('.nav-tabs a[href="#js_pill_border_icon-1"]').tab('show');
    });
</script>