<div class="tanzania-mobile-money-payment">
    <style>
        .mobile-money-provider {
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .mobile-money-provider:hover {
            border-color: #4CAF50;
            background-color: #f9f9f9;
        }
        .mobile-money-provider.selected {
            border-color: #4CAF50;
            background-color: #e8f5e9;
        }
        .mobile-money-provider input[type="radio"] {
            margin-right: 10px;
        }
        .provider-logo {
            width: 60px;
            height: 60px;
            object-fit: contain;
            margin-right: 15px;
        }
        .provider-info {
            display: flex;
            align-items: center;
        }
        .provider-name {
            font-weight: bold;
            font-size: 18px;
            color: #333;
        }
        .phone-input-group {
            margin-top: 20px;
        }
    </style>

    <form class="online_payment ajax" action="<?php echo route('postCreateOrder', ['event_id' => $event->id]); ?>" method="post" id="mobile-money-form">
        <div class="online_payment">
            <h4 style="margin-bottom: 20px; color: #333;">@lang("Public_ViewEvent.select_payment_method")</h4>
            
            <!-- M-Pesa -->
            <div class="mobile-money-provider" data-provider="mpesa">
                <div class="provider-info">
                    <input type="radio" name="mobile_money_provider" value="mpesa" id="mpesa" required>
                    <div style="flex: 1;">
                        <div class="provider-name">M-Pesa (Vodacom)</div>
                        <small style="color: #666;">Lipa kwa M-Pesa</small>
                    </div>
                    <div style="background: #e60000; color: white; padding: 5px 15px; border-radius: 4px; font-weight: bold;">M-PESA</div>
                </div>
            </div>

            <!-- Tigo Pesa -->
            <div class="mobile-money-provider" data-provider="tigo">
                <div class="provider-info">
                    <input type="radio" name="mobile_money_provider" value="tigo" id="tigo" required>
                    <div style="flex: 1;">
                        <div class="provider-name">Tigo Pesa</div>
                        <small style="color: #666;">Lipa kwa Tigo Pesa</small>
                    </div>
                    <div style="background: #0066cc; color: white; padding: 5px 15px; border-radius: 4px; font-weight: bold;">TIGO</div>
                </div>
            </div>

            <!-- Airtel Money -->
            <div class="mobile-money-provider" data-provider="airtel">
                <div class="provider-info">
                    <input type="radio" name="mobile_money_provider" value="airtel" id="airtel" required>
                    <div style="flex: 1;">
                        <div class="provider-name">Airtel Money</div>
                        <small style="color: #666;">Lipa kwa Airtel Money</small>
                    </div>
                    <div style="background: #ff0000; color: white; padding: 5px 15px; border-radius: 4px; font-weight: bold;">AIRTEL</div>
                </div>
            </div>

            <!-- Halopesa -->
            <div class="mobile-money-provider" data-provider="halopesa">
                <div class="provider-info">
                    <input type="radio" name="mobile_money_provider" value="halopesa" id="halopesa" required>
                    <div style="flex: 1;">
                        <div class="provider-name">Halopesa</div>
                        <small style="color: #666;">Lipa kwa Halopesa</small>
                    </div>
                    <div style="background: #ff6600; color: white; padding: 5px 15px; border-radius: 4px; font-weight: bold;">HALO</div>
                </div>
            </div>

            <!-- Phone Number Input -->
            <div class="phone-input-group">
                <div class="form-group">
                    <label for="mobile_phone_number" style="font-weight: bold;">@lang("Public_ViewEvent.phone_number")</label>
                    <div class="input-group">
                        <span class="input-group-addon">+255</span>
                        <input type="tel" 
                               name="mobile_phone_number" 
                               id="mobile_phone_number" 
                               class="form-control" 
                               placeholder="754123456" 
                               required 
                               pattern="[67][0-9]{8}"
                               maxlength="9"
                               style="font-size: 16px; padding: 12px;">
                    </div>
                    <small class="help-block" style="color: #666;">
                        <i class="fa fa-info-circle"></i> Ingiza namba yako ya simu bila 0 mwanzoni (mfano: 754123456)
                    </small>
                </div>
            </div>

            <!-- Payment Instructions -->
            <div class="alert alert-info" style="margin-top: 20px;">
                <h5 style="margin-top: 0;"><i class="fa fa-info-circle"></i> Jinsi ya kulipa:</h5>
                <ol style="margin-bottom: 0; padding-left: 20px;">
                    <li>Chagua njia ya malipo (M-Pesa, Tigo Pesa, Airtel Money, au Halopesa)</li>
                    <li>Ingiza namba yako ya simu</li>
                    <li>Bonyeza "Maliza Malipo"</li>
                    <li>Utapokea ujumbe kwenye simu yako kukubali malipo</li>
                    <li>Ingiza PIN yako kukamilisha malipo</li>
                </ol>
            </div>

            <!-- Amount Display -->
            <div class="alert alert-success" style="margin-top: 15px; font-size: 18px; text-align: center;">
                <strong>Kiasi cha kulipa:</strong> 
                <span style="font-size: 24px; font-weight: bold;">
                    {{ money($order_total, $event->currency) }}
                </span>
            </div>

            {!! Form::token() !!}
            <input type="hidden" name="payment_gateway" value="TanzaniaMobileMoney">

            <button class="btn btn-lg btn-success" 
                    type="submit" 
                    id="submit-payment-btn"
                    style="width:100%; padding: 15px; font-size: 18px; margin-top: 20px;">
                <i class="fa fa-mobile"></i> @lang("Public_ViewEvent.complete_payment")
            </button>
        </div>
    </form>

    <script>
        $(document).ready(function() {
            // Provider selection
            $('.mobile-money-provider').click(function() {
                $('.mobile-money-provider').removeClass('selected');
                $(this).addClass('selected');
                $(this).find('input[type="radio"]').prop('checked', true);
            });

            // Phone number formatting
            $('#mobile_phone_number').on('input', function() {
                // Remove any non-digit characters
                var value = $(this).val().replace(/\D/g, '');
                
                // Remove leading zero if present
                if (value.startsWith('0')) {
                    value = value.substring(1);
                }
                
                // Limit to 9 digits
                if (value.length > 9) {
                    value = value.substring(0, 9);
                }
                
                $(this).val(value);
            });

            // Form submission
            $('#mobile-money-form').on('submit', function(e) {
                var provider = $('input[name="mobile_money_provider"]:checked').val();
                var phone = $('#mobile_phone_number').val();
                
                if (!provider) {
                    e.preventDefault();
                    alert('Tafadhali chagua njia ya malipo');
                    return false;
                }
                
                if (!phone || phone.length !== 9) {
                    e.preventDefault();
                    alert('Tafadhali ingiza namba sahihi ya simu (digiti 9)');
                    return false;
                }
                
                // Disable submit button to prevent double submission
                $('#submit-payment-btn').prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Inaendelea...');
            });
        });
    </script>
</div>
