<?php
include('header.php');

if ($_SESSION['usertype'] != "ADMIN") {
    ?>
    <script>
        window.location.href = 'index.php';
    </script>
    <?php
    die;
}

if(isset($_POST['delete']) && $_POST['delete'] == "ahkwebsolutions"){
    $id = base64_decode($_POST['id']);
    $del = mysqli_query($conn,"DELETE FROM `upitxn` WHERE id='$id'");
    if($del){
        ?>
        <script>
            $(function(){
                Swal.fire(
                    'Success',
                    'Data Deleted Successfully!',
                    'success'
                )
            });
            window.setTimeout(function() {
                window.location.href = "transhis.php";
            }, 1500);
        </script>
        <?php
    } else {
        ?>
        <script>
            $(function(){
                Swal.fire(
                    'Oops',
                    'Data Not Deleted!',
                    'error'
                )
            });
        </script>
        <?php
    }
}

$res = mysqli_query($conn, "SELECT * FROM `upitxn` ORDER BY id ASC ");
?>

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap" rel="stylesheet">

<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

<!-- FontAwesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #fceabb, #f8b500, #fbd786, #f7797d);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    color: #222;
    min-height: 100vh;
}

.container {
    max-width: 1100px;
    margin: auto;
}

.card {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.card-header {
    background: linear-gradient(90deg, #ff416c, #ff4b2b, #ff6a00);
    color: #fff;
    padding: 1.2rem 2rem;
    text-align: center;
    font-weight: bold;
    font-size: 1.6rem;
    letter-spacing: 1px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
}

.table {
    margin: 0;
    border-spacing: 0 12px;
    width: 100%;
}

.table th {
    background: transparent;
    text-align: center;
    text-transform: uppercase;
    color: #ccc;
    font-size: 13px;
}

.table td {
    background: rgba(255, 255, 255, 0.7);
    color: #333;
    text-align: center;
}

.table tbody tr:hover td {
    background: linear-gradient(90deg, #b2fefa, #0ed2f7);
    color: #000;
}

.amount-col, .status-col {
    width: 100px;
}

.btn {
    border-radius: 25px;
    padding: 6px 16px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-sm {
    font-size: 0.8rem;
}

.btn-danger {
    background: linear-gradient(45deg, #ff416c, #ff4b2b);
    color: white;
}

.btn-success {
    background: linear-gradient(45deg, #00b09b, #96c93d);
    color: white;
}

.btn-primary {
    background: linear-gradient(45deg, #1d976c, #93f9b9);
    color: white;
}

.btn:hover {
    opacity: 0.9;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* Domify style delete button */
.domify-btn {
    background: transparent;
    color: #e53e3e;
    border: 2px solid #e53e3e;
    padding: 5px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.domify-btn i {
    font-size: 1rem;
}

.domify-btn:hover,
.domify-btn:focus {
    background: #e53e3e;
    color: white;
    outline: none;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
</style>

<div class="content-wrapper">
    <div class="container py-5">
        <div class="card shadow-lg">
            <div class="card-header">
                <i class="fa fa-money-check-alt me-2"></i> Customer Transactions
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="table_id" class="table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Phone</th>
                                <th class="amount-col">Amount</th>
                                <th>Txn ID</th>
                                <th class="status-col">Status</th>
                                <th>Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>

                        <tbody>
                        <?php
                        if (mysqli_num_rows($res) > 0) {
                            while ($data = mysqli_fetch_array($res)) {
                                ?>
                                <tr class="animate__animated animate__fadeInUp">
                                    <td><?php echo $data['id']; ?></td>
                                    <td><?php echo htmlspecialchars($data['userid']); ?></td>
                                    <td>
                                        <button class="btn btn-danger btn-sm"><?php echo $data['amount']; ?></button>
                                    </td>
                                    <td><?php echo htmlspecialchars($data['utr']); ?></td>
                                    <td>
                                        <button class="btn btn-success btn-sm"><?php echo $data['status']; ?></button>
                                    </td>
                                    <td><?php echo $data['txn_date']; ?></td>
                                    <td>
                                     

                                        <form method="POST" style="display:inline;" class="delete-form">
                                            <input type="hidden" name="delete" value="ahkwebsolutions">
                                            <input type="hidden" name="id" value="<?php echo base64_encode($data['id']); ?>">
                                            <button type="button" class="btn btn-danger domify-btn delete-btn">
                                                <i class="fa fa-trash-alt"></i> Delete
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                <?php
                            }
                        } else {
                            echo '<tr><td colspan="7">No transactions found.</td></tr>';
                        }
                        ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jQuery and SweetAlert2 Scripts -->
<script src="plugins/jquery/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function() {
    $('.delete-btn').click(function() {
        const form = $(this).closest('form');

        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to undo this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e53e3e',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Yes, delete it!',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });

    $('#table_id').DataTable({
        dom: 'Bfrtip',
        responsive: true,
        pageLength: 25,
        buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
    });
});
</script>

<!-- DataTables and other scripts below as needed -->
<!-- ... your other scripts here ... -->

