@{
    var useMetric = ViewBag.UseMetric == true;
    var unit = useMetric ? "cm" : "in";
    var divisorLabel = useMetric ? "10,000" : "144";
    var areaUnit = (string?)ViewBag.AreaUnit ?? "sq ft";
}
<div class="modal fade" id="sqFtCalculatorModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-calculator me-2"></i>Surface Area Calculator <small class="text-muted">(per item)</small></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Shape</label>
                    <select id="calcShape" class="form-select" onchange="toggleShapeInputs()">
                        <option value="rectangle">Rectangle / Square</option>
                        <option value="cylinder">Cylinder (Tube)</option>
                        <option value="circle">Circle (Flat)</option>
                    </select>
                </div>
                <div id="rectangleInputs">
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label">Length (@unit)</label>
                            <input type="number" id="rectLength" class="form-control" min="0" step="0.01" value="0" oninput="calculateSqFt()">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Width (@unit)</label>
                            <input type="number" id="rectWidth" class="form-control" min="0" step="0.01" value="0" oninput="calculateSqFt()">
                        </div>
                    </div>
                    <small class="text-muted">Formula: L &times; W &divide; @divisorLabel</small>
                </div>
                <div id="cylinderInputs" style="display:none">
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label">Diameter (@unit)</label>
                            <input type="number" id="cylDiameter" class="form-control" min="0" step="0.01" value="0" oninput="calculateSqFt()">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Height (@unit)</label>
                            <input type="number" id="cylHeight" class="form-control" min="0" step="0.01" value="0" oninput="calculateSqFt()">
                        </div>
                    </div>
                </div>
                <div id="circleInputs" style="display:none">
                    <label class="form-label">Diameter (@unit)</label>
                    <input type="number" id="circDiameter" class="form-control" min="0" step="0.01" value="0" oninput="calculateSqFt()">
                </div>
                <hr />
                <div class="alert alert-info alert-permanent mb-0"><strong>Result:</strong> <span id="calcResult">0.00</span> @areaUnit</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="useSqFtResult()">
                    <i class="bi bi-check-circle me-1"></i>Use This Value
                </button>
            </div>
        </div>
    </div>
</div>