<?php include('session.php'); ?>
<!DOCTYPE html>

<html
  lang="en"
  class="light-style layout-navbar-fixed layout-menu-fixed"
  dir="ltr"
  data-theme="theme-default"
  data-assets-path="<?php echo $urlweb; ?>/assets/"
  data-template="vertical-menu-template"
>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />

    <title><?php echo $s0['instansi']; ?></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="resource-type" content="document" />
    <meta http-equiv="content-type" content="text/html; charset=US-ASCII" />
    <meta http-equiv="content-language" content="en-us" />
    <meta name="author" content="Arie Budi" />
    <meta name="contact" content="ariebudi.com" />
    <meta name="copyright" content="Copyright (c) ariebudi.com. All Rights Reserved." />
    <meta name="robots" content="index, nofollow">

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="<?php echo $urlwebs; ?>/upload/favicon.png" />

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet"
    />

    <!-- Icons -->
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/fonts/fontawesome.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/fonts/tabler-icons.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/fonts/flag-icons.css" />

    <!-- Core CSS -->
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/css/rtl/core.css" class="template-customizer-core-css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/css/demo.css" />

    <!-- Vendors CSS -->
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/libs/node-waves/node-waves.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/libs/typeahead-js/typeahead.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/libs/select2/select2.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/libs/apex-charts/apex-charts.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css" />

    <!-- Page CSS -->
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/css/pages/app-chat.css" />
    <!-- Helpers -->
    <script src="<?php echo $urlweb; ?>/assets/vendor/js/helpers.js"></script>

    <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
    <!--? Template customizer: To hide customizer set displayCustomizer value false in config.js.  -->
    <script src="<?php echo $urlweb; ?>/assets/vendor/js/template-customizer.js"></script>
    <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
    <script src="<?php echo $urlweb; ?>/assets/js/config.js"></script>
    
    <script src="<?php echo $urlweb; ?>/assets/vendor/libs/jquery/jquery.js"></script>
  </head>

  <body>
    <!-- Layout wrapper -->
    <div class="layout-wrapper layout-content-navbar">
      <div class="layout-container">
        <!-- Menu -->

        <?php include('sidebar.php'); ?>
        <!-- / Menu -->

        <!-- Layout container -->
        <div class="layout-page">
          <!-- Navbar -->

          <nav
            class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
            id="layout-navbar"
          >
            <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
              <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
                <i class="ti ti-menu-2 ti-sm"></i>
              </a>
            </div>

            <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
              <?php include('top-menu.php'); ?>
            </div>

            <!-- Search Small Screens -->
            <div class="navbar-search-wrapper search-input-wrapper d-none">
              <input
                type="text"
                class="form-control search-input container-xxl border-0"
                placeholder="Search..."
                aria-label="Search..."
              />
              <i class="ti ti-x ti-sm search-toggler cursor-pointer"></i>
            </div>
          </nav>

          <!-- / Navbar -->

          <!-- Content wrapper -->
          <div class="content-wrapper">
            <!-- Content -->
            <div class="container-xxl flex-grow-1 container-p-y">
              <div class="app-chat card overflow-hidden">
                <div class="row g-0">
                  <!-- Chat & Contacts -->
                  <div class="col app-chat-contacts app-sidebar flex-grow-0 overflow-hidden border-end" id="app-chat-contacts" >
                    <div class="sidebar-header">
                      <div class="d-flex align-items-center">
                        <div class="flex-shrink-0 avatar avatar-online me-3" data-bs-toggle="sidebar" data-overlay="app-overlay-ex" >
                          <img class="user-avatar rounded-circle cursor-pointer" src="<?php echo $urlwebs; ?>/upload/<?php echo $u['image']; ?>" alt="Avatar" />
                        </div>
                        <div class="flex-grow-1 input-group input-group-merge rounded-pill">
                          <span class="input-group-text" id="basic-addon-search31"><i class="ti ti-search"></i></span>
                          <input type="text" class="form-control chat-search-input" placeholder="Search..." aria-label="Search..." aria-describedby="basic-addon-search31" />
                        </div>
                      </div>
                      <i
                        class="ti ti-x cursor-pointer close-sidebar d-lg-none d-block position-absolute top-0 end-0"
                        data-overlay
                        data-bs-toggle="sidebar"
                        data-target="#app-chat-contacts"
                      ></i>
                    </div>
                    <hr class="container-m-nx m-0" />
                    <div class="sidebar-body">
                      <div class="chat-contact-list-item-title">
                        <h5 class="text-primary mb-0 px-4 pt-3 pb-2">Chats</h5>
                      </div>
                      <!-- Chats -->
                      <ul class="list-unstyled chat-contact-list" id="chat-list">
                        <?php
                          $cekChate = mysqli_query($conn,"SELECT * FROM `tb_chat` WHERE status != 2") or die(mysqli_error());
                          $ccc = mysqli_num_rows($cekChate);
                          if($ccc == 0){
                            echo '
                              <li class="chat-contact-list-item chat-list-item-0">
                                <h6 class="text-muted mb-0">No Chats Found</h6>
                              </li>
                            ';
                          }
                          else {
                            $cekChat = mysqli_query($conn,"SELECT * FROM `tb_chat_respon` WHERE status != 2 AND userid != 'master' AND jenis = 0 GROUP BY sessionid ORDER BY cuid DESC") or die(mysqli_error());
                            while($cc = mysqli_fetch_array($cekChat)){
                              $sessionid = $cc['sessionid'];
                              $getChat = mysqli_query($conn,"SELECT * FROM `tb_chat_respon` WHERE sessionid = '$sessionid' ORDER BY cuid DESC LIMIT 1") or die(mysqli_error());
                              $gc = mysqli_fetch_array($getChat);
                        ?>
                        <li class="chat-contact-list-item">
                          <a class="d-flex align-items-center" href="<?php echo $urlweb; ?>/chat/?sessionid=<?php echo $sessionid; ?>">
                            <div class="flex-shrink-0 avatar avatar-online">
                              <img src="<?php echo $urlwebs; ?>/upload/avatar5.png" alt="Avatar" class="rounded-circle" />
                            </div>
                            <div class="chat-contact-info flex-grow-1 ms-2">
                              <h6 class="chat-contact-name text-truncate m-0"><?php echo $cc['userid']; ?></h6>
                              <p class="chat-contact-status text-muted text-truncate mb-0">
                                <?php echo substr($gc['content'],0,20); ?> ...
                              </p>
                            </div>
                            <small class="text-muted mb-auto"><?php echo date('H:i', strtotime($gc['created_date'])); ?></small>
                          </a>
                        </li>
                        <?php }} ?>
                      </ul>
                    </div>
                  </div>
                  <!-- /Chat contacts -->

                  <!-- Chat History -->
                  <div class="col app-chat-history bg-body">
                    <?php
                      if(isset($_GET['sessionid'])){
                        $sessionid = $_GET['sessionid'];
                        $cekChat = mysqli_query($conn,"SELECT * FROM `tb_chat` WHERE sessionid = '$sessionid'") or die(mysqli_error());
                        $cc = mysqli_fetch_array($cekChat);
                        $ipaddress = $cc['ipaddress'];
                    ?>
                    <div class="chat-history-wrapper">
                      <div class="chat-history-header border-bottom">
                        <div class="d-flex justify-content-between align-items-center">
                          <div class="d-flex overflow-hidden align-items-center">
                            <div class="flex-shrink-0 avatar">
                              <img
                                src="<?php echo $urlwebs; ?>/upload/<?php echo $u['image']; ?>"
                                alt="Avatar"
                                class="rounded-circle"
                                data-bs-toggle="sidebar"
                                data-overlay
                                data-target="#app-chat-sidebar-right"
                              />
                              <i
                                class="ti ti-x ti-sm cursor-pointer close-sidebar"
                                data-bs-toggle="sidebar"
                                data-overlay
                                data-target="#app-chat-sidebar-left"
                              ></i>
                            </div>
                            <div class="chat-contact-info flex-grow-1 ms-2">
                              <h6 class="m-0"><?php echo $cc['userid']; ?></h6>
                              <small class="user-status text-muted">Kendala : <?php echo $cc['content']; ?></small>
                            </div>
                          </div>
                          <div class="d-flex align-items-center">
                            <div class="dropdown">
                              <i
                                class="ti ti-dots-vertical cursor-pointer"
                                id="chat-header-actions"
                                data-bs-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false"
                              >
                              </i>
                              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="chat-header-actions">
                                <a class="dropdown-item" href="<?php echo $urlweb; ?>/function/endChat.php?sessionid=<?php echo $sessionid; ?>">End Chat</a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="chat-history-body bg-body">
                        <ul class="list-unstyled chat-history" id="chat-liste">
                          <script>
                              $(document).ready(function() {
                                  setInterval(function () {
                                    $('#chat-liste').load('<?php echo $urlweb; ?>/getchat.php?ipaddress=<?php echo $ipaddress; ?>&sid=<?php echo $sessionid; ?>');
                                  }, 1000);
                              });
                          </script>
                        </ul>
                      </div>
                      <!-- Chat message form -->
                      <div class="chat-history-footer shadow-sm">
                        <form class="form-send-message d-flex justify-content-between align-items-center" id="form-chat" method="POST">
                          <input type="hidden" class="form-control mr-3" name="ipaddress" id="ipaddress" value="<?php echo $ipaddress; ?>">
                          <input type="hidden" class="form-control mr-3" name="sessionid" id="sessionid" value="<?php echo $sessionid; ?>">
                          <input 
                            class="form-control message-input border-0 me-3 shadow-none" name="content" id="content"
                            placeholder="Type your message here"
                          />
                          <div class="message-actions d-flex align-items-center">
                            <button type="submit" class="btn btn-primary d-flex send-msg-btn" id="submit_chat">
                              <i class="ti ti-send me-md-1 me-0"></i>
                              <span class="align-middle d-md-inline-block d-none">Send</span>
                            </button>
                          </div>
                        </form>
                      </div>
                    </div>
                    <?php } ?>
                  </div>
                  <!-- /Chat History -->
                </div>
              </div>
            </div>
            <!-- / Content -->

            <!-- Footer -->
            <footer class="content-footer footer bg-footer-theme">
              <div class="container-xxl">
                <div
                  class="footer-container d-flex align-items-center justify-content-between py-2 flex-md-row flex-column"
                >
                  <div>
                    ©
                    <script>
                      document.write(new Date().getFullYear());
                    </script>
                    , <?php echo $s0['instansi']; ?> All Rights Reserved.
                  </div>
                </div>
              </div>
            </footer>
            <!-- / Footer -->

            <div class="content-backdrop fade"></div>
          </div>
          <!-- Content wrapper -->
        </div>
        <!-- / Layout page -->
      </div>

      <!-- Overlay -->
      <div class="layout-overlay layout-menu-toggle"></div>

      <!-- Drag Target Area To SlideIn Menu On Small Screens -->
      <div class="drag-target"></div>
    </div>
    <!-- / Layout wrapper -->

    <!-- Core JS -->
    <!-- build:js assets/vendor/js/core.js -->
    <script src="<?php echo $urlweb; ?>/assets/vendor/libs/popper/popper.js"></script>
    <script src="<?php echo $urlweb; ?>/assets/vendor/js/bootstrap.js"></script>
    <script src="<?php echo $urlweb; ?>/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
    <script src="<?php echo $urlweb; ?>/assets/vendor/libs/node-waves/node-waves.js"></script>

    <script src="<?php echo $urlweb; ?>/assets/vendor/libs/hammer/hammer.js"></script>
    <script src="<?php echo $urlweb; ?>/assets/vendor/libs/i18n/i18n.js"></script>
    <script src="<?php echo $urlweb; ?>/assets/vendor/libs/typeahead-js/typeahead.js"></script>

    <script src="<?php echo $urlweb; ?>/assets/vendor/js/menu.js"></script>
    <!-- endbuild -->

    <!-- Vendors JS -->
    <script src="<?php echo $urlweb; ?>/assets/vendor/libs/select2/select2.js"></script>
    <script src="<?php echo $urlweb; ?>/assets/vendor/libs/apex-charts/apexcharts.js"></script>
    <script src="<?php echo $urlweb; ?>/assets/vendor/libs/datatables/jquery.dataTables.js"></script>
    <script src="<?php echo $urlweb; ?>/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
    <script src="<?php echo $urlweb; ?>/assets/vendor/libs/datatables-responsive/datatables.responsive.js"></script>
    <script src="<?php echo $urlweb; ?>/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.js"></script>
    <script src="<?php echo $urlweb; ?>/assets/vendor/libs/datatables-buttons/datatables-buttons.js"></script>
    <script src="<?php echo $urlweb; ?>/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.js"></script>
    <script src="<?php echo $urlweb; ?>/assets/vendor/libs/datatables-buttons/buttons.html5.js"></script>
    <script src="<?php echo $urlweb; ?>/assets/vendor/libs/datatables-buttons/buttons.print.js"></script>

    <!-- Main JS -->
    <script src="<?php echo $urlweb; ?>/assets/js/app-chat.js"></script>
    <script src="<?php echo $urlweb; ?>/assets/js/main.js"></script>
    <script src="<?php echo $urlweb; ?>/assets/js/forms-selects.js"></script>
    <script>
    $(document).ready(function() {
      //Default data table
      $('#default-datatable').DataTable();
      setInterval(function () {
        $('#chat-list').load('<?php echo $urlweb; ?>/getListChat.php');
      }, 1000);
      setInterval(function () {
        $('#countChat').load('<?php echo $urlweb; ?>/countChat.php');
      }, 1000);
        setInterval(function () {
          $('#getNotif').load('<?php echo $urlweb; ?>/getNotif.php');
        }, 1000);
    });
    $("#submit_chat").click(function(anu){
       anu.preventDefault();
       var ipaddress = $('#ipaddress').val();
       var sessionid = $('#sessionid').val();
       var content = $("#content").val();
       $.post("<?php echo $urlweb; ?>/function/post-chat.php", { ipaddress: ipaddress, sessionid:sessionid, content:content, submit:'submit' });

       $("form#form-chat")[0].reset();
       var objDiv = document.getElementById("chat-content");
       objDiv.scrollTop = objDiv.scrollHeight;   
       return false;
    });
  </script>
  </body>
</html>
