<style>
    /* ─── iPay UI Executive Luxury Theme ─── */
    :root {
        --ipay-teal: #019789;
        --ipay-dark-teal: #00796b;
        --ipay-gold: #FFD700;
        --ipay-card-bg: rgba(0, 0, 0, 0.25);
    }

    /* Container Box Styling */
    .brand-bg {
        background: linear-gradient(180deg, #019789 0%, #005b51 100%) !important;
        padding: 20px !important;
        border-radius: 18px !important;
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        color: #ffffff;
        box-sizing: border-box;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }

    /* Lang Toggle Header */
    .ipay-header-actions {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 15px;
        width: 100%;
    }
    .lang-toggle-btn {
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 20px;
        display: flex;
        overflow: hidden;
        cursor: pointer;
        padding: 2px;
    }
    .lang-toggle-btn span {
        padding: 4px 14px;
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.8);
        border-radius: 15px;
        transition: all 0.2s ease;
    }
    .lang-toggle-btn span.active {
        background: #ffffff;
        color: var(--ipay-teal);
    }

    /* Invoice Info Table Structure */
    .ipay-summary {
        text-align: left;
        width: 100%;
        margin-bottom: 18px;
        background: var(--ipay-card-bg);
        padding: 14px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .ipay-summary p {
        margin: 5px 0;
        font-size: 13px;
        display: flex;
        justify-content: space-between;
    }
    .ipay-summary strong {
        color: #ffffff;
    }

    /* Embedded Account Type Badge Inside Instruction */
    .instruction-acc-badge {
        background: rgba(255, 215, 0, 0.15);
        border: 1px solid rgba(255, 215, 0, 0.4);
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 700;
        color: var(--ipay-gold);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 12px;
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    /* Main Section Body */
    .ipay-main-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .ipay-title {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 8px;
        text-align: center;
    }
    .ipay-subtitle {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.9);
        text-align: center;
        margin-bottom: 18px;
        line-height: 1.4;
    }

    /* Modern Unified Mobile Input Field */
    .ipay-input-wrapper {
        position: relative;
        width: 100%;
        margin-bottom: 15px;
    }
    .ipay-custom-input {
        width: 100%;
        background: #ffffff;
        border: 2px solid transparent;
        border-radius: 12px;
        padding: 14px 16px;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: 3px;
        color: #222222;
        text-align: center;
        outline: none;
        box-sizing: border-box;
        transition: all 0.2s ease;
        box-shadow: inset 0 2px 5px rgba(0,0,0,0.15);
    }
    .ipay-custom-input:focus {
        border-color: var(--ipay-gold);
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    }

    /* Tab Layout for App */
    .method-tab-bar {
        display: flex;
        width: 100%;
        background: rgba(0,0,0,0.3);
        border-radius: 8px;
        margin-bottom: 15px;
        padding: 3px;
    }
    .method-tab {
        flex: 1;
        text-align: center;
        padding: 9px 0;
        font-size: 12px;
        font-weight: 600;
        border-radius: 6px;
        color: rgba(255,255,255,0.8);
    }
    .method-tab.active {
        background: #ffffff;
        color: var(--ipay-teal);
        font-weight: 700;
    }

    /* Click to copy Clean Number Only Design */
    .clean-number-box {
        width: 100%;
        background: #ffffff;
        border-radius: 12px;
        padding: 16px;
        text-align: center;
        margin-bottom: 15px;
        cursor: pointer;
        box-sizing: border-box;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        transition: transform 0.1s ease, box-shadow 0.2s;
        border: 2px solid transparent;
    }
    .clean-number-box:active {
        transform: scale(0.98);
    }
    .clean-number-box:hover {
        border-color: var(--ipay-gold);
    }
    .clean-number-box .num-val {
        font-size: 28px;
        font-weight: 800;
        color: var(--ipay-teal);
        letter-spacing: 1.5px;
        margin: 0;
        line-height: 1;
    }

    /* Highlighted Wait Alert Box */
    .wait-alert-box {
        background: rgba(255, 215, 0, 0.15);
        border: 1px dashed var(--ipay-gold);
        border-radius: 8px;
        padding: 12px;
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
        box-sizing: border-box;
    }
    .wait-alert-box p {
        margin: 0;
        font-size: 12px;
        font-weight: 700;
        color: var(--ipay-gold);
        line-height: 1.4;
    }

    /* Instructions Box */
    .instruction-box {
        width: 100%;
        background: rgba(0,0,0,0.18);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 10px;
        padding: 14px;
        margin-bottom: 18px;
        box-sizing: border-box;
    }
    .ins-step {
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 8px;
        color: #f5f5f5;
        text-align: left;
    }
    .ins-step:last-child { margin-bottom: 0; }
    .ins-step .hl { color: var(--ipay-gold); font-weight: 700; }

    /* Action Buttons Area */
    .ipay-action-row {
        display: flex;
        gap: 10px;
        width: 100%;
    }
    .ipay-btn {
        flex: 1;
        padding: 12px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        border: none;
        cursor: pointer;
        text-align: center;
        transition: all 0.2s;
    }
    .btn-proceed {
        background: #ffffff;
        color: var(--ipay-dark-teal);
        order: 2;
    }
    .btn-close {
        background: rgba(0, 0, 0, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: #ffffff;
        order: 1;
    }
    .btn-cancel {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #ffcccc;
        order: 2;
    }
    .btn-cancel:hover {
        background: rgba(1, 151, 137, 0.2);
        border-color: var(--ipay-teal);
    }

    /* Bottom Countdown Panel */
    .ipay-status-area {
        text-align: center;
        font-size: 12px;
        margin-bottom: 15px;
    }
    .timer-badge {
        color: var(--ipay-gold);
        font-weight: 700;
    }

    /* Functional Utilities */
    .hidden-panel { display: none !important; }
    .phone-error-msg {
        color: var(--ipay-gold);
        font-size: 11px;
        margin-top: -8px;
        margin-bottom: 15px;
        display: none;
        font-weight: 600;
    }

    .brand-bg .transaction, .payment_submit_done { display: none !important; }
</style>

<?php
$acc_tp = decrypt($_GET['acc_tp']);
if ($acc_tp == 'personal') :
    $merchant_number = get_value($setting['params'], 'personal_number');
    $action_label_en = 'Send Money';
    $action_label_bn = 'সেন্ড মানি';
    
    $badge_text_bn = 'টাইপ: পার্সোনাল একাউন্ট (Send Money)';
    $badge_text_en = 'Type: Personal Account (Send Money)';
?>

<div class="ipay-header-actions">
    <div class="lang-toggle-btn" onclick="toggleIpayLanguage()">
        <span id="lang_bn_btn" class="active">বাং</span>
        <span id="lang_en_btn">Eng</span>
    </div>
</div>

<div class="ipay-summary">
    <p><span class="lang-node" data-bn="ইনভয়েস নম্বর:" data-en="Invoice No:">ইনভয়েস নম্বর:</span> <strong><?= $all_info['transaction_id'] ?></strong></p>
    <p><span class="lang-node" data-bn="মোট টাকা:" data-en="Total Amount:">মোট টাকা:</span> <strong><?= currency_format($all_info['total_amount']) ?></strong></p>
    <p><span class="lang-node" data-bn="চার্জ:" data-en="Charge:">চার্জ:</span> <strong>BDT 0.00</strong></p>
</div>

<div id="screen_number" class="ipay-main-body">
    <div class="ipay-title lang-node" data-bn="আপনার iPay একাউন্ট নম্বর দিন" data-en="Your iPay Account Number">আপনার iPay একাউন্ট নম্বর দিন</div>
    <div class="ipay-subtitle lang-node" data-bn="যে নম্বর থেকে টাকা পাঠাবেন, এখানে সেই iPay একাউন্ট নম্বরটি দিন" data-en="Please enter the iPay account number from which you will send the money">যে নম্বর থেকে টাকা পাঠাবেন, এখানে সেই iPay একাউন্ট নম্বরটি দিন</div>
    
    <div class="ipay-input-wrapper">
        <input class="ipay-custom-input" type="tel" id="pure_ipay_num" placeholder="01XXXXXXXXX" maxlength="11" autocomplete="off">
    </div>
    
    <div class="phone-error-msg" id="ipay_input_err" class="lang-node" data-bn="সঠিⅨ ১১ ডিজিটের iPay নম্বর প্রদান করুন" data-en="Please enter a valid 11 digit iPay number">সঠিক ১১ ডিজিটের iPay নম্বর প্রদান করুন</div>

    <div class="ipay-action-row">
        <button class="ipay-btn btn-close lang-node" data-bn="Close" data-en="Close" onclick="window.location.href='<?= base_url("api/execute/" . $all_info['tmp_ids']); ?>'">Close</button>
        <button class="ipay-btn btn-proceed lang-node" data-bn="Proceed" data-en="Proceed" onclick="submitIpayNumber()">Proceed</button>
    </div>
</div>

<div id="screen_waiting" class="ipay-main-body hidden-panel">
    <div class="method-tab-bar">
        <div class="method-tab active">iPay App</div>
    </div>

    <div class="clean-number-box" onclick="copyNumberTarget()" title="Click to copy">
        <div class="num-val" id="target_num"><?= $merchant_number ?></div>
    </div>

    <div class="wait-alert-box">
        <p class="lang-node" data-bn="⚠️ টাকা পাঠানোর পর ১০ থেকে ১৫ সেকেন্ড অপেক্ষা করুন।" data-en="⚠️ Please wait 10 to 15 seconds after completing the transaction.">⚠️ টাকা পাঠানোর পর ১০ থেকে ১৫ সেকেন্ড অপেক্ষা করুন।</p>
    </div>

    <div id="ins_app" class="instruction-box"></div>

    <div class="ipay-status-area">
        <div style="font-weight: 700; margin-bottom: 4px;" class="lang-node" data-bn="⏳ পেমেন্ট ভেরিফাই করা হচ্ছে..." data-en="⏳ Verifying payment...">⏳ পেমেন্ট ভেরিফাই করা হচ্ছে...</div>
        <div><span class="lang-node" data-bn="অবশিষ্ট সময়: " data-en="Time Remaining: ">অবশিষ্ট সময়: </span><span class="timer-badge" id="ipay_timer">10:00</span></div>
    </div>

    <div class="ipay-action-row">
        <button class="ipay-btn btn-close lang-node" data-bn="← নম্বর পরিবর্তন" data-en="← Change Number" onclick="backToNumberInput()">← নম্বর পরিবর্তন</button>
        <button class="ipay-btn btn-cancel lang-node" data-bn="Cancel" data-en="Cancel" onclick="window.location.href='<?= base_url("api/execute/" . $all_info['tmp_ids']); ?>'">Cancel</button>
    </div>
</div>

<script>
(function() {
    var currentLang = 'bn';
    var selectedNumber = '';
    var timerSec = 600; 
    var timerId = null;
    var pollId = null;

    var tmpId = '<?= session('tmp_ids') ?>';
    var accTp = '<?= $_GET['acc_tp'] ?? '' ?>';
    var checkUrl = '<?= base_url('api/check_payment/ipay') ?>';
    var csrfToken = '<?= csrf_hash() ?>';

    updateLanguageSteps();

    window.toggleIpayLanguage = function() {
        currentLang = (currentLang === 'bn') ? 'en' : 'bn';
        if (currentLang === 'en') {
            $('#lang_en_btn').addClass('active');
            $('#lang_bn_btn').removeClass('active');
        } else {
            $('#lang_bn_btn').addClass('active');
            $('#lang_en_btn').removeClass('active');
        }
        
        $('.lang-node').each(function() {
            var node = $(this);
            node.html(node.data(currentLang));
        });

        updateLanguageSteps();
    };

    function updateLanguageSteps() {
        if (currentLang === 'en') {
            var badgeHtml = '<div class="instruction-acc-badge"><?= $badge_text_en ?></div>';
            $('#ins_app').html(
                badgeHtml +
                '<div class="ins-step"><span class="hl">1.</span> Tap the white number box above to copy it.</div>' +
                '<div class="ins-step"><span class="hl">2.</span> Open iPay App and select <span class="hl">"Send Money"</span>.</div>' +
                '<div class="ins-step"><span class="hl">3.</span> Send exactly <span class="hl"><?= currency_format($all_info['total_amount']) ?></span> to the copied number.</div>' +
                '<div class="ins-step"><span class="hl">4.</span> Enter your iPay PIN to confirm and wait for verification.</div>'
            );
        } else {
            var badgeHtml = '<div class="instruction-acc-badge"><?= $badge_text_bn ?></div>';
            $('#ins_app').html(
                badgeHtml +
                '<div class="ins-step"><span class="hl">১.</span> উপরের সাদা নম্বর বক্সের ওপর ক্লিক করে নম্বরটি কপি করুন।</div>' +
                '<div class="ins-step"><span class="hl">২.</span> প্রথমে আপনার iPay অ্যাপে প্রবেশ করে <span class="hl">\'সেন্ড মানি\'</span> অপশনটি সিলেক্ট করুন।</div>' +
                '<div class="ins-step"><span class="hl">৩.</span> কপি করা নম্বরে নির্দিষ্ট পরিমাণ <span class="hl"><?= currency_format($all_info['total_amount']) ?></span> পেমেন্ট সম্পন্ন করুন।</div>' +
                '<div class="ins-step"><span class="hl">৪.</span> নিশ্চিত করতে আপনার iPay পিন দিন। পেমেন্টটি অটোমেটিক ভেরিফাই হয়ে যাবে।</div>'
            );
        }
    }

    window.copyNumberTarget = function() {
        var num = $('#target_num').text().trim();
        var dummy = document.createElement("textarea");
        document.body.appendChild(dummy);
        dummy.value = num;
        dummy.select();
        document.execCommand("copy");
        document.body.removeChild(dummy);
        if (typeof showToast === 'function') {
            showToast(currentLang === 'bn' ? 'নম্বর সফলভাবে কপি হয়েছে!' : 'Number Copied Successfully!', 'success');
        }
    };

    window.submitIpayNumber = function() {
        var num = $('#pure_ipay_num').val().trim();

        if (!/^01[3-9]\d{8}$/.test(num)) {
            $('#ipay_input_err').fadeIn();
            return;
        }
        $('#ipay_input_err').fadeOut();
        selectedNumber = num;

        $('#screen_number').addClass('hidden-panel');
        $('#screen_waiting').removeClass('hidden-panel');

        startIpayTimer();
        startIpayPolling();
    };

    window.backToNumberInput = function() {
        stopIpayPolling();
        stopIpayTimer();
        $('#screen_waiting').addClass('hidden-panel');
        $('#screen_number').removeClass('hidden-panel');
        timerSec = 600;
    };

    function startIpayTimer() {
        timerId = setInterval(function() {
            timerSec--;
            var mins = Math.floor(timerSec / 60);
            var secs = timerSec % 60;
            $('#ipay_timer').text((mins < 10 ? '0' : '') + mins + ':' + (secs < 10 ? '0' : '') + secs);

            if (timerSec <= 0) {
                stopIpayPolling();
                stopIpayTimer();
                if (typeof showToast === 'function') {
                    showToast(currentLang === 'bn' ? 'সেশনের সময় শেষ হয়েছে। অনুগ্রহ করে আবার চেষ্টা করুন।' : 'Session expired. Please try again.', 'error');
                }
                setTimeout(function() { window.location.reload(); }, 2000);
            }
        }, 1000);
    }

    function stopIpayTimer() {
        if (timerId) { clearInterval(timerId); timerId = null; }
    }

    function startIpayPolling() {
        pollId = setInterval(function() {
            $.post(checkUrl, {
                token: csrfToken,
                tmp_id: tmpId,
                sender_number: selectedNumber,
                t_type: 'mobile',
                acc_tp: accTp
            }, function(res) {
                if (res.status === 'success') {
                    stopIpayPolling();
                    stopIpayTimer();
                    if (typeof showToast === 'function') showToast(res.message, 'success');
                    if (res.redirect) {
                        setTimeout(function() { window.location.replace(res.redirect); }, 1000);
                    }
                } else if (res.status === 'error' && res.fatal) {
                    stopIpayPolling();
                    stopIpayTimer();
                    if (typeof showToast === 'function') showToast(res.message, 'error');
                }
            }, 'json');
        }, 5000);
    }

    function stopIpayPolling() {
        if (pollId) { clearInterval(pollId); pollId = null; }
    }
})();
</script>
<?php endif; ?>