      <!--////////////////// PreLoader Start//////////////////////-->
      <div class="loader">
        <!--Placeholder animated layout for preloader-->
        <div class="d-flex flex-column flex-root">
          <div class="page d-flex flex-row flex-column-fluid">

            <!--Sidebar start-->
            <aside class="page-sidebar aside-dark placeholder-wave">
              <div class="placeholder col-12 h-100 bg-gray"></div>
            </aside>
            <div class="page-content d-flex flex-column flex-row-fluid">
              <div
                class="content flex-column p-4 pb-0 d-flex justify-content-center align-items-center flex-column-fluid position-relative">
                <div class="w-100 h-100 position-relative d-flex align-items-center justify-content-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-loader spinner-grow  me-2"><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/></svg>
                <div>
                  <span>Loading...</span>
                </div>
              </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--////////////////// /.PreLoader END//////////////////////-->


    <div class="d-flex flex-column flex-root">
      <!--Page-->
      <div class="page d-flex flex-row flex-column-fluid">


        <!--///////////Page sidebar begin///////////////-->
        <aside class="page-sidebar">
          <div class="h-100 flex-column d-flex justify-content-start">

            <!--Aside-logo-->
            <div class="aside-logo d-flex align-items-center flex-shrink-0 justify-content-start px-5 position-relative">
              <a href="index.html" class="d-block">
                <div class="d-flex align-items-center flex-no-wrap text-truncate">
                  <!--Sidebar-icon-->
                  <span class="sidebar-icon fs-5 lh-1fw-bold"><img src="<?php echo BASEURL; ?>images/favicon/aptech-logo_128.png" style="width: 36px;"></span>
                  <span class="sidebar-text">
                    <!--Sidebar-text-->
                    <span class="sidebar-text text-truncate fs-4 ms-3 fw-bolder">
                      AP Tech
                    </span>
                  </span>
                </div>
              </a>
            </div>
            <!--Aside-Menu-->
            <div class="aside-menu px-3 my-auto" data-simplebar>
              <nav class="flex-grow-1 h-100" id="page-navbar">
                <!--:Sidebar nav-->
                <ul class="nav flex-column collapse-group collapse d-flex">
                  <?php
                  $sql="SELECT nama_lokasi,nama_alat,id_merk,id_tipe,CURDATE(),ReceivedDate,DATEDIFF(current_date(),ReceivedDate) AS hr,icon FROM m_lokasi WHERE 1=1 AND  status_lokasi=1 AND id_bbws=".$_SESSION['id_bbws']." ORDER BY id_tipe DESC, ReceivedDate Desc, ReceivedTime Desc ";

                  $query2 = mysql_query($sql);
                  $countPDA = 0;
                  $countPCH = 0;
                  $countAll = 0;
                  while ($row=mysql_fetch_array($query2)){
                    if($row['id_tipe'] == 'PDA'){
                      $countPDA++;
                    }else if($row['id_tipe'] == 'PCH'){
                      $countPCH++;
                    }
                    $countAll++;
                  }
                  ?>
                  <li class="nav-item sidebar-title text-truncate opacity-50 small">
                    <select class="form-select" aria-label="" id="filter-typemenu" name="filter-typemenu" onChange="updateList(this.value)">
                        <option value="0">All Type (<?php echo $countAll; ?>)</option>
                        <option value="PDA">PDA (<?php echo $countPDA; ?>)</option>
                        <option value="PCH">PCH (<?php echo $countPCH; ?>)</option>
                    </select>
                  </li>
                  <?php
                  $query = mysql_query($sql);
                  $i=0;
                  
                  $tanggal= mktime(0,0,0,date('m'),date('d'),date('Y'));
                  $hariini = date("Y-m-d", $tanggal);
                  //var_dump($_SESSION);
                  while ($row_detdata=mysql_fetch_array($query)){
                    $i++;
                    if($row_detdata['icon']=="normal" || $row_detdata['icon']=="siaga4"){ 
                          $sts="style='background-image:url(images/icons/PDAOnlineS3.png); background-repeat:no-repeat; padding-left:18px;'";
                          $sts_icon="PDAOnlineS3.png";
                    } else if($row_detdata['icon']=="siaga3"){ 
                          $sts="style='background-image:url(images/icons/PDAOnlineS4.png); background-repeat:no-repeat; padding-left:18px;'";
                          $sts_icon="PDAOnlineS4.png";
                    } else if($row_detdata['icon']=="siaga2"){ 
                          $sts="style='background-image:url(images/icons/PDAOnlineS2.png); background-repeat:no-repeat; padding-left:18px;'";
                          $sts_icon="PDAOnlineS2.png";
                    } else if($row_detdata['icon']=="siaga1"){ 
                          $sts="style='background-image:url(images/icons/PDAOnlineS1.png); background-repeat:no-repeat; padding-left:18px;'";
                          $sts_icon="PDAOnlineS1.png";
                    } else {
                          $sts="style='background-image:url(images/icon_online.png); background-repeat:no-repeat; padding-left:18px;'";       
                          $sts_icon="icon_online.png";
                    } 
                  ?>
                  <li class="nav-item loc-<?php echo strtolower($row_detdata['id_tipe']);?>">
                    <a href="<?php echo BASEURL; ?>home.php?page=datapos&pos=<?php echo $row_detdata['nama_lokasi']; ?>&tpos=<?php echo $row_detdata['id_tipe']; ?>" class="nav-link d-flex align-items-center text-truncate">
                      <span class="sidebar-icon" >
                        <i data-feather="radio" class="fe-1x text-success"></i>
                        <!--i class="fs-2 text-success d-block mb-3 bi bi-droplet-fill" style="font-size: 1.5rem;"></i-->
                        <!--img src="<?php echo BASEURL; ?>images/icons/<?php echo $sts_icon; ?>" height="20px" style="height: 20px;"-->
                        
                      </span>
                      <!--Sidebar nav text-->
                      <span class="sidebar-text">[<?php echo $row_detdata['id_tipe'];?>] <?php echo $row_detdata['nama_alat'];?></span>
                    </a>
                  </li>
                  <?php } ?>  
                  
                </ul>
              </nav>
            </div>
            <!--Aside-footer-->
            <!--footer class="aside-footer position-relative p-3">
              <div class="p-3 bg-body shadow-lg text-body rounded-3 position-relative overflow-hidden">
                <svg style="transform: rotate(-180deg);" preserveAspectRatio="none" class="position-absolute text-white start-0 bottom-0 w-100" fill="currentColor" height="35%" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
                  <path d="M0 0v46.29c47.79 22.2 103.59 32.17 158 28 70.36-5.37 136.33-33.31 206.8-37.5 73.84-4.36 147.54 16.88 218.2 35.26 69.27 18 138.3 24.88 209.4 13.08 36.15-6 69.85-17.84 104.45-29.34C989.49 25 1113-14.29 1200 52.47V0z" opacity=".1"></path>
                  <path d="M0 0v15.81c13 21.11 27.64 41.05 47.69 56.24C99.41 111.27 165 111 224.58 91.58c31.15-10.15 60.09-26.07 89.67-39.8 40.92-19 84.73-46 130.83-49.67 36.26-2.85 70.9 9.42 98.6 31.56 31.77 25.39 62.32 62 103.63 73 40.44 10.79 81.35-6.69 119.13-24.28s75.16-39 116.92-43.05c59.73-5.85 113.28 22.88 168.9 38.84 30.2 8.66 59 6.17 87.09-7.5 22.43-10.89 48-26.93 60.65-49.24V0z" opacity=".25"></path>
                  <path d="M0 0v5.63C149.93 59 314.09 71.32 475.83 42.57c43-7.64 84.23-20.12 127.61-26.46 59-8.63 112.48 12.24 165.56 35.4C827.93 77.22 886 95.24 951.2 90c86.53-7 172.46-45.71 248.8-84.81V0z" opacity=".25"></path>
                </svg>
               <div class="position-relative">
                
               </div>
              </div>
            </footer-->
          </div>
        </aside>
        <!--///////////Page Sidebar End///////////////-->

        <!--///Sidebar close button for 991px or below devices///-->
        <div
        class="sidebar-close d-lg-none">
        <a href="#"></a>
        </div>
        <!--///.Sidebar close end///-->



        <!--///////////Page content wrapper///////////////-->
        <main class="page-content d-flex flex-column flex-row-fluid">

          <!--//page-header//-->
          <header class="navbar py-0 page-header navbar-expand navbar-light px-4 px-lg-8">
            <a href="index.html" class="navbar-brand d-block d-lg-none">
              <div class="d-flex align-items-center flex-no-wrap text-truncate">
                <!--Sidebar-icon-->
                <span class="sidebar-icon bg-primary rounded-circle size-35 text-white">
                  A
                </span>
              </div>
            </a>
            <ul class="navbar-nav d-flex align-items-center h-100">
              <li class="nav-item d-none d-lg-flex flex-column h-100 me-2 align-items-center justify-content-center">
                <a href="javascript:void(0)"
                  class="sidebar-trigger nav-link size-35 d-flex align-items-center justify-content-center p-0">
                  <i data-feather="chevrons-left" class="fe-1x"></i>
                </a>
              </li>
                  <!-- TOP MENU -->
                  <li class="nav-item py-lg-3 me-lg-2">
                    <a class="nav-link" href="<?php echo BASEURL; ?>home.php?page=dashboard">Dashboard</a>
                  </li>
                  <li class="nav-item dropdown py-lg-3 me-lg-2">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Master</a>
                    <ul class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
                      <li><a class="dropdown-item" href="<?php echo BASEURL; ?>home.php?page=mandas">Daerah Aliran Sungai</a></li>
                      <li><a class="dropdown-item" href="<?php echo BASEURL; ?>home.php?page=manlokasi">Lokasi</a></li>
                      <li><a class="dropdown-item" href="<?php echo BASEURL; ?>home.php?page=manlengkung">Rating Curve</a></li>
                      <li><a class="dropdown-item" href="<?php echo BASEURL; ?>home.php?page=dokkegiatan">Dok Kegiatan</a></li>
                      <li><a class="dropdown-item" href="<?php echo BASEURL; ?>home.php?page=kalibrasi">Kalibrasi Water Level</a></li>
                    </ul>
                  </li>
                  <li class="nav-item dropdown py-lg-3 me-lg-2">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Data Ukur</a>
                    <ul class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
                      <li><a class="dropdown-item" href="<?php echo BASEURL; ?>home.php?page=inputpiket">Manual Input</a></li>
                    </ul>
                  </li>
                  <li class="nav-item dropdown py-lg-3 me-lg-2">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Publikasi</a>
                    <ul class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
                      <li><a class="dropdown-item" href="<?php echo BASEURL; ?>home.php?page=pubdebit">Debit Air</a></li>
                      <li><a class="dropdown-item" href="<?php echo BASEURL; ?>home.php?page=pubinputkualitasair">Kualitas Air</a></li>
                      <li><a class="dropdown-item" href="<?php echo BASEURL; ?>home.php?page=pubsedimen">Sedimen</a></li>
                      <li><a class="dropdown-item" href="<?php echo BASEURL; ?>home.php?page=pubcurahhujan">Curah Hujan</a></li>
                      <li><a class="dropdown-item" href="<?php echo BASEURL; ?>home.php?page=pubkegiatan">Kegiatan</a></li>
                    </ul>
                  </li>
                  <li class="nav-item dropdown py-lg-3 me-lg-2">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Laporan</a>
                    <ul class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
                      <li><a class="dropdown-item" href="<?php echo BASEURL; ?>home.php?page=laptma">Tinggi Muka Air</a></li>
                      <li><a class="dropdown-item" href="<?php echo BASEURL; ?>home.php?page=lapcurahhujan">Curah Hujan</a></li>
                      <li><a class="dropdown-item" href="<?php echo BASEURL; ?>home.php?page=genangan">Genangan</a></li>
                    </ul>
                  </li>
                  <li class="nav-item py-lg-3 me-lg-2">
                    <a class="nav-link" href="<?php echo BASEURL; ?>home.php?page=datapermohonan">Permohonan</a>
                  </li>
              
            </ul>
            <ul class="navbar-nav ms-auto d-flex align-items-center h-100">
              <li class="nav-item d-flex align-items-center justify-content-center flex-column h-100 me-2">
                <div class="switch_modes nav-link p-0 size-35 d-flex align-items-center justify-content-center">
                  <a href="#" class="mode_dark text-reset p-0">
                    <i data-feather="sun" class="fe-1x"></i>
                  </a>
                  <a href="#" class="mode_light text-reset p-0">
                    <i data-feather="moon" class="fe-1x"></i>
                  </a>
                </div>
              </li>
              <!--li class="nav-item dropdown d-flex align-items-center justify-content-center flex-column h-100 me-2">
                <a href="#"
                  class="nav-link p-0 position-relative size-35 d-flex align-items-center justify-content-center"
                  aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                  <i data-feather="bell" class="fe-1x"></i>
                  <span
                    class="size-5 rounded-circle d-flex align-items-center justify-content-center position-absolute end-0 top-0 mt-2 me-1 bg-danger small"></span>
                </a>


                <div class="dropdown-menu mt-0 p-0 overflow-hidden dropdown-menu-end dropdown-menu-sm">
                  <div class="d-flex p-3 justify-content-between align-items-center border border-top-0 border-start-0 border-end-0">
                    <h5 class="me-3 mb-0">Notifications</h5>
                    <div class="flex-shrink-0">
                      <a href="#!" class="btn btn-primary btn-sm">View All</a>
                    </div>
                  </div>
                  <div class="height-290" data-simplebar>
                    <div class="list-group list-group-flush mb-0">
                       <a href="#" class="list-group-item border-0 list-group-item-action px-4 d-flex align-items-center">
                          <div class="d-block me-3">
                            <div class="avatar avatar-status status-online">
                              <img src="<?php echo THEME_BASEURL; ?>assets/media/avatars/01.jpg" class="img-fluid rounded-circle w-auto" alt="">
                            </div>
                          </div>

                          <div class="flex-grow-1 flex-wrap pe-3">
                            <span class="mb-0 d-block"><strong>Adam Danely</strong> assigned
                              a task to
                              you <strong>#PI-392</strong></span>
                            <small class="text-muted">Just now</small>
                          </div>
                        </a>
                      <a href="#" class="list-group-item border-0 list-group-item-action px-4 d-flex align-items-center">
                          <div class="d-block me-3">
                            <div class="avatar avatar-status status-offline">
                              <img src="<?php echo THEME_BASEURL; ?>assets/media/avatars/06.jpg" class="img-fluid rounded-circle w-auto" alt="">
                            </div>
                          </div>

                          <div class="flex-grow-1 flex-wrap pe-3">
                            <span class="mb-0 d-block"><strong>Vivianna Kiser
                              </strong> just posted <span>"Lorem ipsum is placeholder text
                                used in the graphic, print,
                                and industries.
                                "</span></span>
                            <small class="text-muted">2h Ago</small>
                          </div>
                        </a>
                       <a href="#" class="list-group-item border-0 list-group-item-action px-4 d-flex align-items-center">
                          <span class="d-block me-3">
                            <span
                              class="d-flex align-items-center justify-content-center lh-1 size-50 bg-tint-success text-success rounded-circle">
                              <i class="fe-2x" data-feather="tool"></i>
                            </span>
                          </span>

                          <div class="flex-grow-1 flex-wrap pe-3">
                            <span class="mb-0 d-block"><strong>Updated</strong> Your account
                              password updated
                              succuessfully</span>
                            <small class="text-muted">2h Ago</small>
                          </div>
                        </a>
                      <a href="#" class="list-group-item border-0 list-group-item-action px-4 d-flex align-items-center">
                          <span class="d-block me-3">
                            <span
                              class="d-flex align-items-center justify-content-center lh-1 size-50 bg-tint-danger text-danger rounded-circle">
                              <i class="fe-2x" data-feather="percent"></i>
                            </span>
                          </span>

                          <div class="flex-grow-1 flex-wrap pe-3">
                            <span class="mb-0 d-block"><strong>Pro discount</strong> Upgrade
                              to pro plan with 30%
                              discount, Apply coupon <span class="badge bg-primary">PRO30</span></span>
                            <small class="text-muted">2h Ago</small>
                          </div>
                        </a>
                      </div>
                  </div>
                </div>
              </li-->
              <li class="nav-item dropdown d-flex align-items-center justify-content-center flex-column h-100">
                <a href="#"
                  class="nav-link dropdown-toggle height-35 px-2 d-flex align-items-center justify-content-center"
                  aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                  <div class="d-flex align-items-center">

                    <!--Avatar with status-->
                    <div class="avatar-status status-online me-sm-2 avatar xs">
                      <img src="<?php echo THEME_BASEURL; ?>assets/media/avatars/08.jpg" class="rounded-circle img-fluid" alt="">
                    </div>
                    <span class="d-none d-md-inline-block"><?php echo $_SESSION['username']; ?></span>
                  </div>
                </a>

                <div class="dropdown-menu mt-0 p-0 dropdown-menu-end overflow-hidden" style="width:200px;">
                  <!--User meta-->
                  <div class="position-relative overflow-hidden px-3 pt-4 pb-9 bg-gradient-primary text-white">
                    <!--Divider-->
                    <svg style="transform: rotate(-180deg);" preserveAspectRatio="none"
                      class="position-absolute start-0 bottom-0 w-100 dropdown-wave" fill="currentColor" height="24" viewBox="0 0 1200 120"
                      xmlns="http://www.w3.org/2000/svg">
                      <path
                        d="M0 0v46.29c47.79 22.2 103.59 32.17 158 28 70.36-5.37 136.33-33.31 206.8-37.5 73.84-4.36 147.54 16.88 218.2 35.26 69.27 18 138.3 24.88 209.4 13.08 36.15-6 69.85-17.84 104.45-29.34C989.49 25 1113-14.29 1200 52.47V0z"
                        opacity=".25" />
                      <path
                        d="M0 0v15.81c13 21.11 27.64 41.05 47.69 56.24C99.41 111.27 165 111 224.58 91.58c31.15-10.15 60.09-26.07 89.67-39.8 40.92-19 84.73-46 130.83-49.67 36.26-2.85 70.9 9.42 98.6 31.56 31.77 25.39 62.32 62 103.63 73 40.44 10.79 81.35-6.69 119.13-24.28s75.16-39 116.92-43.05c59.73-5.85 113.28 22.88 168.9 38.84 30.2 8.66 59 6.17 87.09-7.5 22.43-10.89 48-26.93 60.65-49.24V0z"
                        opacity=".5" />
                      <path
                        d="M0 0v5.63C149.93 59 314.09 71.32 475.83 42.57c43-7.64 84.23-20.12 127.61-26.46 59-8.63 112.48 12.24 165.56 35.4C827.93 77.22 886 95.24 951.2 90c86.53-7 172.46-45.71 248.8-84.81V0z" />
                    </svg>
                    <div class="position-relative">
                      <h5 class="mb-1"><?php echo $_SESSION['nama_user']; ?></h5>
                      <p class="text-muted small mb-0 lh-1"><?php echo $_SESSION['keterangan_bbws']; ?></p>
                    </div>
                  </div>
                  <div class="pt-2">
                    <a href="#" class="dropdown-item"><i class="fe-1x me-3" data-feather="user"></i>Profile</a>
                    <hr class="my-2">
                    <a href="<?php echo BASEURL; ?>logout.php" class="dropdown-item d-flex align-items-center">
                      <i class="fe-1x me-3" data-feather="log-out"></i>
                      Sign out
                    </a>
                  </div>
                </div>
              </li>
              <li
                class="nav-item dropdown ms-2 d-flex d-lg-none align-items-center justify-content-center flex-column h-100">
                <a href="javascript:void(0)"
                  class="nav-link sidebar-trigger-lg-down size-35 p-0 d-flex align-items-center justify-content-center">
                  <i data-feather="menu" class="fe-2x"></i>
                </a>
              </li>
            </ul>
          </header>
          <!--Main Header End-->