{include file="sections/header.tpl"}
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <div class="card card-primary card-hovered card-stacked mb30">
                            <div class="card-header">
                                <h3 class="card-title">{Lang::T('Refill Account')}</h3>
                            </div>
                            <div class="card-body">
                                <form class="form-horizontal" method="post" role="form" action="{$_url}plan/refill-post">
                                    <div class="form-group row">
                                        <label class="col-md-2 control-label">{Lang::T('Select Account')}</label>
                                        <div class="col-md-6">
                                            <select id="personSelect" class="form-control select2" name="id_customer"
                                                style="width: 100%; cursor: pointer; z-index: 1000;" data-placeholder="{Lang::T('Select a customer')}..." data-ajax="true">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-2 control-label">{Lang::T('Code Voucher')}</label>
                                        <div class="col-md-6">
                                            <input type="text" class="form-control" id="code" name="code"
                                                placeholder="{Lang::T('Enter voucher code here')}">
                                        </div>
                                    </div>
                                    <center>
                                        <div class="form-group row">
                                            <div class="col-lg-offset-2 col-lg-10">
                                                <button class="btn btn-success mb-3" type="submit">{Lang::T('Recharge')}</button>
                                                Or <a class="btn btn-outline-primary" href="{$_url}customers/list">{Lang::T('Cancel')}</a>
                                            </div>
                                        </div>
                                    </center>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
{include file="sections/footer.tpl"}

<script>
$(document).ready(function() {
    console.log('Refill form loaded');
    console.log('jQuery version:', $.fn.jquery);
    console.log('Select2 available:', typeof $.fn.select2);
    
    // Check if the element exists
    if ($('#personSelect').length === 0) {
        console.error('personSelect element not found!');
        return;
    }
    
    console.log('personSelect element found:', $('#personSelect')[0]);
    
    // Re-initialize select2 for customer selection with AJAX
    // This ensures it works after the global select2 initialization
    setTimeout(function() {
        try {
            // Destroy existing select2 if it exists
            if ($('#personSelect').hasClass('select2-hidden-accessible')) {
                $('#personSelect').select2('destroy');
                console.log('Destroyed existing select2');
            }
            
            $('#personSelect').select2({
                theme: "bootstrap",
                width: '100%',
                ajax: {
                    url: function(params) {
                        var url = './index.php?_route=autoload/customer_select2';
                        if(params.term != undefined){
                            url += '&s=' + encodeURIComponent(params.term);
                        }
                        console.log('AJAX URL:', url);
                        return url;
                    },
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            s: params.term || '',
                            page: params.page || 1
                        };
                    },
                    processResults: function (data, params) {
                        console.log('AJAX response:', data);
                        return {
                            results: data.results || []
                        };
                    },
                    cache: true,
                    error: function(xhr, status, error) {
                        console.error('AJAX error:', error);
                        console.error('Response:', xhr.responseText);
                    }
                },
                minimumInputLength: 0,
                placeholder: '{Lang::T('Select a customer')}...',
                allowClear: true
            });
            
            console.log('Customer select2 initialized with AJAX');
        } catch (error) {
            console.error('Error initializing select2:', error);
        }
    }, 200);
    
    // Add click handler for debugging
    $('#personSelect').on('select2:open', function() {
        console.log('Customer dropdown opened');
    });
    
    $('#personSelect').on('select2:select', function(e) {
        console.log('Customer selected:', e.params.data);
    });
    
    $('#personSelect').on('select2:error', function(e) {
        console.error('Select2 error:', e);
    });
    
    // Test AJAX endpoint directly
    $.ajax({
        url: './index.php?_route=autoload/customer_select2',
        dataType: 'json',
        success: function(data) {
            console.log('Direct AJAX test successful:', data);
        },
        error: function(xhr, status, error) {
            console.error('Direct AJAX test failed:', error);
            console.error('Response:', xhr.responseText);
        }
    });
});
</script>