{% extends 'base.html.twig' %}

{# 
  EXAMPLE: How to use Karizma AI Suggestions in your forms
  
  This is a simple example showing two ways to integrate AI suggestions:
  1. Using data-ai-suggest attribute (easiest)
  2. Using JavaScript (for more control)
#}

{% block body %}
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <span class="caption-subject bold uppercase">Example Form with AI Suggestions</span>
            </div>
        </div>
        <div class="portlet-body form">
            <form method="post" class="form-horizontal">
                <div class="form-body">
                    
                    {# METHOD 1: Simple - Just add data-ai-suggest attribute #}
                    <div class="form-group">
                        <label class="col-md-3 control-label">Title (with AI)</label>
                        <div class="col-md-9">
                            <input 
                                type="text" 
                                name="title" 
                                class="form-control" 
                                data-ai-suggest="Titre"
                                placeholder="Enter title...">
                            <span class="help-block">AI suggestion will appear when you leave this field</span>
                        </div>
                    </div>

                    {# METHOD 1: Textarea with AI #}
                    <div class="form-group">
                        <label class="col-md-3 control-label">Description (with AI)</label>
                        <div class="col-md-9">
                            <textarea 
                                name="description" 
                                class="form-control" 
                                rows="5"
                                data-ai-suggest="Description"
                                placeholder="Enter description..."></textarea>
                            <span class="help-block">AI will improve your text automatically</span>
                        </div>
                    </div>

                    {# Regular field without AI #}
                    <div class="form-group">
                        <label class="col-md-3 control-label">Email (no AI)</label>
                        <div class="col-md-9">
                            <input 
                                type="email" 
                                name="email" 
                                class="form-control" 
                                placeholder="Enter email...">
                            <span class="help-block">This field does not have AI suggestions</span>
                        </div>
                    </div>

                    {# Another AI-enabled field #}
                    <div class="form-group">
                        <label class="col-md-3 control-label">Comments (with AI)</label>
                        <div class="col-md-9">
                            <textarea 
                                name="comments" 
                                class="form-control" 
                                rows="3"
                                data-ai-suggest="Commentaires"></textarea>
                        </div>
                    </div>

                </div>
                
                <div class="form-actions">
                    <div class="row">
                        <div class="col-md-offset-3 col-md-9">
                            <button type="submit" class="btn green">
                                <i class="fa fa-check"></i> Submit
                            </button>
                            <button type="button" class="btn default">Cancel</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <span class="caption-subject bold uppercase">Programmatic Attachment Example</span>
            </div>
        </div>
        <div class="portlet-body form">
            <form method="post" class="form-horizontal" id="programmatic-form">
                <div class="form-body">
                    
                    {# These fields will have AI attached via JavaScript #}
                    <div class="form-group">
                        <label class="col-md-3 control-label">Subject</label>
                        <div class="col-md-9">
                            <input 
                                type="text" 
                                name="subject" 
                                id="subject-field"
                                class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label">Message</label>
                        <div class="col-md-9">
                            <textarea 
                                name="message" 
                                id="message-field"
                                class="form-control" 
                                rows="5"></textarea>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    
    {# IMPORTANT: Load the library first #}
    <script src="{{ asset('assets/global/scripts/karizma-ai-suggestion.js') ~ '?' ~ random() }}" type="text/javascript"></script>
    
    {# METHOD 2: Programmatic attachment #}
    <script>
        $(document).ready(function() {
            // Attach AI suggestions programmatically
            KarizmaAI.attachMultiple([
                { selector: '#subject-field', label: 'Sujet' },
                { selector: '#message-field', label: 'Message' }
            ]);
            
            // Or attach individually with custom options
            // KarizmaAI.attachTo('#subject-field', 'Sujet', {
            //     debounceDelay: 1000,
            //     convertToUppercase: false
            // });
        });
    </script>
{% endblock %}