@extends('wallet.layouts.master')
@section('title','Payment history')
@section('page-css')
    <style>
        .dt-row .col-sm-12 {
            overflow: auto;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('dashboard_d/assets/styles/vendor/datatables.min.css') }}">
@endsection
@section('content')
    <div class="heading d-flex justify-content-between align-items-center gap-3 mt-5 px-1">
            <h2 class='fw-bold fs-2'>Payment history</h2>
        </div>
        <div class="mt-32 bg-line-dark p-3 rounded-4">
            <div class="table-responsive">
                <table id="payment_table" class="display table table-bordered" style="width:100%">
                <thead class="table-header">
                <tr>

                    <th>Package name</th>
                    <th>Invoice ID</th>
                    <th>Action</th>
                    <th>Payment ID</th>
                    <th>Status</th>
                    <th>Pay address</th>
                    <th>Price amount</th>
                    <th>Pay amount</th>
                    <th>Request Date</th>

                </tr>
                </thead>
                <tbody class="table-body">

                @foreach ($payments as $payment)

                    <tr>
                        <td>
                            {{ $payment->package->name ?? '' }}
                        </td>
                        <td>{{ $payment['invoice_id']}}</td>
                        <td>

                            @if ( $payment['payment_status'] != "Paid" )

                                <button id="check_payment_btn{{$payment['payment_id']}}" class="button px-2 rounded-3 fs-12 lh-base py-2"
                                        onclick="checkPaymentStatus(`{{$payment['payment_id']}}`,`{{$payment['invoice_id']}}`)">
                                    Update Status
                                </button>

                            @else
                                <span>{{$payment['payment_status']}}</span>
                            @endif

                        </td>
                        <td>{{$payment['payment_id']}}</td>
                        <td>{{$payment['payment_status']}}</td>
                        <td class="text-center">
                            <span title="Click to copy address"
                                class="button bg-warning crsr-pntr px-3 rounded-3 testingspan d-none "
                                data-address=""><i class="material-symbols-outlined">content_copy</i></span>
                        </td>
                        <td>
                                                         </td>
                        <td> </td>
                        <td></td>
                    </tr>
                @endforeach
                </tbody>
            </table>
            </div>
        </div>
@endsection

@section('script')
    <script src="{{ asset('dashboard_d/assets/js/vendor/datatables.min.js') }}"></script>
    <script>
        $(document).ready(function () {

            $(".testingspan").click(function () {

                var dataValue = $(this).data("address");
                navigator.clipboard.writeText(dataValue);
                // alert("Address copied successfully");
                Swal.fire("success", "Address copied successfully", "success");
            });

            $('#payment_table').DataTable({
                // "order": [[0, "ASC"]],
                pagingType: "simple_numbers",
                "responsive": true, "lengthChange": true, "autoWidth": false,
            });

        });
    </script>
@endsection