<div class="page-content" id="page-calc-builder">
<div class="config-builder-shell">
<div class="config-builder-header">
<div>
<h1 class="page-title">CalcBuilder</h1>
<p class="page-subtitle">Skapa en konfigurator, koppla den till en kategori och bygg upp blocken som ska driva kalkylmotorn.</p>
</div>
<div class="page-file-strip">
<a class="page-file-pill" href="/maps/view.php?file=CalcBuilder/CalcBuilder.php" target="_blank" rel="noreferrer">CalcBuilder.php <span class="page-file-code">DEV-0DF17B17</span></a>
<a class="page-file-pill" href="/maps/view.php?file=CalcBuilder/CalcBuilder.js" target="_blank" rel="noreferrer">CalcBuilder.js <span class="page-file-code">DEV-8F9E6D20</span></a>
<a class="page-file-pill" href="/maps/view.php?file=CalcBuilder/CalcBuilder.css" target="_blank" rel="noreferrer">CalcBuilder.css <span class="page-file-code">DEV-2E948F21</span></a>
<a class="page-file-pill" href="/maps/view.php?file=api/calc_builder.php" target="_blank" rel="noreferrer">calc_builder.php <span class="page-file-code">DEV-A2271AC5</span></a>
</div>
</div>
<div class="config-builder-layout">
<aside class="config-builder-sidebar">
<div class="config-builder-panel">
<div class="config-builder-panel-head">
<h3>Konfiguratorer</h3>
<button type="button" class="config-builder-btn is-primary" onclick="CalcBuilder.createNew()">+ Ny</button>
</div>
<input id="calcBuilderSearch" class="config-builder-input" type="text" placeholder="Sök kategori eller namn..." oninput="CalcBuilder.renderList()">
<div id="calcBuilderList" class="config-builder-list"></div>
</div>
</aside>
<section class="config-builder-main">
<div class="config-builder-panel config-builder-mode-panel">
<div class="config-builder-mode-tabs" role="tablist">
<button type="button" class="config-builder-mode-tab is-active" data-mode="simple" onclick="CalcBuilder.setMode('simple')">Enkel</button>
<button type="button" class="config-builder-mode-tab" data-mode="advanced" onclick="CalcBuilder.setMode('advanced')">Avancerad</button>
<button type="button" class="config-builder-mode-tab" data-mode="code" onclick="CalcBuilder.setMode('code')">Code</button>
</div>
<p class="config-builder-mode-help" id="calcBuilderModeHelp">Enkel kalkylator använder produktkatalogens färdiga upplägg.</p>
</div>
<div class="config-builder-panel">
<div class="config-builder-panel-head">
<h3>Grundinfo</h3>
<div class="config-builder-actions">
<button type="button" class="config-builder-btn config-builder-advanced-only" onclick="CalcBuilder.duplicateLastBlock()">Duplicera block</button>
<button type="button" class="config-builder-btn" onclick="CalcBuilder.openPreview()">Öppna sida</button>
<button type="button" class="config-builder-btn is-primary" onclick="CalcBuilder.saveCurrent()">Spara konfigurator</button>
</div>
</div>
<div class="config-builder-grid">
<label>
<span>Namn</span>
<input id="calcBuilderTitle" class="config-builder-input" type="text" placeholder="T.ex. Solpaneler standard">
</label>
<label>
<span>Kategori</span>
<select id="calcBuilderCategory" class="config-builder-input"></select>
</label>
<label>
<span>Version</span>
<input id="calcBuilderVersion" class="config-builder-input" type="text" value="1.0.0">
</label>
<label>
<span>Intern notis</span>
<input id="calcBuilderNotes" class="config-builder-input" type="text" placeholder="När denna används">
</label>
</div>
<div id="calcBuilderStatus" class="config-builder-status"></div>
</div>
<div class="config-builder-panel">
<div class="config-builder-panel-head">
<h3>Start-grid (Ny Kalkyl)</h3>
</div>
<p class="config-builder-help">Ladda upp en bild (500×150 rekommenderat) och sätt en ordning för att visa den här konfiguratorn på Ny Kalkyl-startsidan. Lämna tomt om den inte ska synas.</p>
<div class="config-builder-grid">
<label>
<span>Grid-ordning</span>
<input id="calcBuilderGridOrder" class="config-builder-input" type="number" min="0" step="1" placeholder="T.ex. 10" oninput="CalcBuilder.refreshPreview()">
</label>
<label>
<span>Grid-bild</span>
<input id="calcBuilderGridImageFile" class="config-builder-input" type="file" accept="image/*" onchange="CalcBuilder.uploadGridImage(this)">
</label>
<label>
<span>Bild-URL (auto)</span>
<input id="calcBuilderGridImage" class="config-builder-input" type="text" placeholder="/uploads/calc-grid/..." oninput="CalcBuilder.refreshGridImagePreview()">
</label>
</div>
<div id="calcBuilderGridImagePreview" class="config-builder-grid-image-preview" style="margin-top:12px"></div>
</div>
<div class="config-builder-panel">
<div class="config-builder-panel-head">
<h3>Layout</h3>
</div>
<p class="config-builder-help">Välj befintlig head, var prissammanställningen ska ligga och vilken footer som används. Dessa inställningar gäller i alla lägen.</p>
<input type="hidden" id="calcBuilderMode" value="simple">
<div class="config-builder-grid">
<label>
<span>Head</span>
<select id="calcBuilderHeadPreset" class="config-builder-input" onchange="CalcBuilder.refreshPreview()">
<option value="current-default">Nuvarande head</option>
<option value="none">Ingen head</option>
</select>
</label>
<label>
<span>Sidebar sida</span>
<select id="calcBuilderSidebarPosition" class="config-builder-input" onchange="CalcBuilder.refreshPreview()">
<option value="right">Höger</option>
<option value="left">Vänster</option>
</select>
</label>
<label>
<span>Sidebar innehåll</span>
<select id="calcBuilderSidebarModule" class="config-builder-input" onchange="CalcBuilder.refreshPreview()">
<option value="price-summary">Prissammanställning</option>
<option value="none">Ingen sidebar</option>
</select>
</label>
<label>
<span>Sidebar bredd</span>
<select id="calcBuilderSidebarWidth" class="config-builder-input" onchange="CalcBuilder.refreshPreview()">
<option value="280px">Smal · 280px</option>
<option value="320px" selected>Standard · 320px</option>
<option value="360px">Bred · 360px</option>
<option value="400px">Extra bred · 400px</option>
<option value="20%">20%</option>
<option value="25%">25%</option>
<option value="30%">30%</option>
<option value="35%">35%</option>
<option value="40%">40%</option>
<option value="50%">50%</option>
</select>
</label>
<label>
<span>Footer</span>
<select id="calcBuilderFooterMode" class="config-builder-input" onchange="CalcBuilder.refreshPreview()">
<option value="none">Ingen footer</option>
<option value="default">Standard footer</option>
</select>
</label>
<label style="grid-column:1/-1;display:flex;align-items:center;gap:10px;cursor:pointer;padding:10px 14px;background:#fffbeb;border:1px dashed #fcd34d;border-radius:8px">
<input type="checkbox" id="calcBuilderSmartFilter" onchange="CalcBuilder.refreshPreview()" style="width:18px;height:18px;accent-color:#f59e0b;flex-shrink:0">
<span style="display:flex;flex-direction:column;gap:2px">
<strong style="font-size:13px;color:#92400e">Smartfilter</strong>
<span style="font-size:11px;color:#a16207;font-weight:500">Säljaren kan välja produkter + modeller och spara egna filterförval (per säljare).</span>
</span>
</label>
</div>
</div>
<div id="calcBuilderAdvancedWrap" class="config-builder-editor-grid">
<div class="config-builder-panel">
<div class="config-builder-panel-head">
<h3>Avancerade block</h3>
<button type="button" class="config-builder-btn is-primary" onclick="CalcBuilder.addBlock()">+ Lägg till block</button>
</div>
<p class="config-builder-help">Använd bara detta när kategorin behöver en egen blockdriven kalkylator. Enkel kalkylator använder produktkatalogens upplägg.</p>
<div id="calcBuilderBlocks" class="config-builder-blocks"></div>
</div>
<div class="config-builder-panel">
<div class="config-builder-panel-head">
<h3>Förhandsvisning</h3>
<button type="button" class="config-builder-btn" onclick="CalcBuilder.refreshPreview()">Uppdatera</button>
</div>
<div id="calcBuilderPreview" class="config-builder-preview"></div>
</div>
</div>
<div id="calcBuilderCodeWrap" class="config-builder-code-wrap is-hidden">
<div class="config-builder-panel config-builder-code-editor-panel">
<div class="config-builder-panel-head">
<h3>Kod (content)</h3>
<div class="config-builder-actions">
<button type="button" class="config-builder-btn" onclick="CalcBuilder.insertCodeSnippet('window')">+ Fönster-snippet</button>
<button type="button" class="config-builder-btn" onclick="CalcBuilder.insertCodeSnippet('door')">+ Dörr-snippet</button>
<button type="button" class="config-builder-btn" onclick="CalcBuilder.refreshCodePreview()">Uppdatera preview</button>
<button type="button" class="config-builder-btn is-primary" onclick="CalcBuilder.toggleCodeFullscreen()" title="Öppna i fullskärm">⛶ Fullskärm</button>
</div>
</div>
<p class="config-builder-help">Skriv eller klistra in HTML/JS som utgör content-regionen. Tillgängliga variabler: <code>{{category}}</code>, <code>{{title}}</code>, <code>{{version}}</code>. Head/sidebar/footer styrs från Layout-panelen ovan.</p>
<textarea id="calcBuilderCode" class="config-builder-code-editor" spellcheck="false" oninput="CalcBuilder.onCodeInput()" placeholder="<div class="my-config">...</div>"></textarea>
</div>
<div class="config-builder-panel config-builder-code-preview-panel">
<div class="config-builder-panel-head">
<h3>Live-preview</h3>
<button type="button" class="config-builder-btn" onclick="CalcBuilder.refreshCodePreview()">Uppdatera</button>
</div>
<div id="calcBuilderCodePreview" class="config-builder-code-preview"></div>
</div>
</div>
<!-- Fullskärm-overlay för code + live-preview -->
<div id="calcBuilderCodeFullscreen" class="cb-code-fullscreen" style="display:none">
<div class="cb-code-fullscreen-bar">
<strong>Kod (content) — fullskärm</strong>
<div class="cb-code-fullscreen-actions">
<button type="button" class="config-builder-btn" onclick="CalcBuilder.refreshCodePreview()">Uppdatera preview</button>
<button type="button" class="config-builder-btn" onclick="CalcBuilder.toggleCodeFullscreen()">✕ Stäng</button>
</div>
</div>
<div class="cb-code-fullscreen-grid">
<div class="cb-code-fullscreen-pane">
<div class="cb-code-fullscreen-pane-title">Kod (content)</div>
<textarea id="calcBuilderCodeFullEditor" class="config-builder-code-editor cb-code-fullscreen-editor" spellcheck="false" oninput="CalcBuilder.onFullscreenCodeInput()"></textarea>
</div>
<div class="cb-code-fullscreen-pane">
<div class="cb-code-fullscreen-pane-title">Live-preview</div>
<div id="calcBuilderCodeFullPreview" class="config-builder-code-preview cb-code-fullscreen-preview"></div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>