<?php
session_start();
include('../login/check_flogin.php');

if (!isset($_SESSION['student_id'])) {
    header("Location: ../login/student_login.php");
    exit();
}

$con = mysqli_connect('localhost', 'root', ''); 
$db = mysqli_select_db($con, 'WSAS');
?>

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Dashboard - Student </title>
    
    <link rel="shortcut icon" type="x-icon" href="../images/logo.png">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
    <link rel="stylesheet" href="../Style/snavstyle.css">

<style>
    body{
        background: #F3F4F4;
    }

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

    .mainbar {
        margin-left: 270px; 
        flex: 1;
        padding: 10px;
        transition: all 0.4s ease;
        overflow-y: auto;
    }

    .mainbar-header {
        padding: 6px 12px;
        background-color: #3e7f31;
        border-radius: 10px;
        margin-bottom: 20px;
    }

    .mainbar-header h1 {
        margin: 0;
        color: white;
        font-size: 18px;
    }

    .mainbar-content {
        background: #fff;
        border-radius: 18px; 
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        max-width: 400px;  
        margin: 40px auto;  
        padding: 20px;
    }

    .payment-acc {
        background: #2b5820; 
        padding: 10px;
        border-radius: 18px;      
        width: 250px;
        text-align: center;     
        margin-bottom: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        color: white;
        transition: 0.2s ease;
    }

    .payment-acc:hover {
        transform: scale(1.03);
    }
        
    .payment-acc img {
        width: 180px;
        height: 180px;
        object-fit: cover;
        border-radius: 12px;      
        margin-bottom: 12px;
        background: white;
        padding: 10px;
    }

    .payment-acc h2, h3, p {
        margin: 8px 0;
        font-size: 11px;
        font-weight: bolder;
    }

    .container {
        display: flex;
        align-items: center;
        justify-content: center;  
        gap: 20px;                
        flex-wrap: wrap;
    }
    
    .note {
        background: #d4edda;
        color: #155724;
        padding: 12px 18px;
        border-radius: 8px;
        font-size: 11px;
        line-height: 1.6;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .note strong {
        color: #155724;
    }

    .qr-image{
        cursor: pointer;
    }

    .qr-modal {
        display: none;          
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
        z-index: 9999;
        padding: 15px;
    }

    .qr-modal-content {
        background: white;
        padding: 20px;
        border-radius: 12px;
        text-align: center;
        min-width: 280px;
        max-width: 90%;            
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }

    .qr-modal-content p {
        font-weight: normal;
    }

    .qr-modal-buttons a,
    .qr-modal-buttons button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: bold;
        line-height: 1.2;
        text-decoration: none;
        cursor: pointer;
        margin-top: 20px;
        width: 100px;
    }

    .download-btn {
        background: #4CAF50;
        color: white;
        border: none;
    }

    .download-btn:hover {
        background: #43a047;
    }

    .modal-close-btn {
        background: #ccc;
        color: #000;
        border: none;
        padding: 6px 16px;
        border-radius: 6px;
        cursor: pointer;
    }

    .modal-close-btn:hover {
        background: #bbb;
    }

    .instruction-container {
        background: #fff;
        padding: 20px;
        border-radius: 18px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        max-width: 1500px;   
        width: 100%;          
        margin: 40px auto;  
        font-size: 11px; 
        font-weight: bold;
    }
    
    .instruction-container h2 {
        text-align: center;
        color: #2b5820;
    }

    .instruction-flex{
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .instrucion-flex h3 {
        text-align: left;
    }

    .instruction-card {
        margin-top: 20px;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        color: #000;
        background: #f0fff4;
    }

    .step, .instruction-card .step {
        background: #ffffff;
        border-radius: 10px;
        padding: 12px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .instruction-card .step p{
        font-size: 11px;
        margin-bottom: 8px;
        text-align: left;
    }

    .instruction-card .step img{
        width: 100%;
        max-width: 200px;
        border-radius: 6px;
    }

    .step-number{
        width: 32px;
        height: 32px;
        background: #2b5820;
        color: white;
        border-radius: 50%;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        font-size: 11px;
    }

    .step {
        display: flex;
        flex-direction: column;
        justify-content: space-between; 
        height: 100%;
    }

    .step p{
        text-align: center;
        font-size: 11px;
        margin-bottom: 8px;
        font-weight: 400;
    }

    .step img{
        width: 100%;
        max-width: 200px;
        border-radius: 6px;
    }

    .steps-grid{
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        gap: 20px;
        margin-top: 15px;
        align-items: stretch;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .toggle-btn {
        background: #2b5820;
        color: #fff;
        border: none;
        padding: 6px 16px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 11px;
    }

    .toggle-btn:hover {
        background: #3e7f31;
    }

    .card-content {
        display: none; 
        margin-top: 15px;
    }

    .instruction-card.active .card-content {
        display: block;
    }

    .top-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .instruction-card {
        background: #f0fff4;
        padding: 20px;
        border-radius: 12px;
        text-align: center;
        cursor: pointer;
    }

    .expanded-card {
        margin-top: 20px;
        padding: 25px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        position: relative;
    }

    .close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 6px;
        border-radius: 50%;
        transition: 0.2s ease;
    }

    .close-btn:hover {
        background: #e0e0e0;
    }

    .close-btn .material-symbols-rounded {
        font-size: 20px;
        color: #333;
    }

    .scrollable-steps {
        max-height: 600px;        
        overflow-y: auto;         
        padding-right: 10px;      
        padding-left: 5px;
        box-sizing: border-box;
    }

    .scrollable-steps::-webkit-scrollbar {
        width: 8px;
    }

    .scrollable-steps::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 8px;
    }

    .scrollable-steps::-webkit-scrollbar-thumb {
        background: #2b5820;
        border-radius: 8px;
    }

    .scrollable-steps .step {
        display: flex;
        flex-direction: column;
        align-items: center;      
        text-align: center;
        margin-bottom: 20px;      
        padding: 10px;            
        box-sizing: border-box;
        height: auto;             
        justify-content: flex-start;
    }

    .scrollable-steps .step img {
        width: 100%;
        max-width: 200px;         
        height: auto;             
        display: block;
        margin: 10px auto;        
        border-radius: 6px;
    }

/* Tablets */
@media screen and (max-width: 768px) {
    .mainbar {
        margin-left: 0;
        padding: 8px;
        margin-top: 60px;
    }

    .mainbar-header {
        padding: 5px 10px;
        border-radius: 8px;
    }

    .mainbar-header h1 {
        font-size: 16px;
        text-align: center;
    }

    .mainbar-content {
        width: 100%;
        max-width: 100%;
        margin: 20px auto;
        padding: 20px;
    }

    .container {
        gap: 15px;
    }

    .payment-acc {
        width: 100%;
        max-width: 300px;
    }

    .top-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile phones */
@media screen and (max-width: 576px) {
    .mainbar {
        margin-left: 0;
        padding: 8px;
        margin-top: 60px;
    }

    .mainbar-header {
        padding: 5px 10px;
        border-radius: 8px;
    }

    .mainbar-header h1 {
        font-size: 16px;
        text-align: center;
    }

    .mainbar-content {
        width: 70%;
        max-width: 100%;
        margin: 15px auto;
        padding: 15px;
        border-radius: 12px;
    }

    .note {
        font-size: 8px;
        padding: 12px 15px;
    }

    .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        gap: 10px;
        padding: 0 10px; 
    }

    .payment-acc {
        width: 100%;
        max-width: 280px;
        padding: 20px;
        border-radius: 14px;
    }

    .payment-acc img {
        width: 150px;
        height: 150px;
    }

    .payment-acc h2 {
        font-size: 8px;
    }

    .payment-acc h3, 
    .payment-acc p {
        font-size: 8px;
    }

    .steps-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .instruction-container h2 {
        font-size: 18px;
        text-align: center;
        color: #2b5820;
    }

    .instruction-card h3,
    .instruction-card h3 strong {
        font-size: 8px; 
    }

    .instruction-card .step p {
        font-size: 8px; 
    }

    .step img {
        max-width: 100%;
        height: auto;
    }

    .top-cards {
        grid-template-columns: 1fr;
    }
}

/* Small phones */
@media screen and (max-width: 400px) {
    .mainbar-header h1 {
        font-size: 10px;
        text-align: center;
    }

    .mainbar-content {
        padding: 12px;
    }

    .payment-acc {
        max-width: 100%;
        padding: 15px;
    }

    .payment-acc img {
        width: 130px;
        height: 130px;
    }

    .qr-modal-content {
        font-size: 6px;
        width: 85%;
        max-width: 180px;
        min-width: unset;
        height: auto;              
        padding: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;                  
    }

    .qr-modal-content p {
        font-size: 6px;
        margin: 0 0 4px 0;         
        text-align: center;
    }

    .qr-modal-buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 4px;                  
        margin-top: 10px;             
    }

    .qr-modal-buttons a,
    .qr-modal-buttons button {
        font-size: 6px;
        font-weight: 600;
        padding: 3px 6px;
        width: 60px;
        margin: 0;                 
    }

    .instruction-container h2 {
        font-size: 8px;   
        font-weight: 600;
    }

    .instruction-card h3 {
        font-size: 6px;
        font-weight: 600;   
    }

    .instruction-card .step p {
        font-size: 6px;
    }

    .instruction-card button,
    .instruction-card .btn,
    .instruction-card .btn-save,
    .instruction-card .btn-cancel {
        font-size: 6px;
        font-weight: 600;
        padding: 3px;
        width: 15%; 
    }
}
</style>
</head>
<body>
    <!-- Side Navigation -->
    <?php include('studentnav.php'); ?>
    <!-- MAIN -->
    <aside class="mainbar">
        <div class="mainbar-header">
            <h1> Payment Accounts </h1>
        </div>

        <div class="mainbar-content">
            <div class="note">
                <strong> Note: </strong><br>
                Please read the payment instructions below the QR code before proceeding with your payment.
            </div>
            
            <div class="container">
                <?php
                    $select_products = mysqli_query($con, "SELECT * FROM `admin_payment_account`");
                    if(mysqli_num_rows($select_products) > 0){
                        while($fetch_product = mysqli_fetch_assoc($select_products)){
                ?>
                <div class="payment-acc">                    
                    <h2><?php echo $fetch_product['platform_type']; ?></h2>

                    <img src="../images/<?php echo $fetch_product['payment_qr']; ?>" 
                        class="qr-image"
                        onclick="openQRModal('../images/<?php echo $fetch_product['payment_qr']; ?>')">

                    <h3><?php echo $fetch_product['payment_number']; ?></h3>
                    <p><?php echo $fetch_product['payment_name']; ?></p>

                    <input type="hidden" name="platform_type" value="<?php echo $fetch_product['platform_type']; ?>">
                    <input type="hidden" name="payment_name" value="<?php echo $fetch_product['payment_name']; ?>">
                    <input type="hidden" name="payment_number" value="<?php echo $fetch_product['payment_number']; ?>">
                    <input type="hidden" name="payment_qr" value="<?php echo $fetch_product['payment_qr']; ?>">
                </div>      
                <?php
                    };
                };
                ?>
            </div>
        </div>

        <div class="instruction-container">
            <h2> PAYMENT INSTRUCTIONS </h2>

            <!-- cards for options and reminder -->
            <div class="top-cards">

                <div class="instruction-card" data-id="scan">
                    <h3><strong>Option 1: Scan the QR Code</strong></h3>
                    <button class="toggle-btn">Read More</button>
                </div>

                <div class="instruction-card" data-id="download">
                    <h3><strong>Option 2: Download the QR Code</strong></h3>
                    <button class="toggle-btn">Read More</button>
                </div>

                <div class="instruction-card" data-id="save">
                    <h3><strong>Reminder: Save the School Bank Account to Favorite</strong></h3>
                    <button class="toggle-btn">Read More</button>
                </div>
            </div>
            <!-- where the content will show -->
            <div id="expandedContainer"></div>
        </div>
        <!-- this is for hidden contents (instructions & pics) -->
        <div id="hiddenContents" style="display:none;">

            <!-- OPTION 1: SCAN-->
            <div data-content="scan">
                <div class="steps-grid">
                    <div class="step">
                        <div class="step-number">1</div>
                        <p>Open your payment app (GCash, Maya, or Mobile Banking). Tap the QR Code Scanner icon.</p>
                        <img src="../images/screenshots/s1.png">
                    </div>
                    <div class="step">
                        <div class="step-number">2</div>
                        <p>Scan the QR code shown above.</p>
                        <img src="../images/screenshots/s2.png">
                    </div>
                    <div class="step">
                        <div class="step-number">3</div>
                        <p>Enter the required amount + ₱15 transaction fee.</p>
                        <img src="../images/screenshots/d3.png">
                    </div>
                    <div class="step">
                        <div class="step-number">4</div>
                        <p>Confirm the details of your transaction. Click on “Confirm.”</p>
                        <img src="../images/screenshots/s4.png">
                    </div>
                    <div class="step">
                        <div class="step-number">5</div>
                        <p>Use your Mobile Key PIN or smartphone’s biometrics to approve.</p>
                        <img src="../images/screenshots/s5.jpg">
                    </div>
                    <div class="step">
                        <div class="step-number">6</div>
                        <p>Save or screenshot the receipt.</p>
                        <img src="../images/screenshots/s6.png">
                    </div>
                    <div class="step">
                        <div class="step-number">7</div>
                         <p>Save or screenshot the receipt and upload it in the <strong>"Settle Payment"</strong> page.</p>
                        <img src="../images/screenshots/sp1.png">
                    </div>
                </div>
            </div>

            <!-- OPTION 2: DL-->
            <div data-content="download">
                <div class="steps-grid">
                    <div class="step"><div class="step-number">1</div>
                    <p>Click the QR code image and download it.</p>
                    <img src="../images/screenshots/od1.png">
                </div>
                    <div class="step">
                        <div class="step-number">2</div>
                        <p>Open your payment app (GCash, Maya, or Mobile Banking). Tap the QR Code Scanner icon and upload the downloaded QR code.</p>
                        <img src="../images/screenshots/s1.png">
                    </div>
                    <div class="step">
                        <div class="step-number">3</div>
                        <p>Select your source of account and pay the required amount + ₱15 transaction fee. Click Continue.</p>
                        <img src="../images/screenshots/d3.png">
                    </div>
                    <div class="step">
                        <div class="step-number">4</div>
                        <p>Save or screenshot the receipt and upload it in the <strong>"Settle Payment"</strong> page.</p>
                        <img src="../images/screenshots/sp1.png">
                    </div>
                </div>
            </div>

            <!-- OPTION 3: SAVE TO FAVE -->
            <div data-content="save">
                <div class="steps-grid">
                    <div class="step">
                        <div class="step-number">1</div>
                        <p>Log in to your payment app.</p>
                        <img src="../images/screenshots/ss1.jpg">
                    </div>
                    <div class="step">
                        <div class="step-number">2</div>
                        <p>Go to "More" and scroll down to Settings.</p>
                        <img src="../images/screenshots/r1.png">
                    </div>
                    <div class="step">
                        <div class="step-number">3</div>
                        <p>Select "Transactions".</p>
                        <img src="../images/screenshots/r2.png">
                    </div>
                    <div class="step">
                        <div class="step-number">4</div>
                        <p>Tap "Manage Favorites", then click "Add new Favorite".</p>
                        <img src="../images/screenshots/r3.png">
                    </div>
                    <div class="step">
                        <div class="step-number">5</div>
                        <p>Select the type of favorite: "Other bank accounts/E-wallets", then search for "Chinabank" and click it.</p>
                        <img src="../images/screenshots/r4.png">
                    </div>
                    <div class="step">
                        <div class="step-number">6</div>
                        <p>Enter the required account details, then click Continue.</p>
                        <img src="../images/screenshots/r5.png">
                    </div>
                    <div class="step">
                        <div class="step-number">7</div>
                        <p>Review the transaction, then click Confirm.</p>
                        <img src="../images/screenshots/r6.png">
                    </div>
                    <div class="step">
                        <div class="step-number">8</div>
                        <p>Next time you pay, go to "Move Money". Select "Transfer Money", then choose the school’s account from your Favorites.</p>
                        <img src="../images/screenshots/r.png">
                    </div>
                </div>
            </div>
        </div>
    </aside>

    <!-- For the QR's modal -->
    <div id="qrModal" class="qr-modal">
        <div class="qr-modal-content">
            <p> Do you want to download the QR code? </p>

            <div class="qr-modal-buttons">
                <a id="downloadQRBtn" class="download-btn" download> Download </a>

                <button onclick="closeQRModal()" class="modal-close-btn">Close</button>
            </div>
        </div>
    </div>

    <script>
        const cards = document.querySelectorAll(".instruction-card");
        const expandedContainer = document.getElementById("expandedContainer");

        cards.forEach(card => {
            card.addEventListener("click", () => {

                const id = card.getAttribute("data-id");
                const content = document.querySelector(`[data-content="${id}"]`).innerHTML;

                // Hide clicked card
                cards.forEach(c => c.style.display = "block");
                card.style.display = "none";

                // Show expanded section
                expandedContainer.innerHTML = `
                    <div class="expanded-card">
                        <button class="close-btn" title="Close">
                            <span class="material-symbols-rounded">close</span>
                        </button>
                        <h3>${card.innerText}</h3>
                        <div class="scrollable-steps">
                            ${content}
                        </div>
                    </div>
                `;

                // Close function
                document.querySelector(".close-btn").onclick = () => {
                    expandedContainer.innerHTML = "";
                    cards.forEach(c => c.style.display = "block");
                };
            });
        });

        // To DL the qr code pic
        function openQRModal(imageSrc) {
            const modal = document.getElementById("qrModal");
            const downloadBtn = document.getElementById("downloadQRBtn");

            modal.style.display = "flex";
            downloadBtn.href = imageSrc;
        }

        function closeQRModal() {
            document.getElementById("qrModal").style.display = "none";
        }

        window.onclick = function(event) {
        const modal = document.getElementById("qrModal");

        if (event.target === modal) {
            modal.style.display = "none";
        }
    }
    </script>
    
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>