Sindbad~EG File Manager

{% extends "BO_Admin/dashboard.html" %}
{% block head %}
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css" />
{% endblock %}
{% block title %}All Payment {% endblock %}
{% block content %}

<div class="pr-3 pl-3 mt-3">
    <!-- <div class="card"> -->
        <!-- <div class="card-body"> -->
            <input type="hidden" name="html_data" id="html_data" value="{{html_data}}" />

            <center><h3><label>All Payment</label></h3></center>
            <div id="All_Payment_Table" class="mobile-responsive">
                <table class="table table-bordered table-striped">
                    <thead style="background-color: #072645; border-color: #dee2e6; color: #fff;">
                        <tr>
                            <th scope="col">S No</th>
                            <th scope="col"  width="15%">Full Name</th>
                            <th scope="col">UTR Number</th>
                            <th scope="col">Amount</th>
                            <th scope="col"  width="15%">Paid On</th>
                            <th scope="col">View Payment</th>
                            <th scope="col"  width="25%">Verification by Admin</th>
                            <th scope="col">Send Mail</th>
                        </tr>
                    </thead>
                    <tbody id="All_Payment_Content"></tbody>
                </table>
            </div>
        <!-- </div> -->
    <!-- </div> -->
</div>

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Payment Screenshot</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <input type="hidden" name="payment_id" id="payment_id" value="{{payment_id or 0}}" />
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <img class="image_container" id="image_container" src="" / style="margin : 20px;height: auto;width: 425px;background-color:#eee;border: 1px dashed #000;">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3">
                        <label>Amount :</label>
                    </div>
                    <div class="col-md-9"><input class="form-control" type="text" name="amount" id="amount" disabled /><br /></div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <label>Paid on :</label>
                    </div>
                    <div class="col-md-9"><input class="form-control" type="text" name="paid_on" id="paid_on" disabled /><br /></div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

 
{% block script %}
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>    
<script type= "text/javascript">
$(document).ready(function(){

    $(".table").dataTable({
            iDisplayLength: 50,
        });




   $("#verify_mail_btn").hide();

   var table_data = $("#html_data").val();
   $("#All_Payment_Content").html(table_data);


  $(document).on('click', '.view_btn', function () {
         var payment_id = $(this).val();
         var url = '/view_payment/'+ payment_id;
        $.ajax({
            type: 'GET',
            url: url,
            success: function (output) {
              var data_1    = JSON.parse(output);
              var msg       = data_1.msg;
              var view_data = data_1.view_data;

              if (msg == "success")
              {

                   $("#payment_id").val(view_data.payment_id);
                    $("#image_container").attr("src",view_data.file); 
                    $("#image_container").show();
                    $("#amount").val(view_data.amount);
                    $("#paid_on").val(view_data.paid_at);
                           
               }
              else
              {
                alert(msg);
                return false;
              } 
                
            },
            error: function(output){
            alert("fail");
            }
        });
    });


    $(".payment_status").on('change',function (e) {
      
        e.preventDefault();
         var payment_status = $(this).children("option:selected").val();
         var payment_id1     = $(this).attr("id");
         var payment_id =  payment_id1.replace("paymentstatus_", "");
         updateVerifiedbyAdmin(payment_id,payment_status);

     e.preventDefault();
     });


     function updateVerifiedbyAdmin(payment_id,payment_status){
          var url = '/update_payment_status/'+ payment_id;
          $.ajax({
          type: 'POST',
          url:  url,
          data: {'payment_status':payment_status},
           success: function (q)
            {
              
              if (confirm("Are you sure verified the screenshot of payment ?")) {      
                   
                  callfunction(payment_id,payment_status);
                   
                   $("#sent_"+payment_id).show();
              
                 }
                 else
                 {
                      // alert ("No data");
                 }

                     // location.reload();
           }
          });
        }

  
    function  callfunction(payment_id,payment_status){
       $('#paymentstatus_'+payment_id+'').replaceWith('<input type="text" class="form-control" name="payment_status" id="'+ payment_id +'" value="'+payment_status+'" disabled>');

    }

  });    

</script>

{% endblock %}