@extends('master-admin')

@section('content')
<section class="py-8">
  <div class="max-w-7xl mx-auto px-4">
    <div class="bg-white rounded-xl shadow p-6">
      <h3 class="text-2xl font-bold text-[#3a3058] mb-6">Payment History</h3>
      <div class="overflow-x-auto rounded-lg border border-gray-200">
        <table id="transactions-table" class="min-w-full divide-y divide-gray-200 text-sm whitespace-nowrap">
          <thead class="bg-[#3a3058] text-white">
            <tr>
              <th class="px-4 py-3">#</th>
              <th class="px-4 py-3">Transaction ID</th>
              <th class="px-4 py-3">Plan</th>
              <th class="px-4 py-3">URL Credits</th>
              <th class="px-4 py-3">Total Paid</th>
              <th class="px-4 py-3">Plan Amount</th>
              <th class="px-4 py-3">Taxes</th>
              <th class="px-4 py-3">IGST</th>
              <th class="px-4 py-3">CGST</th>
              <th class="px-4 py-3">SGST</th>
              <th class="px-4 py-3">Status</th>
              <th class="px-4 py-3">Payment Method</th>
              <th class="px-4 py-3">Payment Method Type</th>
              <th class="px-4 py-3">PG</th>
              <th class="px-4 py-3">Bank</th>
              <th class="px-4 py-3">Bank Txn ID</th>
              <th class="px-4 py-3">Bank Unique Ref</th>
              <th class="px-4 py-3">PG Txn ID</th>
              <th class="px-4 py-3">PG Remark</th>
              <th class="px-4 py-3">Date</th>
              <th class="px-4 py-3">Action</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-100">
            <!-- DataTables will populate rows here -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>
@endsection

@push('post_js')
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
  $('#transactions-table').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
      url: '{{ route('admin.billing.transactions.fetch') }}',
      type: 'POST',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    },
    columns: [
      { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
      { data: 'transaction_id', name: 'transaction_id' },
      { data: 'plan', name: 'plan' },
      { data: 'url_credits', name: 'url_credits' },
      { data: 'total_paid', name: 'total_paid' },
      { data: 'plan_amount', name: 'plan_amount' },
      { data: 'taxes', name: 'taxes' },
      { data: 'igst', name: 'igst' },
      { data: 'cgst', name: 'cgst' },
      { data: 'sgst', name: 'sgst' },
      { data: 'status', name: 'status' },
      { data: 'payment_method', name: 'payment_method' },
      { data: 'payment_method_type', name: 'payment_method_type' },
      { data: 'pg', name: 'pg' },
      { data: 'bank', name: 'bank' },
      { data: 'bank_txn_id', name: 'bank_txn_id' },
      { data: 'bank_unique_ref', name: 'bank_unique_ref' },
      { data: 'pg_txn_id', name: 'pg_txn_id' },
      { data: 'pg_remark', name: 'pg_remark' },
      { data: 'date', name: 'date' },
      { data: 'action', name: 'action', orderable: false, searchable: false }
    ],
    createdRow: function(row, data, dataIndex) {
      // Add breathing space to all td
      $(row).find('td').addClass('px-4 py-3');
    },
    drawCallback: function(settings) {
      // Style pagination and shift to right
      var paginate = $('#transactions-table_paginate');
      paginate.addClass('flex justify-end mt-4');
      paginate.find('.paginate_button').addClass('inline-flex items-center justify-center w-8 h-8 rounded bg-gray-100 text-gray-700 hover:bg-gray-200 mx-1').removeClass('current');
      paginate.find('.paginate_button.current').addClass('bg-indigo-600 text-white font-bold');
      paginate.find('.ellipsis').addClass('px-2');
    },
  });
});
</script>
@endpush