<section class="payment_gateway_options" id="gateway_{{$payment_gateway['id']}}">
    <h4>Tanzania Mobile Money Settings</h4>
    
    <div class="alert alert-info">
        <h5><i class="fa fa-info-circle"></i> Configuration Guide</h5>
        <p>To accept mobile money payments in Tanzania, you need to integrate with a payment aggregator or directly with mobile money providers.</p>
        <p><strong>Recommended: Use Flutterwave</strong> (supports all providers: M-Pesa, Tigo Pesa, Airtel Money, Halopesa)</p>
        <ol>
            <li>Sign up at <a href="https://flutterwave.com" target="_blank">Flutterwave.com</a></li>
            <li>Complete KYC verification</li>
            <li>Get your API keys from Dashboard → Settings → API</li>
            <li>Enter your keys below</li>
        </ol>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label class="control-label">Payment Provider</label>
                {!! Form::select('tanzaniamobilemoney[provider]', [
                    'flutterwave' => 'Flutterwave (Recommended - All providers)',
                    'dpo' => 'DPO PayGate',
                    'selcom' => 'Selcom',
                    'direct' => 'Direct Integration (M-Pesa/Tigo/Airtel)',
                ], $account->getGatewayConfigVal($payment_gateway['id'], 'provider', 'flutterwave'), ['class'=>'form-control']) !!}
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                {!! Form::label('tanzaniamobilemoney[public_key]', 'Public Key / API Key', array('class'=>'control-label')) !!}
                {!! Form::text('tanzaniamobilemoney[public_key]', $account->getGatewayConfigVal($payment_gateway['id'], 'public_key'),[ 'class'=>'form-control', 'placeholder' => 'FLWPUBK-xxxxx or your API key'])  !!}
                <small class="help-block">Your public/API key from the payment provider</small>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                {!! Form::label('tanzaniamobilemoney[secret_key]', 'Secret Key', array('class'=>'control-label')) !!}
                {!! Form::text('tanzaniamobilemoney[secret_key]', $account->getGatewayConfigVal($payment_gateway['id'], 'secret_key'),[ 'class'=>'form-control', 'placeholder' => 'FLWSECK-xxxxx or your secret key'])  !!}
                <small class="help-block">Your secret key from the payment provider</small>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                {!! Form::label('tanzaniamobilemoney[encryption_key]', 'Encryption Key (Optional)', array('class'=>'control-label')) !!}
                {!! Form::text('tanzaniamobilemoney[encryption_key]', $account->getGatewayConfigVal($payment_gateway['id'], 'encryption_key'),[ 'class'=>'form-control', 'placeholder' => 'FLWSECK_TEST-xxxxx'])  !!}
                <small class="help-block">Required for Flutterwave</small>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                {!! Form::label('tanzaniamobilemoney[environment]', 'Environment', array('class'=>'control-label')) !!}
                {!! Form::select('tanzaniamobilemoney[environment]', [
                    'test' => 'Test / Sandbox',
                    'live' => 'Live / Production',
                ], $account->getGatewayConfigVal($payment_gateway['id'], 'environment', 'test'), ['class'=>'form-control']) !!}
                <small class="help-block">Use Test mode for development</small>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                {!! Form::label('tanzaniamobilemoney[webhook_url]', 'Webhook URL (For Payment Confirmation)', array('class'=>'control-label')) !!}
                <div class="input-group">
                    {!! Form::text('webhook_url_display', route('showEventHome') . '/webhook/mobile-money', ['class'=>'form-control', 'readonly' => true]) !!}
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" onclick="copyWebhookUrl()">
                            <i class="fa fa-copy"></i> Copy
                        </button>
                    </span>
                </div>
                <small class="help-block">Add this URL to your payment provider's webhook settings</small>
            </div>
        </div>
    </div>

    <div class="alert alert-warning">
        <h5><i class="fa fa-exclamation-triangle"></i> Important Notes</h5>
        <ul>
            <li><strong>Test Mode:</strong> Use test credentials first to verify integration</li>
            <li><strong>Business Verification:</strong> You need a registered business to go live</li>
            <li><strong>Transaction Fees:</strong> Providers charge 2-3% per transaction</li>
            <li><strong>Settlement:</strong> Funds are typically settled within 24-48 hours</li>
        </ul>
    </div>

    <div class="panel panel-success">
        <div class="panel-heading">
            <h4 class="panel-title">Supported Mobile Money Providers</h4>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-3 text-center">
                    <div style="padding: 15px; background: #f5f5f5; border-radius: 5px; margin-bottom: 10px;">
                        <div style="background: #e60000; color: white; padding: 10px; border-radius: 4px; font-weight: bold; margin-bottom: 5px;">M-PESA</div>
                        <small>Vodacom M-Pesa</small>
                    </div>
                </div>
                <div class="col-md-3 text-center">
                    <div style="padding: 15px; background: #f5f5f5; border-radius: 5px; margin-bottom: 10px;">
                        <div style="background: #0066cc; color: white; padding: 10px; border-radius: 4px; font-weight: bold; margin-bottom: 5px;">TIGO</div>
                        <small>Tigo Pesa</small>
                    </div>
                </div>
                <div class="col-md-3 text-center">
                    <div style="padding: 15px; background: #f5f5f5; border-radius: 5px; margin-bottom: 10px;">
                        <div style="background: #ff0000; color: white; padding: 10px; border-radius: 4px; font-weight: bold; margin-bottom: 5px;">AIRTEL</div>
                        <small>Airtel Money</small>
                    </div>
                </div>
                <div class="col-md-3 text-center">
                    <div style="padding: 15px; background: #f5f5f5; border-radius: 5px; margin-bottom: 10px;">
                        <div style="background: #ff6600; color: white; padding: 10px; border-radius: 4px; font-weight: bold; margin-bottom: 5px;">HALO</div>
                        <small>Halopesa</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function copyWebhookUrl() {
            var copyText = document.querySelector('input[name="webhook_url_display"]');
            copyText.select();
            document.execCommand("copy");
            alert("Webhook URL copied to clipboard!");
        }
    </script>
</section>
