<div class="offline-mobile-money-payment">
    <style>
        .payment-card {
            border: 2px solid #4CAF50;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .payment-amount {
            font-size: 36px;
            font-weight: bold;
            text-align: center;
            margin: 20px 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        .payment-reference {
            background: white;
            color: #333;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 2px;
            margin: 20px 0;
            font-family: 'Courier New', monospace;
        }
        .lipa-number {
            background: rgba(255,255,255,0.2);
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            font-size: 28px;
            font-weight: bold;
            margin: 15px 0;
        }
        .qr-code-container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            margin: 20px 0;
        }
        .provider-instructions {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin: 15px 0;
            color: #333;
        }
        .provider-instructions h4 {
            color: #333;
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }
        .provider-instructions ol {
            margin: 10px 0;
            padding-left: 25px;
        }
        .provider-instructions li {
            margin: 8px 0;
            line-height: 1.6;
        }
        .ussd-code {
            background: #f8f9fa;
            padding: 8px 15px;
            border-radius: 5px;
            font-family: 'Courier New', monospace;
            font-weight: bold;
            color: #e91e63;
            display: inline-block;
            margin: 0 5px;
        }
        .contact-box {
            background: #fff3cd;
            border: 2px solid #ffc107;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }
        .contact-box h4 {
            color: #856404;
            margin-top: 0;
        }
        .contact-info {
            font-size: 18px;
            font-weight: bold;
            color: #856404;
            margin: 10px 0;
        }
        .alert-info-custom {
            background: #d1ecf1;
            border: 2px solid #0c5460;
            border-radius: 8px;
            padding: 20px;
            color: #0c5460;
            margin: 20px 0;
        }
        .step-number {
            background: #4CAF50;
            color: white;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 10px;
        }
    </style>

    <form class="online_payment ajax" action="<?php echo route('postCreateOrder', ['event_id' => $event->id]); ?>" method="post" id="offline-payment-form">
        
        <!-- Payment Card -->
        <div class="payment-card">
            <h3 style="text-align: center; margin-top: 0;">
                <i class="fa fa-mobile" style="font-size: 48px;"></i><br>
                LIPA KWA SIMU
            </h3>
            
            <div class="payment-amount">
                {{ money($order_total, $event->currency) }}
            </div>

            <div class="lipa-number">
                <div style="font-size: 14px; opacity: 0.9;">Lipa Number / Business Number:</div>
                <div id="lipa-number-display">
                    @if($event->lipa_number)
                        {{ $event->lipa_number }}
                    @else
                        <span style="font-size: 18px;">⚠️ Organizer: Please set your Lipa Number for this event</span>
                    @endif
                </div>
            </div>

            <div class="payment-reference">
                <div style="font-size: 14px; color: #666; margin-bottom: 5px;">Reference Code (Kumbukumbu):</div>
                {{ 'TKT-' . strtoupper(substr(md5($event->id . time()), 0, 8)) }}
            </div>
        </div>

        <!-- QR Code Section -->
        @if($event->lipa_number)
        <div class="qr-code-container">
            <h4 style="color: #333; margin-top: 0;">
                <i class="fa fa-qrcode"></i> Scan QR Code to Pay
            </h4>
            @if($event->qr_code_path)
                <div style="display: inline-block; max-width: 300px;">
                    <img src="/{{ $event->qr_code_path }}" alt="Payment QR Code" style="max-width: 100%; height: auto; border: 3px solid #4CAF50; border-radius: 8px;">
                </div>
                <p style="color: #666; margin-top: 15px;">
                    <i class="fa fa-info-circle"></i> Fungua M-Pesa, Tigo Pesa, au Airtel Money app na scan QR code
                </p>
            @else
                <div id="qr-code" style="display: inline-block;"></div>
                <p style="color: #666; margin-top: 15px;">
                    <i class="fa fa-info-circle"></i> Auto-generated QR code with payment details
                </p>
            @endif
        </div>
        @endif

        <!-- USSD Instructions -->
        <div class="alert-info-custom">
            <h4 style="margin-top: 0;">
                <i class="fa fa-info-circle"></i> JINSI YA KULIPA (How to Pay)
            </h4>
            <p style="margin: 0; font-size: 16px;">
                Chagua njia yako ya malipo na fuata maelekezo hapa chini:
            </p>
        </div>

        <!-- M-Pesa Instructions -->
        <div class="provider-instructions">
            <h4>
                <span style="background: #e60000; color: white; padding: 5px 15px; border-radius: 4px; margin-right: 10px;">M-PESA</span>
                Vodacom M-Pesa
            </h4>
            <ol>
                <li><span class="step-number">1</span> Dial <span class="ussd-code">*150*00#</span></li>
                <li><span class="step-number">2</span> Chagua <strong>4</strong> (Lipa kwa M-Pesa)</li>
                <li><span class="step-number">3</span> Chagua <strong>4</strong> (Enter Business Number)</li>
                <li><span class="step-number">4</span> Ingiza Lipa Number: <strong id="lipa-mpesa">{{ $event->lipa_number ?? 'XXXXX' }}</strong></li>
                <li><span class="step-number">5</span> Ingiza Kiasi: <strong>{{ number_format($order_total, 0, '.', '') }}</strong></li>
                <li><span class="step-number">6</span> Ingiza Reference: <strong id="ref-mpesa">{{ 'TKT-' . strtoupper(substr(md5($event->id . time()), 0, 8)) }}</strong></li>
                <li><span class="step-number">7</span> Ingiza PIN yako</li>
                <li><span class="step-number">8</span> Utapokea SMS ya uthibitisho</li>
            </ol>
        </div>

        <!-- Tigo Pesa Instructions -->
        <div class="provider-instructions">
            <h4>
                <span style="background: #0066cc; color: white; padding: 5px 15px; border-radius: 4px; margin-right: 10px;">TIGO</span>
                Tigo Pesa
            </h4>
            <ol>
                <li><span class="step-number">1</span> Dial <span class="ussd-code">*150*01#</span></li>
                <li><span class="step-number">2</span> Chagua <strong>4</strong> (Make Payment)</li>
                <li><span class="step-number">3</span> Chagua <strong>3</strong> (Pay by Company Name)</li>
                <li><span class="step-number">4</span> Ingiza Lipa Number: <strong>{{ $event->lipa_number ?? 'XXXXX' }}</strong></li>
                <li><span class="step-number">5</span> Ingiza Kiasi: <strong>{{ number_format($order_total, 0, '.', '') }}</strong></li>
                <li><span class="step-number">6</span> Ingiza Reference: <strong>{{ 'TKT-' . strtoupper(substr(md5($event->id . time()), 0, 8)) }}</strong></li>
                <li><span class="step-number">7</span> Ingiza PIN yako</li>
                <li><span class="step-number">8</span> Utapokea SMS ya uthibitisho</li>
            </ol>
        </div>

        <!-- Airtel Money Instructions -->
        <div class="provider-instructions">
            <h4>
                <span style="background: #ff0000; color: white; padding: 5px 15px; border-radius: 4px; margin-right: 10px;">AIRTEL</span>
                Airtel Money
            </h4>
            <ol>
                <li><span class="step-number">1</span> Dial <span class="ussd-code">*150*60#</span></li>
                <li><span class="step-number">2</span> Chagua <strong>5</strong> (Make Payment)</li>
                <li><span class="step-number">3</span> Chagua <strong>1</strong> (Enter Company Number)</li>
                <li><span class="step-number">4</span> Ingiza Lipa Number: <strong>{{ $event->lipa_number ?? 'XXXXX' }}</strong></li>
                <li><span class="step-number">5</span> Ingiza Kiasi: <strong>{{ number_format($order_total, 0, '.', '') }}</strong></li>
                <li><span class="step-number">6</span> Ingiza Reference: <strong>{{ 'TKT-' . strtoupper(substr(md5($event->id . time()), 0, 8)) }}</strong></li>
                <li><span class="step-number">7</span> Ingiza PIN yako</li>
                <li><span class="step-number">8</span> Utapokea SMS ya uthibitisho</li>
            </ol>
        </div>

        <!-- Halopesa Instructions -->
        <div class="provider-instructions">
            <h4>
                <span style="background: #ff6600; color: white; padding: 5px 15px; border-radius: 4px; margin-right: 10px;">HALO</span>
                Halopesa
            </h4>
            <ol>
                <li><span class="step-number">1</span> Dial <span class="ussd-code">*150*88#</span></li>
                <li><span class="step-number">2</span> Chagua <strong>1</strong> (Send Money)</li>
                <li><span class="step-number">3</span> Chagua <strong>4</strong> (Pay Bill)</li>
                <li><span class="step-number">4</span> Ingiza Lipa Number: <strong>{{ $event->lipa_number ?? 'XXXXX' }}</strong></li>
                <li><span class="step-number">5</span> Ingiza Kiasi: <strong>{{ number_format($order_total, 0, '.', '') }}</strong></li>
                <li><span class="step-number">6</span> Ingiza Reference: <strong>{{ 'TKT-' . strtoupper(substr(md5($event->id . time()), 0, 8)) }}</strong></li>
                <li><span class="step-number">7</span> Ingiza PIN yako</li>
                <li><span class="step-number">8</span> Utapokea SMS ya uthibitisho</li>
            </ol>
        </div>

        <!-- Contact Information -->
        <div class="contact-box">
            <h4>
                <i class="fa fa-paper-plane"></i> TUMA UTHIBITISHO (Send Confirmation)
            </h4>
            <p style="margin-bottom: 15px;">
                Baada ya kulipa, tuma screenshot wa SMS ya malipo kwa njia moja ya hizi:
            </p>
            
            @if(isset($account_payment_gateway->config['whatsapp_number']))
            <div class="contact-info">
                <i class="fa fa-whatsapp" style="color: #25D366; font-size: 24px;"></i>
                WhatsApp: <a href="https://wa.me/{{ str_replace(['+', ' ', '-'], '', $account_payment_gateway->config['whatsapp_number']) }}" target="_blank" style="color: #25D366;">
                    {{ $account_payment_gateway->config['whatsapp_number'] }}
                </a>
            </div>
            @endif

            @if(isset($account_payment_gateway->config['payment_email']))
            <div class="contact-info">
                <i class="fa fa-envelope" style="color: #0066cc; font-size: 20px;"></i>
                Email: <a href="mailto:{{ $account_payment_gateway->config['payment_email'] }}" style="color: #0066cc;">
                    {{ $account_payment_gateway->config['payment_email'] }}
                </a>
            </div>
            @endif

            @if(isset($account_payment_gateway->config['payment_phone']))
            <div class="contact-info">
                <i class="fa fa-phone" style="color: #4CAF50; font-size: 20px;"></i>
                Simu: <a href="tel:{{ $account_payment_gateway->config['payment_phone'] }}" style="color: #4CAF50;">
                    {{ $account_payment_gateway->config['payment_phone'] }}
                </a>
            </div>
            @endif

            <p style="margin-top: 15px; font-size: 14px; color: #856404;">
                <strong>Muhimu:</strong> Hakikisha unajumuisha Reference Code katika SMS yako!
            </p>
        </div>

        <!-- Important Notes -->
        <div class="alert alert-warning">
            <h5 style="margin-top: 0;">
                <i class="fa fa-exclamation-triangle"></i> Kumbuka (Remember):
            </h5>
            <ul style="margin-bottom: 0;">
                <li>Hakikisha unatumia <strong>Reference Code</strong> sahihi</li>
                <li>Tuma screenshot wa SMS ya malipo kwa organizer</li>
                <li>Tiketi yako itatumwa baada ya organizer kuthibitisha malipo</li>
                <li>Kama una tatizo, wasiliana na organizer moja kwa moja</li>
            </ul>
        </div>

        {!! Form::token() !!}
        <input type="hidden" name="payment_gateway" value="OfflineMobileMoney">
        <input type="hidden" name="offline_payment_reference" value="{{ 'TKT-' . strtoupper(substr(md5($event->id . time()), 0, 8)) }}">

        <button class="btn btn-lg btn-success" 
                type="submit" 
                style="width:100%; padding: 15px; font-size: 18px; margin-top: 20px;">
            <i class="fa fa-check-circle"></i> Nimetuma Malipo / I Have Paid
        </button>

        <p style="text-align: center; margin-top: 15px; color: #666;">
            <small>Bonyeza button hapo juu baada ya kutuma malipo</small>
        </p>
    </form>

    <!-- QR Code Generation Script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script>
        $(document).ready(function() {
            // Generate QR Code (only if no uploaded QR code exists)
            var lipaNumber = '{{ $event->lipa_number ?? "" }}';
            var amount = '{{ number_format($order_total, 0, ".", "") }}';
            var reference = '{{ "TKT-" . strtoupper(substr(md5($event->id . time()), 0, 8)) }}';
            var hasUploadedQR = {{ $event->qr_code_path ? 'true' : 'false' }};
            
            if (lipaNumber && $('#qr-code').length && !hasUploadedQR) {
                var qrData = 'Lipa Number: ' + lipaNumber + '\nAmount: TSh ' + amount + '\nReference: ' + reference;
                
                try {
                    new QRCode(document.getElementById("qr-code"), {
                        text: qrData,
                        width: 200,
                        height: 200,
                        colorDark: "#000000",
                        colorLight: "#ffffff",
                        correctLevel: QRCode.CorrectLevel.H
                    });
                } catch(e) {
                    console.error('QR Code generation failed:', e);
                    // Fallback: Show text if QR code fails
                    $('#qr-code').html('<div style="padding: 20px; background: #f0f0f0; border-radius: 8px;"><strong>QR Code unavailable</strong><br>Use USSD instructions below</div>');
                }
            }

            // Form submission confirmation
            $('#offline-payment-form').on('submit', function(e) {
                // Check if we've already confirmed (to avoid double confirmation)
                if (!$(this).data('confirmed')) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    
                    var $form = $(this);
                    var confirmed = confirm('Umeshatuma malipo? / Have you already sent the payment?\n\nBonyeza OK kama umeshatuma malipo.');
                    
                    if (confirmed) {
                        // Mark as confirmed and resubmit
                        $form.data('confirmed', true);
                        $form.submit();
                    }
                    return false;
                }
            });
        });
    </script>
</div>
