<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UPI Payment Link Generator</title>
    <!-- Tailwind CSS CDN for professional and modern styling -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Custom styles for a clean look */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f7f7f9;
        }
        .upi-box {
            background: #ffffff;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            padding: 2.5rem;
            max-width: 480px;
            width: 95%;
        }
        #payButton {
            background-color: #007bff;
            transition: all 0.2s ease-in-out;
        }
        #payButton:hover {
            background-color: #0056b3;
            box-shadow: 0 4px 10px rgba(0, 123, 255, 0.4);
        }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen p-4">

    <div class="upi-box">
        <h1 class="text-3xl font-bold text-gray-800 text-center mb-6">UPI भुगतान शुरू करें</h1>
        <p class="text-center text-sm text-gray-500 mb-8">प्राप्तकर्ता (Recipient) की UPI ID और राशि दर्ज करें।</p>

        <!-- Form Section -->
        <div class="space-y-5">
            
            <!-- Recipient UPI ID Input -->
            <div>
                <label for="upiId" class="block text-sm font-medium text-gray-700 mb-1">प्राप्तकर्ता UPI ID (VPA)</label>
                <input type="text" id="upiId" placeholder="उदाहरण: receiver@bankname" 
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition duration-150" 
                       required>
            </div>

            <!-- Amount Input -->
            <div>
                <label for="amount" class="block text-sm font-medium text-gray-700 mb-1">राशि (Amount) - ₹</label>
                <input type="number" id="amount" placeholder="उदाहरण: 100.50" 
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition duration-150" 
                       step="0.01" min="1" required>
            </div>
            
            <!-- Optional Note Input -->
            <div>
                <label for="note" class="block text-sm font-medium text-gray-700 mb-1">टिप्पणी (Optional Note)</label>
                <input type="text" id="note" placeholder="किसलिए भुगतान कर रहे हैं?" 
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 transition duration-150">
            </div>

            <!-- Payment Button -->
            <button id="payButton" 
                    class="w-full flex items-center justify-center mt-6 text-white font-semibold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-blue-300">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
                </svg>
                Pay via UPI App
            </button>
            
            <!-- Message/Error Display -->
            <div id="message" class="text-center mt-4 text-sm font-medium hidden"></div>

        </div>
        
    </div>

    <script>
        document.getElementById('payButton').addEventListener('click', function() {
            const upiId = document.getElementById('upiId').value.trim();
            const amount = document.getElementById('amount').value.trim();
            const note = document.getElementById('note').value.trim();
            const messageDiv = document.getElementById('message');

            messageDiv.textContent = '';
            messageDiv.classList.add('hidden');

            // 1. Validation
            if (!upiId || !amount) {
                messageDiv.textContent = 'कृपया UPI ID और राशि दोनों दर्ज करें।';
                messageDiv.classList.remove('hidden');
                messageDiv.classList.add('text-red-500');
                return;
            }

            if (isNaN(parseFloat(amount)) || parseFloat(amount) <= 0) {
                messageDiv.textContent = 'कृपया एक वैध राशि दर्ज करें।';
                messageDiv.classList.remove('hidden');
                messageDiv.classList.add('text-red-500');
                return;
            }
            
            // 2. Encode values for URL safety
            const encodedNote = encodeURIComponent(note);
            const encodedUpiId = encodeURIComponent(upiId);
            const amountFixed = parseFloat(amount).toFixed(2); // Ensure two decimal places

            // 3. Construct the UPI Deep Link URL
            // Format: upi://pay?pa=VPA&pn=PayeeName&mc=MerchantCode&tid=TxnId&tr=TxnRef&am=Amount&cu=Currency&url=URL
            // We use the basic mandatory fields: pa (Payee Address), am (Amount), and tn (Transaction Note/Remark)
            
            const upiUrl = `upi://pay?pa=${encodedUpiId}&pn=Recipient&am=${amountFixed}&cu=INR&tn=${encodedNote}`;

            // 4. Initiate the payment via Deep Link
            window.location.href = upiUrl;

            // Optional: Show success message if Deep Link is triggered
            messageDiv.textContent = 'UPI ऐप खोलने का प्रयास किया जा रहा है... अगर यह अपने आप नहीं खुलता है, तो कृपया मैन्युअल रूप से जाँच करें।';
            messageDiv.classList.remove('hidden');
            messageDiv.classList.remove('text-red-500');
            messageDiv.classList.add('text-green-600');
        });
    </script>

</body>
</html>