<?php
include 'inc/rombakheader.php';
date_default_timezone_set('America/Chicago');
date_default_timezone_set('UTC-6');
//cek lv.user yang dibolehkan untuk akses halaman
Session::CheckSession();
// If no session variable exists, or unauthorized user_level, redirect the user:
  if (isset($_SESSION['id']))
  {
  // if a valid user session is found then the user level is checked, if the
  // user has level 3 access they will be granted access if not a access denied
  //message be displayed and the user will be redirected.
	 if ($_SESSION['roleid'] <= 3) {}

  else
  {
	header("Refresh: 1; url=403/index.php");
	exit(); // Quit the script.
  }  
  }
  // if no valid session is found then the user is not logged in and will
  // receive a access denied message and will be redirected to the login page.
  else if (!isset($_SESSION['user_id'])) {

  header("Refresh: 3; url=login.php");
  echo '<h3>Access Denied!! - You do not have permission to access this page!</h3>';
  echo '<p>You will be redirected in 3 seconds</p>';
  include ('403/index.html');
  exit(); // Quit the script.
  }  
//end logika untuk lv user

$logMsg = Session::get('logMsg');
if (isset($logMsg)) {
  echo $logMsg;
}
$msg = Session::get('msg');
if (isset($msg)) {
  echo $msg;
}
Session::set("msg", NULL);
Session::set("logMsg", NULL);
?>
<style>
    .btn-outline-force{
        border-color: #32ABE2;
    color: #32ABE2;
    background-color: transparent;
    }
    .btn-outline-force:hover{
        border-color: #32ABE2;
    color: white;
    background-color: #32ABE2;
    }
    .badge-force{
        background-color:#32ABE2;
    }
    .form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe !important;
    outline: 0 !important;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.25) !important;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.25) !important;
}
.forceteknologi-ear, .forceteknologi-skins, .forceteknologi-mouth, .forceteknologi-ekg{
    background-color:transparent !important;
}
.forceteknologi-ear:before, .forceteknologi-ear::before{
    content:"";
    display: inline-block;
    background-image: url(https://providerondemandapp.com/assets/images/pod/exam-ear.png);
    background-size: 45px;
    background-repeat: no-repeat;
    width: 45.8px;
    height: 54.33px;
    padding: 0px;
    margin: 0px;
    vertical-align: middle;
}
.forceteknologi-skins:before, .forceteknologi-skins::before{
    content:"";
    display: inline-block;
    background-image: url(https://providerondemandapp.com/assets/images/pod/exam-skin.png);
    background-size: 45px;
    background-repeat: no-repeat;
    width: 45.8px;
    height: 54.33px;
    padding: 0px;
    margin: 0px;
    vertical-align: middle;
}
.forceteknologi-mouth:before, .forceteknologi-mouth::before{
    content:"";
    display: inline-block;
    background-image: url(https://providerondemandapp.com/assets/images/pod/exam-mouth.png);
    background-size: 45px;
    background-repeat: no-repeat;
    width: 45.8px;
    height: 54.33px;
    padding: 0px;
    margin: 0px;
    vertical-align: middle;
}
.forceteknologi-ekg:before, .forceteknologi-ekg::before{
    content:"";
    display: inline-block;
    background-image: url(https://providerondemandapp.com/assets/images/pod/exam-ekg.png);
    background-size: 45px;
    background-repeat: no-repeat;
    width: 45.8px;
    height: 54.33px;
    padding: 0px;
    margin: 0px;
    vertical-align: middle;
}
.forceteknologi-eye:before, .forceteknologi-eye::before{
    content:"";
    display: inline-block;
    background-image: url(https://providerondemandapp.com/assets/images/pod/exam-eye.png);
    background-size: 45px;
    background-repeat: no-repeat;
    width: 45.8px;
    height: 54.33px;
    padding: 0px;
    margin: 0px;
    vertical-align: middle;
}
.forceteknologi-favicon:before, .forceteknologi-favicon::before{
    content:"";
    display: inline-block;
    background-image: url(https://providerondemandapp.com/assets/images/pod/favicon-scaled.png);
    background-size: 45px;
    background-repeat: no-repeat;
    width: 45.8px;
    height: 54.33px;
    padding: 0px;
    margin: 0px;
    vertical-align: middle;
}
#medactivity{
    height:100vh !important;
}
#multiform{
    display: flex;
    align-content: center;
    align-items: center;
    height: 100vh;
}
#multiform .form-step .wizard-title{
    width:100% !important;
    top:27px;
    position:absolute;
}
#forcetitle{
    display:none;
}
#forcetitle.show{
    display:block !important;
}
#med-prev, #med-next, #med-submit{
    padding: 1.125rem 3.525rem !important;
}
#page-number{
    font-size: 16px !important;
}
</style>
<!-- Body Page-->
<div class="container-fluid">
    <div class="row"><div class="humbergerwawai" id="humbergerwawai"><i class="status_toggle middle sidebar-toggle" data-feather="grid"></i></div>       
    <div>
        <div class="col-12 p-0">
            <div class="wizard-4" id="wizard">
                <div class="tabglob" id="tabglob"><!-- Pagination -->
                    <div class="tabtools">
                        <div style="margin-left: 6.7em;"><i class="forceteknologi-favicon"></i></div>
                        <ul>
                            <li class="backhome"><a class="text-dark" href="/mPanel"><i data-feather="home"></i></a></li>
                            <li class="maximize"><a class="text-dark" href="#!" onclick="javascript:toggleFullScreen()"><i data-feather="maximize"></i></a></li>
                            <li class="refreshhedmed"><a class="text-dark" href="#!"><i data-feather="rotate-cw"></i></a></li>
                        </ul>
                    </div>
                    <div class="tabtoolsnav">
                        <ul id="wawaimedtab" class="pagination wawaimedtab anchor">
                            <li id="page-1" class="page-item active">
                                <a class="page-item-link" id="page1lftnm" href="#">
                                <h4>1</h4>
                                <h5>Log In</h5><small>Start Session</small>
                                </a>
                            </li>
                            <li id="page-2" class="page-item">
                                <a class="page-item-link" id="page2lftnm" href="#" onclick="gotoStep(2)">
                                <h4>2</h4>
                                <h5>Demographics</h5><small>Add personal details</small>
                                </a>
                            </li>
                            <li id="page-3" class="page-item">
                                <a class="page-item-link" id="page3lftnm" href="#" onclick="gotoStep(3)">
                                <h4>3</h4>
                                <h5>Chief Complaint</h5><small>Add additional info</small>
                                </a>
                            </li>
                            <li id="page-4" class="page-item">
                                <a class="page-item-link" id="page4lftnm" href="#" onclick="gotoStep(4)">
                                <h4>4</h4>
                                <h5>Vitals</h5><small>Tests</small>
                                </a>
                            </li>
                            <li id="page-5" class="page-item">
                                <a class="page-item-link" id="page5lftnm" href="#" onclick="gotoStep(5)">
                                <h4>5</h4>
                                <h5>Exam & Testing&nbsp;<i class="fa fa-thumbs-up"></i></h5><small>Complete.. !</small>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div id="medactivity" class="step-container medical-card">
                    <!-- Form -->
                    <form id="multiform" method="post" action="form.php" enctype="multipart/form-data">
                        <!-- Start Step 1-->
                        <div id="step-1" class="form-step content">
                            <div class="wizard-title">
                                <h2 style="text-align:center;">Log In</h2>
                                <h5 class="text-muted mb-4">&nbsp;</h5>
                            </div>
                            <div class="login-main">
                                <div class="theme-form">
                                    <div class="form-group mb-3">
                                        <label for="branchid">Location</label>
                                        <input class="form-control" id="branchname" name="branchname" type="text" value="<?php echo $_SESSION['podname']; ?>" required readonly>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="branchid">Patient Care Specialist</label>
                                        <input class="form-control" id="branchid" name="branchid" type="text" value="<?php echo $_SESSION['name']; ?>" required readonly>
                                    </div>
                                    <div class="form-group mb-3" style="display:none;">
                                        <label for="patientid">Patient ID</label>
                                        <input class="form-control" id="patientid" name="patientid" type="text" value="<?php $rpasien= rand(10, 50000); $rid = date("Ymd"); echo $rid,$rpasien; ?>" required readonly>
                                    </div>
                                    <div class="form-group mb-3" style="display:none;">
                                        <label for="recordid">Record ID</label>
                                        <input class="form-control" id="recordid" name="recordid" type="text" value="<?php $randnumb= mt_rand(pow(10,(5-1)),pow(10,5)-1); $rid = date("Ymd"); echo $rid,$randnumb; ?>" required readonly>
                                    </div>
                                    <div class="form-group mb-3" style="display:none;">
                                        <label for="doctor">Doctor</label>
                                        <input class="form-control" id="doctorpermis" name="doctorpermis" type="text" value="All" required readonly>
                                    </div>
                                    <div class="form-group mb-3">
                                        <div class="form-check checkbox checkbox-primary mb-0">
                                            <br>
                                            <input class="form-check-input" id="launchappcheck" type="checkbox">
                                            <label class="form-check-label" for="launchappcheck"><small>The above information is correct</small></label>
                                            <button class="btn btn-outline-primary btn-sm" id="launchapp" type="submit">Begin Patient Ecounter</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Start Step 2-->
                        <div id="step-2" class="form-step content active">
                            <div class="wizard-title">
                                <h2 style="text-align:center;">Patient Information</h2>
                                <h5 class="text-muted mb-4">&nbsp;</h5>
                            </div>
                            <div class="login-main">
                                <div class="theme-form">
                                    <div class="form-group mb-3">
                                        <label for="name">First Name</label>
                                        <input class="form-control" id="fname" name="fname" type="text" required>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="lname">Last Name</label>
                                        <input class="form-control" id="lname" name="lname" type="text">
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="pdob">Date of Birth</label>
                                        <input name="pdob" id="pdob" class="form-control digits" type="date" required>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="psex">Sex</label>
                                        <select name="psex" id="psex" class="form-select form-control-primary" required>
                                                    <option value="Male">Male</option>
                                                    <option value="Female">Female</option>
                                                    </select>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="contact">Phone Number</label>
                                        <input class="form-control" id="pcontact" name="pcontact" type="number">
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="address">Address</label>
                                        <input class="form-control" id="address" name="address" type="text" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Start Step 2-->
                        <div id="step-3" class="form-step content">
                            <div class="wizard-title">
                                <h2  style="text-align:center;">Chief Complaint</h2>
                                <h5 class="text-muted mb-4">&nbsp;</h5>
                            </div>
                            <div class="login-main">
                                <div class="theme-form">
                                    <div class="form-group mb-3 m-t-15">
                                        <label for="chiefcomplaint">Text</label>
                                        <textarea id="chiefcomplaint" name="chiefcomplaint" class="form-control" rows="11" cols="11" required></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Start Step 3-->
                        <div id="step-4" class="form-step content">
                            <div class="wizard-title">
                                <h2  style="text-align:center;">Vital Signs</h2>
                                <h5 class="text-muted mb-4">&nbsp;</h5>
                            </div>
                            <div class="login-main">
                                <div class="theme-form">
                                    <div class="mb-3 row">
                                        <label class="col-sm-3 col-form-label" for="vhg">Height (in)</label>
                                            <div class="col-sm-9">
                                            <input name="vhg" id="vhg" class="form-control mt-1" type="text" required>
                                            </div>
                                    </div>
                                     <div class="mb-3 row">
                                        <label class="col-sm-3 col-form-label" for="vweight">Weight (lbs)</label>
                                            <div class="col-sm-9">
                                            <input name="vweight" id="vweight" class="form-control mt-1" type="text" required>
                                            </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label class="col-sm-3 col-form-label" for="vtemp">Temperature (F)</label>
                                            <div class="col-sm-9">
                                            <input name="vtemp" id="vtemp" class="form-control mt-1" type="text" required>
                                            </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label class="col-sm-3 col-form-label" for="vbp">Blood Pressure (BP)</label>
                                            <div class="col-sm-9">
                                            <input name="vbp" id="vbp" class="form-control digits" type="text" required>
                                            </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label class="col-sm-3 col-form-label" for="vhr">Heart Rate </label>
                                            <div class="col-sm-9">
                                            <input name="vhr" id="vhr" class="form-control mt-1" type="text" required>
                                            </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label class="col-sm-3 col-form-label" for="vresp">Respiratory Rate</label>
                                            <div class="col-sm-9">
                                            <input name="vresp" id="vresp" class="form-control mt-1" type="text" required>
                                            </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label class="col-sm-3 col-form-label" for="vsot">Oxygen Saturation</label>
                                            <div class="col-sm-9">
                                                <input name="vsot" id="vsot" class="form-control mt-1" type="text" required>
                                            </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Start Step 5-->
                        <div id="step-5" class="form-step content">
                            <div class="wizard-title">
                                <h2  style="text-align:center;">Exam & Testing&nbsp;</h2>                     
                                <h5 class="text-muted mb-4">&nbsp;</h5>
                            </div>
                            <div class="login-main" style="background-color:transparent !important; box-shadow:none !important; -webkit-box-shadow:none !important;position:absolute;top:10em;">
                                <div class="theme-form">
                                    <div class="row">
                                        <!-- Start Step 5 Controller-->
                                        <div class="col-sm-4 col-md-2" id="left-controller">
                                            <div class="meddevice-controller">
                                                <div class="humbergerexam" id="humbergerexam">
                                                    <i class="status_toggle middle sidebar-toggle" data-feather="radio"></i>
                                                </div><br>
                                                <select id="video-source"></select><br>
                                                <select id="audio-source" onchange="changeMicrophone(this.value)"></select>
                                            </div>
                                            <div class="card" id="left-controller-card">
                                                <div class="form-group mb-3 examgroup">
                                                    <label class="control-label">Exam Picture</label><br>
                                                    <span id="exam_ear" class="pict"><a href="#" class="btn" title="Ear"><i class="forceteknologi-ear"></i></a></span>
                                                    <span id="exam_skin" class="pict"><a href="#" class="btn" title="Skin"><i class="forceteknologi-skins"></i></a></span><br>
                                                    <span id="exam_mouth" class="pict"><a href="#" class="btn" title="Mouth"><i class="forceteknologi-mouth"></i></a></span>
                                                    <span id="exam_eye" class="pict"><a href="#" class="btn" title="Eye"><i class="forceteknologi-eye"></i></a></span>
                                                    <span id="exam_EKG" class="pict"><a href="#" class="btn" title="EKG"><i class="forceteknologi-ekg"></i></a></span>
                                                </div>
                                                <div class="form-group mb-3 examgroup">
                                                    <label class="control-label">Exam Audio</label><br>
                                                    <span id="exam_hearth" class="pict"><a href="#" class="btn" title="Heart Beat"><i class="icofont icofont-heartbeat"></i></a></span>
                                                    <span id="exam_lung" class="pict"><a href="#" class="btn" title="Lung"><i class="icofont icofont-lungs"></i></a></span>
                                                </div>
                                                <div class="form-group mb-3 testsgroup">
                                                    <label class="control-label">Rapid Test Results</label><br>
                                                        <div class="maintestsgroup">
                                                            <span id="tests_flu"  class="pict"><a href="#" class="btn">Flu</a></span>
                                                            <span id="tests_rsv" class="pict"><a href="#" class="btn">RSV</a></span>
                                                            <span id="tests_glucose" class="pict"><a href="#" class="btn">Glucose</a></span>
                                                            <span id="tests_covid" class="pict"><a href="#" class="btn">COVID</a></span>
                                                            <span id="tests_wono" class="pict"><a href="#" class="btn">Mono</a></span>
                                                            <span id="tests_ecg" class="pict"><a href="#" class="btn">Hcg</a></span>
                                                            <span id="tests_ua" class="pict"><a href="#" class="btn">UA</a></span>
                                                            <span id="tests_strep" class="pict"><a href="#" class="btn">Strep</a></span>
                                                            <!--<span id="tests_upreg" class="pict"><a href="#" class="btn">UPREG</a></span> -->
                                                            <span id="tests_hpybri" class="pict"><a href="#" class="btn">H. Pylori</a></span>
                                                        </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End Step 5 FormController-->
                                        <!-- Start Step 5 Data Form-->
                                        <div class="col-sm-12">
                                            <div class="card card-absolute">
                                                <div class="card-header bg-primary" id="forcetitle">
                                                    <h5 class="text-white" id="med-device-name">Please Select Device</h5>
                                                </div>
                                                <div class="card-body" id="card-body-cam">
                                                    <!-- <video class="main-video-exam" onclick="captureSnapshot()" autoplay="true" id="cam_exam_ear" muted autoplay></video> -->
                                                    <video class="tombol-simpan main-video-exam" autoplay="true" id="medical_camera" muted autoplay></video>
                                                    <br>
                                                    <button class="tombol-simpan btn btn-outline-primary btn-sm" id="captureit" type="submit">Take Snapshot</button>
                                                    <div id="data">
                                                    </div>
                                                    <!-- <button class="btn btn-primary btn-sm icon-camera" id="captureBtn" data-bs-original-title="Snapshoot"></button>
                                                    <button class="btn btn-primary btn-sm icon-cloud-up" id="uploadBtn" data-bs-original-title="Upload"></button>
                                                    
                                                    <div id="snapshotContainer"></div>    -->
                                                </div>
                                                <div class="card-body" id="card-body-audio-hb">
                                                    <!--<audio id="audiohb" controls></audio>--><br>
                                                     <!-- Counter for recording duration -->
                                                    <div id="forcewave" style="display:none;">
                                                        <ul class="forcewavebody">
                                                          <li></li>
                                                          <li></li>
                                                          <li></li>
                                                          <li></li>
                                                          <li></li>
                                                          <li></li>
                                                          <li></li>
                                                          <li></li>
                                                          <li></li>
                                                          <li></li>
                                                        </ul>
                                                    </div>
                                                    <div id="secondsCounter">0s</div>
                                                    <button id="audiohbstart" class="btn btn-outline-primary btn-sm" type="button" onclick="startRecording()">Start Recording</button>
                                                    <button id="audiohbstop" class="btn btn-outline-primary btn-sm" type="button" onclick="stopRecording()">Stop Recording</button>
                                                   
                                                    <!-- Show results -->
                                                    <div id="audioPlayerContainer">
                                                        
                                                    </div>
                                                    <div id="showallaudio">
                                                        
                                                    </div>   
                                                </div>
                                                
                                                <div class="card-footer device-names" style="display:none;">
                                                    <input id="checkdevice" name="checkdevice" class="form-control digits" type="text" value="No" readonly required>
                                                    <input id="final" name="final" class="form-control digits" type="text" value="Yes" readonly required>
                                                    <input id="startoncall" name="startoncall" class="form-control digits" type="text" value="Ready" readonly required>
                                                </div>
                                            </div>
                                        </div><!-- End Step 5 Data Form-->
                                    </div>
                                </div>
                            </div>
                        </div><!-- End Step 5-->
                    </form><!-- End Multiple Form-->
                </div><!-- End medical-card-->
            </div><!-- End Wizard-->
            <div class="form-navigation mt-4" id="page-lists"><!-- Navigation buttons -->
                <button id="med-prev" type="button" class="btn btn-primary" onclick="prevStep()">Previous</button>
                <span id="page-number" class="mx-3">Step 1 of 5</span>
                <button id="med-next" style="display:none" type="button" class="btn btn-primary" onclick="nextStep()">Next</button>
                <button id="med-submit" type="button" class="btn btn-success" onclick="validateForm()">Submit</button>
            </div>
        </div><!-- End Column 12-->
    </div>
</div><!-- End Container Fluid-->


<!-- End Page-->
  <?php
  include 'inc/rombakfooter.php';

  ?>
