<div class="row resoponsiveRow">
    <?php include APPPATH . 'views/backend/users/inc/leftsidebar.php'; ?>
    <div class="col-md-9">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4><?= __('ai_config'); ?></h4>
                    </div>
                    <div class="card-body">
                        <?php
                        $config = !empty($settings['ai_config']) ? json_decode($settings['ai_config'], true) : [];
                        $active_provider = isset($config['active_provider']) ? $config['active_provider'] : 'gemini';
                        ?>
                        <form action="<?= base_url('admin/auth/update_ai_config') ?>" method="post">
                            <input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">
                            <input type="hidden" name="id" value="<?= isset($settings['id']) ? $settings['id'] : 0; ?>">

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label><?= __('active_ai_provider'); ?></label>
                                        <select name="active_provider" class="form-control">
                                            <option value="openai" <?= $active_provider == 'openai' ? 'selected' : '' ?>><?= __('openai'); ?></option>
                                            <option value="gemini" <?= $active_provider == 'gemini' ? 'selected' : '' ?>><?= __('google_gemini'); ?></option>
                                            <option value="claude" <?= $active_provider == 'claude' ? 'selected' : '' ?>><?= __('claude'); ?></option>
                                            <option value="zhipu" <?= $active_provider == 'zhipu' ? 'selected' : '' ?>><?= __('zhipu'); ?></option>
                                            <option value="custom" class="hidden" <?= $active_provider == 'custom' ? 'selected' : '' ?>><?= __('custom'); ?></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label><?= __('unsplash_key_image_fallback'); ?></label>
                                        <div class="input-group">
                                            <input type="password" name="unsplash_key" class="form-control" value="<?= isset($config['unsplash_key']) ? $config['unsplash_key'] : '' ?>" placeholder="Unsplash Access Key">
                                            <span class="input-group-addon toggle-password"><i class="fa fa-eye"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <fieldset class="mt-20">
                                <legend><?= __('openai'); ?></legend>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label><?= __('model'); ?></label>
                                            <input type="text" name="openai_model" class="form-control" value="<?= isset($config['openai_model']) ? $config['openai_model'] : 'gpt-3.5-turbo' ?>" placeholder="gpt-4o, gpt-3.5-turbo">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label><?= __('api_key'); ?></label>
                                            <div class="input-group">
                                                <input type="password" name="openai_key" class="form-control" value="<?= isset($config['openai_key']) ? $config['openai_key'] : '' ?>" placeholder="sk-...">
                                                <span class="input-group-addon toggle-password"><i class="fa fa-eye"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label><?= __('endpoint_url'); ?></label>
                                            <input type="text" name="openai_endpoint" class="form-control" value="<?= isset($config['openai_endpoint']) ? $config['openai_endpoint'] : '' ?>" placeholder="https://api.openai.com/v1">
                                            <small class="text-muted">Default: https://api.openai.com/v1</small>
                                        </div>
                                    </div>

                                </div>
                            </fieldset>

                            <fieldset class="mt-20">
                                <legend><?= __('google_gemini'); ?></legend>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label><?= __('api_key'); ?></label>
                                            <div class="input-group">
                                                <input type="password" name="gemini_key" class="form-control" value="<?= isset($config['gemini_key']) ? $config['gemini_key'] : '' ?>" placeholder="AIza...">
                                                <span class="input-group-addon toggle-password"><i class="fa fa-eye"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label><?= __('model'); ?></label>
                                            <input type="text" name="gemini_model" class="form-control" value="<?= isset($config['gemini_model']) ? $config['gemini_model'] : 'gemini-1.5-flash' ?>" placeholder="gemini-1.5-flash, gemini-pro">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label><?= __('endpoint_url'); ?></label>
                                            <input type="text" name="gemini_endpoint" class="form-control" value="<?= isset($config['gemini_endpoint']) ? $config['gemini_endpoint'] : '' ?>" placeholder="https://generativelanguage.googleapis.com/v1beta">
                                            <small class="text-muted">Default: https://generativelanguage.googleapis.com/v1beta</small>
                                        </div>
                                    </div>

                                </div>
                            </fieldset>

                            <fieldset class="mt-20">
                                <legend><?= __('claude'); ?></legend>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label><?= __('api_key'); ?></label>
                                            <div class="input-group">
                                                <input type="password" name="claude_key" class="form-control" value="<?= isset($config['claude_key']) ? $config['claude_key'] : '' ?>" placeholder="sk-ant-...">
                                                <span class="input-group-addon toggle-password"><i class="fa fa-eye"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label><?= __('model'); ?></label>
                                            <input type="text" name="claude_model" class="form-control" value="<?= isset($config['claude_model']) ? $config['claude_model'] : 'claude-3-opus-20240229' ?>" placeholder="claude-3-opus-20240229, claude-3-sonnet-20240229">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label><?= __('endpoint_url'); ?></label>
                                            <input type="text" name="claude_endpoint" class="form-control" value="<?= isset($config['claude_endpoint']) ? $config['claude_endpoint'] : '' ?>" placeholder="https://api.anthropic.com/v1">
                                            <small class="text-muted">Default: https://api.anthropic.com/v1</small>
                                        </div>
                                    </div>

                                </div>
                            </fieldset>

                            <fieldset class="mt-20">
                                <legend><?= __('zhipu'); ?></legend>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label><?= __('api_key'); ?></label>
                                            <div class="input-group">
                                                <input type="password" name="zhipu_key" class="form-control" value="<?= isset($config['zhipu_key']) ? $config['zhipu_key'] : '' ?>" placeholder="API Key">
                                                <span class="input-group-addon toggle-password"><i class="fa fa-eye"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label><?= __('model'); ?></label>
                                            <input type="text" name="zhipu_model" class="form-control" value="<?= isset($config['zhipu_model']) ? $config['zhipu_model'] : 'glm-4' ?>" placeholder="glm-4, cogview-3">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label><?= __('endpoint_url'); ?></label>
                                            <input type="text" name="zhipu_endpoint" class="form-control" value="<?= isset($config['zhipu_endpoint']) ? $config['zhipu_endpoint'] : '' ?>" placeholder="https://open.bigmodel.cn/api/paas/v4">
                                            <small class="text-muted">Default: https://open.bigmodel.cn/api/paas/v4</small>
                                        </div>
                                    </div>

                                </div>
                            </fieldset>

                            <fieldset class="ai-fieldset hidden">
                                <legend><?= __('custom_ai'); ?></legend>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label><?= __('api_endpoint_url'); ?></label>
                                            <input type="text" name="custom_endpoint" class="form-control" value="<?= isset($config['custom_endpoint']) ? $config['custom_endpoint'] : '' ?>" placeholder="https://api.yourprovider.com/v1">
                                            <small class="text-muted">The base URL for the API (e.g., https://api.groq.com/openai/v1)</small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label><?= __('api_key'); ?></label>
                                            <div class="input-group">
                                                <input type="password" name="custom_key" class="form-control" value="<?= isset($config['custom_key']) ? $config['custom_key'] : '' ?>" placeholder="API Key">
                                                <span class="input-group-addon toggle-password"><i class="fa fa-eye"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label><?= __('model'); ?></label>
                                            <input type="text" name="custom_model" class="form-control" value="<?= isset($config['custom_model']) ? $config['custom_model'] : '' ?>" placeholder="e.g., mixtral-8x7b-32768">
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Extra Headers (JSON Format)</label>
                                            <textarea name="custom_headers" class="form-control" placeholder='{"HTTP-Referer": "https://your-site.com", "X-Title": "My App"}' rows="2"><?= isset($config['custom_headers']) ? $config['custom_headers'] : '' ?></textarea>
                                            <small class="text-muted">Optional: JSON object of additional headers to send with the request.</small>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>

                            <div class="mt-20 text-center">
                                <button type="submit" class="btn btn-primary btn-lg"><i class="fa fa-save"></i> <?= __('save'); ?></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).on('click', '.toggle-password', function() {
        const input = $(this).closest('.input-group').find('input');
        const icon = $(this).find('i');

        if (input.attr('type') === 'password') {
            input.attr('type', 'text');
            icon.removeClass('fa-eye').addClass('fa-eye-slash');
        } else {
            input.attr('type', 'password');
            icon.removeClass('fa-eye-slash').addClass('fa-eye');
        }
    });
</script>

<style>
    .ai-fieldset {
        border: 1px solid #ddd !important;
        padding: 0 1.4em 1.4em 1.4em !important;
        margin: 0 0 1.5em 0 !important;
        border-radius: 8px;
        background: #fdfdfd;
    }

    .ai-fieldset legend {
        font-size: 1.2em !important;
        font-weight: bold !important;
        text-align: left !important;
        width: auto;
        padding: 0 10px;
        border-bottom: none;
        margin-bottom: 0;
        color: #333;
        text-transform: uppercase;
    }
</style>