<?php
$id = isset($_GET['resellerid']) ? (int)$_GET['resellerid'] : 0;
$customers = $obj->view_all_by_cond('re_tbl_agent', " entry_by=$id order by ag_id DESC ");
?>

<style>
  .modern-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
    overflow: hidden;
    margin-bottom: 16px;
  }

  .modern-card-header {
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  .modern-card-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #111827;
  }

  .modern-card-header small {
    color: #6b7280;
    font-size: 12px;
  }

  .modern-card-body {
    padding: 14px;
  }

  .table-modern thead th {
    background: #f3f4f6;
    font-weight: 700;
    font-size: 13px;
    color: #111827;
    white-space: nowrap;
    border-bottom: 1px solid #e5e7eb !important;
  }

  .table-modern td {
    font-size: 13px;
    vertical-align: middle;
  }

  .badge-soft {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #111827;
  }

  .badge-soft.success {
    background: #ecfdf5;
    border-color: #d1fae5;
    color: #065f46;
  }

  .badge-soft.danger {
    background: #fef2f2;
    border-color: #fee2e2;
    color: #991b1b;
  }

  .badge-soft.warn {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
  }

  .summary-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 12px 14px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
  }

  .summary-pill {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 12px;
    min-width: 180px;
    background: #fafafa;
  }

  .summary-pill .label {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 2px;
  }

  .summary-pill .value {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
  }

  /* Make action button compact */
  .btn-sm {
    padding: .25rem .5rem;
  }

  @media (max-width: 576px) {
    .summary-pill {
      width: 100%;
      min-width: auto;
    }
  }
</style>

<div class="container-fluid py-2">

  <div class="modern-card">
    <div class="modern-card-header">
      <div>
        <h6>Customer Billing Information</h6>
        <small>Reseller ID: <?php echo $id; ?> • Table search & pagination supported</small>
      </div>
      <div>
        <small class="text-muted">Tip: Use search box to find IP / Name / ID</small>
      </div>
    </div>

    <div class="modern-card-body">
      <div class="table-responsive">
        <table id="customerBillingTable" class="agentAllData table table-bordered table-hover table-striped table-modern datatable w-100">
          <thead>
            <tr>
              <th style="min-width:180px;">Name - ID </th>
              <th style="min-width:130px;">IP/Secret</th>
              <th style="min-width:160px;">Address</th>
              <th style="min-width:130px;">Mobile</th>
              <th style="min-width:150px;">Disconnected Date</th>
              <th style="min-width:130px;">Package/Speed</th>
              <!-- <th style="min-width:120px;" class="text-end">Due/Advance</th> -->
            </tr>
          </thead>

          <tbody>
            <?php
            foreach ($customers as $customer) {
            ?>
              <tr>
                <!-- <td>
                <div class="fw-bold">
                  <a href="?page=reseller-customer-ledger&id=<?php echo (int)$customer['ag_id']; ?>" class="text-decoration-none">
                    <?php echo htmlspecialchars($customer['cus_id']); ?>
                  </a>
                </div>
                <div class="text-muted small">
                  <a href="?q=reseller-customer-details&id=<?php echo (int)$customer['ag_id']; ?>" class="text-decoration-none">
                    <?php echo htmlspecialchars($customer['ag_name']); ?>
                  </a>
                </div>
              </td> -->

                <td><?php echo htmlspecialchars($customer['ag_name'] ?? 'N/A'); ?> - <?php echo htmlspecialchars($customer['cus_id'] ?? 'N/A'); ?></td>
                <td><?php echo htmlspecialchars($customer['ip'] ?? 'N/A'); ?></td>
                <td><?php echo htmlspecialchars($customer['ag_office_address'] ?? 'N/A'); ?></td>
                <td><?php echo htmlspecialchars($customer['ag_mobile_no'] ?? 'N/A'); ?></td>
                <td><?php echo htmlspecialchars($customer['mikrotik_disconnect'] ?? '0'); ?></td>

                <td class="text-end fw-bold"><?php echo htmlspecialchars($customer['mb'] ?? 'N/A'); ?></td>
              </tr>
            <?php } ?>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>

<?php $obj->start_script(); ?>
<script>
  $(document).ready(function() {

    if ($.fn.DataTable) {
      if (!$.fn.DataTable.isDataTable('#customerBillingTable')) {
        $('#customerBillingTable').DataTable({
          responsive: true,
          pageLength: 10,
          lengthMenu: [10, 20, 50, 100, 500, 1000],
          order: [],
          columnDefs: [{
              orderable: false,
              targets: 0
            } // Action column
          ],
          dom: `<"row px-2 pt-2"<"col-sm-6"l><"col-sm-6 text-end"f>>` +
            `<"row"<"col-12"tr>>` +
            `<"row px-2 pb-2"<"col-sm-5"i><"col-sm-7 text-end"p>>`
        });
      }
    }

    $(document).on('click', 'button.sms', function(e) {
      e.preventDefault();

      var $btn = $(this);
      var agentId = $btn.data('agent');
      var agentName = $btn.data('name');

      $btn.addClass('disabled').prop('disabled', true);

      $.get("reseller/sms/ajax_send_due_bill_single_sms.php", {
        agent: agentId
      }, function() {
        alert('An SMS sent to ' + agentName + ' As Your Custom SMS');
      }).fail(function() {
        alert('SMS failed!');
        $btn.removeClass('disabled').prop('disabled', false);
      });
    });

    $(document).on('click', 'a.paid', function(e) {
      e.preventDefault();

      var $btn = $(this);

      $btn.removeClass('btn-primary')
        .addClass('btn-secondary disabled')
        .prop('disabled', true);

      var agentName = $btn.data('name');
      var amountTk = $btn.data('amount');
      var token = $btn.data('token');
      var url = $btn.attr('href');



      $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        data: {
          agent_name: agentName,
          amount_tk: amountTk,
          token: token
        },
        success: function(res) {

          console.log(res);

          if (res.ok === true) {
            Swal.fire({
              icon: 'success',
              title: 'Payment Successful',
              html: `
                        <b>Customer:</b> ${agentName}<br>
                        <b>Amount:</b> ${res.customer.taka} TK<br>
                        <b>Next Disconnect:</b> ${res.customer.new_disconnect}
                    `,
              confirmButtonText: 'OK'
            }).then((result) => {
              if (result.isConfirmed) {
                location.reload();
              }
            });

            $btn.text('Paid')
              .removeClass('btn-primary')
              .addClass('btn-success disabled')
              .prop('disabled', true);
            window.onload()

          } else {

            Swal.fire({
              icon: 'error',
              title: 'Payment Failed',
              text: res.msg || 'Bill payment failed',
              confirmButtonText: 'Close'
            });

            $btn.removeClass('btn-secondary disabled')
              .addClass('btn-primary')
              .prop('disabled', false);
          }

        },
        error: function(xhr) {

          console.error(xhr.responseText);
          alert('Server error occurred');



          $btn.removeClass('btn-secondary disabled')
            .addClass('btn-primary')
            .prop('disabled', false);
        }
      });
    });



  });
</script>
<?php $obj->end_script(); ?>