{% include 'main-nav.html' %}
{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'style_urls/assets/plugins/sweetalert/sweetalert.css' %}"/>
<div id="page_top" class="section-body">
            <div class="container-fluid">
                <div class="page-header">
                    <div class="left">
                        <h1 class="page-title"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-plus"></i> Add New</a></button>
</h1>
                    </div>
                    <div class="right">
                        <div class="notification d-flex">
                            <button type="button" class="btn btn-facebook"><i class="fa fa-info-circle mr-2"></i>Need Help</button>
                            <button type="button" class="btn btn-facebook"><i class="fa fa-file-text mr-2"></i>Data export</button>
                            <a href="{% url 'logout' %}"button type="button" class="btn btn-facebook"><i class="fa fa-power-off mr-2"></i>Sign Out</button></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-body">
            <div class="container-fluid">
                <div class="row clearfix">
                    <div class="col-lg-12">
                      <div class="tab-pane fade show active" id="list" role="tabpanel">
                        <div class="table-responsive" id="users">
                            <table id="display" class="display responsive nowrap" width="100%">
                                <thead>
                                <tr>
                                    <th class="min-phone-l">.Id</th>
                                    <th class="min-phone-l">Username</th>
                                    <th class="min-phone-l">planname</th>
                                    <th class="min-phone-l">Contactperson</th>
                                    <th class="min-phone-l">Phone</th>
                                    <th class="min-phone-l">paymentmethod</th>
                                    <th class="min-phone-l">status</th>
                                    <th class="min-phone-l">hotspotlocation</th>
                                    <th class="min-phone-l">nextbill</th>
                                    <th class="min-phone-l">Action</th>

                                </tr>
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>
                        </div>
                         </div>           
                </div>
                  </div>      
                  <script>
        $(document).ready(function () {
            $('#display').DataTable({
              rowReorder: {
            selector: 'td:nth-child(2)'
        },
        colReorder: true,
        responsive: true,
            dividerThickness: 5,
            responsive: true,
            type:'GET',
            bLengthChange: true,
            lengthMenu: [[10, 20,50,-1], [10, 20,50,"All"]],
            bFilter: true,
            bSort: true,
            bPaginate: true,
            "ajax": '{% url 'userbillinfo_list'%}',
            "columns": [
            { "data" : "id" },
            { "data" : "username" ,
            render: function (data, type, row, meta) {
            var ID = row[0];
            return '<a data-toggle="tooltip" class="btn btn-sm btn-link" title="detail-view" href="{% url "user_info" %}?user='+row.username+'">' + data + '</a>';
        }
      },
        
        { "data" : "planname" },
        { "data" : "contactperson" },
        { "data" : "phone" },
        { "data" : "paymentmethod" },
        { "data" : "phone",
        render: function (data, type, row, meta) {
         var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
        var yyyy = today.getFullYear();
        today = yyyy + '-' + mm + '-' + dd;
        past=row.nextbill;
        if(today < past){
        var ID = row[0];
            return '<span class="text-success font-13"><i class="fa fa-check"></i>Online</span>'
        }else{
        return '<span class="text-denger font-13" data-toggle="tooltip" title="Delete"><i class="fe fe-x"></i>Expired</span>'
        }

    },
        },
        { "data" : "hotspotlocation" },
        { "data" : "nextbill" },
        { "data" : "id" ,
        render: function (data, type, row, meta) {
           var ID = row[0];
            return ' <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal3" data-contactperson="'+row.contactperson+'"  data-id="'+row.id+'" data-user="'+row.username+'" data-whatever="'+row.username+'" data-password="'+row.planname+'" data-phone="'+row.phone+'" data-location="'+row.hotspotlocation+'" data-nextbill="'+row.nextbill+'"><i class="fe fe-edit"></i></button>'
                    +'<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal5" data-whatever="'+row.contactperson+'" data-username="'+row.username+'" data-phone="'+row.phone+'" data-location="'+row.hotspotlocation+'" data-taxamount=""><i class="fe fe-file"></i></button>'
                    +'<a class="btn btn-primary btn-sm btn-link" onclick="confirmation(event)" data-toggle="tooltip" title="Delete" href="{% url "delete_pppoe" %}?id='+row.username+'"><i class="fe fe-trash"></i></a>'


                    },
                        },
                    ],


            });
        });
        window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove();
    });
}, 2000);



    </script>

 <script>
$(document).on('submit', '#post-form',function(e){
    e.preventDefault();

    $.ajax({
        type:'POST',
        url:'{% url "delete_user" %}',
        data:{
            user:$('#user').val(),
      csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
            action: 'post'
        },
       success: function () {
        swal("Good job!", "You clicked the button!", "success");
        $('#display').DataTable().ajax.reload();
           $('#btnSave').click(function() {
   $('#exampleModal2').modal('hide');
});
      }
       
    });
});


