@extends('layouts.app')

@section('content')
<!-- Premium Custom Styles for the Setup Wizard -->
<style>
    .wizard-container {
        max-width: 900px;
        margin: 0 auto;
    }
    .wizard-steps {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32px;
        background: var(--card-solid);
        padding: 16px 24px;
        border-radius: 12px;
        border: 1px solid var(--border);
    }
    .wizard-step {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--text-dim);
        font-weight: 600;
        font-size: 14px;
    }
    .wizard-step.active {
        color: var(--accent);
    }
    .wizard-step.completed {
        color: var(--green);
    }
    .wizard-step-num {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
    }
    .wizard-step.active .wizard-step-num {
        border-color: var(--accent);
        background: rgba(99, 102, 241, 0.1);
    }
    .wizard-step.completed .wizard-step-num {
        border-color: var(--green);
        background: rgba(16, 185, 129, 0.1);
    }
    .wizard-step-line {
        flex-grow: 1;
        height: 2px;
        background: var(--border);
        margin: 0 16px;
        max-width: 80px;
    }
    
    .wizard-panel {
        display: none;
    }
    .wizard-panel.active {
        display: block;
        animation: fadeIn 0.3s ease-in-out;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Mode Card styling */
    .mode-card {
        border: 2px solid var(--border);
        border-radius: 16px;
        padding: 24px;
        cursor: pointer;
        transition: all 0.2s ease;
        background: var(--card-solid);
        text-align: center;
    }
    .mode-card:hover {
        border-color: var(--accent);
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
    }
    .mode-card.selected {
        border-color: var(--accent);
        background: rgba(99, 102, 241, 0.05);
    }
    .mode-icon {
        font-size: 40px;
        margin-bottom: 16px;
    }

    /* Template categories */
    .category-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 20px;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .category-tab {
        background: var(--card-solid);
        border: 1px solid var(--border);
        padding: 8px 16px;
        border-radius: 30px;
        color: var(--text-dim);
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
        white-space: nowrap;
        transition: all 0.2s ease;
    }
    .category-tab:hover {
        border-color: var(--text-dim);
    }
    .category-tab.active {
        background: var(--accent);
        color: #ffffff;
        border-color: var(--accent);
    }

    /* Template Cards Grid */
    .template-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 16px;
        margin-bottom: 30px;
    }
    .template-card {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 20px;
        cursor: pointer;
        transition: all 0.2s ease;
        background: var(--card-solid);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .template-card:hover {
        border-color: var(--accent);
        transform: translateY(-2px);
    }
    .setting-card {
        background: var(--muted);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 14px;
    }
    .template-card.blank-card {
        border-style: dashed;
        border-width: 2px;
        justify-content: center;
        align-items: center;
        text-align: center;
        min-height: 180px;
    }
    .template-badge {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 6px;
        letter-spacing: 0.05em;
    }
</style>

<div class="wizard-container">
    <div class="page-header">
        <div>
            <h1 class="page-title">Create Simulation Scenario</h1>
            <p class="page-subtitle">Configure a new standard practice session or interactive AI Avatar roleplay</p>
        </div>
        <a href="{{ route('trainings.index') }}" class="btn btn-secondary">Back</a>
    </div>

    <!-- Wizard Steps Status Bar -->
    <div class="wizard-steps">
        <div class="wizard-step active" id="step_indicator_1">
            <div class="wizard-step-num">1</div>
            Select Mode
        </div>
        <div class="wizard-step-line"></div>
        <div class="wizard-step" id="step_indicator_2">
            <div class="wizard-step-num">2</div>
            Choose Template
        </div>
        <div class="wizard-step-line"></div>
        <div class="wizard-step" id="step_indicator_3">
            <div class="wizard-step-num">3</div>
            Configure Settings
        </div>
    </div>

    <form id="simulation_form" method="POST" action="{{ route('admin.trainings.store') }}" enctype="multipart/form-data">
        @csrf

        <!-- STEP 1 PANEL: SELECT MODE -->
        <div class="wizard-panel active" id="panel_step_1">
            <h2 style="font-size: 20px; font-weight: 700; margin-bottom: 8px;">Select Simulation Mode</h2>
            <p style="color: var(--text-dim); margin-bottom: 24px; font-size: 14px;">Choose between a solo recording prompt and a dynamic AI roleplay avatar.</p>
            
            <div class="grid grid-cols-2" style="gap: 20px; margin-bottom: 32px;">
                <div class="mode-card" id="mode_normal" onclick="selectMode('normal')">
                    <h3 style="font-size: 18px; font-weight: 700; margin-bottom: 8px;">Solo Practice</h3>
                    <p style="font-size: 13px; color: var(--text-dim); line-height: 1.5;">Self-paced response practice based on a fixed scenario prompt. Excellent for standard presentations and quick pitches.</p>
                </div>
                
                <div class="mode-card" id="mode_ai_avatar" onclick="selectMode('ai_avatar')">
                    <h3 style="font-size: 18px; font-weight: 700; margin-bottom: 8px;">AI Avatar Roleplay</h3>
                    <p style="font-size: 13px; color: var(--text-dim); line-height: 1.5;">Interactive, voice-enabled conversation with an AI persona. Challenges users dynamically with objections and feedback.</p>
                </div>
            </div>

            <!-- Hidden input mapping mode value to match controller expected validation -->
            <input type="hidden" name="type" id="hidden_type" value="normal">

            <div style="display: flex; justify-content: flex-end;">
                <button type="button" class="btn btn-primary" onclick="goToStep(2)" style="padding: 12px 24px;">Continue</button>
            </div>
        </div>

        <!-- STEP 2 PANEL: CHOOSE TEMPLATE -->
        <div class="wizard-panel" id="panel_step_2">
            <h2 style="font-size: 20px; font-weight: 700; margin-bottom: 8px;">Choose Scenario Template</h2>
            <p style="color: var(--text-dim); margin-bottom: 24px; font-size: 14px;">Select a premium pre-configured template or start completely from scratch.</p>

            <div class="category-tabs">
                <div class="category-tab active" onclick="filterTemplates('all', this)">All Templates</div>
                <div class="category-tab" onclick="filterTemplates('negotiation', this)">Negotiation</div>
                <div class="category-tab" onclick="filterTemplates('b2b', this)">Sales & B2B</div>
                <div class="category-tab" onclick="filterTemplates('b2c', this)">Customer Support</div>
                <div class="category-tab" onclick="filterTemplates('hr', this)">Workplace & HR</div>
                <div class="category-tab" onclick="filterTemplates('agri_retail', this)">Agri & Retail Distribution</div>
                <div class="category-tab" onclick="filterTemplates('financial_pe', this)">Financial & PE Consulting</div>
            </div>

            <div class="template-grid" id="template_container">
                <!-- Blank Template Card -->
                <div class="template-card blank-card" onclick="selectTemplate('blank')">
                    <h3 style="font-size: 15px; font-weight: 700; margin-bottom: 4px;">Start from Scratch</h3>
                    <p style="font-size: 11px; color: var(--text-dim);">Build a custom simulation scenario with no default values</p>
                </div>
                <!-- Dynamic templates injected via JS -->
            </div>

            <div style="display: flex; justify-content: space-between;">
                <button type="button" class="btn btn-secondary" onclick="goToStep(1)" style="padding: 12px 24px;">Back</button>
                <button type="button" class="btn btn-primary" onclick="goToStep(3)" style="padding: 12px 24px;">Continue</button>
            </div>
        </div>

        <!-- STEP 3 PANEL: CONFIGURE SETTINGS -->
        <div class="wizard-panel" id="panel_step_3">
            <h2 style="font-size: 20px; font-weight: 700; margin-bottom: 8px;">Configure Simulation Settings</h2>
            <p style="color: var(--text-dim); margin-bottom: 24px; font-size: 14px;">Customize details, targets, evaluation metrics, and AI personality attributes.</p>

            <div class="grid grid-cols-2">
                <div class="form-group">
                    <label class="form-label" for="title">Simulation Title</label>
                    <input id="title" type="text" name="title" class="form-control" placeholder="e.g. Enterprise Contract Alignment" value="{{ old('title') }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="max_attempts">Maximum Attempts Per User</label>
                    <input id="max_attempts" type="number" name="max_attempts" class="form-control mono" min="1" placeholder="e.g. 3 (Leave empty for unlimited)" value="{{ old('max_attempts') }}">
                </div>
            </div>

            <div class="form-group">
                <label class="form-label" for="description">Short Description</label>
                <textarea id="description" name="description" class="form-control" placeholder="Brief objectives and instructions for users">{{ old('description') }}</textarea>
            </div>

            <div class="form-group">
                <label class="form-label" for="prompt_text">Scenario Context & Objective Prompt</label>
                <textarea id="prompt_text" name="prompt_text" class="form-control" placeholder="Detailed prompt context provided to the user" required>{{ old('prompt_text') }}</textarea>
            </div>

            <!-- AI Avatar Fields Container -->
            <div id="avatar_fields" style="display: none; border-top: 1px dashed var(--border); padding-top: 20px; margin-top: 20px;">
                <h3 style="font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 16px;">AI Buyer Persona Configuration</h3>
                
                <div class="grid grid-cols-2" style="margin-bottom: 16px;">
                    <div class="form-group">
                        <label class="form-label" for="client_name">Persona / Character Name</label>
                        <input id="client_name" type="text" name="client_name" class="form-control mono" placeholder="e.g. Sarah Jenkins" value="{{ old('client_name') }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="client_title">Persona Role / Title</label>
                        <input id="client_title" type="text" name="client_title" class="form-control mono" placeholder="e.g. VP of Operations" value="{{ old('client_title') }}">
                    </div>
                </div>

                <div class="grid grid-cols-2" style="margin-bottom: 16px;">
                    <div class="form-group">
                        <label class="form-label" for="difficulty">Roleplay Difficulty</label>
                        <select id="difficulty" name="difficulty" class="form-control mono">
                            <option value="easy" {{ old('difficulty') === 'easy' ? 'selected' : '' }}>Easy (Cooperative)</option>
                            <option value="medium" {{ old('difficulty', 'medium') === 'medium' ? 'selected' : '' }}>Medium (Objections)</option>
                            <option value="hard" {{ old('difficulty') === 'hard' ? 'selected' : '' }}>Hard (Skeptical)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="voice_name">Voice Model</label>
                        <select id="voice_name" name="voice_name" class="form-control mono">
                            <option value="af_heart" {{ old('voice_name') === 'af_heart' ? 'selected' : '' }}>Heart (US Female)</option>
                            <option value="af_bella" {{ old('voice_name') === 'af_bella' ? 'selected' : '' }}>Bella (US Female)</option>
                            <option value="am_michael" {{ old('voice_name') === 'am_michael' ? 'selected' : '' }}>Michael (US Male)</option>
                            <option value="am_echo" {{ old('voice_name') === 'am_echo' ? 'selected' : '' }}>Echo (US Male)</option>
                            <option value="bf_emma" {{ old('voice_name') === 'bf_emma' ? 'selected' : '' }}>Emma (UK Female)</option>
                            <option value="bm_george" {{ old('voice_name') === 'bm_george' ? 'selected' : '' }}>George (UK Male)</option>
                            @if(env('ELEVENLABS_API_KEY'))
                                <option value="eleven_aditi" {{ old('voice_name') === 'eleven_aditi' ? 'selected' : '' }}>Aditi (ElevenLabs Indian Female)</option>
                                <option value="eleven_karan" {{ old('voice_name') === 'eleven_karan' ? 'selected' : '' }}>Karan (ElevenLabs Indian Male)</option>
                            @endif
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-2" style="margin-bottom: 16px;">
                    <div class="form-group">
                        <label class="form-label" for="language">Roleplay Language</label>
                        <select id="language" name="language" class="form-control mono" onchange="updateDefaultVoices(this.value)">
                            <option value="en" {{ old('language', 'en') === 'en' ? 'selected' : '' }}>English</option>
                            <option value="hi" {{ old('language') === 'hi' ? 'selected' : '' }}>Hindi (हिंदी)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="simulation_type">Simulation Type</label>
                        <select id="simulation_type" name="simulation_type" class="form-control mono">
                            <option value="B2B sales simulation" {{ old('simulation_type') === 'B2B sales simulation' ? 'selected' : '' }}>B2B Sales</option>
                            <option value="B2C customer support simulation" {{ old('simulation_type') === 'B2C customer support simulation' ? 'selected' : '' }}>B2C Customer Support</option>
                            <option value="technical support simulation" {{ old('simulation_type') === 'technical support simulation' ? 'selected' : '' }}>Technical Support</option>
                            <option value="cold calling simulation" {{ old('simulation_type') === 'cold calling simulation' ? 'selected' : '' }}>Cold Calling</option>
                            <option value="executive meeting simulation" {{ old('simulation_type') === 'executive meeting simulation' ? 'selected' : '' }}>Executive Meeting</option>
                            <option value="general interview simulation" {{ old('simulation_type') === 'general interview simulation' ? 'selected' : '' }}>General Interview</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="company_desc">Organization / Context Profile</label>
                    <input id="company_desc" type="text" name="company_desc" class="form-control mono" placeholder="e.g. TechCorp, 200-person SaaS company" value="{{ old('company_desc') }}">
                </div>

                <div class="form-group">
                    <label class="form-label" for="requirements">Persona Pain Points & Context Requirements</label>
                    <textarea id="requirements" name="requirements" class="form-control mono" placeholder="e.g. Budget constrained to $10k, needs Salesforce integration">{{ old('requirements') }}</textarea>
                </div>

                @if(env('OPENAI_API_KEY') || config('services.openai.key'))
                    <div class="form-group">
                        <label class="form-label" for="knowledge_document">Knowledge Transfer (KT) Document <span style="font-size: 11px; color: var(--text-dim);">(Optional)</span></label>
                        <input id="knowledge_document" type="file" name="knowledge_document" class="form-control mono" accept=".txt,.md,.pdf,.doc,.docx,.csv,.json">
                        <p style="font-size: 11px; color: var(--text-dim); margin-top: 4.5px;">Upload any reference document (Text, PDF, Markdown, Word, CSV) to feed background knowledge to the AI simulation agent.</p>
                    </div>
                @endif
                
                <p style="font-size: 12px; color: var(--amber); margin-bottom: 16px;">
                    Note: Submitting saves this scenario as Draft. AI generation will trigger via Queue Worker once you assign users & set the start date.
                </p>
            </div>

            <!-- Advanced Review Metrics Settings & Target Limits -->
            <div style="border: 1px solid var(--border-bright); border-radius: 12px; margin-top: 24px; overflow: hidden; background: var(--card-solid); margin-bottom: 24px;">
                <button type="button" onclick="toggleMetricsAccordion()" style="width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--muted); border: none; cursor: pointer; text-align: left;">
                    <div>
                        <h3 style="font-size: 15px; font-weight: 700; color: var(--accent); margin: 0; display: flex; align-items: center; gap: 8px;">
                            Advanced Review Metric Controls & Target Limits
                        </h3>
                        <p style="font-size: 11px; color: var(--text-dim); margin-top: 4px; margin-bottom: 0;">Configure evaluation metric toggles, target limits, and maximum AI generated questions.</p>
                    </div>
                    <span id="accordion_icon" style="font-size: 12px; color: var(--accent); font-weight: 700;">SHOW</span>
                </button>

                <div id="metrics_accordion_content" style="display: none; padding: 20px; border-top: 1px solid var(--border);">
                    <!-- Max AI Generated Questions Control -->
                    <div style="background: rgba(99, 102, 241, 0.08); border: 1px solid var(--accent); border-radius: 10px; padding: 14px; margin-bottom: 16px;">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <label class="form-label" for="max_ai_questions" style="color: var(--white); font-weight: 700; margin-bottom: 2px;">Max AI Generated Questions</label>
                                <div style="font-size: 11px; color: var(--text-dim);">Set maximum number of questions the AI persona will generate for this training session (1 to 10)</div>
                            </div>
                            <input id="max_ai_questions" type="number" name="max_ai_questions" class="form-control mono" style="width: 100px; text-align: center; font-size: 16px; font-weight: 700;" min="1" max="10" value="{{ old('max_ai_questions', 4) }}">
                        </div>
                    </div>

                    <div class="grid grid-cols-2" style="gap: 16px;">
                        <!-- Eye Contact Metric -->
                        <div class="setting-card">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                                <span style="font-weight: 600; font-size: 13px;">Eye Contact Tracking</span>
                                <input type="checkbox" name="metric_settings[eye_contact][enabled]" value="1" checked style="width: 18px; height: 18px; cursor: pointer;">
                            </div>
                            <div class="form-group" style="margin-bottom: 0;">
                                <label class="form-label" style="font-size: 11px;">Target Min Eye Contact (%)</label>
                                <input type="number" name="metric_settings[eye_contact][min_percentage]" class="form-control mono" placeholder="70" value="70" min="0" max="100">
                            </div>
                        </div>

                        <!-- Blink Rate Metric -->
                        <div class="setting-card">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                                <span style="font-weight: 600; font-size: 13px;">Blink Rate Tracking</span>
                                <input type="checkbox" name="metric_settings[blink_rate][enabled]" value="1" checked style="width: 18px; height: 18px; cursor: pointer;">
                            </div>
                            <div class="grid grid-cols-2" style="gap: 8px; margin-bottom: 0;">
                                <div>
                                    <label class="form-label" style="font-size: 10px;">Min Blinks/min</label>
                                    <input type="number" name="metric_settings[blink_rate][min]" class="form-control mono" placeholder="10" value="10">
                                </div>
                                <div>
                                    <label class="form-label" style="font-size: 10px;">Max Blinks/min</label>
                                    <input type="number" name="metric_settings[blink_rate][max]" class="form-control mono" placeholder="25" value="25">
                                </div>
                            </div>
                        </div>

                        <!-- Head Pose & Posture Metric -->
                        <div class="setting-card">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                                <span style="font-weight: 600; font-size: 13px;">Posture & Head Pose Steadiness</span>
                                <input type="checkbox" name="metric_settings[head_pose][enabled]" value="1" checked style="width: 18px; height: 18px; cursor: pointer;">
                            </div>
                            <div class="form-group" style="margin-bottom: 0;">
                                <label class="form-label" style="font-size: 11px;">Allowed Movement Threshold</label>
                                <select name="metric_settings[head_pose][threshold]" class="form-control mono">
                                    <option value="low">Strict (Low Movement)</option>
                                    <option value="medium" selected>Standard (Medium)</option>
                                    <option value="high">Flexible (High Movement)</option>
                                </select>
                            </div>
                        </div>

                        <!-- WPM Metric -->
                        <div class="setting-card">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                                <span style="font-weight: 600; font-size: 13px;">Words Per Minute (WPM)</span>
                                <input type="checkbox" name="metric_settings[wpm][enabled]" value="1" checked style="width: 18px; height: 18px; cursor: pointer;">
                            </div>
                            <div class="grid grid-cols-2" style="gap: 8px; margin-bottom: 0;">
                                <div>
                                    <label class="form-label" style="font-size: 10px;">Min WPM</label>
                                    <input type="number" name="metric_settings[wpm][min]" class="form-control mono" placeholder="120" value="120">
                                </div>
                                <div>
                                    <label class="form-label" style="font-size: 10px;">Max WPM</label>
                                    <input type="number" name="metric_settings[wpm][max]" class="form-control mono" placeholder="165" value="165">
                                </div>
                            </div>
                        </div>

                        <!-- Vocal Fillers Metric -->
                        <div class="setting-card">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                                <span style="font-weight: 600; font-size: 13px;">Vocal Filler Counter</span>
                                <input type="checkbox" name="metric_settings[fillers][enabled]" value="1" checked style="width: 18px; height: 18px; cursor: pointer;">
                            </div>
                            <div class="form-group" style="margin-bottom: 0;">
                                <label class="form-label" style="font-size: 11px;">Max Allowed Fillers</label>
                                <input type="number" name="metric_settings[fillers][max_count]" class="form-control mono" placeholder="5" value="5">
                            </div>
                        </div>

                        <!-- Sentiment Arc & Tone Metric -->
                        <div class="setting-card">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                                <span style="font-weight: 600; font-size: 13px;">Sentiment Arc & Tone Analysis</span>
                                <input type="checkbox" name="metric_settings[sentiment][enabled]" value="1" checked style="width: 18px; height: 18px; cursor: pointer;">
                            </div>
                            <div class="form-group" style="margin-bottom: 0;">
                                <label class="form-label" style="font-size: 11px;">Target Sentiment Balance</label>
                                <select name="metric_settings[sentiment][target]" class="form-control mono">
                                    <option value="positive_dominant" selected>Positive / Encouraging</option>
                                    <option value="balanced">Balanced Professional</option>
                                </select>
                            </div>
                        </div>

                        <!-- Concept Coverage Framework -->
                        <div class="setting-card" style="grid-column: span 2;">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                                <div>
                                    <span style="font-weight: 600; font-size: 14px; color: var(--white);">Concept Matching Framework</span>
                                    <div style="font-size: 11px; color: var(--text-dim);">Edit target concept guidelines for evaluation</div>
                                </div>
                                <div style="display: flex; align-items: center; gap: 12px;">
                                    <input type="checkbox" name="metric_settings[sales_concepts][enabled]" value="1" checked style="width: 18px; height: 18px; cursor: pointer;">
                                    <button type="button" class="btn btn-secondary btn-sm" onclick="addSalesConceptRow()" style="font-size: 12px;">+ Add Custom Concept</button>
                                </div>
                            </div>

                            <div style="margin-bottom: 12px; display: flex; align-items: center; gap: 12px;">
                                <label class="form-label" style="font-size: 11px; margin-bottom: 0;">Min Concepts Required to Pass:</label>
                                <input type="number" name="metric_settings[sales_concepts][min_matched]" class="form-control mono" style="width: 80px; text-align: center; font-size: 13px;" placeholder="3" value="3">
                            </div>

                            <div id="sales_concepts_list" style="display: flex; flex-direction: column; gap: 8px;">
                                <div class="concept-row-item" style="display: flex; gap: 8px; align-items: center;">
                                    <input type="text" name="metric_settings[sales_concepts][custom_list][]" class="form-control mono" style="font-size: 13px;" value="Rapport & Greeting" placeholder="Concept Name">
                                    <button type="button" class="btn btn-danger btn-sm" onclick="this.parentElement.remove()" style="padding: 6px 12px; font-size: 11px;">Remove</button>
                                </div>
                                <div class="concept-row-item" style="display: flex; gap: 8px; align-items: center;">
                                    <input type="text" name="metric_settings[sales_concepts][custom_list][]" class="form-control mono" style="font-size: 13px;" value="Context Identification" placeholder="Concept Name">
                                    <button type="button" class="btn btn-danger btn-sm" onclick="this.parentElement.remove()" style="padding: 6px 12px; font-size: 11px;">Remove</button>
                                </div>
                                <div class="concept-row-item" style="display: flex; gap: 8px; align-items: center;">
                                    <input type="text" name="metric_settings[sales_concepts][custom_list][]" class="form-control mono" style="font-size: 13px;" value="Value Proposition / Problem Solving" placeholder="Concept Name">
                                    <button type="button" class="btn btn-danger btn-sm" onclick="this.parentElement.remove()" style="padding: 6px 12px; font-size: 11px;">Remove</button>
                                </div>
                                <div class="concept-row-item" style="display: flex; gap: 8px; align-items: center;">
                                    <input type="text" name="metric_settings[sales_concepts][custom_list][]" class="form-control mono" style="font-size: 13px;" value="Handling Objections / Core Concerns" placeholder="Concept Name">
                                    <button type="button" class="btn btn-danger btn-sm" onclick="this.parentElement.remove()" style="padding: 6px 12px; font-size: 11px;">Remove</button>
                                </div>
                                <div class="concept-row-item" style="display: flex; gap: 8px; align-items: center;">
                                    <input type="text" name="metric_settings[sales_concepts][custom_list][]" class="form-control mono" style="font-size: 13px;" value="Clear Resolution / Next Steps" placeholder="Concept Name">
                                    <button type="button" class="btn btn-danger btn-sm" onclick="this.parentElement.remove()" style="padding: 6px 12px; font-size: 11px;">Remove</button>
                                </div>
                            </div>
                        </div>

                        <!-- Vocabulary density -->
                        <div class="setting-card">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                                <span style="font-weight: 600; font-size: 13px;">Vocabulary Density & Grade Level</span>
                                <input type="checkbox" name="metric_settings[vocabulary][enabled]" value="1" checked style="width: 18px; height: 18px; cursor: pointer;">
                            </div>
                            <div class="form-group" style="margin-bottom: 0;">
                                <label class="form-label" style="font-size: 11px;">Min Lexical Density (%)</label>
                                <input type="number" name="metric_settings[vocabulary][min_density]" class="form-control mono" placeholder="45" value="45" min="0" max="100">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div style="display: flex; justify-content: space-between; margin-top: 24px;">
                <button type="button" class="btn btn-secondary" onclick="goToStep(2)" style="padding: 12px 24px;">Back</button>
                <button type="submit" class="btn btn-primary" style="padding: 12px 36px;">
                    Save & Continue to Assignment
                </button>
            </div>
        </div>
    </form>
</div>

<!-- Scripts for the multi-step templates logic -->
<script>
    const templates = @json($templates);

    let selectedModeType = 'normal';

    function selectMode(mode) {
        selectedModeType = mode;
        document.getElementById('hidden_type').value = mode;
        
        // Update cards highlight
        document.getElementById('mode_normal').classList.remove('selected');
        document.getElementById('mode_ai_avatar').classList.remove('selected');
        document.getElementById('mode_' + mode).classList.add('selected');
        
        // Show or hide avatar fields dynamic config
        document.getElementById('avatar_fields').style.display = mode === 'ai_avatar' ? 'block' : 'none';
    }

    function renderTemplates(category = 'all') {
        const container = document.getElementById('template_container');
        // Clear all except the first "Start from Scratch" card
        const blankCard = container.querySelector('.blank-card');
        container.innerHTML = '';
        container.appendChild(blankCard);

        Object.keys(templates).forEach(key => {
            const tpl = templates[key];
            if (category !== 'all' && tpl.category !== category) return;

            const div = document.createElement('div');
            div.className = 'template-card';
            div.onclick = () => selectTemplate(key);
            div.innerHTML = `
                <div>
                    <div class="template-badge">${tpl.category.toUpperCase()}</div>
                    <h3 style="font-size: 15px; font-weight: 700; margin-bottom: 6px;">${tpl.title}</h3>
                    <p style="font-size: 12px; color: var(--text-dim); line-height: 1.4; margin-bottom: 12px;">${tpl.description}</p>
                </div>
                <div style="font-size: 11px; color: var(--accent); font-weight: 600; border-top: 1px solid var(--border); padding-top: 8px;">
                    👤 Role: ${tpl.client_name}
                </div>
            `;
            container.appendChild(div);
        });
    }

    function filterTemplates(category, tabElement) {
        // Update active tab styling
        const tabs = document.querySelectorAll('.category-tab');
        tabs.forEach(tab => tab.classList.remove('active'));
        tabElement.classList.add('active');

        renderTemplates(category);
    }

    function selectTemplate(key) {
        if (key === 'blank') {
            // Reset form inputs
            document.getElementById('title').value = '';
            document.getElementById('description').value = '';
            document.getElementById('prompt_text').value = '';
            document.getElementById('client_name').value = '';
            document.getElementById('client_title').value = '';
            document.getElementById('company_desc').value = '';
            document.getElementById('requirements').value = '';
            document.getElementById('difficulty').value = 'medium';
            document.getElementById('simulation_type').value = 'B2B sales simulation';
        } else {
            // Populate form inputs
            const tpl = templates[key];
            document.getElementById('title').value = tpl.title;
            document.getElementById('description').value = tpl.description;
            document.getElementById('prompt_text').value = tpl.prompt_text;
            document.getElementById('client_name').value = tpl.client_name;
            document.getElementById('client_title').value = tpl.client_title;
            document.getElementById('company_desc').value = tpl.company_desc;
            document.getElementById('requirements').value = tpl.requirements;
            document.getElementById('difficulty').value = tpl.difficulty;
            document.getElementById('simulation_type').value = tpl.simulation_type;
        }

        // Navigate to Step 3 configuration
        goToStep(3);
    }

    function goToStep(step) {
        // Toggle Active Panel
        document.querySelectorAll('.wizard-panel').forEach(p => p.classList.remove('active'));
        document.getElementById('panel_step_' + step).classList.add('active');

        // Update Indicators
        for (let i = 1; i <= 3; i++) {
            const ind = document.getElementById('step_indicator_' + i);
            ind.classList.remove('active', 'completed');
            if (i < step) {
                ind.classList.add('completed');
            } else if (i === step) {
                ind.classList.add('active');
            }
        }
    }

    function toggleMetricsAccordion() {
        const content = document.getElementById('metrics_accordion_content');
        const icon = document.getElementById('accordion_icon');
        if (content.style.display === 'none') {
            content.style.display = 'block';
            icon.textContent = 'HIDE';
        } else {
            content.style.display = 'none';
            icon.textContent = 'SHOW';
        }
    }

    function addSalesConceptRow() {
        const list = document.getElementById('sales_concepts_list');
        const div = document.createElement('div');
        div.className = 'concept-row-item';
        div.style.cssText = 'display: flex; gap: 8px; align-items: center;';
        div.innerHTML = `
            <input type="text" name="metric_settings[sales_concepts][custom_list][]" class="form-control mono" style="font-size: 13px;" placeholder="Custom Concept Name (e.g. Budget Qualification)">
            <button type="button" class="btn btn-danger btn-sm" onclick="this.parentElement.remove()" style="padding: 6px 12px; font-size: 11px;">Remove</button>
        `;
        list.appendChild(div);
    }

    function updateDefaultVoices(lang) {
        const voiceSelect = document.getElementById('voice_name');
        if (lang === 'hi') {
            const aditiOpt = voiceSelect.querySelector('option[value="eleven_aditi"]');
            if (aditiOpt) {
                voiceSelect.value = 'eleven_aditi';
            }
        } else {
            voiceSelect.value = 'af_heart';
        }
    }

    // Initialize Page Load
    document.addEventListener('DOMContentLoaded', () => {
        selectMode('normal');
        renderTemplates('all');
    });
</script>
@endsection