<div class="page-content" id="page-settings">
<h1 class="page-title">Inställningar</h1>
<p class="page-subtitle">Hantera ditt konto och preferenser</p>
<div class="page-file-strip">
<a class="page-file-pill" href="/maps/view.php?file=pages/settings.php" target="_blank" rel="noreferrer">settings.php <span class="page-file-code">DEV-094B62CD</span></a>
<a class="page-file-pill" href="/maps/view.php?file=js/settings.js" target="_blank" rel="noreferrer">settings.js <span class="page-file-code">DEV-0070BF18</span></a>
<a class="page-file-pill" href="/maps/view.php?file=css/settings.css" target="_blank" rel="noreferrer">settings.css <span class="page-file-code">DEV-F06C72A9</span></a>
</div>
<!-- Settings Tabs -->
<div class="settings-tabs-row">
<button class="settings-tab active" data-settings-tab="profil" onclick="switchSettingsTab('profil')">Profil</button>
<button class="settings-tab" data-settings-tab="ai" onclick="switchSettingsTab('ai')">AI Bildgenerering</button>
<button class="settings-tab" data-settings-tab="foretag" onclick="switchSettingsTab('foretag')">Företag</button>
<button class="settings-tab" data-settings-tab="google" onclick="switchSettingsTab('google')">Google API</button>
<button class="settings-tab" data-settings-tab="notiser" onclick="switchSettingsTab('notiser')">Notifieringar</button>
<button class="settings-tab" data-settings-tab="monday" onclick="switchSettingsTab('monday')">Monday.com</button>
<button class="settings-tab" data-settings-tab="valuta" onclick="switchSettingsTab('valuta')">Valuta</button>
<button class="settings-tab" data-settings-tab="skatter" onclick="switchSettingsTab('skatter')">Skatter</button>
<button class="settings-tab" data-settings-tab="finans" onclick="switchSettingsTab('finans')">Finansiering</button>
</div>
<!-- Tab: Profil -->
<div class="settings-panel active" id="settings-profil">
<div class="dummy-form">
<h3>Profilinställningar</h3>
<div class="dummy-form-group"><label>Namn</label><input type="text" value="Admin User"></div>
<div class="dummy-form-group"><label>E-post</label><input type="email" value="admin@solargroup.se"></div>
<div class="dummy-form-group"><label>Telefon</label><input type="tel" value="070-123 45 67"></div>
<div class="dummy-form-group">
<label>Roll</label>
<select><option>Administratör</option><option>Säljare</option><option>Installatör</option><option>Projektledare</option><option>Ekonomi</option></select>
</div>
<div class="dummy-form-group"><label>Språk</label><select><option>Svenska</option><option>English</option></select></div>
<button class="dummy-btn" style="margin-top:10px">Spara ändringar</button>
</div>
<div class="dummy-form" style="margin-top:20px">
<h3>Byt lösenord</h3>
<div class="dummy-form-group"><label>Nuvarande lösenord</label><input type="password"></div>
<div class="dummy-form-group"><label>Nytt lösenord</label><input type="password"></div>
<div class="dummy-form-group"><label>Bekräfta nytt lösenord</label><input type="password"></div>
<button class="dummy-btn" style="margin-top:10px">Uppdatera lösenord</button>
</div>
</div>
<!-- Tab: AI Bildgenerering -->
<div class="settings-panel" id="settings-ai">
<div class="dummy-form">
<h3>AI Bildgenerering</h3>
<p style="font-size:13px;color:#64748b;margin-bottom:20px">Konfigurera API-nycklar och modeller för bildgenerering. Alla nycklar sparas i databasen.</p>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
<div style="background:#f8fafc;border-radius:10px;padding:20px;border:1px solid #e5e7eb">
<h4 style="font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:8px"><span style="background:#000;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700">OpenAI</span> GPT Image</h4>
<div class="dummy-form-group" style="margin-bottom:12px">
<label style="font-size:12px">API-nyckel</label>
<div style="position:relative"><input type="password" id="settOpenaiKey" placeholder="sk-proj-..." style="font-family:monospace;font-size:12px;padding-right:40px"><button type="button" onclick="const i=document.getElementById('settOpenaiKey');const t=i.type==='password'?'text':'password';i.type=t;this.textContent=t==='password'?'Visa':'Dölj'" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#6366f1;font-size:11px;cursor:pointer;font-weight:600">Visa</button></div>
</div>
<div class="dummy-form-group" style="margin-bottom:12px">
<label style="font-size:12px">Modell</label>
<select id="settOpenaiModel" style="font-size:12px">
<option value="gpt-image-1">gpt-image-1</option>
<option value="gpt-image-1-mini">gpt-image-1-mini</option>
<option value="dall-e-3">DALL-E 3</option>
</select>
</div>
<div id="openaiTestStatus" style="font-size:12px;margin-top:8px"></div>
</div>
<div style="background:#f8fafc;border-radius:10px;padding:20px;border:1px solid #e5e7eb">
<h4 style="font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:8px"><span style="background:#4285f4;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700">Google</span> Gemini</h4>
<div class="dummy-form-group" style="margin-bottom:12px">
<label style="font-size:12px">API-nyckel</label>
<div style="position:relative"><input type="password" id="settGeminiKey" placeholder="AIzaSy..." style="font-family:monospace;font-size:12px;padding-right:40px"><button type="button" onclick="const i=document.getElementById('settGeminiKey');const t=i.type==='password'?'text':'password';i.type=t;this.textContent=t==='password'?'Visa':'Dölj'" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#6366f1;font-size:11px;cursor:pointer;font-weight:600">Visa</button></div>
</div>
<div style="font-size:11px;color:#94a3b8;margin-top:4px">Modell: gemini-2.5-flash-image</div>
<div id="geminiTestStatus" style="font-size:12px;margin-top:8px"></div>
</div>
</div>
<div style="margin-top:16px;display:flex;gap:8px;align-items:center">
<label style="font-size:13px;font-weight:600;color:#334155">Standard-provider:</label>
<select id="settDefaultProvider" style="padding:6px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;background:#fff">
<option value="openai">OpenAI</option>
<option value="gemini">Google Gemini</option>
</select>
</div>
<button class="dummy-btn" style="margin-top:16px" onclick="saveAiSettings()">Spara AI-inställningar</button>
</div>
</div>
<!-- Tab: Företag -->
<div class="settings-panel" id="settings-foretag">
<div class="dummy-form">
<h3>Företagsinformation</h3>
<div class="dummy-form-group"><label>Företagsnamn</label><input type="text" id="settCompanyName" placeholder="Solar Group AB"></div>
<div class="dummy-form-group"><label>Org.nummer</label><input type="text" id="settCompanyOrgnr" placeholder="556xxx-xxxx"></div>
<div class="dummy-form-group"><label>Adress</label><input type="text" id="settCompanyAddress" placeholder="Gatan 1, 123 45 Stad"></div>
<div class="dummy-form-group"><label>Telefon</label><input type="tel" id="settCompanyPhone" placeholder="08-xxx xx xx"></div>
<div class="dummy-form-group"><label>E-post</label><input type="email" id="settCompanyEmail" placeholder="info@solargroup.se"></div>
<div class="dummy-form-group"><label>Hemsida</label><input type="url" id="settCompanyWebsite" placeholder="https://solargroup.se"></div>
<div class="dummy-form-group"><label>Sidfotstext (PDF)</label><input type="text" id="settCompanyFooter" placeholder="Offerten är giltig 30 dagar"></div>
<button class="dummy-btn" style="margin-top:10px" onclick="saveCompanySettings()">Spara företagsinfo</button>
<span id="companySettingsMsg" style="margin-left:10px;font-size:13px"></span>
</div>
<div class="dummy-form" style="margin-top:20px">
<h3>Logotyp</h3>
<p style="font-size:12px;color:#64748b;margin:0 0 12px">Används i PDF-offerter och mailutskick. PNG eller SVG med transparent bakgrund rekommenderas. Max 2 MB.</p>
<div style="display:flex;align-items:center;gap:16px">
<div id="companyLogoPreview" style="width:120px;height:80px;background:#f1f5f9;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid #e5e7eb;overflow:hidden">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
</div>
<div style="display:flex;flex-direction:column;gap:8px">
<label class="dummy-btn secondary" style="cursor:pointer;display:inline-flex;align-items:center;gap:6px">
<input type="file" id="companyLogoInput" accept="image/*" style="display:none" onchange="uploadCompanyLogo(this.files[0])">
Ladda upp logotyp
</label>
<button class="dummy-btn secondary" id="companyLogoRemoveBtn" style="display:none;color:#dc2626;border-color:#fecaca" onclick="removeCompanyLogo()">Ta bort logotyp</button>
</div>
</div>
<span id="companyLogoMsg" style="display:inline-block;margin-top:8px;font-size:13px"></span>
</div>
</div>
<!-- Tab: Google API -->
<div class="settings-panel" id="settings-google">
<div class="dummy-form">
<h3>Google OAuth & API-nycklar</h3>
<p style="font-size:13px;color:#64748b;margin-bottom:16px">Skapa OAuth-uppgifter i <a href="https://console.cloud.google.com/apis/credentials" target="_blank" style="color:#024550;font-weight:600">Google Cloud Console</a>. Aktivera Gmail API och Google Calendar API.</p>
<div style="background:#eff6ff;border:1px solid #dbeafe;border-radius:8px;padding:12px 16px;margin-bottom:16px">
<p style="font-size:12px;color:#1e40af;margin:0"><strong>Redirect URI att lägga till i Google Console:</strong></p>
<code id="googleRedirectUri" style="font-size:12px;color:#1e40af;background:#dbeafe;padding:2px 6px;border-radius:4px;display:inline-block;margin-top:4px"></code>
</div>
<div class="dummy-form-group">
<label>Google Client ID</label>
<input type="text" id="settGoogleClientId" placeholder="xxxxxx.apps.googleusercontent.com" style="font-family:monospace;font-size:12px">
</div>
<div class="dummy-form-group">
<label>Google Client Secret</label>
<input type="password" id="settGoogleClientSecret" placeholder="GOCSPX-xxxxxxxx" style="font-family:monospace;font-size:12px">
<span id="settGoogleSecretStatus" style="font-size:11px;color:#10b981;margin-left:8px"></span>
</div>
<div class="dummy-form-group">
<label>Google Maps API-nyckel</label>
<input type="text" id="settGoogleMapsKey" placeholder="AIzaSy..." style="font-family:monospace;font-size:12px">
</div>
<button class="dummy-btn" style="margin-top:10px" onclick="saveGoogleSettings()">Spara Google-inställningar</button>
<div id="googleSettingsMsg" style="margin-top:8px;font-size:13px"></div>
</div>
<div class="dummy-form" style="margin-top:20px">
<h3>Scopes som begärs vid inloggning</h3>
<p style="font-size:13px;color:#64748b;margin-bottom:12px">Dessa behörigheter begärs automatiskt när en användare loggar in med Google:</p>
<div style="display:flex;flex-direction:column;gap:8px">
<div style="display:flex;align-items:center;gap:10px;padding:8px 12px;background:#f0fdf4;border-radius:8px;border:1px solid #dcfce7">
<span style="font-size:18px">📧</span>
<div><strong style="font-size:13px">Gmail</strong><br><span style="font-size:11px;color:#64748b">Läsa, skicka och hantera e-post</span></div>
</div>
<div style="display:flex;align-items:center;gap:10px;padding:8px 12px;background:#f0fdf4;border-radius:8px;border:1px solid #dcfce7">
<span style="font-size:18px">📅</span>
<div><strong style="font-size:13px">Google Kalender</strong><br><span style="font-size:11px;color:#64748b">Visa och skapa kalenderhändelser</span></div>
</div>
<div style="display:flex;align-items:center;gap:10px;padding:8px 12px;background:#f0fdf4;border-radius:8px;border:1px solid #dcfce7">
<span style="font-size:18px">👤</span>
<div><strong style="font-size:13px">Profil & E-post</strong><br><span style="font-size:11px;color:#64748b">Grundläggande profilinfo och e-postadress</span></div>
</div>
</div>
</div>
</div>
<!-- Tab: Notifieringar -->
<div class="settings-panel" id="settings-notiser">
<div class="dummy-form">
<h3>Notifieringsinställningar</h3>
<div style="display:flex;flex-direction:column;gap:16px">
<label style="display:flex;align-items:center;gap:12px;cursor:pointer">
<input type="checkbox" checked style="width:18px;height:18px;accent-color:#024550">
<div><strong style="font-size:14px">E-postnotifieringar</strong><br><span style="font-size:12px;color:#94a3b8">Få e-post vid nya offertförfrågningar</span></div>
</label>
<label style="display:flex;align-items:center;gap:12px;cursor:pointer">
<input type="checkbox" checked style="width:18px;height:18px;accent-color:#024550">
<div><strong style="font-size:14px">Nya kunder</strong><br><span style="font-size:12px;color:#94a3b8">Notifiera vid nya kundregistreringar</span></div>
</label>
<label style="display:flex;align-items:center;gap:12px;cursor:pointer">
<input type="checkbox" style="width:18px;height:18px;accent-color:#024550">
<div><strong style="font-size:14px">Daglig sammanfattning</strong><br><span style="font-size:12px;color:#94a3b8">Daglig rapport via e-post kl 08:00</span></div>
</label>
<label style="display:flex;align-items:center;gap:12px;cursor:pointer">
<input type="checkbox" checked style="width:18px;height:18px;accent-color:#024550">
<div><strong style="font-size:14px">Projektuppdateringar</strong><br><span style="font-size:12px;color:#94a3b8">Notifiera vid statusändringar i projekt</span></div>
</label>
</div>
<button class="dummy-btn" style="margin-top:20px">Spara notifieringar</button>
</div>
</div>
<!-- Tab: Monday.com -->
<div class="settings-panel" id="settings-monday">
<div class="dummy-form">
<h3>Monday.com Integration</h3>
<p style="font-size:13px;color:#64748b;margin-bottom:16px">Koppla ihop med Monday.com för att synka projekt, affärer och kontakter.</p>
<div class="dummy-form-group">
<label>API Token</label>
<div style="display:flex;gap:8px">
<input type="password" id="settMondayToken" placeholder="eyJhbGciOiJIUzI1NiJ9..." style="font-family:monospace;font-size:12px;flex:1">
<button onclick="testMondayConnection()" style="padding:8px 16px;background:#024550;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap">Testa</button>
</div>
<div id="mondayConnectionStatus" style="margin-top:8px;font-size:12px"></div>
</div>
<button onclick="saveMondaySettings()" class="dummy-btn" style="margin-top:12px;margin-bottom:24px">Spara</button>
<div id="mondayBoardsSection" style="display:none">
<h3 style="margin-top:0">Boards</h3>
<p style="font-size:12px;color:#94a3b8;margin-bottom:12px">Alla boards i ert Monday-konto</p>
<div id="mondayBoardsList" style="display:flex;flex-direction:column;gap:6px"></div>
</div>
</div>
</div>
<!-- Tab: Valuta -->
<div class="settings-panel" id="settings-valuta">
<div class="dummy-form">
<h3>Valutainställningar</h3>
<p style="font-size:13px;color:#64748b;margin-bottom:20px">Hantera valutakurser för inköpspriser. Produkter kan ha inköpspris i olika valutor — kursen används för att räkna om till SEK.</p>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px">
<div style="background:#f8fafc;border-radius:10px;padding:20px;border:1px solid #e5e7eb">
<h4 style="font-size:15px;margin-bottom:16px;display:flex;align-items:center;gap:8px"><span style="background:#003399;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700">EUR</span> Euro</h4>
<div class="dummy-form-group" style="margin-bottom:12px">
<label style="font-size:12px">Kurs (1 EUR = ? SEK)</label>
<input type="number" step="0.0001" id="settCurrencyEUR" placeholder="11.49" style="font-size:14px;font-weight:600">
</div>
<div id="eurRateInfo" style="font-size:11px;color:#94a3b8"></div>
</div>
<div style="background:#f8fafc;border-radius:10px;padding:20px;border:1px solid #e5e7eb">
<h4 style="font-size:15px;margin-bottom:16px;display:flex;align-items:center;gap:8px"><span style="background:#00247d;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700">USD</span> US Dollar</h4>
<div class="dummy-form-group" style="margin-bottom:12px">
<label style="font-size:12px">Kurs (1 USD = ? SEK)</label>
<input type="number" step="0.0001" id="settCurrencyUSD" placeholder="10.35" style="font-size:14px;font-weight:600">
</div>
<div id="usdRateInfo" style="font-size:11px;color:#94a3b8"></div>
</div>
<div style="background:#f8fafc;border-radius:10px;padding:20px;border:1px solid #e5e7eb">
<h4 style="font-size:15px;margin-bottom:16px;display:flex;align-items:center;gap:8px"><span style="background:#c60c30;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700">DKK</span> Dansk Krona</h4>
<div class="dummy-form-group" style="margin-bottom:12px">
<label style="font-size:12px">Kurs (1 DKK = ? SEK)</label>
<input type="number" step="0.0001" id="settCurrencyDKK" placeholder="1.54" style="font-size:14px;font-weight:600">
</div>
</div>
<div style="background:#f8fafc;border-radius:10px;padding:20px;border:1px solid #e5e7eb">
<h4 style="font-size:15px;margin-bottom:16px;display:flex;align-items:center;gap:8px"><span style="background:#ba0c2f;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700">NOK</span> Norsk Krona</h4>
<div class="dummy-form-group" style="margin-bottom:12px">
<label style="font-size:12px">Kurs (1 NOK = ? SEK)</label>
<input type="number" step="0.0001" id="settCurrencyNOK" placeholder="0.98" style="font-size:14px;font-weight:600">
</div>
</div>
</div>
<div style="display:flex;gap:12px;align-items:center">
<button class="dummy-btn" onclick="saveCurrencySettings()">Spara valutakurser</button>
<button onclick="fetchLiveRates()" style="padding:8px 16px;background:#f0f9ff;color:#0284c7;border:1px solid #bae6fd;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit">Hämta aktuella kurser</button>
<div id="currencySaveStatus" style="font-size:12px"></div>
</div>
<div style="margin-top:24px;padding:16px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px">
<h4 style="font-size:13px;font-weight:700;margin:0 0 8px;color:#059669">Produktvaluta</h4>
<p style="font-size:12px;color:#64748b;margin:0;line-height:1.6">
I produktredigeraren kan du ange inköpsvaluta per produkt. Systemet räknar automatiskt om till SEK med ovanstående kurser vid marginalberäkning.
<br>Standard: <strong>SEK</strong> — om ingen valuta anges räknas priset i SEK.
</p>
</div>
</div>
<!-- Tab: Skatter -->
<div class="settings-panel" id="settings-skatter">
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<h3 style="font-size:16px;font-weight:700;margin:0 0 16px;color:#1a1a1a">Skatteinställningar</h3>
<p style="font-size:13px;color:#64748b;margin:0 0 20px">Ändra procentsatser centralt — alla kalkyler läser härifrån.</p>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
<div>
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:4px">Grön teknik GT20 (solceller)</label>
<div style="display:flex;align-items:center;gap:6px"><input type="number" id="taxGt20" value="20" style="width:80px;padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit"><span style="font-size:14px;color:#64748b">%</span></div>
<div style="font-size:11px;color:#94a3b8;margin-top:4px">Material + arbete</div>
</div>
<div>
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:4px">Grön teknik GT50 (batteri, laddbox)</label>
<div style="display:flex;align-items:center;gap:6px"><input type="number" id="taxGt50" value="50" style="width:80px;padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit"><span style="font-size:14px;color:#64748b">%</span></div>
<div style="font-size:11px;color:#94a3b8;margin-top:4px">Material + arbete</div>
</div>
<div>
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:4px">ROT-avdrag</label>
<div style="display:flex;align-items:center;gap:6px"><input type="number" id="taxRot" value="30" style="width:80px;padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit"><span style="font-size:14px;color:#64748b">%</span></div>
<div style="font-size:11px;color:#94a3b8;margin-top:4px">Enbart arbete</div>
</div>
<div>
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:4px">ROT max per person/år</label>
<div style="display:flex;align-items:center;gap:6px"><input type="number" id="taxRotMax" value="50000" style="width:100px;padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit"><span style="font-size:14px;color:#64748b">kr</span></div>
</div>
<div>
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:4px">Moms</label>
<div style="display:flex;align-items:center;gap:6px"><input type="number" id="taxMoms" value="25" style="width:80px;padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit"><span style="font-size:14px;color:#64748b">%</span></div>
</div>
</div>
<div style="margin-top:20px;padding:14px;background:#fef3c7;border:1px solid #fcd34d;border-radius:8px;font-size:12px;color:#92400e;line-height:1.6">
<strong>GT20</strong> = solceller (material+arbete)<br>
<strong>GT50</strong> = batteri/laddbox (material+arbete)<br>
<strong>ROT</strong> = enbart arbete<br>
Kan ej kombineras på samma installation
</div>
<button onclick="saveTaxSettings()" style="margin-top:16px;background:#024550;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit">Spara skatteinställningar</button>
<span id="taxSaveStatus" style="font-size:12px;margin-left:12px"></span>
</div>
</div>
</div>
</div>