<!DOCTYPE html>
<html>
<head>
    <title>Payment Reminder</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .notification-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        .notification-content {
            background: white;
            padding: 30px;
            border-radius: 10px;
            max-width: 600px;
            width: 90%;
        }
        .payment-steps {
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="notification-modal">
        <div class="notification-content">
            <h1 class="text-danger">Payment Reminder</h1>
            <div class="alert alert-warning">
                <strong>Important:</strong> Your service <strong>Sheen_oil_traders</strong> will be suspended after 4th of the month if payment is not received.
            </div>
            
            <div class="payment-steps">
                <h4>How to make payment:</h4>
                <ol>
                    <li>Login to your client portal</li>
                    <li>Go to Billing section</li>
                    <li>Pay the outstanding invoice</li>
                    <li>Payment will be processed within 24 hours</li>
                </ol>
            </div>
            
            <p>If you've already made payment, please ignore this message.</p>
            
            <div class="d-flex gap-2">
                <a href="https://yourpaymentportal.com" class="btn btn-primary">Make Payment Now</a>
                <a href="mailto:billing@yourcompany.com" class="btn btn-outline-secondary">Contact Support</a>
                <button onclick="closeNotification()" class="btn btn-secondary mt-3">Close This Notification</button>
            </div>
        </div>
    </div>

    <script>
        function closeNotification() {
            document.querySelector('.notification-modal').style.display = 'none';
            // Set cookie to hide for 24 hours
            document.cookie = "hidePaymentNotification=1; max-age=86400; path=/";
        }
        
        // Check if notification should be hidden
        if (document.cookie.includes('hidePaymentNotification=1')) {
            document.querySelector('.notification-modal').style.display = 'none';
        }
    </script>
</body>
</html>