<?php include_once 'header.php';?>

<div class="row">
  <div class="col-md-12">
    <ul class="nav nav-pills nav-pills-warning nav-pills-icons justify-content-center">
      <li class="nav-item">
        <a class="nav-link lc-info active" data-chat="info" href="javascript:void(0)">
          <i class="material-icons">info</i> <?php echo $jkl['g40'];?>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link lc-info" data-chat="edit" href="javascript:void(0)">
          <i class="material-icons">person</i> <?php echo $jkl['g47'];?>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link lc-info" href="javascript:void(0)" data-chat="search">
          <i class="material-icons">search</i> <?php echo $jkl['s5'];?>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link lc-info" href="javascript:void(0)" data-chat="files">
          <i class="material-icons">attach_file</i> <?php echo $jkl['g51'];?>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link lc-info" href="javascript:void(0)" data-chat="starred">
          <i class="material-icons">star</i> <?php echo $jkl['g275'];?>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link lc-info" href="javascript:void(0)" data-chat="faq">
          <i class="material-icons">help_outline</i> <?php echo $jkl['g278'];?>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link lc-info" href="javascript:void(0)" data-chat="history">
          <i class="material-icons">history</i> <?php echo $jkl['m1'];?>
        </a>
      </li>
    </ul>
  </div>
</div>

<div class="row">
  <div class="col-md-8">

    <div class="card">
      <div class="card-header card-header-icon card-header-rose">
        <div class="card-icon">
          <i class="material-icons">chat</i>
        </div>
        <h4 class="card-title" id="content-header-title"></h4>
      </div>
      <div class="card-body">

        <div class="main-chat-output">
          <!-- Operator transfer / Info div -->
          <div class="alert alert-info chat-inactive-container" id="transfer"><a href="#" class="alert-link main-sidebar-toggle d-md-none"><i class="fa fa-bars"></i></a> <?php echo $jkl['g79'];?></div>
          <div class="chat-active-container" style="display: none;">

            <!-- chat output -->
            <div class="chat-wrapper">
              <div id="chatOutput" class="direct-chat-messages"></div>
            </div>

            <div class="chat-footer">

              <!--- Input form -->
              <form name="messageInput" id="MessageInput" action="javascript:sendInput(activeConvID);">

                <div class="form-group">
                  <label class="sr-only" for="message"><?php echo $jkl["g135"];?></label>
                  <div class="input-group">
                    <div class="emoji-picker">
                      <div id="emoji"></div>
                    </div>
                    <textarea name="message" id="message" class="form-control" rows="1" placeholder="<?php echo $jkl["g135"];?>"></textarea>
                    <?php if ($jakuser->getVar("files")) { ?>
                      <div class="chat-upload">
                        <span class="area fa fa-paperclip" id="cUploadDrop"></span>
                      </div>
                    <?php } ?>
                  </div>
                </div>

                <div class="row chat-extra-input">
                  <div class="col-4">

                    <div class="form-group">
                      <label class="sr-only" for="sendurl"><?php echo $jkl["g238"];?></label>
                      <input type="text" id="sendurl" autocomplete="off" name="sendurl" placeholder="<?php echo $jkl["g238"];?>" class="form-control" />
                    </div>
                  </div>
                  <div class="col-4">
                    <?php if ($jakuser->getVar("responses") && isset($HD_RESPONSES) && is_array($HD_RESPONSES)) { ?>

                      <div class="form-group">
                        <select name="standard" id="response" class="col-12" data-live-search="true">
                        </select>
                      </div>

                    <?php } ?>
                  </div>
                  <div class="col-4">
                    <?php if ($jakuser->getVar("files") && isset($HD_FILES) && is_array($HD_FILES)) { ?>

                      <div class="input-group mt-2">
                        <select name="files" id="files" class="custom-select">
                          <option value="0"><?php echo $jkl["g8"];?></option>

                          <?php foreach($HD_FILES as $f) { ?>
                            <option value="<?php echo $f["id"];?>"><?php echo $f["name"];?></option>
                          <?php } ?>

                        </select>
                        <div class="input-group-append">
                          <a id="sendFile" class="btn btn-success"><?php echo $jkl["g4"].' '.$jkl["g9"];?></a>
                        </div>
                      </div>

                    <?php } ?>
                  </div>
                </div>

                <input type="hidden" name="msgeditid" id="msgeditid">
                <input type="hidden" name="msgquoteid" id="msgquoteid">
                <input type="hidden" name="userID" id="userID" value="<?php echo $jakuser->getVar("id");?>">
                <input type="hidden" name="userName" id="userName" value="<?php echo $jakuser->getVar("username");?>">
                <input type="hidden" name="operatorName" id="operatorName" value="<?php echo $jakuser->getVar("name");?>">
                <input type="hidden" name="clientOnline" id="clientOnline" value="<?php echo $jakuser->getVar("useronlinelist");?>">

              </form>

              <div class="alert alert-rose" id="client-left" style="display: none"><?php echo $jkl['g64'];?></div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4" id="lcinfo-container">
    <div class="card">
      <div class="card-header card-header-icon card-header-warning">
        <div class="card-icon">
          <i class="material-icons" id="lcinfo-icon">info</i>
        </div>
        <h4 class="card-title" id="lcinfo-title"><?php echo $jkl['g40'];?></h4>
      </div>
      <div class="card-body">
        <div class="flex-client-info"></div>
      </div>
    </div>
  </div>
</div>

<?php include_once 'footer.php';?>