@extends('layouts.app')
@section('page-title', 'Pricing Tool')

@push('page-css')
<style>
/* Pricing Tool */
.pricing-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 20px;
}

.pricing-page h1 {
    font-size: 1.6rem;
    margin: 0 0 6px 0;
    color: #333;
}

.pricing-page .page-desc {
    color: #666;
    font-size: 0.92rem;
    margin: 0 0 16px 0;
}

.pricing-page .top-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    max-width: 300px;
}

.pricing-page .btn {
    padding: 10px 18px;
    border: 1px solid #d0d0d0;
    border-radius: var(--brand-border-radius, 6px);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    background: #fff;
    color: #333;
    transition: background 0.2s, transform 0.15s;
}

.pricing-page .btn:hover {
    background: #f5f5f5;
    transform: translateY(-1px);
}

.pricing-page .btn.primary {
    background: var(--brand-primary, #4CAF50);
    color: #fff;
    border-color: var(--brand-primary, #4CAF50);
}

.pricing-page .btn.primary:hover {
    background: var(--brand-primary-dark, #388E3C);
}

/* Cards */
.pricing-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--brand-border-radius, 8px);
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.pricing-card h2 {
    font-size: 0.95rem;
    margin: 0 0 14px 0;
    color: var(--brand-primary, #4CAF50);
}

.pricing-card h3 {
    font-size: 0.85rem;
    margin: 12px 0 6px;
    color: #888;
}

.pricing-card label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: #444;
}

.pricing-card input,
.pricing-card select {
    width: 85%;
    padding: 10px 12px;
    border: 1px solid #d0d0d0;
    border-radius: var(--brand-border-radius, 6px);
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
    color: #333;
    box-sizing: border-box;
}

.pricing-card input:focus,
.pricing-card select:focus {
    outline: none;
    border-color: var(--brand-primary, #4CAF50);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #4CAF50) 15%, transparent);
}

.pricing-card input[type="number"] { appearance: textfield; }

.pricing-page .row {
    display: flex;
    gap: 8px;
}

.pricing-page .row > * { flex: 1; }

.pricing-page .muted { color: #888; }
.pricing-page .small { font-size: 0.78rem; }

.pricing-page .warning {
    background: color-mix(in srgb, var(--brand-primary, #4CAF50) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--brand-primary, #4CAF50) 40%, transparent);
    padding: 10px;
    border-radius: var(--brand-border-radius, 8px);
    font-size: 0.78rem;
    color: #555;
}

/* Grid */
.pricing-grid {
    display: grid;
    gap: 16px;
}

@media (min-width: 768px) {
    .pricing-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pricing-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Summary Table */
.pricing-summary {
    margin-top: 16px;
}

.pricing-card table {
    width: 100%;
    border-collapse: collapse;
}

.pricing-card th,
.pricing-card td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    text-align: left;
    font-size: 0.9rem;
}

.pricing-card th {
    background: color-mix(in srgb, var(--brand-primary, #4CAF50) 8%, transparent);
    font-weight: 600;
    color: #444;
}

.pricing-card .right { text-align: right; }
.pricing-card .totals { font-size: 1.1rem; }

.pricing-card .badge {
    background: #10b981;
    color: white;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ===== Dark Mode ===== */
body.dark-mode .pricing-page h1 { color: #f0f0f0; }
body.dark-mode .pricing-page .page-desc { color: #aaa; }

body.dark-mode .pricing-page .btn {
    background: #2d2d2d;
    border-color: #505050;
    color: #e0e0e0;
}

body.dark-mode .pricing-page .btn:hover { background: #3a3a3a; }

body.dark-mode .pricing-page .btn.primary {
    background: var(--brand-primary, #4CAF50);
    border-color: var(--brand-primary, #4CAF50);
    color: #fff;
}

body.dark-mode .pricing-card {
    background: #2d2d2d;
    border-color: #404040;
}

body.dark-mode .pricing-card h2 { color: var(--brand-primary, #4CAF50); }
body.dark-mode .pricing-card h3 { color: #888; }
body.dark-mode .pricing-card label { color: #ccc; }

body.dark-mode .pricing-card input,
body.dark-mode .pricing-card select {
    background: #1e1e1e;
    border-color: #505050;
    color: #e0e0e0;
}

body.dark-mode .pricing-card th {
    background: rgba(255,255,255,0.05);
    color: #ccc;
}

body.dark-mode .pricing-card td { border-bottom-color: #404040; }
body.dark-mode .pricing-card th { border-bottom-color: #404040; }
body.dark-mode .pricing-page .muted { color: #888; }

body.dark-mode .pricing-page .warning {
    background: rgba(255,255,255,0.04);
    border-color: #505050;
    color: #aaa;
}

/* ===== Theme overrides ===== */
body.theme-forest .pricing-card { background: #243020; border-color: #3d5235; }
body.theme-forest .pricing-card label { color: #b8d4a8; }
body.theme-forest .pricing-card input,
body.theme-forest .pricing-card select { background: #1a2418; border-color: #3d5235; color: #b8d4a8; }
body.theme-forest .pricing-card th { background: rgba(255,255,255,0.04); color: #b8d4a8; }
body.theme-forest .pricing-card td,
body.theme-forest .pricing-card th { border-bottom-color: #3d5235; }
body.theme-forest .pricing-page h1 { color: #b8d4a8; }
body.theme-forest .pricing-page .page-desc { color: #8aaa78; }
body.theme-forest .pricing-page .btn { background: #2a3825; border-color: #3d5235; color: #b8d4a8; }
body.theme-forest .pricing-page .warning { background: rgba(255,255,255,0.04); border-color: #3d5235; color: #8aaa78; }
body.theme-forest .pricing-card h3 { color: #8aaa78; }

body.theme-ocean .pricing-card { background: #1c2636; border-color: #2e4460; }
body.theme-ocean .pricing-card label { color: #a0c4e8; }
body.theme-ocean .pricing-card input,
body.theme-ocean .pricing-card select { background: #141e2e; border-color: #2e4460; color: #a0c4e8; }
body.theme-ocean .pricing-card th { background: rgba(255,255,255,0.04); color: #a0c4e8; }
body.theme-ocean .pricing-card td,
body.theme-ocean .pricing-card th { border-bottom-color: #2e4460; }
body.theme-ocean .pricing-page h1 { color: #a0c4e8; }
body.theme-ocean .pricing-page .page-desc { color: #7a9ab8; }
body.theme-ocean .pricing-page .btn { background: #1f2d40; border-color: #2e4460; color: #a0c4e8; }
body.theme-ocean .pricing-page .warning { background: rgba(255,255,255,0.04); border-color: #2e4460; color: #7a9ab8; }
body.theme-ocean .pricing-card h3 { color: #7a9ab8; }

body.theme-slate .pricing-card { background: #faf7f2; border-color: #c8bfb0; }
body.theme-slate .pricing-card label { color: #504840; }
body.theme-slate .pricing-card input,
body.theme-slate .pricing-card select { background: #f5f0e8; border-color: #c8bfb0; color: #504840; }
body.theme-slate .pricing-card th { background: rgba(0,0,0,0.03); color: #504840; }
body.theme-slate .pricing-card td,
body.theme-slate .pricing-card th { border-bottom-color: #c8bfb0; }
body.theme-slate .pricing-page h1 { color: #504840; }
body.theme-slate .pricing-page .page-desc { color: #8b7d6b; }
body.theme-slate .pricing-page .btn { background: #ebe5da; border-color: #c8bfb0; color: #504840; }
body.theme-slate .pricing-page .warning { background: rgba(0,0,0,0.03); border-color: #c8bfb0; color: #8b7d6b; }
body.theme-slate .pricing-card h3 { color: #8b7d6b; }

body.theme-sunset .pricing-card { background: #fff8f5; border-color: #e0bfb0; }
body.theme-sunset .pricing-card label { color: #6b3f35; }
body.theme-sunset .pricing-card input,
body.theme-sunset .pricing-card select { background: #fdf5f0; border-color: #e0bfb0; color: #6b3f35; }
body.theme-sunset .pricing-card th { background: rgba(0,0,0,0.03); color: #6b3f35; }
body.theme-sunset .pricing-card td,
body.theme-sunset .pricing-card th { border-bottom-color: #e0bfb0; }
body.theme-sunset .pricing-page h1 { color: #6b3f35; }
body.theme-sunset .pricing-page .page-desc { color: #a06858; }
body.theme-sunset .pricing-page .btn { background: #faeee8; border-color: #e0bfb0; color: #6b3f35; }
body.theme-sunset .pricing-page .warning { background: rgba(0,0,0,0.03); border-color: #e0bfb0; color: #a06858; }
body.theme-sunset .pricing-card h3 { color: #a06858; }

/* Print */
@media print {
    body { background: #fff; }
    .no-print { display: none !important; }
    .pricing-card { border: none; box-shadow: none; padding: 0; }
    .pricing-page { max-width: 800px; }
    .pricing-grid, .pricing-grid-2, .pricing-grid-3 { display: block; }
    .pricing-page h1 { font-size: 20px; }
}
</style>
@endpush

@section('content')
<div class="pricing-page">
    <h1>Pricing Tool</h1>
    <p class="page-desc">Price guide based on tiered &pound;/m&sup2; with add&#8209;ons. 50% deposit, VAT selectable.</p>

    <div class="no-print top-actions">
        <button class="btn" id="resetBtn">Reset</button>
        <button class="btn primary" id="printBtn">Export PDF</button>
    </div>

    <div class="pricing-grid pricing-grid-3">
        <div class="pricing-card">
            <h2>1) Project</h2>
            <label>Customer Name</label>
            <input id="customer" placeholder="e.g. John Doe"/>
            <div class="row" style="margin-top:8px">
                <div>
                    <label>Deck Length (m)</label>
                    <input type="number" step="0.01" id="len" placeholder="e.g. 6.8" />
                </div>
                <div>
                    <label>Deck Width (m)</label>
                    <input type="number" step="0.01" id="wid" placeholder="e.g. 3.2" />
                </div>
            </div>
            <div class="row" style="margin-top:8px">
                <div>
                    <label>Total Area m&sup2; (auto)</label>
                    <input id="area" readonly />
                </div>
                <div>
                    <label>Contingency / Wastage %</label>
                    <input type="number" id="contingency" value="7" />
                </div>
            </div>
            <div class="row" style="margin-top:8px">
                <div>
                    <label>Material</label>
                    <select id="material">
                        <option value="composite">Composite</option>
                        <option value="timber">Timber</option>
                    </select>
                </div>
                <div>
                    <label>VAT</label>
                    <select id="vatMode">
                        <option value="inc">Prices include VAT</option>
                        <option value="ex">Add VAT at 20%</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="pricing-card">
            <h2>2) Add&#8209;ons</h2>
            <div class="row"><div>
                    <label>Steps (qty)</label>
                    <input type="number" id="stepsQty" value="0" min="0" />
                </div><div>
                    <label>Steps Rate (&pound;)</label>
                    <input type="number" id="stepsRate" value="300" step="1" />
                </div></div>

            <div class="row" style="margin-top:8px"><div>
                    <label>Balustrade (m)</label>
                    <input type="number" id="balM" value="0" min="0" step="0.1" />
                </div><div>
                    <label>Balustrade Rate &pound;/m</label>
                    <input type="number" id="balRate" value="200" step="1" />
                </div></div>

            <div class="row" style="margin-top:8px"><div>
                    <label>Fascia (m)</label>
                    <input type="number" id="fasciaM" value="0" min="0" step="0.1" />
                </div><div>
                    <label>Fascia Rate &pound;/m</label>
                    <input type="number" id="fasciaRate" value="35" step="1" />
                </div></div>

            <div class="row" style="margin-top:8px"><div>
                    <label>Posts (qty)</label>
                    <input type="number" id="postsQty" value="0" min="0" />
                </div><div>
                    <label>Posts Rate (&pound;)</label>
                    <input type="number" id="postsRate" value="70" step="1" />
                </div></div>

            <div class="row" style="margin-top:8px"><div>
                    <label>Demolition Area (m&sup2;)</label>
                    <input type="number" id="demoArea" value="0" min="0" step="0.1" />
                </div><div>
                    <label>Demolition Rate &pound;/m&sup2;</label>
                    <input type="number" id="demoRate" value="40" step="1" />
                </div></div>

            <div style="margin-top:8px">
                <label>Waste / Skip (flat &pound;)</label>
                <input type="number" id="skipCost" value="0" step="1" />
            </div>
        </div>

        <div class="pricing-card">
            <h2>3) Settings</h2>
            <div class="warning">Tiered install rates (editable). The tool auto&#8209;selects a tier by area after contingency.</div>
            <h3 class="muted">Composite &pound;/m&sup2;</h3>
            <div class="row"><div>
                    <label>&le; 20m&sup2;</label>
                    <input type="number" id="cSmall" value="150"/>
                </div><div>
                    <label>20&ndash;50m&sup2;</label>
                    <input type="number" id="cMed" value="100"/>
                </div><div>
                    <label>&ge; 50m&sup2;</label>
                    <input type="number" id="cLarge" value="100"/>
                </div></div>
            <h3 class="muted">Timber &pound;/m&sup2;</h3>
            <div class="row"><div>
                    <label>&le; 20m&sup2;</label>
                    <input type="number" id="tSmall" value="140"/>
                </div><div>
                    <label>20&ndash;50m&sup2;</label>
                    <input type="number" id="tMed" value="90"/>
                </div><div>
                    <label>&ge; 50m&sup2;</label>
                    <input type="number" id="tLarge" value="90"/>
                </div></div>
            <div class="row" style="margin-top:10px">
                <div>
                    <label>Deposit %</label>
                    <input type="number" id="depositPct" value="50"/>
                </div>
                <div>
                    <label>Notes</label>
                    <input id="notes" placeholder="Access, ground conditions, etc."/>
                </div>
            </div>
        </div>
    </div>

    <div class="pricing-card pricing-summary">
        <h2>Summary</h2>
        <table>
            <thead>
            <tr>
                <th>Description</th>
                <th class="right">Qty / m</th>
                <th class="right">Rate</th>
                <th class="right">Line Total</th>
            </tr>
            </thead>
            <tbody id="lines"></tbody>
            <tfoot>
            <tr>
                <th colspan="3" class="right">Subtotal</th>
                <th class="right" id="subTotal">&pound;0.00</th>
            </tr>
            <tr id="vatRow">
                <th colspan="3" class="right">VAT 20%</th>
                <th class="right" id="vatTotal">&pound;0.00</th>
            </tr>
            <tr class="totals">
                <th colspan="3" class="right">Grand Total</th>
                <th class="right" id="grandTotal">&pound;0.00</th>
            </tr>
            <tr>
                <th colspan="3" class="right">Deposit (<span id="depositLabel">50</span>%)</th>
                <th class="right" id="depositDue">&pound;0.00</th>
            </tr>
            </tfoot>
        </table>
        <div class="small muted" style="margin-top:8px">Assumes standard access, level ground and no hidden obstacles. Extras may apply for complex installs. Prices are a guide; final quote may vary after site visit.</div>
    </div>
</div>
@endsection

@push('page-scripts')
<script>
    const el = id => document.getElementById(id);
    const money = n => `\u00A3${(n||0).toFixed(2)}`;

    const inputs = [
        'customer','len','wid','contingency','material','vatMode',
        'stepsQty','stepsRate','balM','balRate','fasciaM','fasciaRate','postsQty','postsRate','demoArea','demoRate','skipCost',
        'cSmall','cMed','cLarge','tSmall','tMed','tLarge','depositPct','notes'
    ];

    inputs.forEach(id=> el(id).addEventListener('input', recalc));
    el('printBtn').addEventListener('click', ()=> window.print());
    el('resetBtn').addEventListener('click', ()=>{ inputs.forEach(id=>{ const node=el(id); if(node.tagName==='SELECT'){node.selectedIndex=0;} else {node.value=node.defaultValue ?? '';} }); recalc(); });

    function tierRate(material, area){
        const c={ small:+el('cSmall').value, med:+el('cMed').value, large:+el('cLarge').value };
        const t={ small:+el('tSmall').value, med:+el('tMed').value, large:+el('tLarge').value };
        const r = (material==='composite')? c : t;
        if(area <= 20) return { label:'Small', rate:r.small };
        if(area < 50)  return { label:'Medium', rate:r.med };
        return { label:'Large', rate:r.large };
    }

    function recalc(){
        const L = parseFloat(el('len').value)||0;
        const W = parseFloat(el('wid').value)||0;
        const baseArea = +(L*W).toFixed(2);
        el('area').value = baseArea.toString();
        const contingencyPct = Math.max(0, parseFloat(el('contingency').value)||0);
        const areaWithCont = +(baseArea * (1+ contingencyPct/100)).toFixed(2);

        const material = el('material').value;
        const tier = tierRate(material, areaWithCont);
        const installLine = { desc:`${material==='composite'?'Composite':'Timber'} decking \u2013 ${tier.label} tier`, qty: areaWithCont, rate: tier.rate, total: areaWithCont * tier.rate };

        const lines = [];
        if(areaWithCont>0) lines.push(installLine);

        const stepsQty = +el('stepsQty').value || 0; const stepsRate = +el('stepsRate').value || 0; if(stepsQty>0) lines.push({desc:'Steps', qty:stepsQty, rate:stepsRate, total: stepsQty*stepsRate});
        const balM = +el('balM').value || 0; const balRate = +el('balRate').value || 0; if(balM>0) lines.push({desc:'Balustrade / railings (m)', qty:balM, rate:balRate, total: balM*balRate});
        const fasciaM = +el('fasciaM').value || 0; const fasciaRate = +el('fasciaRate').value || 0; if(fasciaM>0) lines.push({desc:'Fascia boards (m)', qty:fasciaM, rate:fasciaRate, total: fasciaM*fasciaRate});
        const postsQty = +el('postsQty').value || 0; const postsRate = +el('postsRate').value || 0; if(postsQty>0) lines.push({desc:'Posts & concrete', qty:postsQty, rate:postsRate, total: postsQty*postsRate});
        const demoArea = +el('demoArea').value || 0; const demoRate = +el('demoRate').value || 0; if(demoArea>0) lines.push({desc:'Demolition / removal (m\u00B2)', qty:demoArea, rate:demoRate, total: demoArea*demoRate});
        const skipCost = +el('skipCost').value || 0; if(skipCost>0) lines.push({desc:'Waste / skip (flat)', qty:1, rate:skipCost, total: skipCost});

        const tbody = el('lines');
        tbody.innerHTML = lines.map(l=>`<tr><td>${l.desc}</td><td class="right">${l.qty}</td><td class="right">${money(l.rate)}</td><td class="right">${money(l.total)}</td></tr>`).join('');

        const sub = lines.reduce((s,l)=> s+l.total, 0);
        const vatMode = el('vatMode').value;
        let vat = 0, grand = sub;
        if(vatMode==='ex'){ vat = sub*0.20; grand = sub + vat; }

        el('subTotal').textContent = money(sub);
        el('vatRow').style.display = (vatMode==='ex')? '' : 'none';
        el('vatTotal').textContent = money(vat);
        el('grandTotal').textContent = money(grand);

        const depPct = Math.max(0, +el('depositPct').value||0);
        el('depositLabel').textContent = depPct.toString();
        el('depositDue').textContent = money(grand * depPct/100);
    }

    recalc();
</script>
@endpush