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