function confirmation(ev) {
ev.preventDefault();
var urlToRedirect = ev.currentTarget.getAttribute('href'); //use currentTarget because the click may be on the nested i tag and not a tag causing the href to be empty
console.log(urlToRedirect); // verify if this is the right URL
swal({
  title: "Are you sure?",
  text: "You won't be able to revert this!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  // redirect with javascript here as per your logic after showing the alert using the urlToRedirect value
  if (willDelete) {
var ajxReq = $.ajax( ''+urlToRedirect+'', {
type : 'DELETE'
});
setTimeout(function(){
$('#display').DataTable().ajax.reload();
}, 1000);

    swal("Poof! User has been deleted!", {
      icon: "success",
    });
  } else {
    swal("You cancelled the request!");
  }
});
}




$('#exampleModal2').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes

  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('Are you sure you want to delete ' + recipient + '?')
  modal.find('.modal-body input').val(recipient)
})
</script>
<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="success1"></div>
        <form id="update_pppoe" method="POST">
              <input type="hidden" class="form-control" id="id" name="id">
            <input type="hidden"  class="form-control" id="username" name="username">
            <input type="hidden" class="form-control" id="password" name="password" placeholder="Edit Password">
             <div class="row">
                <div class="col">
                <label >Choose Package</label>
                <select class="form-control" id="myselect">
                    <option></option>
                <option></option>
                </select>
                </div>
                     <div class="col">
                          <label >Current Package</label>
                 <input class="form-control" id="myinput" type="text"  name="package" value="Autofill here" />
              </div>
             </div>
            <br>
            <div class="form-group">
                  <label >Contact Person</label>
            <input type="text" class="form-control" id="contact" name="contact">
          </div>
            <div class="form-group">
                  <label >Contact Person Phone</label>
            <input type="text" class="form-control" id="phone" name="phone">
          </div>
             <div class="form-group">
                  <label>Location</label>
            <input type="text" class="form-control" id="location" name="location">
          </div>
             <div class="form-group">
                <label >Refill Session Time</label>
                <select class="form-control" id="nextbill" name="nextbill">
                <option>Select</option>
                <option value="Now">Now-(Deactivate)</option>
                <option value="Tommorrow">Tommorrow</option>
                <option value="2">2 Days</option>
                <option value="3">3 Days</option>
                <option value="4">4 Days</option>
                <option value="5">5 Days</option>
                <option value="6">6 Days </option>
                <option value="7">7 Days</option>
                <option value="8">8 Days</option>
                <option value="9">9 Days</option>
                <option value="10">10 Days</option>
                <option value="11">11 Days</option>
                <option value="12">12 Days</option>
                <option value="13">13 Days</option>
                <option value="14">14 Days</option>
                <option value="15">15 Days</option>
                <option value="16">16 Days</option>
                <option value="17">17 Days</option>
                <option value="18">18 Days</option>
                <option value="19">19 Days </option>
                <option value="20">20 Days</option>
                <option value="21">21 Days</option>
                <option value="22">22 Days</option>
                <option value="23">23 Days</option>
                <option value="24">24 Days</option>
                <option value="25">25 Days</option>
                <option value="26">26 Days</option>
                <option value="27">27 Days</option>
                <option value="28">28 Days</option>
                <option value="29">29 Days </option>
                <option value="30">30 Days</option>
                <option value="31">31 Days</option>
            </select>
              </div>
            <button id="product_id1" type="submit" class="btn btn-primary">Update</button>
            {% csrf_token %}
            {{timeout}}
        </form>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>
<script>
$(document).on('submit', '#update_pppoe',function(e){
    e.preventDefault();
    $.ajax({
        type:'POST',
        url:'{% url "update_pppoe" %}',
        beforeSend: function() { 
          $("#product_id1").html('<option> Updating ...</option>');
          $("#product_id1").prop('disabled', true); // disable button
        },
        data:{
            id:$('#id').val(),
            username:$('#username').val(),
            password:$('#password').val(),
            contact:$('#contact').val(),
            myinput:$('#myinput').val(),
            payment_method:$('#payment_method').val(),
            phone:$('#phone').val(),
            location:$('#location').val(),
            nextbill:$('#nextbill').val(),
      csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
            action: 'post'
        },
       success: function (data) {
      var temp='<div class="alert alert-success" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Success!</strong> user Updated successfully! </div>';
      var btn='Update';
      swal({
          title: "success!",
          text: "User updated successfully!",
          icon: "success",
          button: "Ok!",
        });
       //$("#success1").append(temp);
      $("#product_id1").html('');
      $("#product_id1").append(btn);
      $("#product_id1").prop('disabled', false);
        $("#post-form1")[0].reset();
        $('#display').DataTable().ajax.reload();
      }
       
    });
});
</script>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        
        <h5 class="modal-title" id="exampleModalLabel">Add Pppoe User</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="success"></div>
         <form method="POST" id="post-form1">
            {% csrf_token %}
  <div class="row">
    <div class="col">
        <label>Username</label>
           <input type="hidden" class="form-control" id="idw" name="id" placeholder="username" value="{{request.user.username}}" required>
      <input type="text" class="form-control" id="usernamew" name="username" placeholder="username" required>
    </div>
    <div class="col">
          <label>Password</label>
      <input type="text" class="form-control" id="passwordw" name="password" placeholder="password" required>
    </div>
  </div>
  <div class="row">
    <div class="col">
          <label>First name</label>
      <input type="text" class="form-control" id="first_namew" name="first_name" placeholder="First name" required>
    </div>
    <div class="col">
          <label>Last name</label>
      <input type="text" class="form-control" id="last_namew" name="last_name" placeholder="Last name" required>
    </div>
  </div>
     <div class="form-group">
    <label >Payment Method</label>
    <select class="form-control" id="payment_methodw" name="payment_method">
    <option>Mpesa Express</option>
    </select>
  </div>
    <div class="form-group">
    <label>Phone</label>
    <input type="text" class="form-control"  id="phonew" name="phone" placeholder="phone" required>
  </div>
    <div class="form-group">
    <label>Location</label>
    <input type="text" class="form-control" id="locationw" name="location" placeholder="location" required>
  </div>
   <div class="form-group">
    <label >Package</label>
    <select class="form-control" name="package" id="displ" required>
    <option></option>
    </select>
  </div>
  <button id="product_id" type="submit" class="btn btn-primary"><i class="fa fa-plus"></i> Add New</a></button>
