backups/2026-03-28-pre-sidebar-refactor/kalkyl-ny.js

// kalkyl-ny.js
// Visar: Ny Kalkyl-sidan med kundinformation + prospektbilder + kategorigrid

function openNyKalkyl(kundData) {
    var _lbl = document.getElementById('cfgFileLabel'); if(_lbl) _lbl.textContent = 'kalkyl-ny.js';

    // Navigera till konfigurator-sidan (utan att trigga showKalkylList)
    currentPage = 'konfigurator';
    document.querySelectorAll('.nav-item').forEach(function(n){n.classList.remove('active');});
    document.querySelectorAll('.nav-item[data-page="konfigurator"]').forEach(function(n){n.classList.add('active');});
    document.querySelectorAll('.page-content').forEach(function(p){p.classList.remove('active');});
    var el = document.getElementById('page-konfigurator'); if(el) el.classList.add('active');

    // Dölj listan, visa config
    document.getElementById('kalkylListView').style.display = 'none';
    document.getElementById('kalkylConfigView').style.display = 'block';

    // Dölj ALLA konfiguratorer
    ['solarConfigView','genericConfigView','fonsterConfigView','batteriConfigView','laddboxConfigView','taktvatConfigView','varmepumpConfigView','takConfigView','isoleringConfigView'].forEach(function(v){
        var el = document.getElementById(v); if(el) el.style.display = 'none';
    });

    // Dölj affärvyn
    var afv = document.getElementById('affarView'); if(afv) afv.style.display = 'none';

    // Rensa gammal produktvy
    var pqv = document.getElementById('productQuoteView'); if(pqv) pqv.remove();

    // Visa kategori-select och rensa den
    var cs = document.getElementById('categorySelect');
    if(cs) { cs.parentElement.style.display = ''; cs.selectedIndex = 0; }

    // Sätt kunddata
    if(kundData) {
        pendingKalkylCustomer = kundData;
    } else {
        pendingKalkylCustomer = null;
    }

    // Visa kundinformation-header (ALLTID)
    if(typeof populateKalkylFromCustomer === 'function') populateKalkylFromCustomer();

    // Visa prospektbilder
    var photosSection = document.getElementById('kalkylPhotosSection'); if(photosSection) photosSection.style.display = '';

    // Visa kategori-griden (vänta på catalogProducts om det behövs)
    var catGrid = document.getElementById('cfgCategoryGrid');
    if(catGrid) {
        catGrid.style.display = 'grid';
        if(typeof catalogProducts !== 'undefined' && catalogProducts.length > 0) {
            renderNyKalkylGrid(catGrid);
        } else {
            catGrid.innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:40px;color:#94a3b8">Laddar kategorier...</div>';
            setTimeout(function(){ renderNyKalkylGrid(catGrid); }, 1000);
        }
    }

}

function renderNyKalkylGrid(el) {
    // Hämta kategorier med bilder från API
    fetch('/api/categories.php?all=1').then(function(r){return r.json();}).then(function(d){
        var cats = (d.success && d.categories) ? d.categories.filter(function(c){return !parseInt(c.is_tillval);}) : [];
        if(!cats.length) {
            cats = [
                {id:'solceller', label:'Solpaneler', description:'Solpaneler och solcellsanläggningar'},
                {id:'batteri', label:'Batteri', description:'Batterilösningar för energilagring'},
                {id:'laddbox', label:'Laddbox', description:'Elbilsladdning'},
                {id:'varmepump', label:'Värmepump', description:'Luft/luft och luft/vatten värmepumpar'},
                {id:'taktvatt', label:'Taktvätt', description:'Högtryckstvätt och mossbehandling'},
                {id:'tak', label:'Tak', description:'Takbyten'},
                {id:'fonster', label:'Fönster', description:'Energifönster'},
                {id:'dorrar', label:'Dörrar', description:'Ytterdörrar och balkongdörrar'},
                {id:'isolering', label:'Isolering', description:'Tilläggsisolering'}
            ];
        }
        var catCounts = {};
        if(typeof catalogProducts !== 'undefined') {
            catalogProducts.forEach(function(p) { catCounts[p.cat] = (catCounts[p.cat]||0) + 1; });
        }
        _renderCatCards(el, cats, catCounts);
    }).catch(function(){ _renderCatCards(el, [], {}); });
}

function _renderCatCards(el, cats, catCounts) {

    el.innerHTML = cats.map(function(c) {
        var count = catCounts[c.id] || 0;
        var img = c.image ? '<img src="'+c.image+'" style="width:100%;height:120px;object-fit:cover;border-radius:8px 8px 0 0">'
            : '<div style="height:80px;background:linear-gradient(135deg,#024550,#059669);border-radius:8px 8px 0 0;display:flex;align-items:center;justify-content:center"><span style="font-size:28px;opacity:.5">☀</span></div>';
        return '<div onclick="document.getElementById(\'categorySelect\').value=\''+c.id+'\';changeCategory()" style="border:1.5px solid #e5e7eb;border-radius:10px;cursor:pointer;overflow:hidden;transition:all .15s;background:#fff" onmouseover="this.style.borderColor=\'#024550\';this.style.transform=\'translateY(-2px)\';this.style.boxShadow=\'0 4px 12px rgba(0,0,0,.1)\'" onmouseout="this.style.borderColor=\'#e5e7eb\';this.style.transform=\'none\';this.style.boxShadow=\'none\'">'
            +img
            +'<div style="padding:12px"><div style="display:flex;justify-content:space-between;align-items:center"><div style="font-weight:700;font-size:14px;color:#1a1a1a">'+c.label+'</div>'+(count?'<span style="font-size:10px;background:#e0f2fe;color:#0284c7;padding:2px 8px;border-radius:10px;font-weight:600">'+count+'</span>':'')+'</div>'
            +'<div style="font-size:11px;color:#64748b;margin-top:2px">'+(c.description||c.desc||'')+'</div></div></div>';
    }).join('');
}