<?php
include('../includes/session.php');
include('../includes/config.php');
include('../template/tngweb/header.php');

// Admin check
if ($udata['id'] != '1' || $udata['type'] != 'admin') {
    echo '<script>
        Swal.fire("Access Denied!", "Only Admin can view this page.", "error")
        .then(()=>{ window.location.href = "../includes/logout.php"; });
    </script>';
    exit;
}

$data = balance_info_api_run($request);
?>

<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">

<div class="page-wrapper">
<div class="page-content">

<div class="card luxury-card shadow-lg border-0">
<div class="card-body">

<div class="d-flex justify-content-between align-items-center mb-4">
  <a href="javascript:history.back()" class="btn btn-outline-primary rounded-pill px-4">
    <i class="fa fa-arrow-left me-2"></i> Go Back
  </a>
  <h4 class="fw-bold text-primary mb-0">🚀 API Balance & History</h4>
</div>

<!-- Summary Cards -->
<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="card bg-gradient-primary text-white shadow-sm">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-0">👤 Name</h6>
                        <h4 class="mb-0"><?= htmlspecialchars($data['name'] ?? 'N/A') ?></h4>
                    </div>
                    <i class="fa fa-user fa-2x opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-gradient-success text-white shadow-sm">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-0">💰 Wallet Balance</h6>
                        <h4 class="mb-0">₹<?= number_format($data['wallet'] ?? 0, 2) ?></h4>
                    </div>
                    <i class="fa fa-wallet fa-2x opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-gradient-info text-white shadow-sm">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-0">📊 Total Transactions</h6>
                        <h4 class="mb-0"><?= number_format($data['data_count'] ?? 0) ?></h4>
                    </div>
                    <i class="fa fa-chart-line fa-2x opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-gradient-secondary text-white shadow-sm">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-0">🕐 Status</h6>
                        <h4 class="mb-0">
                            <span class="badge bg-success"><?= htmlspecialchars($data['status'] ?? 'Active') ?></span>
                        </h4>
                    </div>
                    <i class="fa fa-check-circle fa-2x opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Transactions Table -->
<div class="table-responsive">
<table id="historyTable" class="table table-hover align-middle text-center w-100">
    <thead class="luxury-thead">
        <tr>
            <th>#</th>
            <th>Date & Time</th>
            <th>API Name</th>
            <th>Charge (₹)</th>
            <th>New Balance (₹)</th>
            <th>Details</th>
        </tr>
    </thead>
    <tbody>
        <?php if (!empty($data['data'])): ?>
            <?php $sn = 1; foreach ($data['data'] as $row): ?>
            <tr>
                <td><?= $sn++ ?></td>
                <td data-order="<?= strtotime($row['date'] ?? '') ?>">
                    <?= date('d M Y h:i A', strtotime($row['date'] ?? 'now')) ?>
                 </td>
                <td><span class="badge bg-info text-dark"><?= htmlspecialchars($row['ApiName'] ?? '-') ?></span></td>
                <td class="fw-bold <?= ($row['charge'] ?? 0) < 0 ? 'text-danger' : 'text-success' ?>">
                    <?= ($row['charge'] ?? 0) < 0 ? '-' : '+' ?>₹<?= number_format(abs($row['charge'] ?? 0), 2) ?>
                </td>
                <td>₹<?= number_format($row['new_balance'] ?? 0, 2) ?></td>
                <td class="text-wrap" style="max-width: 250px;"><?= htmlspecialchars($row['data'] ?? '-') ?></td>
            </tr>
            <?php endforeach; ?>
        <?php else: ?>
            <tr>
                <td colspan="6" class="text-center">No transaction history found</td>
            </tr>
        <?php endif; ?>
    </tbody>
</table>
</div>

</div>
</div>
</div>
</div>

<style>
/* ========== STYLES ========== */
.luxury-card {
    border-radius: 20px;
    background: linear-gradient(145deg, #fff, #eef2ff);
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.luxury-thead th {
    background: linear-gradient(135deg, #1e1e2f, #2f3350);
    color: #fff;
    font-weight: 600;
    padding: 12px;
}
.bg-gradient-primary { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.bg-gradient-success { background: linear-gradient(135deg, #10b981, #059669); }
.bg-gradient-info { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.bg-gradient-secondary { background: linear-gradient(135deg, #64748b, #475569); }
.dataTables_wrapper .dataTables_filter input {
    border-radius: 20px;
    padding: 6px 15px;
    border: 1px solid #e2e8f0;
    background: #fff;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 20px;
    padding: 6px 12px;
    background: #f1f5f9;
    border: none;
    color: #475569 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #3b82f6 !important;
    color: white !important;
    border-radius: 20px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #e2e8f0 !important;
}
.btn-group .btn {
    font-size: 12px;
    padding: 6px 12px;
}
</style>

<?php include('../template/tngweb/footer.php'); ?>

<!-- DataTables Scripts -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>

<script>
$(document).ready(function() {
    // Destroy existing instance if any
    if ($.fn.dataTable.isDataTable('#historyTable')) {
        $('#historyTable').DataTable().destroy();
    }
    
    // Initialize DataTable
    const table = $('#historyTable').DataTable({
        responsive: true,
        pageLength: 10,
        lengthChange: false,
        order: [[1, 'desc']], // Sort by Date & Time
        dom: "<'row mb-3'<'col-md-6'l><'col-md-6 text-end'B>>" +
             "<'row'<'col-12'tr>>" +
             "<'row mt-3'<'col-md-5'i><'col-md-7'p>>",
        buttons: [
            { extend: 'excel', className: 'btn btn-success btn-sm rounded-pill px-3', text: '<i class="fa fa-file-excel"></i> Excel' },
            { extend: 'pdf', className: 'btn btn-danger btn-sm rounded-pill px-3', text: '<i class="fa fa-file-pdf"></i> PDF' },
            { extend: 'print', className: 'btn btn-primary btn-sm rounded-pill px-3', text: '<i class="fa fa-print"></i> Print' }
        ],
        columnDefs: [
            { orderable: false, targets: [0, 5] } // Disable sorting on # and Details
        ],
        language: {
            search: "🔍 Search:",
            lengthMenu: "Show _MENU_ entries",
            info: "Showing _START_ to _END_ of _TOTAL_ entries",
            zeroRecords: "No matching records found",
            emptyTable: "No data available"
        }
    });
    
    // Update serial numbers on draw
    table.on('draw.dt', function() {
        const info = table.page.info();
        table.column(0, { search: 'applied', order: 'applied', page: 'applied' }).nodes().each(function(cell, i) {
            cell.innerHTML = info.start + i + 1;
        });
    });
});
</script>

<script src="../template/tngweb/assets/plugins/simplebar/js/simplebar.min.js"></script>
<script src="../template/tngweb/assets/plugins/metismenu/js/metisMenu.min.js"></script>
<script src="../template/tngweb/assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js"></script>
<script src="../template/tngweb/assets/js/app.js"></script>
</html>