<?php
require_once 'config.php';
require_once 'includes/db.php';
require_once 'includes/functions.php';
require_login();

$user_id = $_SESSION['user_id'];

try {
    $stmt = $pdo->prepare("
        SELECT t.*, v.title, v.price 
        FROM transactions t 
        JOIN videos v ON t.video_id = v.id 
        WHERE v.user_id = ? 
        ORDER BY t.created_at DESC
    ");
    $stmt->execute([$user_id]);
    $transactions = $stmt->fetchAll();
} catch (PDOException $e) {
    $transactions = [];
}
?>
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <title>Transactions - SonicPesa</title>
    <?php include 'includes/head.php'; ?>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
    <style>
        .toast-container { z-index: 2000; }
        .custom-toast { min-width: 320px; border-radius: 16px !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); animation: slideInCustom 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); position: relative; overflow: hidden; }
        .toast-header { background: rgba(255, 255, 255, 0.9) !important; padding: 12px 16px; color: #111; }
        .toast-icon-wrapper { font-size: 1.2rem; display: flex; align-items: center; }
        .toast-body { padding: 12px 16px 18px; font-weight: 500; letter-spacing: -0.2px; }
        .toast-progress { position: absolute; bottom: 0; left: 0; height: 4px; width: 100%; background: rgba(255, 255, 255, 0.3); }
        .toast-progress::before { content: ""; position: absolute; height: 100%; width: 100%; background: rgba(255, 255, 255, 0.7); animation: progressAnim 4s linear forwards; transform-origin: left; }
        .custom-toast.text-bg-success { background: linear-gradient(135deg, #10b981, #059669) !important; color: white; }
        .custom-toast.text-bg-danger { background: linear-gradient(135deg, #f43f5e, #e11d48) !important; color: white; }
        @keyframes progressAnim { from { transform: scaleX(1); } to { transform: scaleX(0); } }
        @keyframes slideInCustom { from { transform: translateY(20px) scale(0.9); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
    </style>
</head>
<body>
    <?php include 'includes/sidebar.php'; ?>
    <main class="dashboard-main">
        <?php include 'includes/header.php'; ?>
        <div class="dashboard-main-body">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
                <h6 class="fw-semibold mb-0">Transactions</h6>
                <ul class="d-flex align-items-center gap-2">
                    <li class="fw-medium">
                        <a href="dashboard.php" class="d-flex align-items-center gap-1 hover-text-primary">
                            <iconify-icon icon="solar:home-smile-angle-outline" class="icon text-lg"></iconify-icon> Dashboard
                        </a>
                    </li>
                    <li>-</li>
                    <li class="fw-medium">Transactions</li>
                </ul>
            </div>

            <div class="card basic-data-table">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="card-title mb-0">Transactions</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="yajraTable" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Date</th>
                                    <th>Transaction ID</th>
                                    <th>Mobile Number</th>
                                    <th>Method</th>
                                    <th>Mobile Carrier</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php if(!empty($transactions)): ?>
                                    <?php foreach($transactions as $i => $t): ?>
                                    <tr>
                                        <td><?= $i+1 ?></td>
                                        <td><?= date('Y-m-d H:i:s', strtotime($t['created_at'])) ?></td>
                                        <td style="font-family:monospace;"><?= htmlspecialchars($t['tran_id'] ?? '') ?></td>
                                        <td><?= htmlspecialchars($t['phone_number']) ?></td>
                                        <td><span class="badge bg-info-focus text-info-main px-12 py-4 radius-8 fw-bold text-xxs"><?= htmlspecialchars($t['method'] ?: 'Mobile Money') ?></span></td>
                                        <td><span class="bg-primary-50 text-primary-600 px-16 py-4 rounded-pill fw-medium text-sm"><?= getTanzanianCarrier($t['phone_number']) ?></span></td>
                                        <td>TSH <?= number_format($t['amount']) ?></td>
                                        <td>
                                            <?php if($t['status'] == 'completed'): ?>
                                                <span class="bg-success-focus text-success-main px-16 py-4 rounded-pill fw-medium text-sm d-inline-flex align-items-center gap-1">Completed</span>
                                            <?php elseif($t['status'] == 'failed'): ?>
                                                <span class="bg-danger-focus text-danger-main px-16 py-4 rounded-pill fw-medium text-sm d-inline-flex align-items-center gap-1">Failed</span>
                                            <?php else: ?>
                                                <span class="bg-warning-focus text-warning-main px-16 py-4 rounded-pill fw-medium text-sm d-inline-flex align-items-center gap-1">Pending</span>
                                            <?php endif; ?>
                                        </td>
                                    </tr>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <?php include 'includes/footer.php'; ?>
    </main>

    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
    <script>
        $(document).ready(function() {
            var table = $('#yajraTable').DataTable({
                order: [[1, 'desc']], // Automatically sorts by "Date" (Column 1) Descending latest-to-old
                pageLength: 10
            });
            
            const toastEl = document.getElementById('liveToast');
            if (toastEl) {
                const toast = bootstrap.Toast.getOrCreateInstance(toastEl, { delay: 4000 });
                toast.show();
            }
        });
    </script>
</body>
</html>


