<?php include("../database/auth_check.php"); ?>

<?php
$con = mysqli_connect("localhost", "root", "", "WSAS");
if (!$con) {
    die("Database connection failed");
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Verify Payments - Admin</title>
    <link rel="shortcut icon" type="x-icon" href="../images/logo.png">
<link rel="stylesheet" href="../Style/navstyle.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />

<style>
    .dashboard-container {
        display: flex;
        height: 100vh;
    }

    .mainbar {
        margin-left: 300px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .mainbar-header {
        color: black;
        padding: 15px 20px;
    }

    .mainbar-header h1 {
        margin: 0;
        font-size: 24px;
    }

    .mainbar-context {
        flex: 1;
        padding: 20px;
        overflow-y: auto;
    }

    .container1 {
        display: flex;
        padding: 10px 0;
        gap: 20px;
        flex-wrap: wrap;
        align-items: center;
    }

    .container {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .payment {
        background-color: #4a9c3f;
        color: white;
        padding: 20px;
        flex: 1;
        border-radius: 10px;
        width: 100%;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .search-container {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 15px;
    }

    .search-input {
        padding: 6px 12px;
        width: 200px;
        border: 1px solid #aaa;
        border-radius: 6px;
        font-size: 14px;
    }

    .search-input:focus {
        outline: none;
        border-color: #4CAF50;
        box-shadow: 0 0 3px rgba(74,156,63,0.5);
    }

    table {
        width: 100%;
        border-collapse: collapse;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 10px;
        overflow: hidden;
        font-family: "Segoe UI", sans-serif;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        text-align: center;
    }

    table th {
        background-color: #2b5820;
        color: white;
        font-weight: 600;
        padding: 12px;
    }

    table td { 
        padding: 10px; 
        color: #222; 
        border: 1px solid #ccc; 
    }

    table tr:nth-child(even) { 
        background-color: #f8f8f8; 
    }

    table tr:hover { 
        background-color: rgba(74,156,63,0.1); 
        transition: 0.3s; 
    }

    .action-btn { 
        padding: 6px 12px; 
        border: none; 
        border-radius: 6px; 
        cursor: pointer; 
        font-weight: bold; 
        color: white; 
        text-decoration: none; 
        margin-right: 10px;
    }

    .verify-btn { 
        background-color: #4CAF50; 
    }

    .decline-btn { 
        background-color: #f44336; 
    }

    @media (max-width: 1024px) {
    .mainbar { 
        margin-left: 0; 
        margin-top: 70px; 
    }

    .dashboard-container { 
        flex-direction: column; 
        }
    }

    .modal {
        display: none; 
        position: fixed; 
        z-index: 100; 
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        background-color: rgba(0,0,0,0.5); 
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(1px);
    }

    .modal-content {
        background-color: #fefefe;
        padding: 30px;
        border-radius: 15px;
        width: 80%;
        max-width: 500px;
        height: 80%;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        animation: slideIn 0.3s ease;
        position: relative;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .modal h2 { 
        color: #2b5820; 
        margin-top: 0; 
        margin-bottom: 20px;
        font-size: 24px;
    }

    .modal-image {
        max-width: 100%;
        height: 80%;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        margin-bottom: 20px;
    }

    .close {
        position: absolute;
        top: 15px;
        right: 20px;
        color: #aaa;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        transition: 0.3s;
        z-index: 10;
    }

    .close:hover,
    .close:focus {
        color: #2b5820;
    }
</style>
</head>

<body>
<div class="dashboard-container">
    <?php include('adminnav.php'); ?>

    <aside class="mainbar">
        <div class="mainbar-header">
            <h1> Verify Payments </h1>
        </div>

        <div class="mainbar-context">
            <div class="container1">
                <button id="openModal" class="open-btn"> ADD PAYMENT </button>
            </div>
            <div class="container">
                <div class="payment">
                <div class="search-container">
                    <input type="text" id="transactionSearch" class="search-input" placeholder="Search Payments...">
                </div>
                <table>
                    <tr>
                        <th> Student ID Number </th>
                        <th> Student Name </th>
                        <th> Amount </th>
                        <th> Receipt </th>
                        <th> Payment Method </th>
                        <th> Action </th>
                    </tr>
                    <?php if(mysqli_num_rows($payments_query) > 0): ?>
                        <?php while($row = mysqli_fetch_assoc($payments_query)): ?>
                            <tr>
                                <td><?= $row['student_id_num'] ?></td>
                                <td><?= $row['l_name'] . ", " . $row['f_name'] ?></td>
                                <td><?= number_format($row['spay_amount'], 2) ?></td>
                                <td>
                                    <?php if(!empty($row['spay_image'])): ?>
                                        <button onclick="openReceiptModal('../uploads/student_receipt/<?= basename($row['spay_image']) ?>')"> View </button>                  
                                    <?php else: ?>
                                        N/A
                                    <?php endif; ?>
                                </td>
                                <td> Online </td>
                                <td>
                                    <button class="action-btn verify-btn" onclick="window.location.href='vpay.php?action=verify&sp_id=<?= $row['sp_id'] ?>'"> Verify </button>
                                    <button class="action-btn decline-btn" onclick="declinePayment(<?= $row['sp_id'] ?>)"> Decline </button>
                                </td>
                            </tr>
                            <?php endwhile; ?>                              
                        <?php else: ?>
                            <tr><td colspan="6"> No payments found. </td></tr>
                        <?php endif; ?>
                </table>
            </div>        
        </div>
    </aside>
</div>

<script>
const searchInput = document.getElementById('transactionSearch');
const table = document.querySelector('.mainbar-context table');

searchInput.addEventListener('input', function() {
    const filter = searchInput.value.toLowerCase();
    const rows = table.querySelectorAll('tr');

    rows.forEach((row, index) => {
        if(index === 0) return; 

        const studentID = row.cells[0].textContent.toLowerCase();
        const studentName = row.cells[1].textContent.toLowerCase();
        const amount = row.cells[2].textContent.toLowerCase();

        if(studentID.includes(filter) || studentName.includes(filter) || amount.includes(filter)){
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
});
</script>

<div id="receiptModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <h2> Payment Receipt </h2>
        <img id="img01" class="modal-image" onerror="alert('Image not found! Check file path.')">
    </div>
</div>

<script>
var modal = document.getElementById("receiptModal");
var modalImg = document.getElementById("img01");

function openReceiptModal(src) {
    modal.style.display = "flex";
    modalImg.src = src;  
}

function closeModal() {
    if (modal) {
        modal.style.display = "none";
    }
}

// Download receipt
function downloadReceipt() {
    var imgSrc = modalImg.src;
    var link = document.createElement('a');
    link.href = imgSrc;
    link.download = 'receipt_' + Date.now() + '.jpg';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

// Close modal if user clicks outside the image
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

function declinePayment(sp_id) {
    let reason = prompt("Please enter the reason for declining this payment:");
    if(reason !== null && reason.trim() !== "") {
        window.location.href = "vpay.php?action=decline&sp_id=" + sp_id;
    } else if (reason !== null) {
        alert("Decline reason is required.");
    }
}
</script>

</body>
</html>