</div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>
<script>
$(document).on('submit', '#post-form1',function(e){
    e.preventDefault();
    $.ajax({
        type:'POST',
        url:'{% url "pppoe_list" %}',
        beforeSend: function() { 
          $("#product_id").html('<option> adding...</option>');
          $("#product_id").prop('disabled', true); // disable button
        },
        data:{
            idw:$('#idw').val(),
            usernamew:$('#usernamew').val(),
            passwordw:$('#passwordw').val(),
            first_namew:$('#first_namew').val(),
            last_namew:$('#last_namew').val(),
            payment_methodw:$('#payment_methodw').val(),
            phonew:$('#phonew').val(),
            locationw:$('#locationw').val(),
            displ:$('#displ').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
            action: 'post'
        },
       success: function (data) {
       swal({
          title: "success!",
          text: "User added successfully!",
          icon: "success",
          button: "Ok!",
        });
      var temp='<div class="alert alert-success" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Success!</strong> user added successfully! </div>';
      var btn='<i class="fa fa-plus"></i> Add New';
       //$("#success").append(temp);
      $("#product_id").html('');
      $("#product_id").append(btn);
      $("#product_id").prop('disabled', false);
        $("#post-form1")[0].reset();
        $('#display').DataTable().ajax.reload();
      }
       
    });
});

$(document).ready(function () {
  $("#test").submit(function (event) {
    $.ajax({
      type: "POST",
      url: "/edit_favorites/",
      data: {
        'video': $('#test').val() // from form
      },
      success: function () {
        $('#message').html("<h2>Contact Form Submitted!</h2>")
      }
    });
    return false; //<---- move it here
  });

});

$('#exampleModal3').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  var dealtype = button.data('contactperson')
  var phonenumber = button.data('phone')
  var location = button.data('location')
  var nextbill = button.data('nextbill')
  var password = button.data('password')
  var user= button.data('user')
  var id = button.data('id')
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('Edit User ' + recipient + '?');
  modal.find('.modal-body input').val(recipient)
  modal.find('input[name="contact"]').val(dealtype)
  modal.find('input[name="phone"]').val(phonenumber)
  modal.find('input[name="location"]').val(location)
  modal.find('input[name="nextbill"]').val(nextbill)
  modal.find('input[name="package"]').val(password)
  modal.find('input[name="id"]').val(id)
  modal.find('input[name="user"]').val(user)

})

$('#myselect').on('change', function(){
  $('#myinput').val($(this).val());
})

// init
$('#myselect').change();
</script>
<script>
$(document).ready(function(){
            $.ajax({
                type:'GET',
                url : "{% url 'BillingPlanspppoe' %}",
                success: function(response){
                    $("#displ").empty();
                    for (var key in response.data)
                    {
                     var temp="<option>"+response.data[key].planname+"</option>";
                     $("#displ").append(temp);
                    }

                },
                error: function(response){
                    }
        });

    });
$(document).ready(function(){
            $.ajax({
                type:'GET',
                url : "{% url 'BillingPlanspppoe' %}",
                success: function(response){
                    $("#myselect").empty();
                    for (var key in response.data)
                    {
                     var temp="<option>"+response.data[key].planname+"</option>";
                     $("#myselect").append(temp);
                    }

                },
                error: function(response){
                    }
        });

    });

$("input#usernamew").on({
  keydown: function(e) {
    if (e.which === 32)
      return false;
  },
  change: function() {
    this.value = this.value.replace(/\s/g, "");
  }
});
</script>



<script type="text/javascript" language="javascript" src="https://nightly.datatables.net/js/jquery.dataTables.min.js">
</script>
<script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.2.8/js/dataTables.rowReorder.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.2.8/css/rowReorder.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.dataTables.min.css">

{% include 'footer.html' %}
        {%endblock%}