<!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">

    <!-- Twitter -->
    <meta name="twitter:site" content="@whispersapp">
    <meta name="twitter:creator" content="@whispersapp">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="UB Connect | The Ultimate Business Kit">
    <meta name="twitter:description" content="Effective tech to conveniently connect with your customers">
    <meta name="twitter:image" content="/img/ogimage.jpg">

    <!-- Facebook -->
    <meta property="og:image" content="/img/ogimage.jpg"/>
    <meta property="og:url" content="http://whispersapp.com">
    <meta property="og:title" content="UB Connect | The Ultimate Business Kit">
    <meta property="og:description" content="Effective tech to conveniently connect with your customers">

 

    <!-- Meta -->
    <meta name="description" content="We connect you, efficiently and effectively, with your customers">
    <meta name="author" content="Techmetic Solutions">

    <title>UB Connect | The Ultimate Business Kit</title>

    <!-- vendor css -->
    <!-- favicon icon -->
<link href="/img/fav.png" rel="shortcut icon" type="image/jpg">
<link href="/img/fav.png" rel="icon">
<link href="/img/fav.png" rel="icon" sizes="72x72">
<link href="/img/fav.png" rel="icon" sizes="114x114">
<link href="/img/fav.png" rel="icon" sizes="144x144">
    <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/ionicons/css/ionicons.min.css" rel="stylesheet">
    <link href="../lib/rickshaw/rickshaw.min.css" rel="stylesheet">

    <!-- Bracket CSS -->
    <link rel="stylesheet" href="../css/bracket.css">
 <!--    <script>
  function makePayment() {
    FlutterwaveCheckout({
      public_key: "FLWPUBK-0e3012345d85e4e52580e8d15aead971-X",
      tx_ref: <%= company._id %>,
      amount: 10,
      currency: "USD",
      country: "US",
      payment_options: " ",
      redirect_url: // specified redirect URL
        "https://callbacks.piedpiper.com/flutterwave.aspx?ismobile=34",
      meta: {
        consumer_id: 23,
        consumer_mac: "92a3-912ba-1192a",
      },
      customer: {
        email: <%= company.email %>,
        phone_number: <%= company.phone %>,
        name: <%= company.name %>,
      },
      callback: function (data) {
        console.log(data);
      },
      onclose: function() {
        // close modal
      },
      customizations: {
        title: "Whispers App Setup Fee",
        description: "Registration, setup and business account creation",
        logo: "https://drive.google.com/file/d/1xvOolCNjKZ3l49FpJxN6wh4jGw3nWQK0/view?usp=sharing",
      },
    });
  }
</script> -->
  </head>

  <body>

  




  <!-- ########## START: MAIN PANEL ########## -->
   <!-- ########## START: MAIN PANEL ########## -->
    <div class="br-mainpanel pd-x-20 pd-sm-x-30" style="margin-left: 1px; margin-top: 1px; background-image: url(../img/bg2.jpg); background-size:100% 100%;">
      




      <div class="br-pagetitle">
        
        <div class="col-12" style="text-align: center;">
          <h4>Whispers App</h4>
          <p class="mg-b-0">The Ultimate Consultant-Client Portal</p>
        </div>
      </div><!-- d-flex -->



      <div class="br-pagebody pd-x-20 pd-sm-x-30" style="padding-top: 1px; margin-top: 2px;">



     
       

     

          

           <div class="d-flex align-items-center justify-content-center bg-gray-300 ht-600 pd-x-20 pd-xs-x-0"   style="background-image: url(../img/bg.jpg); background-size:100% ; border-radius:15px">
            <div class="card wd-450 shadow-base">
              <div class="card-body pd-x-20 pd-xs-40">
                <h5 class="tx-xs-24 tx-normal tx-gray-900 mg-b-15 text-center">Step 2/2</h5>
                
               
                <br>
                                
                                <div class="col-xl-12" style="padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px;">
              <div class="alert alert-info alert-solid pd-20" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <div class="d-sm-flex align-items-center justify-content-start">
                  <i class="icon ion-ios-checkmark-outline lh-0 tx-52"></i>
                  <div class="mg-sm-l-15 mg-t-15 mg-sm-t-0">
                    <h5 class="mg-b-2 pd-t-2">Consultation Submitted</h5>
                    <p class="mg-b-0 tx-xs op-8">We are researching on it</p>
                  </div>
                </div><!-- d-flex -->
              </div><!-- alert -->
            </div><!-- col-xl-6 -->

            <h5 class="tx-xs-24 tx-normal tx-gray-900 mg-b-5" style="font-size: 16px">Consultation Fee Payment: <%= currency %> <%=company.perConsultationCharge %></h5>
            
            <p class="mg-b-0 tx-xs op-8 mg-b-15">This covers for consultation fees only. In case you visit our offices on the same issue, no further consultation will be charged.</p>


                               

<form>
  
  <button  class="btn btn-primary pd-y-12 btn-block" type="button">Pay: <%=company.perConsultationCharge %> Via M-Pesa No: 0725807235</button>
</form>

<p style="margin-bottom: 12px; margin-top: 30px;"> M-Pesa No: <input class="col-sm-6 text-info" type="text" value="0725807235" id="account-njeri"> <button id="buttonnjeri" onclick="copy()">Click to Copy</button></p>

          <script type="text/javascript">
            function copy(){
              var copyText = document.getElementById('account-njeri');
              copyText.select();
              copyText.setSelectionRange(0,9999999)
              navigator.clipboard.writeText(copyText.value);
              document.getElementById("buttonnjeri").innerHTML="Phone Number Copied!"; 
               var element = document.getElementById("buttonnjeri")

              element.classList.add("bg-info", "text-white")
            }
          </script>

<script>

  
  function makePayment() {
     var phone = '<%- consultation.fromPhone %>';
     var name = '<%- consultation.fromName %>';
     var email = '<%- consultation.fromEmail %>';
     var id = '<%- consultation._id %>';
    


    FlutterwaveCheckout({
      public_key: "<%=company.paymentMethodKey %>",
      tx_ref: id,
      amount: '<%= amount %>',
      currency: "<%= currency %>",
      country: "<%=consultation.fromCountry %>",

      redirect_url: // specified redirect URL
        "https://www.whispersapp.com/consutations/success",
      payment_options: "card,mpesa,mobilemoneyrwanda,mobilemoneyuganda,qr,paypal",
      customer: {
        email: email,
        phone_number: phone,
        name: name,
      },
      callback: function (data) { // specified callback function
        console.log(data);
      },
      customizations: {
        title: "<%= company.name %> || Consultation",
        description: "Payment for remote consultancy",
        logo: "https://www.whispersapp.com/img/fav.png",
      },
    });
  }
</script>







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

   

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

<%- include('partials/footer'); -%>