<?php
  session_start();
  if(!isset($_SESSION["userid"])){
    header('location: https://uellosend.com/login.php');
  }  
  

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


<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="10800">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Group Campaigns</title>
  <!-- plugins:css -->
  <link rel="stylesheet" href="vendors/iconfonts/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="vendors/css/vendor.bundle.base.css">
  <link rel="stylesheet" href="vendors/css/vendor.bundle.addons.css">
  <!-- endinject -->
  <!-- plugin css for this page -->
  <!-- End plugin css for this page -->
  <!-- inject:css -->
  <link rel="stylesheet" href="css/style.css">
  <style>
    .switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: grey;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #392C70;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(55px);
  -ms-transform: translateX(55px);
  transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.on
{
  display: none;
}

.on, .off
{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked+ .slider .on
{display: block;}

input:checked + .slider .off
{display: none;}

/*--------- END --------*/

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;}

  </style>
 
 
  

  <!-- endinject -->
  <link rel="shortcut icon" href="http://www.urbanui.com/" />
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

    
   
    <script crossorigin="anonymous" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script crossorigin="anonymous" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" type="text/css" media="all" />

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>

    <script crossorigin="anonymous" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script type="text/javascript" src="myjs/bootstrap-datetimepicker.min.js"></script>

    <script type="text/javascript" src="myjs/demo.js"></script>
</head>

<body>
  <?php include("./templates/groupCampaignModal.php"); ?>
  <?php include("./templates/quicksendModal.php"); ?>
  <?php include("./templates/bulksendModal.php"); ?>
  <?php include("./templates/creditModal.php"); ?>
  <div class="container-scroller">


    <?php include("./templates/header.php"); ?>
    <!-- partial -->



    <div class="main-panel">
      <div class="content-wrapper">
        <div class="page-header">
          <h3 class="page-title">
            Dashboard
          </h3>
        </div>
        <div class="row grid-margin">

          <?php include("./templates/dashcard.php"); ?>

        </div>




        <div class="row">
          <div class="col-12 grid-margin">
            <div class="card">
              <div class="card-body">
                     <a id="campaigntable">
                <h4 class="card-title">
                  Send Campaign
                </h4>

                <form id="campaign-sender-group" onsubmit="return false" autocomplete="off">
                  <div class="form-group">
                    <label for="exampleInputUsername1">Sender ID</label>
                    <input type="text" class="form-control" required="required" maxlength="11" name="senderID" id="sender" placeholder="It must be 11 characters without spaces or less">
                  </div>


                  <div class="form-group">
                    <label for="recipient-name" class="col-form-label">Recipients</label>
                    <select class="form-control" id="get-group"  name="groupID" required>
                      
                    </select>

                  </div>

                  <div class="form-group">
                    <label for="exampleInputPassword1">Messages</label>
                    <select class="form-control" id="get-message" name="get-message" required>
                    
                    </select>
                    <br>
                    <p><strong> Note:</strong> Single Message = 160 Characters | GHS0.035</p>
          
                  </div>
                

                  <div class="form-group d-flex align-items-center">

                    <label>Schedule Message (Optional): Format DD-MM-YYYY HH:MM AM/PM</label>

                    <span style="width: 20px"></span>
                    <div class="ml-auto">
                    <label class="switch">
                    <input type="checkbox" id="togBtn">
                    <div class="slider round">
                    <!--ADDED HTML -->
                    <span class="on">ON</span>
                    <span class="off">OFF</span>
                  <!--END-->
                    </div>
                  </label>
</div>
                    
                  </div>
                  <div class="form-group">
                  <div class="input-group date" id="id_0">
                            <input type="text"  class="form-control"  name="scheduleTime" id="timer" style="display:none;"  placeholder=" eg 15-11-2020 03:30 PM"/>
                            
                        </div>
                 
</div>
              <div class="form-group">
                <button type="button" id="checkCostCampaign" class="btn btn-primary mr-2">Check Cost</button> ||  
                <button type="submit" class="btn btn-primary mr-2">Send Campaign</button>
                </div>
                  


                </form>


              </div>
            </div>
          </div>
        </div>






        <div class="row">

      <?php include("./templates/socialpage.php"); ?>


      </div>
    </div>
      <!-- content-wrapper ends -->
      <!-- partial:partials/_footer.html -->


      <?php include("./templates/footer.php"); ?>


      <!-- partial -->
    </div>
    <!-- main-panel ends -->
  </div>
  <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->

  <!-- modaljs -->

  <!-- plugins:js -->
  <script src="vendors/js/vendor.bundle.base.js"></script>
  <script src="vendors/js/vendor.bundle.addons.js"></script>
  <!-- endinject -->
  <!-- Plugin js for this page-->
  <!-- End plugin js for this page-->
  <script src="myjs/send-msg.js"></script>
  <script src="myjs/contacts.js"></script>
  <script src="myjs/msg-template.js"></script>
  <!-- inject:js -->
  <!--remember to uncomment this-->
  <!--<script src="myjs/send-msg.js"></script>-->

  <script src="myjs/csv.js"></script>
  <script src="myjs/fetcher.js"></script>
  <script src="myjs/maxLength.js"></script>
  <script src="js/off-canvas.js"></script>
  <script src="js/hoverable-collapse.js"></script>
  <script src="js/misc.js"></script>
  <script src="js/settings.js"></script>
  <script src="js/todolist.js"></script>
  <!-- endinject -->
  <!-- Custom js for this page-->
  <script src="js/dashboard.js"></script>
  <!-- End custom js for this page-->
</body>


</html>