<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Next Film | Payments</title> <style> #approve-button{ background-color: red; } #approve-button a{ color:white; text-decoration:none; } #cancelit{ background-color: green; } #popup{ background-color: grey; border: solid black 1px; border-radius: 5px; text-align: center; padding: 1cm; z-index: 99999; } #popup h3{ color :white; margin: 1em; } #popup button{ padding: 4px 7px 4px 7px; color: white; border:solid white 1px; margin-right:1cm ; } .disabledbutton { pointer-events: none; opacity: 0.1; } </style> </head> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"> <body> <h2 style="text-align: center;">Refund Admin</h2> <div id="multilingual"> <div class="" id="spinner_div" style="display:none"> <label style="font-weight:900;font-size:19px">Please Wait for the Processing to Complete...</label> </div> <div id="example_wrapper2" class="dataTables_wrapper" style="padding: 5%;"> <form method="POST"> {% csrf_token %} <button type="submit" value="Submit">Download Payment Details</button> </form> <table id="example2" class="display" style="width:100%;"> <thead> <tr> <th>S.NO</th> <th>User</th> <th>Date</th> <th>Services Used</th> <th>Service Id</th> <th>Total Amount</th> <th>Discount</th> <th>Amount Charged</th> <th>Gateway Fee</th> <th>Currency</th> <th>Payment Status</th> <th>Payment Gateway</th> <th>Action</th> </tr> </thead> <tbody> {% for i in centralPaymentData %} <tr class="text-center"> <td>{{ forloop.counter }}</td> <td>{{ i.user_id }}</td> <td>{{ i.date }}</td> <td>{{ i.services_used }}</td> <td>{{ i.services_id }}</td> <td>{{ i.total_amount }}</td> <td>{{ i.discount }}</td> <td>{{ i.amount_charged }}</td> <td>{{ i.gateway_fee }}</td> <td>{{ i.currency }}</td> <td>{{ i.payment_status }}</td> <td>{{ i.payment_gateway }}</td> {% if i.payment_status == 'success' or i.payment_status == 'refunded-rejected' %} <td><button onclick="popup('{{i.amount_charged}}', '{{i.id}}');">Refund</button></td> {% elif i.payment_status == 'refunded' %} <td>Refunded</td> {% else %} <td>N/A</td> {% endif %} </tr> {% endfor %} </tbody> </table> </div> </div> <div id="popup" style="position: fixed; transform: translate(-50%, -50%);top:50%; left:50%; display: none;"> <h3 id="popup-title" style="text-align: center;"></h3> <div style="display: flex;justify-content: center;"> <button id='cancelit' onclick="document.getElementById('popup').style.display = 'none';">Cancel</button> <button id="approve-button" onclick="dd1();"></button> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script> <script> function dd1(){ const elem1 = document.getElementById("spinner_div"); elem1.style.display = "block"; $("#example_wrapper2").addClass("disabledbutton"); elem1.style.position = "absolute"; elem1.style.top = "50%"; elem1.style.left = "50%"; elem1.style.transform = "translate(-50%, -50%)"; } </script> <script> function popup(refund_amount, id, type){ document.getElementById('popup').style.display = 'block'; document.getElementById('popup-title').innerHTML = 'Are you sure you want to Refund : <b>' + refund_amount + '</b>?'; document.getElementById('approve-button').innerHTML = '<a style=" text-decoration : none;" href="/pay/refund_admin/'+id+ '">Confirm</a>'; } </script> <script> $(document).ready(function() { // Setup - add a text input to each footer cell $('#example2 tfoot th').each( function () { var title = $('#example2 thead th').eq( $(this).index() ).text(); $(this).html( '<input type="text" placeholder="Search '+title+'" />' ); } ); // DataTable var table = $('#example2').DataTable( { stateSave: true } ); // Restore state var state = table.state.loaded(); if ( state ) { table.columns().eq( 0 ).each( function ( colIdx ) { var colSearch = state.columns[colIdx].search; if ( colSearch.search ) { $( 'input', table.column( colIdx ).footer() ).val( colSearch.search ); } } ); table.draw(); } // Apply the search table.columns().eq( 0 ).each( function ( colIdx ) { $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () { table .column( colIdx ) .search( this.value ) .draw(); }); }); }); </script> <!-- <script>--> <!-- $(document).ready(function() {--> <!-- $('#example').DataTable({--> <!-- "pagingType": "full_numbers"--> <!-- });--> <!-- });--> <!-- function deleteRow(btn) {--> <!-- var row = btn.parentNode.parentNode;--> <!-- row.parentNode.removeChild(row);--> <!-- }--> <!-- // ///////////////--> <!-- $(".button").on("click", function() {--> <!-- $('input:checked').not('.all').parents("tr").remove();--> <!-- });--> <!-- $('.all').on('click', function() {--> <!-- var $inputs = $('table').find('input');--> <!-- $inputs.prop('checked', 'checked');--> <!-- });--> <!-- </script>--> </body> </html>