<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loadline | Estimate</title>
    <style>
        :root { --accent: #ffcc00; --dark: #121212; --card: #1e1e1e; --success: #00ff88; --danger: #ff4444; }
        * { box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; background: var(--dark); color: #fff; margin: 0; padding: 10px; user-select: none; }
        .card { background: var(--card); padding: 20px; border-radius: 28px; border: 1px solid #333; max-width: 440px; margin: auto; box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
        .promo-header { text-align: center; background: rgba(255, 204, 0, 0.1); border: 1px dashed var(--accent); padding: 10px; border-radius: 15px; margin-bottom: 15px; color: var(--accent); font-weight: 800; font-size: 18px; text-transform: uppercase; }
        label { display: block; font-size: 11px; text-transform: uppercase; color: #999; margin: 12px 0 4px 5px; font-weight: 600; }
        .label-row { display: flex; justify-content: space-between; align-items: center; }
        .discount-pill { color: var(--success); font-size: 10px; font-weight: 800; border: 1px solid var(--success); padding: 2px 6px; border-radius: 4px; display: inline-block; opacity: 0.3; }
        select, input { width: 100%; display: block; padding: 12px; background: #2a2a2a; border: 1px solid #444; border-radius: 12px; color: #fff; font-size: 16px; }
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
        .bulky-container { background: #252525; padding: 15px; border-radius: 18px; margin-top: 15px; border: 1px solid #333; }
        .bulky-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #333; }
        .bulky-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
        .bulky-info { display: flex; align-items: center; gap: 10px; font-size: 13px; }
        .bulky-price-label { font-size: 10px; color: var(--accent); font-weight: bold; margin-left: 5px; }
        .bulky-qty { width: 60px !important; padding: 5px !important; text-align: center; border-radius: 8px !important; }
        input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); }
        .result-box { background: #000; border: 2px solid var(--accent); padding: 18px; border-radius: 22px; text-align: center; margin-top: 15px; }
        .price { font-size: 48px; font-weight: 900; color: #fff; margin: 2px 0; }
        .visual-guide { background: #252525; border-radius: 15px; padding: 12px; margin-top: 15px; border-left: 4px solid var(--accent); font-size: 11px; line-height: 1.5; }
        .visual-box { width: 100%; height: 8px; background: #444; border-radius: 4px; margin-top: 10px; overflow: hidden; }
        .visual-fill { height: 100%; background: var(--accent); transition: width 0.3s ease; }
        .disclaimer { font-size: 10px; color: #666; margin-top: 20px; line-height: 1.4; text-align: justify; border-top: 1px solid #333; padding-top: 10px; }
        .btn-book { width: 100%; background: var(--accent); color: #000; border: none; padding: 18px; border-radius: 18px; font-weight: 900; font-size: 16px; text-transform: uppercase; margin-top: 15px; cursor: pointer; }
        .cc-box { border-color: #444; margin-top: 15px; }
    </style>
</head>
<body>

<div class="card">
    <div class="promo-header">Integrity Pricing Only pay for what you use</div>
    
    <div class="grid-2">
        <div>
            <label>Location</label>
            <select id="county" onchange="c()">
                <option value="sac">Sacramento</option>
                <option value="placer">Placer</option>
                <option value="eldorado">El Dorado</option>
                <option value="yolo">Yolo</option>
            </select>
        </div>
        <div>
            <label>Service Level</label>
            <select id="custType" onchange="c()">
                <option value="std">Standard Daily</option>
                <option value="repeat">Preferred Hauler (3+ rentals/month)</option>
            </select>
        </div>
    </div>

    <label>Load Category</label>
    <select id="material" onchange="c()">
        <option value="residential">Residential / Household Debris</option>
        <option value="mixed">Mixed C&D (Remodel)</option>
        <option value="soil">Clean Soil / Dirt</option>
        <option value="wood">Wood / Green Waste</option>
    </select>

    <div class="grid-2">
        <div>
            <label>Weight (Tons)</label>
            <input type="number" id="tons" value="1" min="0" step="0.1" oninput="sw('tons')">
        </div>
        <div>
            <label>Weight (Lbs)</label>
            <input type="number" id="lbs" value="2000" min="0" step="10" oninput="sw('lbs')">
        </div>
    </div>

    <div>
        <div class="label-row">
            <label>Days (5 incl. free)</label>
            <span id="earlyNotice" class="discount-pill">CREDIT FOR EARLY RETURN!</span>
        </div>
        <input type="number" id="days" value="5" min="1" max="30" oninput="c()">
    </div>

    <div class="bulky-container">
        <label style="margin-top:0; color:var(--accent)">Itemized Add-ons</label>
        <div class="bulky-row">
            <div class="bulky-info">
                <input type="checkbox" id="checkMattress" onchange="c()">
                <div><span>Mattress/Box Spring</span><br><span class="bulky-price-label">+$45.00</span></div>
            </div>
            <input type="number" id="qtyMattress" value="1" min="1" class="bulky-qty" oninput="c()">
        </div>
        <div class="bulky-row">
            <div class="bulky-info">
                <input type="checkbox" id="checkAppliance" onchange="c()">
                <div><span>Major Appliance</span><br><span class="bulky-price-label">+$35.00</span></div>
            </div>
            <input type="number" id="qtyAppliance" value="1" min="1" class="bulky-qty" oninput="c()">
        </div>
        <div class="bulky-row">
            <div class="bulky-info">
                <input type="checkbox" id="checkTV" onchange="c()">
                <div><span>E-Waste / Large TV</span><br><span class="bulky-price-label">+$25.00</span></div>
            </div>
            <input type="number" id="qtyTV" value="1" min="1" class="bulky-qty" oninput="c()">
        </div>
        <div class="bulky-row">
            <div class="bulky-info">
                <input type="checkbox" id="checkTire" onchange="c()">
                <div><span>Passenger Tire</span><br><span class="bulky-price-label">+$15.00</span></div>
            </div>
            <input type="number" id="qtyTire" value="1" min="1" class="bulky-qty" oninput="c()">
        </div>
    </div>

    <div class="visual-guide">
        <strong>📦 CAPACITY GUIDE</strong><br>
        Bin Size: 15 Cubic Yards<br>
        <span id="guideText">Included: 2,000 lbs (1 ton)</span>
        <div class="visual-box"><div id="vFill" class="visual-fill"></div></div>
    </div>

    <div class="bulky-container cc-box">
        <div class="bulky-row" style="border:none; padding:0; margin:0;">
            <div class="bulky-info">
                <input type="checkbox" id="ccSurcharge" onchange="c()">
                <div>
                    <span style="font-weight:bold;">Paying by Credit Card?</span><br>
                    <span class="bulky-price-label" id="ccFeeLabel">+ $0.00 (2.6% Processing Fee)</span>
                </div>
            </div>
        </div>
    </div>

    <div class="result-box">
        <span style="font-size:11px; color:var(--accent); font-weight:bold;">ESTIMATED TOTAL</span>
        <div class="price" id="totalDisplay">$290.00</div>
    </div>

    <button class="btn-book" onclick="alert('Booking process started!')">Book Now</button>

    <div class="disclaimer">
        *Base price includes 1 ton (2,000 lbs) and 5 days rental. Overweight billed at $.14/lb. Total capped at $1,000.00 (before processing fees).
    </div>
</div>

<script>
    function sw(type) {
        const t = document.getElementById('tons');
        const l = document.getElementById('lbs');
        if(type === 'tons') { 
            l.value = Math.round(t.value * 2000); 
        } else { 
            t.value = (l.value / 2000).toFixed(2); 
        }
        c();
    }

    function c() {
        const county = document.getElementById('county').value;
        const cust = document.getElementById('custType').value;
        const mat = document.getElementById('material').value;
        const lbs = parseFloat(document.getElementById('lbs').value) || 0;
        const days = parseInt(document.getElementById('days').value) || 0;

        // 1. Initial Base Price
        let subtotal = (cust === 'repeat') ? 255 : 290;

        // 2. Weight Overage Logic ($0.14 per lb over 2000 included)
        if (lbs > 2000) {
            subtotal += (lbs - 2000) * 0.14;
        }

        // 3. Service & Location Surcharges
        if(county === 'eldorado' || county === 'yolo') subtotal += 25;
        if(mat === 'mixed') subtotal += 35;

        // 4. Days Adjustments (5 days included)
        const earlyPill = document.getElementById('earlyNotice');
        if(days < 5) {
            subtotal -= (5 - days) * 10;
            earlyPill.style.opacity = "1";
        } else if(days > 5) {
            subtotal += (days - 5) * 15;
            earlyPill.style.opacity = "0.3";
        } else {
            earlyPill.style.opacity = "0.3";
        }

        // 5. Itemized Add-ons
        if(document.getElementById('checkMattress').checked) 
            subtotal += 45 * (parseInt(document.getElementById('qtyMattress').value) || 0);
        if(document.getElementById('checkAppliance').checked) 
            subtotal += 35 * (parseInt(document.getElementById('qtyAppliance').value) || 0);
        if(document.getElementById('checkTV').checked) 
            subtotal += 25 * (parseInt(document.getElementById('qtyTV').value) || 0);
        if(document.getElementById('checkTire').checked) 
            subtotal += 15 * (parseInt(document.getElementById('qtyTire').value) || 0);

        // 6. Hard Cap at $1,000.00
        if (subtotal > 1000) subtotal = 1000;

        // 7. 2.6% Credit Card Fee (Calculated on top of the subtotal)
        let ccAmount = 0;
        if(document.getElementById('ccSurcharge').checked) {
            ccAmount = subtotal * 0.026;
        }
        document.getElementById('ccFeeLabel').innerText = `+ $${ccAmount.toFixed(2)} (2.6% Processing Fee)`;
        
        // 8. Render Final Price
        const finalTotal = subtotal + ccAmount;
        document.getElementById('totalDisplay').innerText = `$${finalTotal.toFixed(2)}`;
        
        // 9. Update Visual Guide (Visualizing up to 8,000 lbs)
        const fill = Math.min((lbs / 8000) * 100, 100);
        document.getElementById('vFill').style.width = fill + '%';
        const guideText = (lbs > 2000) ? `+${(lbs-2000).toLocaleString()} lbs overage` : `Weight included (1 ton)`;
        document.getElementById('guideText').innerText = guideText;
    }

    window.onload = c;
</script>
</body>
</html>
