<?php include ("header.php");?>

                <div class="dashboard-body">
                    <div class="d-flex justify-content-between mb-3 align-items-center dashboardBodyNav">
                        
                        <!---->

                        
                    </div>
                    <h4 class="mb-4">Notfication</h4>
                    
<style>
    tr:hover {
    background-color: #00000029!important;
}

.detail {
    gap: 15px;
}
.round {
    width: 10px;
    height: 10px;
    font-size: 11px;
    font-weight: 600;
    padding-bottom: 1px;
    background: green;
    border-radius: 50%;
    opacity: 1;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

</style>


<div class="row justify-content-end gy-3">
    <div class="col-12">
        <div class="dashboard-header-menu justify-content-between">
            <div class="div">
                <a href="view-notifications?notification_type=" class="dashboard-header-menu__link  ">All</a>
                <a href="view-notifications?notification_type=Deposit" class="dashboard-header-menu__link   active ">Deposit</a>
                <a href="view-notifications?notification_type=Withdrawal" class="dashboard-header-menu__link  ">Withdrawal</a>
                <a href="view-notifications?notification_type=Trade" class="dashboard-header-menu__link   ">Trade</a>
            </div>
            <form class="d-flex gap-2 flex-wrap">
        
             <div type="button" onclick="if (!window.__cfRLUnblockHandlers) return false; readallNotification('user/read-all')" class="btn btn--success outline flex-fill btn--lg"><i class="las la-check"></i> Mark All as Read</div>
             
            <div class="flex-fill">
                
                <div class="input-group">
                    <select name="status" onchange="if (!window.__cfRLUnblockHandlers) return false; window.location.href=this.value" class="form-control form--control form-select" id="status">
                        <option value="/app/user/view-notifications?notification_type=Deposit&amp;status=">All Notification</option>
                        <option value="/app/user/view-notifications?notification_type=Deposit&amp;status=0" selected="">Pending Notification</option>
                        <option value="/app/user/view-notifications?notification_type=Deposit&amp;status=1">Opened Notification</option>
                    </select>
                </div>
            </div>
        </form>


        </div>
    </div>
    <div class="col-lg-12">
        <div class="table-wrapper">
            <table class="table table--responsive--lg">

                <thead>
                    <tr>
                        <th>Trx</th>
                        <th>Subject</th>
                        <th>Content</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
               
                        <?php
                        $sql = "SELECT `id`, `trx_id`, `user_id`, `amount`, `currency`, `rate`, `gateway`, `type`, `status`, `created_at`, `updated_at` 
                                FROM `transactions` 
                                WHERE `user_id` = ?";
                        
                        $stmt = $conn->prepare($sql);
                        $stmt->bind_param("i", $user_id); 
                        $stmt->execute();
                        
                        $result = $stmt->get_result();
                        
                        while ($transaction = $result->fetch_assoc()) {
                            // Encode transaction data for JavaScript
                            $transactionData = htmlspecialchars(json_encode($transaction), ENT_QUOTES, 'UTF-8');
                        ?>                         
                        <tr>
                            <td data-label="Trx">
                                <div><span class="round"></span> <?= $transaction['trx_id']; ?></div>
                            </td>
                            <td data-label="Subject">
                                <div><?= $transaction['type']; ?> <?= $transaction['status']; ?></div>
                            </td>
                            <td data-label="Content">
                                <div>Your Deposit of $ <?= $transaction['amount']; ?> .....</div>
                            </td>
                            <td data-label="Action">
                                <div class="detail d-flex justify-content-between">
                                    <button type="button" 
                                            class="btn btn--primary outline flex-fill btn--sm" 
                                            onclick="viewTransaction(<?= $transactionData ?>)">
                                        <i class="las la-eye"></i> View
                                    </button>
                                    <button type="button" 
                                            onclick="deleteNotification('delete-transaction/<?= $transaction['trx_id'] ?>')" 
                                            class="btn btn--danger outline flex-fill btn--sm">
                                        <i class="las la-trash"></i> Delete
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <?php } ?>

                        <script>
                            function viewTransaction(transaction) {
                                // Format the date
                                const createdDate = new Date(transaction.created_at).toLocaleString();
                                
                                // Create the HTML content for the alert
                                const content = `
                                    <div class="transaction-details">
                                        <p>Your ${transaction.type} with the sum of $ ${transaction.amount} is being ${transaction.status}</p>
                                        <p>Transaction Date: ${createdDate}</p>
                                    </div>
                                `;
                            
                                // Show the SweetAlert
                                Swal.fire({
                                    title: `${transaction.type} Transaction`,
                                    html: content,
                                    width: '600px',
                                    showCloseButton: true,
                                    showConfirmButton: true, // Enable the OK button
                                    confirmButtonText: 'OK', // Customize the text of the button
                                    customClass: {
                                        container: 'transaction-swal-container',
                                        popup: 'transaction-swal-popup',
                                        content: 'transaction-swal-content'
                                    }
                                });
                            }
                            
                        </script>          
            </tbody>
        </table>
    </div>
</div>
</div>
</div>
<?php include "modals.php";?>