<!DOCTYPE html>
<html lang="en">
  

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   

    <!-- Facebook -->
    
    <meta property="og:title" content="WhispersApp | The Ultimate Consultancy Portal">
    <meta property="og:description" content="Button, link and a portal to sell remote consultative services. Specifically designed for lawyers, doctors, accountants, business consultants, architects, IT specialists, engineers and insurance specialists">


<meta name="description" content="Button, link and a portal to sell remote consultative services. Specifically designed for lawyers, doctors, accountants, business consultants, architects, IT specialists, engineers and insurance specialists">

<meta property="og:image" content="https://www.whispersapp.com/landing/assets/images/whis/og.jpg">
<link rel="icon" type="image/png" href="/../landing/assets/images/whis/fav.png">
    
    
    <meta name="author" content="Techmetic">

    <title>WhispersApp | The Ultimate Consultant-Client Portal</title>

    <!-- vendor css -->
    <link href="/../lib/%40fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="/../lib/ionicons/css/ionicons.min.css" rel="stylesheet">
    <link href="/../lib/highlightjs/styles/github.css" rel="stylesheet">
    <link href="/../lib/select2/css/select2.min.css" rel="stylesheet">
    <link href="/../lib/timepicker/jquery.timepicker.css" rel="stylesheet">
    <link href="/../lib/spectrum-colorpicker/spectrum.css" rel="stylesheet">
    <link href="/../lib/bootstrap-tagsinput/bootstrap-tagsinput.css" rel="stylesheet">
    <link href="/../lib/ion-rangeslider/css/ion.rangeSlider.css" rel="stylesheet">
    <link href="/../lib/ion-rangeslider/css/ion.rangeSlider.skinFlat.css" rel="stylesheet">
    <!-- <link href="../lib/%40fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"> -->
    <link href="/../lib/mfonts/fontawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="/../lib/ionicons/css/ionicons.min.css" rel="stylesheet">
    <link href="/../lib/rickshaw/rickshaw.min.css" rel="stylesheet">
       <link href="/../lib/select2/css/select2.min.css" rel="stylesheet">
    <link href="/../lib/datatables.net-dt/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="/../lib/datatables.net-responsive-dt/css/responsive.dataTables.min.css" rel="stylesheet">

    <!-- Bracket CSS -->
    <link rel="stylesheet" href="/../css/bracket.css">
  </head>

  <body>

    <!-- ########## START: LEFT PANEL ########## -->
    <div class="br-logo"><a href="#"><span>[</span>The <i>WhispersApp</i><span>]</span></a></div>
    <div class="br-sideleft sideleft-scrollbar">
      <label class="sidebar-label pd-x-10 mg-t-20 op-3">Navigation</label>
      <ul class="br-sideleft-menu">
        <li class="br-menu-item">
          <a href="/dashboard" class="br-menu-link active">
            <i class="menu-item-icon icon ion-ios-home-outline tx-24"></i>
            <span class="menu-item-label">Dashboard</span>
          </a><!-- br-menu-link -->
        </li><!-- br-menu-item -->
        



       <li class="br-menu-item">
          <a href="#" class="br-menu-link with-sub">
            <i class="menu-item-icon icon fas fa-envelope-open-text tx-20"></i>
            <% if(unRead.length >= 1){ %>
            <span class="square-8 bg-success t-15 r-5 rounded-circle"></span>
            <% } %>
            <span class="menu-item-label">Consultations  </span>
            
          </a><!-- br-menu-link -->
          <ul class="br-menu-sub">
            <li class="sub-item"><a href="/consultations" class="sub-link">All</a></li>
            <li class="sub-item"><a href="/consultations/read" class="sub-link">Read</a></li>
            <li class="sub-item"><a href="/consultations/unread" class="sub-link">Unread</a></li>
            <li class="sub-item"><a href="/consultations/unpaid" class="sub-link">Unpaid For</a></li>
          
          </ul>
        </li>



          


        <li class="br-menu-item">
          <a href="#" class="br-menu-link with-sub">
            <i class="menu-item-icon icon fas fa-address-book tx-20"></i>
            <span class="menu-item-label">Clients</span>
          </a><!-- br-menu-link -->
          <ul class="br-menu-sub">
            <li class="sub-item"><a href="/clients" class="sub-link">All Clients</a></li>
            <li class="sub-item"><a href="/clients/clientCreate" class="sub-link">Add Client</a></li>
            
          </ul>
        </li>

      

            <li class="br-menu-item">
          <a href="/companies/create" class="br-menu-link">
            <i class="menu-item-icon icon fas fa-briefcase tx-22"></i>
           
            <span class="menu-item-label">Add A Company</span>
          </a><!-- br-menu-link -->
        </li><!-- br-menu-item -->

      <% company.forEach(function(company){ %>
        <li class="br-menu-item">
          <a href="#" class="br-menu-link with-sub">
             <i class="menu-item-icon icon ion-gear-b tx-22"></i>
            <span class="menu-item-label">Manage <%= company.name %> </span>
          </a><!-- br-menu-link -->
          <ul class="br-menu-sub">
            <li class="sub-item"><a href="/manage/<%= company.accountNumber %>/users" class="sub-link">All Users</a></li>
            <% if (user.companiesOwning.indexOf(company.accountNumber) != -1){%>
            <li class="sub-item"><a href="/manage/<%= company.accountNumber %>/addUser" class="sub-link">Add User</a></li>
            <li class="sub-item"><a href="/manage/<%= company.accountNumber %>/settings" class="sub-link">Settings</a></li>
            <%} %>
            <% if (user.companiesManaging.indexOf(company.acountNumber) != -1){%>
            <li class="sub-item"><a href="/manage/<%= company.accountNumber %>/userLeave" class="sub-link">Leave Company</a></li>
            <%} %>

           
          </ul>
        </li>

        <% }) %>


       
      </ul><!-- br-sideleft-menu -->

     

      <br>
    </div><!-- br-sideleft -->
    <!-- ########## END: LEFT PANEL ########## -->

    <!-- ########## START: HEAD PANEL ########## -->
    <div class="br-header">
      <div class="br-header-left">
        <div class="navicon-left hidden-md-down"><a id="btnLeftMenu" href="#"><i class="icon ion-navicon-round"></i></a></div>
        <div class="navicon-left hidden-lg-up"><a id="btnLeftMenuMobile" href="#"><i class="icon ion-navicon-round"></i></a></div>
       
      </div><!-- br-header-left -->
      <div class="br-header-right">
        <nav class="nav">
          
          

          <div class="dropdown">
            <a href="#" class="nav-link nav-link-profile" data-toggle="dropdown">
              <span class="logged-name hidden-md-down"><%= user.fullName %></span>
              <img src="../img/img1.jpg" class="wd-32 rounded-circle" alt="">
              <span class="square-10 bg-success"></span>
            </a>
            <div class="dropdown-menu dropdown-menu-header wd-250">
              <div class="tx-center">
                <a href="#"><img src="../img/img1.jpg" class="wd-80 rounded-circle" alt=""></a>
                <h6 class="logged-fullname"><%= user.fullName %></h6>
                <p><%= user.phone %></p>
                <p><%= user.email %></p>
              </div>
              
              <hr>
              <ul class="list-unstyled user-profile-nav">
               <!--  <li><a href="#"><i class="icon ion-ios-person"></i> Edit Profile</a></li> -->
                <li><a href="/users/passwordreset"><i class="icon ion-ios-gear"></i> Change Password</a></li>
               
                <li><a href="/users/logout"><i class="icon ion-power"></i> Sign Out</a></li>
              </ul>
            </div><!-- dropdown-menu -->
          </div><!-- dropdown -->
        </nav>
       
      </div><!-- br-header-right -->
    </div><!-- br-header -->
    <!-- ########## END: HEAD PANEL ########## -->

     



    <!-- ########## START: MAIN PANEL ########## -->
    <div class="br-mainpanel">
      <div class="br-pageheader">
        <nav class="breadcrumb pd-0 mg-0 tx-12">
          <a class="breadcrumb-item" href="dashboard">Consultation View || WhispersApp</a>
          
        </nav>
      </div><!-- br-pageheader -->


      <div class="br-pagetitle">
      

      </div><!-- d-flex -->




      <div class="br-pagebody pd-x-20 pd-sm-x-30">

    

        
       


         <div class="d-flex align-items-center justify-content-center bg-gray-300 ht-1200 pd-x-20 pd-xs-x-0">
                 
              <div class="modal d-block pos-static">
                <div class="modal-dialog modal-lg" role="document">
                  <div class="modal-content bd-0 bg-transparent rounded overflow-hidden">
                    <div class="modal-body pd-0">
                      <div class="row no-gutters">
                        <div class="col-lg-6 bg-primary">
                          <div class="pd-40">
                            <h4 class="tx-white mg-b-20"><span>[</span> <%= consultationOne.date %> <span>]</span></h4>
                            <p class="tx-white op-7 mg-b-60"><%= consultationOne.message %></p>
                            
                          </div>
                        </div><!-- col-6 -->
                        <div class="col-lg-6 bg-white">
                            <div class="pd-y-30 pd-xl-x-30">
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                              <div class="pd-x-30 pd-y-10">
                                <h3 class="tx-inverse  mg-b-2">Client's Name</h3>
                                <p><%= consultationOne.fromName %></p>
                              


                                <h3 class="tx-inverse  mg-b-2">Client's Phone</h3>
                                <p><%= consultationOne.fromPhone %></p>
                                


                                <h3 class="tx-inverse  mg-b-2">Client's Email</h3>
                                <p><%= consultationOne.fromEmail %></p>
                             

                                <h4 class="tx-inverse  mg-b-2">Client's Country</h4>
                                <p><%= consultationOne.fromCountry %></p>
                                

                                <h3 class="tx-inverse mg-b-2">Amount Paid</h3>
                                <% if (consultationOne.amountPaid > 0) { %>
                                <p><%= consultationOne.amountPaid %></p>

                                <% } else { %>
                                <p>000000000</p>

                                <% } %>
                                
                                <br>


                                
                              </div>
                            </div><!-- pd-20 -->
                          </div><!-- col-6 -->
                        </div><!-- row -->

                      </div><!-- modal-body -->
                    </div><!-- modal-content -->
                  </div><!-- modal-dialog -->
                </div><!-- modal -->
              
          </div><!-- d-flex -->
       

  

      </div><!-- br-pagebody -->
 


 <footer class="br-footer">
        <div class="footer-left">
          
          <p>Copyright © <script type = "text/javascript">
         var dt = new Date();
         document.write(dt.getFullYear() ); 
      </script> ||   WhispersApp   ||   A product of <a href="https://techmetic.co.ke/" target="_blank">Techmetic Solutions</a> || +254 722 898480</p>
        </div>
        <div class="footer-right d-flex align-items-center">
          <span class="tx-uppercase mg-r-10">Share:</span>
          <a target="_blank" class="pd-x-5" href="#"></i></a>
          <a target="_blank" class="pd-x-5" href="#"><i class="fab fa-twitter tx-20"></i></a>
        </div>
      </footer>
    </div><!-- br-mainpanel -->
    <!-- ########## END: MAIN PANEL ########## -->

    <script src="/../lib/jquery/jquery.min.js"></script>
    <script src="/../lib/jquery-ui/ui/widgets/datepicker.js"></script>
    <script src="/../lib/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/../lib/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <script src="/../lib/moment/min/moment.min.js"></script>
    <script src="/../lib/peity/jquery.peity.min.js"></script>
    <script src="/../lib/highlightjs/highlight.pack.min.js"></script>
    <script src="/../lib/select2/js/select2.min.js"></script>
    <script src="/../lib/timepicker/jquery.timepicker.min.js"></script>
    <script src="/../lib/spectrum-colorpicker/spectrum.js"></script>
    <script src="/../lib/jquery.maskedinput/jquery.maskedinput.js"></script>
    <script src="/../lib/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
    <script src="/../lib/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
     <script src="/../lib/highlightjs/highlight.pack.min.js"></script>
    <script src="/../lib/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="/../lib/datatables.net-dt/js/dataTables.dataTables.min.js"></script>
    <script src="/../lib/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="/../lib/datatables.net-responsive-dt/js/responsive.dataTables.min.js"></script>
      <script src="/../lib/select2/js/select2.min.js"></script>

    <script src="/../js/bracket.js"></script>
    <script>
      $(function(){
        'use strict'

        // Toggles
        $('.br-toggle').on('click', function(e){
          e.preventDefault();
          $(this).toggleClass('on');
        })

        // Input Masks
        $('#dateMask').mask('99/99/9999');
        $('#phoneMask').mask('(999) 999-9999');
        $('#ssnMask').mask('999-99-9999');

        // Datepicker
        $('.fc-datepicker').datepicker({
          showOtherMonths: true,
          selectOtherMonths: true
        });

        $('#datepickerNoOfMonths').datepicker({
          showOtherMonths: true,
          selectOtherMonths: true,
          numberOfMonths: 2
        });

        // Time Picker
        $('#tpBasic').timepicker();
        $('#tp2').timepicker({'scrollDefault': 'now'});
        $('#tp3').timepicker();

        $('#setTimeButton').on('click', function (){
          $('#tp3').timepicker('setTime', new Date());
        });

        // Color picker
        $('#colorpicker').spectrum({
          color: '#17A2B8'
        });

        $('#showAlpha').spectrum({
          color: 'rgba(23,162,184,0.5)',
          showAlpha: true
        });

        $('#showPaletteOnly').spectrum({
            showPaletteOnly: true,
            showPalette:true,
            color: '#DC3545',
            palette: [
                ['#1D2939', '#fff', '#0866C6','#23BF08', '#F49917'],
                ['#DC3545', '#17A2B8', '#6610F2', '#fa1e81', '#72e7a6']
            ]
        });


        // Rangeslider
        if($().ionRangeSlider) {
          $('#rangeslider1').ionRangeSlider();

          $('#rangeslider2').ionRangeSlider({
              min: 100,
              max: 1000,
              from: 550
          });

          $('#rangeslider3').ionRangeSlider({
              type: 'double',
              grid: true,
              min: 0,
              max: 1000,
              from: 200,
              to: 800,
              prefix: '$'
          });

          $('#rangeslider4').ionRangeSlider({
              type: 'double',
              grid: true,
              min: -1000,
              max: 1000,
              from: -500,
              to: 500,
              step: 250
          });
        }

      });
    </script>

     <script>
      $(function(){
        'use strict';

        $('#datatable1').DataTable({
          responsive: true,
          language: {
            searchPlaceholder: 'Search...',
            sSearch: '',
            lengthMenu: '_MENU_ items/page',
          }
        });

        $('#datatable2').DataTable({
          bLengthChange: false,
          searching: false,
          responsive: true
        });

        // Select2
        $('.dataTables_length select').select2({ minimumResultsForSearch: Infinity });

      });
    </script>


  </body>


</html>
