{include file="sections/header.tpl"}
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-8 col-lg-6">
                        <div class="card card-primary card-hovered card-stacked mb30">
                            <div class="card-header" style="display: grid; align-content: center; justify-content: center; padding: 15px;">
                                <h5 class="card-title" style="margin: 0; font-size: 18px;">{Lang::T('Add Vouchers')}</h5>
                            </div>
                            <div class="card-body" style="padding: 20px;">
                                <div class="alert alert-info" style="margin-bottom: 20px;">
                                    <i class="fa fa-info-circle"></i> <strong>{Lang::T('How it works')}:</strong> 
                                    {Lang::T('Select the service type (Hotspot/PPPoE), then choose a router, and finally select from available internet plans to generate vouchers.')}
                                </div>
                                <form class="form-horizontal" method="post" role="form" action="{$_url}plan/voucher-post">
                                    <div class="form-group row">
                                        <label class="col-md-4 control-label">{Lang::T('Type')}</label>
                                        <div class="col-md-8">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="Hot" name="type" value="Hotspot" required>
                                                <label class="form-check-label" for="Hot">{Lang::T('Hotspot Plans')}</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="POE" name="type" value="PPPOE" required>
                                                <label class="form-check-label" for="POE">{Lang::T('PPPOE Plans')}</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-4 control-label">{Lang::T('Routers')}</label>
                                        <div class="col-md-8">
                                            <select id="server" name="server" class="form-select" style="height: 40px; background-color: white; cursor: pointer; z-index: 1000;" required>
                                                <option value=''>{Lang::T('Select Routers')}</option>
                                            </select>
                                            <span class="help-block" id="server-help">
                                                {Lang::T('Select service type first to load available routers')}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-4 control-label">{Lang::T('Service Plan')}</label>
                                        <div class="col-md-8">
                                            <select id="plan" name="plan" class="form-select" style="height: 40px; background-color: white; cursor: pointer; z-index: 1000;" required>
                                                <option value=''>{Lang::T('Select Plans')}</option>
                                            </select>
                                            <span class="help-block" id="plan-help">
                                                {Lang::T('Select a router and type first to load available plans')}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-4 control-label">{Lang::T('Number of Vouchers')}</label>
                                        <div class="col-md-8">
                                            <input type="number" class="form-control" name="numbervoucher" value="1" min="1" max="1000" required>
                                            <span class="help-block">{Lang::T('Enter the number of vouchers to generate (1-1000)')}</span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-4 control-label">{Lang::T('Voucher Format')}</label>
                                        <div class="col-md-8">
                                            <select name="voucher_format" id="voucher_format" class="form-select" style="height: 40px; background-color: white;">
                                                <option value="up" {if $_c['voucher_format'] == 'up'}selected="selected"{/if}>UPPERCASE</option>
                                                <option value="low" {if $_c['voucher_format'] == 'low'}selected="selected"{/if}>lowercase</option>
                                                <option value="rand" {if $_c['voucher_format'] == 'rand'}selected="selected"{/if}>RaNdoM</option>
                                            </select>
                                            <span class="help-block">{Lang::T('Choose the case format for voucher codes')}</span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-4 control-label">{Lang::T('Voucher Prefix')}</label>
                                        <div class="col-md-8">
                                            <input type="text" class="form-control" name="prefix" placeholder="NUX-" value="{$_c['voucher_prefix']}" maxlength="10">
                                            <span class="help-block">{Lang::T('Optional prefix for voucher codes (e.g., NUX-)')}</span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-4 control-label">{Lang::T('Length Code')}</label>
                                        <div class="col-md-8">
                                            <input type="number" class="form-control" name="lengthcode" value="12" min="6" max="20" required>
                                            <span class="help-block">{Lang::T('Length of the voucher code (6-20 characters)')}</span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-md-12 text-center">
                                            <button class="btn btn-success" type="submit">
                                                <i class="fa fa-plus"></i> {Lang::T('Generate Vouchers')}
                                            </button>
                                            <a href="{$_url}plan/voucher" class="btn btn-secondary">
                                                <i class="fa fa-times"></i> {Lang::T('Cancel')}
                                            </a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <script>
                $(document).ready(function() {
                    // Auto-select Hotspot by default and load servers
                    $('#Hot').prop('checked', true).trigger('change');
                    
                    // Load servers when type changes
                    $('input[type=radio][name="type"]').change(function(){
                        $("#server-help").text('Loading routers...');
                        $("#plan-help").text('Select a router first to load available plans');
                        
                        if ($('#Hot').is(':checked')) {
                            $.ajax({
                                type: "POST",
                                dataType: "html",
                                url: "index.php?_route=autoload/server",
                                success: function(msg){
                                    console.log('Servers loaded successfully');
                                    console.log('Servers HTML:', msg);
                                    $("#server").html(msg);
                                    
                                    // Ensure the dropdown is enabled
                                    $("#server").prop('disabled', false);
                                    
                                    // Check if servers were loaded
                                    var serverCount = $("#server option").length - 1; // Subtract 1 for the default option
                                    console.log('Server count:', serverCount);
                                    if (serverCount > 0) {
                                        $("#server-help").text('Found ' + serverCount + ' router(s) available');
                                    } else {
                                        $("#server-help").text('No routers found. Please add routers first.');
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error('Error loading servers:', error);
                                    $("#server-help").text('Error loading routers. Please check console for details.');
                                    alert('Error loading servers. Please check console for details.');
                                }
                            });
                        } else if ($('#POE').is(':checked')) {
                            $.ajax({
                                type: "POST",
                                dataType: "html",
                                url: "index.php?_route=autoload/server",
                                success: function(msg){
                                    console.log('Servers loaded successfully');
                                    console.log('Servers HTML:', msg);
                                    $("#server").html(msg);
                                    
                                    // Ensure the dropdown is enabled
                                    $("#server").prop('disabled', false);
                                    
                                    // Check if servers were loaded
                                    var serverCount = $("#server option").length - 1; // Subtract 1 for the default option
                                    console.log('Server count:', serverCount);
                                    if (serverCount > 0) {
                                        $("#server-help").text('Found ' + serverCount + ' router(s) available');
                                    } else {
                                        $("#server-help").text('No routers found. Please add routers first.');
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error('Error loading servers:', error);
                                    $("#server-help").text('Error loading routers. Please check console for details.');
                                    alert('Error loading servers. Please check console for details.');
                                }
                            });
                        }
                    });
                    
                    // Load plans when server changes
                    $("#server").change(function(){
                        var server = $("#server").val();
                        var jenis = $('input[name="type"]:checked').val();
                        
                        console.log('Server changed:', server, 'Type:', jenis);
                        
                        if (server && jenis) {
                            $("#plan-help").text('Loading plans...');
                            $.ajax({
                                type: "POST",
                                dataType: "html",
                                url: "index.php?_route=autoload/plan",
                                data: "jenis=" + jenis + "&server=" + server,
                                success: function(msg){
                                    console.log('Plans loaded successfully');
                                    console.log('Plans HTML:', msg);
                                    $("#plan").html(msg);
                                    
                                    // Ensure the dropdown is enabled and clickable
                                    $("#plan").prop('disabled', false);
                                    $("#plan").removeClass('disabled');
                                    
                                    // Check if plans were loaded
                                    var planCount = $("#plan option").length - 1; // Subtract 1 for the default option
                                    console.log('Plan count:', planCount);
                                    if (planCount > 0) {
                                        $("#plan-help").text('Found ' + planCount + ' plan(s) available');
                                    } else {
                                        $("#plan-help").text('No plans found for this router and type. Please create plans first.');
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error('Error loading plans:', error);
                                    $("#plan-help").text('Error loading plans. Please check console for details.');
                                    alert('Error loading plans. Please check console for details.');
                                }
                            });
                        } else {
                            $("#plan-help").text('Select a router and type first to load available plans');
                        }
                    });
                    
                    // Add click handler for debugging
                    $("#plan").click(function(){
                        console.log('Plan dropdown clicked');
                        console.log('Plan dropdown disabled:', $(this).prop('disabled'));
                        console.log('Plan dropdown options:', $(this).find('option').length);
                    });
                    
                    // Form validation
                    $('form').on('submit', function(e) {
                        var type = $('input[name="type"]:checked').val();
                        var server = $('#server').val();
                        var plan = $('#plan').val();
                        var number = $('input[name="numbervoucher"]').val();
                        
                        if (!type) {
                            alert('{Lang::T("Please select a type")}');
                            e.preventDefault();
                            return false;
                        }
                        
                        if (!server) {
                            alert('{Lang::T("Please select a router")}');
                            e.preventDefault();
                            return false;
                        }
                        
                        if (!plan) {
                            alert('{Lang::T("Please select a plan")}');
                            e.preventDefault();
                            return false;
                        }
                        
                        if (number < 1 || number > 1000) {
                            alert('{Lang::T("Number of vouchers must be between 1 and 1000")}');
                            e.preventDefault();
                            return false;
                        }
                    });
                });
            </script>
            
{include file="sections/footer.tpl"}