{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">{Lang::T('Refill Balance')}</div>
                            <div class="card-body">
                                <form class="form-horizontal" method="post" role="form" action="{$_url}plan/deposit-post">
                                    <div class="form-group row">
                                        <label class="col-md-4 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>
                                            <span class="help-block" id="customer-help">
                                                {Lang::T('Start typing to search for customers')}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-4 control-label"><a href="{$_url}services/balance">{Lang::T('Balance Plans')}</a></label>
                                        <div class="col-md-6">
                                            <select id="planSelect" class="form-control select2" name="id_plan" style="width: 100%; cursor: pointer; z-index: 1000;"
                                                data-placeholder="{Lang::T('Select Plans')}...">
                                                <option></option>
                                                {foreach $p as $pl}
                                                    <option value="{$pl['id']}">{if $pl['enabled'] neq 1}DISABLED PLAN &bull; {/if}{$pl['name_plan']} - {Lang::moneyFormat($pl['price'])}</option>
                                                {/foreach}
                                            </select>
                                            <span class="help-block" id="plan-help">
                                                {Lang::T('Select a balance plan for the customer')}
                                            </span>
                                        </div>
                                    </div>
                                    <center>
                                    <div class="form-group row">
                                        <div class="col-lg-offset-2 col-lg-10">
                                            <button class="btn btn-success"
                                                type="submit">{Lang::T('Recharge')}</button>
                                            Or <a 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('Deposit form loaded');
    console.log('jQuery version:', $.fn.jquery);
    console.log('Select2 available:', typeof $.fn.select2);
    
    // Initialize customer select2 with AJAX
    if ($('#personSelect').length > 0) {
        console.log('Initializing customer select2 with AJAX');
        setTimeout(function() {
            try {
                // Destroy existing select2 if it exists
                if ($('#personSelect').hasClass('select2-hidden-accessible')) {
                    $('#personSelect').select2('destroy');
                    console.log('Destroyed existing customer 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('Customer 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('Customer AJAX response:', data);
                            return {
                                results: data.results || []
                            };
                        },
                        cache: true,
                        error: function(xhr, status, error) {
                            console.error('Customer 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');
                
                // Update customer help text
                $("#customer-help").text('Start typing to search for customers');
            } catch (error) {
                console.error('Error initializing customer select2:', error);
            }
        }, 200);
        
        // Add customer dropdown event handlers
        $('#personSelect').on('select2:open', function() {
            console.log('Customer dropdown opened');
        });
        
        $('#personSelect').on('select2:select', function(e) {
            console.log('Customer selected:', e.params.data);
        });
    }
    
    // Initialize plan select2 (static data)
    if ($('#planSelect').length > 0) {
        console.log('Initializing plan select2 with static data');
        setTimeout(function() {
            try {
                // Destroy existing select2 if it exists
                if ($('#planSelect').hasClass('select2-hidden-accessible')) {
                    $('#planSelect').select2('destroy');
                    console.log('Destroyed existing plan select2');
                }
                
                $('#planSelect').select2({
                    theme: "bootstrap",
                    width: '100%',
                    placeholder: '{Lang::T('Select Plans')}...',
                    allowClear: true
                });
                
                console.log('Plan select2 initialized with static data');
                
                // Count available plans and update help text
                var planCount = $("#planSelect option").length - 1; // Subtract 1 for empty option
                console.log('Plan count:', planCount);
                
                if (planCount > 0) {
                    $("#plan-help").text('Found ' + planCount + ' balance plan(s) available');
                } else {
                    $("#plan-help").text('No balance plans found. Please create balance plans first.');
                }
                
            } catch (error) {
                console.error('Error initializing plan select2:', error);
            }
        }, 200);
        
        // Add plan dropdown event handlers
        $('#planSelect').on('select2:open', function() {
            console.log('Plan dropdown opened');
        });
        
        $('#planSelect').on('select2:select', function(e) {
            console.log('Plan selected:', e.params.data);
        });
    }
    
    // Test AJAX endpoints directly
    $.ajax({
        url: './index.php?_route=autoload/customer_select2',
        dataType: 'json',
        success: function(data) {
            console.log('Customer AJAX test successful:', data);
        },
        error: function(xhr, status, error) {
            console.error('Customer AJAX test failed:', error);
            console.error('Response:', xhr.responseText);
        }
    });
});
</script>