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

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

// Database connection
$con = mysqli_connect('localhost', 'root', '', 'WSAS');
if (!$con) {
    die("Database connection failed: " . mysqli_connect_error());
}

$student_id = $_SESSION['student_id'];

// Fetch student info
$stmt = $con->prepare("
    SELECT s.f_name, s.l_name, s.m_name, se.semester, se.year_level, c.course_code, c.course_name
    FROM adminstudent s
    LEFT JOIN enroll_student se ON s.student_id = se.student_id
    LEFT JOIN admincourse c ON se.course_id = c.course_id
    WHERE s.student_id = ?
    ORDER BY se.enroll_id DESC
    LIMIT 1
");
$stmt->bind_param('i', $student_id);
$stmt->execute();
$result = $stmt->get_result();
$student = $result->fetch_assoc();
$stmt->close();

// Fetch student payments
$stmt2 = $con->prepare("
SELECT 
    sp.student_id,
    sp.spay_amount AS amount,
    sp.spay_method AS payment_method,  
    sp.payment_type,
    sp.created_at,
    sp.verified_at,
    sp.spay_status AS status,
    es.date_enrolled AS student_date_enrolled
FROM student_payment sp
LEFT JOIN enroll_student es 
    ON sp.student_id = es.student_id
WHERE sp.student_id = ?
ORDER BY sp.created_at DESC
");
$stmt2->bind_param('i', $student_id);
$stmt2->execute();
$trans_query = $stmt2->get_result();
$stmt2->close();
?>

<!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+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<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>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    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;
    }

    .container {
        width: 100%;
        max-width: 1500px;   
        margin: 30px auto;   
        padding: 10px 20px;
        background-color: #4a9c3f;
        border-radius: 10px;
    }

    .transaction {
        background-color: #4a9c3f; 
        padding: 20px;
        border-radius: 10px;
    }

    .transaction-table 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;
        font-size: 12px;
    }

    .transaction-table th {
        background-color: #2b5820; 
        color: white;
        padding: 5px;
        border: 1px solid #2b5820;
        font-size: 11px;
    }

    .transaction-table td {
        border: 1px solid #ccc;
        padding: 3px;
        color: #222;
        font-size: 11px;
    }

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

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

    .no-transactions {
        padding-top: 20px;  
        text-align: center;  
        font-style: italic;  
        color: #303030;      
        font-size: 11px;  
    }

    .search-box {
        position: relative;
        display: inline-block;
        left: 20px;
        right: 50px;
        margin-top: 10px;
    }

    .search-box ion-icon {
        position: absolute;
        left: 10px;    
        top: 50%;
        transform: translateY(-50%);
        color: #2D2D2D;
        font-size: 18px; 
        font-weight: bold;
    }

    .search-box input {
        padding: 4px 10px 4px 40px; 
        width: 200px;
        border-radius: 5px;
        border: 1px solid #ccc;
        color: #333333;
        font-size: 11px; 
    }

    .search-box input::placeholder {
        color: #333333; 
    }

    #transactionSearch:focus {
        outline: none;
        border-color: #3e7f31; 
        box-shadow: 0 0 5px rgba(62,127,49,0.5); 
    }

    .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(.5px);
    }

    .modal-content {
        background-color: #fefefe;
        padding: 20px;
        border-radius: 15px;
        width: 60%;
        max-width: 500px;
        font-size: 11px;
        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 h3 { 
        color: #2b5820; 
        margin-top: 0; 
        margin-bottom: 20px;
        font-size: 11px;
        font-weight: 600;
    }

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

    /* MODAL BUTTONS */
    .modal-buttons {
        margin-top: 30px;
        text-align: center;
    }

    .modal-buttons .btn-save,
    .modal-buttons .btn-cancel {
        padding: 6px 16px;
        margin: 0 5px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 11px;
        font-weight: bold;
        width: 100px;
    }

    .modal-buttons .btn-save {
        background-color: #4CAF50;
        color: #fff;
    }

    .modal-buttons .btn-save:hover {
        background-color: #43a047;
    }

    .modal-buttons .btn-cancel {
        background-color: #ccc;
        color: #000;
    }

    .modal-buttons .btn-cancel:hover {
        background-color: #ADADAD;
    }

    .receipt-header {
        text-align: center;
        margin-bottom: 15px;
    }

    .receipt-header h3 {
        font-size: 11px;
        font-weight: bold;
        margin: 0;
    }

    .receipt-date {
        text-align: right;           
        margin-bottom: 15px;
        margin-right: 30px;
    }

    .receipt-date p {
        display: inline-flex;        
        align-items: center;      
        font-size: 11px;
        margin: 0;
        gap: 5px;                   
    }

    .receipt-date .line {
        width: 120px;               
        border-bottom: 1px solid black;
        text-align: center;          
        padding: 0 5px;
    }

    .line { 
        display: inline-block; 
        width: 100px; 
        border-bottom: 1px solid black; 
        margin-left: 5px; 
    }

    .student-details {
        text-align: left;
        margin-bottom: 15px;
        font-size: 11px;
    }

    .student-details p {
        margin: 4px 0;
    }

    .receipt-table table {
        border-collapse: collapse; 
        font-family: "Segoe UI", sans-serif;
        text-align: center;
        width: 100%;
        font-size: 11px;
        margin-top: 10px;
    }

    .receipt-table th, 
    .receipt-table td {
        border: 1px solid #000; 
        padding: 4px 8px;
        background-color: transparent;
    }

    .receipt-table th {
        font-weight: bold;
        background-color: #fff;
    }

    .receipt-table tr:last-child td {
        font-weight: bold;
        background-color: transparent;
    }

    .error-message {
        background-color: #f8d7da;
        color: #be2332;
        border: 1px solid #f5c6cb;
        padding: 12px 18px;
        border-radius: 10px;
        margin-bottom: 20px;
        margin-top: 40px;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        animation: slideIn 0.5s ease;
    }

    .error-message ion-icon {
        font-size: 20px;
    }

/* 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;
    }

    .container {
        padding: 3px;          
        margin: 3px auto;      
    }

    .modal-content {
        width: 80%;
        font-size: 10px;
        padding: 12px;
    }

    .receipt-date p,
    .student-details {
        font-size: 10px;
    }

    .line {
        width: 130px !important;
    }

    .modal h3 {
        font-size: 10px;
    }

    .transaction {
        padding: 6px;          
        margin: 0;
    }

    .transaction-table {
        margin: 0;
        padding: 0;
    }

    .search-box input {
        margin-top: 3px;
    }

    .search-box input {
        width: 100%;
        font-size: 10px;
    }

    .transaction-table table {
        margin-top: 0;
        font-size: 10px;
    }
    
    .transaction-table th,
    .transaction-table td {
        font-size: 10px;
        padding: 6px;
    }
}

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

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

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

    .container {
        padding: 4px;          
        margin: 8px auto;      
    }

    .transaction {
        padding: 6px;          
        margin: 0;
    }

    .transaction-table {
        width: 100%;
        overflow-x: auto;   
        display: block;
    }

    .transaction-table table {
        font-size: 8px;
    }

    .transaction-table th,
    .transaction-table td {
        font-size: 8px;
        padding: 1px;
        white-space: nowrap;
    }

    .search-box {
        margin: 2px;
    }

    .search-box input {
        font-size: 8px;
        padding: 3px 3px 3px 20px;
        width: 90%;  
    }

    .search-box ion-icon {
        font-size: 12px;   
        left: 5px; 
        margin-top: 2px;    
    }

    .container {
        padding: 8px;
    }

    .modal-content {
        width: 70%;
        font-size: 8px;
        padding: 12px;
    }

    .receipt-date p,
    .student-details {
        font-size: 8px;
    }

    .line {
        width: 90px !important;
    }

    .modal h3 {
        font-size: 8px;
    }

    .modal-buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 6px;
    }

    .modal-buttons .btn-save,
    .modal-buttons .btn-cancel {
        font-size: 8px;
        padding: 6px;
        width: 50px;        
        display: inline-block; 
    }
}

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

    .transaction-table table {
        font-size: 6px;
    }

    .transaction-table th,
    .transaction-table td {
        font-size: 6px;
        padding: 2px;
        white-space: nowrap;
    }

    .search-box input {
        font-size: 6px;
        padding: 3px 3px 3px 20px;
    }

    .search-box ion-icon {
        font-size: 10px;   
        left: 6px; 
        margin-top: 3px;    
    }

    .container {
        padding: 6px;
    }

    .modal-content {
        width: 95%;
        font-size: 6px;
        padding: 12px;
    }

    .receipt-date p,
    .student-details {
        font-size: 6px;
    }

    .line {
        width: 80px !important;
    }

    .modal h3 {
        font-size: 6px;
    }

    .modal-buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 6px;
    }

    .modal-buttons .btn-save,
    .modal-buttons .btn-cancel {
        font-size: 6px;
        padding: 6px;
        width: 50px;        
        display: inline-block; 
    }
}
</style>
</head>
<body>

<?php include('studentnav.php'); ?>

<aside class="mainbar">
    <div class="mainbar-header">
        <h1> Transaction History </h1>
    </div>

    <div id="receiptMessageContainer"></div>

    <div class="container">
        <div class="search-box">
            <ion-icon name="search-outline"></ion-icon>
            <input type="text" id="transactionSearch" placeholder="Search transactions...">
        </div>

        <div class="transaction"> 
            <div class="transaction-table">
                <table>
                    <tr>
                        <th> Date Sent </th>
                        <th> Date Processed </th>
                        <th> Amount Paid </th>
                        <th> Payment Type </th>
                        <th> Description </th>
                        <th> Mode of Payment </th>
                        <th> Status </th>
                    </tr>
                    <?php if(mysqli_num_rows($trans_query) > 0): ?>
                    <?php while($row = mysqli_fetch_assoc($trans_query)):
                        $trans_date = $row['created_at'];
                        $isEnrollment = ($row['payment_type'] === 'Downpayment');
                        $dateProcessed = $isEnrollment
                            ? $row['student_date_enrolled']
                            : $row['verified_at'];
                        $description = $isEnrollment
                            ? 'Enrollment Fee'
                            : ($row['description'] ?? $row['payment_type']);
                        $modeOfPayment = $isEnrollment
                            ? 'Cash'
                            : ($row['payment_method'] ?? '-');
                        $imgSrc = !empty($row['spay_image']) 
                            ? 'data:image/jpeg;base64,' . base64_encode($row['spay_image'])
                            : '../images/no-image.png';
                        $imgSrc = htmlspecialchars($imgSrc, ENT_QUOTES);
                    ?>

                    <tr onclick="openReceiptModal(
                        '<?= $row['status']; ?>',
                        <?= $row['amount']; ?>,
                        '<?= $row['created_at']; ?>',
                        '<?= $row['verified_at']; ?>',
                        '<?= htmlspecialchars($description, ENT_QUOTES); ?>',
                        '<?= addslashes($imgSrc); ?>'
                    )">

                        <!-- Date Sent -->
                        <td>
                            <?= date("F d, Y | h:i A", strtotime($row['created_at'])); ?>
                        </td>

                        <!-- Date Processed -->
                        <td>
                        <?php
                        if ($isEnrollment) {
                            echo date("F d, Y | h:i A", strtotime($row['student_date_enrolled']));
                        } else {
                            echo !empty($row['verified_at'])
                                ? date("F d, Y | h:i A", strtotime($row['verified_at']))
                                : "—";
                        }
                        ?>
                        </td>

                        <!-- Amount -->
                        <td><?= number_format($row['amount'], 2); ?></td>  

                        <!-- Payment Type -->
                        <td>
                        <?php
                        if ($row['payment_type'] === 'Downpayment' && $row['status'] === 'Verified') {
                            echo "Downpayment";
                        } else {
                            echo htmlspecialchars($row['payment_type']);
                        }
                        ?>
                        </td>                      

                        <!-- Description -->
                        <td><?= htmlspecialchars($description); ?></td>

                        <!-- Mode of Payment -->
                        <td><?= htmlspecialchars($modeOfPayment); ?></td>

                        <!-- Status -->
                        <td style="font-weight: 500; color: <?= $row['status'] === 'Pending' ? 'orange' : ($row['status'] === 'Verified' ? 'green' : 'red') ?>">
                            <?= htmlspecialchars($row['status']); ?>
                        </td>
                    </tr>
                    <?php endwhile; ?>
                <?php else: ?>
                <tr>
                    <td colspan="7" class="no-transactions"> No transactions found. </td>
                </tr>
                <?php endif; ?>
                </table>
            </div> 
        </div>
    </div>
</aside>

<!-- Verified Modal -->
<div id="verifiedModal" class="modal">
    <div class="modal-content">  
        <div class="receipt-header">
            <h3> PAYMENT RECEIPT </h3>
        </div>

        <div class="receipt-date">
            <p> Date: <span class="line" id="verifiedModalDate"></span></p>
        </div>

        <!-- Student Details -->
        <div class="student-details">
            <p> Name: <span class="line" style="width: 200px">
                <?= $student['l_name'] . ", " . $student['f_name'] . " " . $student['m_name']; ?>
            </span></p>
            <p> Course: <span class="line"><?= isset($student['course_code']) ? htmlspecialchars($student['course_code']) : 'N/A'; ?></span></p>
            <p> Semester: <span class="line"><?= isset($student['semester']) ? htmlspecialchars($student['semester']) : 'N/A'; ?></span></p>
        </div>

        <div class="receipt-table">
            <table>
                <tr>
                    <th> Description </th>
                    <th> Amount </th>
                </tr>
                <tr style="font-weight:bold;">
                    <td style="text-align:right;"> TOTAL AMOUNT DUE </td>
                    <td id="verifiedModalTotal"></td>
                </tr>
            </table>
        </div>  

        <div class="modal-buttons">
            <button class="btn-save" onclick="downloadVerifiedReceipt()"> Download </button>
            <button class="btn-cancel" onclick="closeVerifiedModal()"> Cancel </button>
        </div>
    </div>
</div>

<!-- Pending Modal -->
<div id="pendingModal" class="modal">
    <div class="modal-content">  
        <div class="receipt-header" style="text-align:center;">
            <h3> Pending Payment </h3>
        </div>
        
        <div class="student-details" style="text-align:left; margin-bottom:15px; font-size:12px;">
            <p> Name: <span class="line" style="width: 200px; display:inline-block;">
                <?= $student['l_name'] . ", " . $student['f_name'] . " " . $student['m_name']; ?>
            </span></p>   
            <p> Course: <span class="line"><?= isset($student['course_code']) ? htmlspecialchars($student['course_code']) : 'N/A'; ?></span></p>
            <p> Semester: <span class="line"><?= isset($student['semester']) ? htmlspecialchars($student['semester']) : 'N/A'; ?></span></p>
            <p> Date: <span class="line" id="pendingDateTime"></span></p>
            <p> Amount: ₱<span class="line" id="modalAmount"></span></p>
        </div>

        <div style="text-align:center; margin: 15px 0;">
            <img id="pendingModalReceipt" class="modal-image" style="max-width:80%; border-radius:10px; display:none;">
        </div>

        <p style="font-size: 12px;"> Please wait for the admin to verify your payment. </p>

        <div class="modal-buttons">
            <button class="btn-cancel" onclick="closePendingModal()"> Close </button>
        </div>
    </div>
</div>

<script>
    // For search
    const searchInput = document.getElementById('transactionSearch');
    searchInput.addEventListener('keyup', function() {
        const filter = this.value.toLowerCase();
        const table = document.querySelector('.transaction-table table');
        const rows = table.getElementsByTagName('tr');

        for (let i = 1; i < rows.length; i++) {
            let row = rows[i];
            let cells = row.getElementsByTagName('td');
            let match = false;
            for (let j = 0; j < cells.length; j++) {
                if (cells[j].textContent.toLowerCase().includes(filter)) {
                    match = true;
                    break;
                }
            }
            row.style.display = match ? '' : 'none';
        }
    });

    // Receipt download (Verified only)
    let hasDownloaded = false;
    function downloadVerifiedReceipt() {
        if (hasDownloaded) {
            alert("You have already downloaded this receipt."); 
            return;
        }

        const userConfirmed = confirm("Are you sure you want to download?");
        if (!userConfirmed) return;

        const original = document.querySelector('#verifiedModal .modal-content');
        const clone = original.cloneNode(true);

        // Remove buttons from clone
        const buttons = clone.querySelector('.modal-buttons');
        if (buttons) buttons.remove();

        html2pdf().set({
            margin: 10,
            filename: 'receipt_' + Date.now() + '.pdf',
            image: { type: 'png', quality: 1 },
            html2canvas: { scale: 3 },
            jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
        }).from(clone).save().then(() => { hasDownloaded = true; })
        .catch(err => console.error("PDF download failed:", err));
    }

    // Open modal based on status
    function openReceiptModal(status, amount, created_at, verified_at, desc, imgPath) {
    let modalId = status === 'Pending' ? 'pendingModal' : 'verifiedModal';
    const modal = document.getElementById(modalId);
    modal.style.display = 'flex';

    const sentDate = new Date(created_at);
    const processedDate = verified_at ? new Date(verified_at) : null;

    if (status === 'Pending') {
        document.getElementById('pendingDateTime').textContent = sentDate.toLocaleString();
        document.getElementById('modalAmount').textContent = numberFormat(amount, 2);

        const img = document.getElementById('pendingModalReceipt');
        img.src = imgPath || '';
        img.style.display = imgPath ? 'block' : 'none';

    } else {
        const isDeclined = (status === 'Declined');

        // Set date
        document.getElementById('verifiedModalDate').textContent =
        processedDate ? processedDate.toLocaleString() : sentDate.toLocaleString();

        // Set total
        const totalEl = document.getElementById('verifiedModalTotal');
        totalEl.textContent = numberFormat(amount, 2);

        const table = modal.querySelector('table');

        // Remove old row if exists
        if (table.rows.length > 2) table.deleteRow(1);

        // Insert new row
        const row = table.insertRow(1);
        const descCell = row.insertCell(0);
        const amountCell = row.insertCell(1);

        descCell.textContent = desc;
        amountCell.textContent = numberFormat(amount, 2);

        // MAKE RED IF DECLINED
        if (isDeclined) {
            descCell.style.color = 'red';
            amountCell.style.color = 'red';
            totalEl.style.color = 'red';
        } else {
            // reset if not declined
            descCell.style.color = '';
            amountCell.style.color = '';
            totalEl.style.color = '';
        }

        // Change title
        const title = modal.querySelector('h3');
        title.textContent = isDeclined ? "DECLINED PAYMENT" : "PAYMENT RECEIPT";

        // Hide Download button and Signature section if Declined
        const downloadBtn = modal.querySelector('.btn-save');
        const signature = modal.querySelector('.signature-section');
        if (isDeclined) {
            if(downloadBtn) downloadBtn.style.display = 'none';
            if(signature) signature.style.display = 'none';
        } else {
            if(downloadBtn) downloadBtn.style.display = 'inline-flex';
            if(signature) signature.style.display = 'block';
        }

        // Optionally, also prevent accidental PDF download (double safety)
        if(isDeclined) hasDownloaded = true;
        else hasDownloaded = false;
    }
}

    // Close modals
    function closeVerifiedModal() { 
    document.getElementById('verifiedModal').style.display = 'none'; 
                }
    function closePendingModal() {
    const modal = document.getElementById('pendingModal');
    modal.style.display = 'none';
    const img = document.getElementById('pendingModalReceipt');
    img.src = '';
    img.style.display = 'none';
}

    // Format number
    function numberFormat(num, decimals=2) {
        return num.toFixed(decimals).replace(/\d(?=(\d{3})+\.)/g,'$&,');
    }

    // Close modal if click outside
    window.onclick = function(event) {
        if (event.target.id === 'verifiedModal') closeVerifiedModal();
        if (event.target.id === 'pendingModal') closePendingModal();
    }

    // Msg popup
    function showMessage(message, type) {
        const container = document.getElementById("receiptMessageContainer");
        container.innerHTML = ""; // clear previous

        const div = document.createElement("div");
        div.className = type === "success" ? "success-message" : "error-message";
        div.innerHTML = `<ion-icon name="${type === "success" ? "checkmark-circle" : "close-circle"}"></ion-icon>${message}`;
        container.appendChild(div);

        // auto remove after 3 seconds
        setTimeout(() => {
            div.style.opacity = "0";
            setTimeout(() => div.remove(), 500);
        }, 3000);
    }
</script>

    <!-- to download receipt modal as a PDF file -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></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>