{% extends "otree/Page.html" %}

{% block title %}
Newsvendor Model Explained
{% endblock %}

{% block styles %}
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
    body { font-family: 'Inter', Arial, sans-serif; background-color: #f1f5f9; }
    h1 { font-size: 22px; font-weight: 700; color: #0f172a; margin-bottom: 16px; }
    h2 { font-size: 16px; font-weight: 600; color: #1e293b; margin-top: 24px; margin-bottom: 8px; }
    p  { font-size: 15px; line-height: 1.65; color: #374151; }
    ul, ol { padding-left: 22px; }
    ul li, ol li { font-size: 15px; line-height: 1.65; color: #374151; margin-bottom: 8px; }
    .formula {
        background: #eff6ff;
        padding: 12px 16px;
        border-left: 4px solid #2563eb;
        border-radius: 0 6px 6px 0;
        margin: 12px 0;
        font-size: 15px;
        color: #1e40af;
        font-weight: 500;
    }
    .example {
        background: #f8fafc;
        padding: 14px 18px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        margin: 10px 0;
    }
    .next-button-container { text-align: center; margin-top: 30px; }
    .disabled-button {
        background-color: #e2e8f0;
        color: #94a3b8;
        border: none;
        padding: 12px 40px;
        cursor: not-allowed;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 500;
        font-family: 'Inter', Arial, sans-serif;
    }
    .enabled-button {
        background-color: #2563eb;
        color: #fff;
        border: none;
        padding: 12px 40px;
        cursor: pointer;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 500;
        font-family: 'Inter', Arial, sans-serif;
        transition: background-color 0.15s;
    }
    .enabled-button:hover { background-color: #1d4ed8; }
    .button-message { font-size: 13px; color: #94a3b8; margin-top: 8px; }
</style>
{% endblock %}

{% block content %}
<h1>Understanding the Newsvendor Decision</h1>

<p>
    The Newsvendor model helps you pick a one-time order quantity when demand for the product is uncertain and you cannot reorder within the selling period.
    You trade off two risks: ordering too few (lost sales) versus ordering too many (leftover units).
    The goal is to choose the quantity that maximizes expected profit for this single period.
</p>

<h2>Key inputs (what you'll be given)</h2>
<ul>
    <li>Selling price (p): revenue per unit sold.</li>
    <li>Purchase cost (c): what you pay per unit ordered.</li>
    <li>Salvage value (v): value you recover for each unsold unit (use v = 0 if there's no salvage).</li>
    <li>Demand distribution: how demand is likely to vary (e.g., mean and spread, or a listed table of probabilities).</li>
</ul>

<h2>What you decide</h2>
<p>Order quantity Q for this single selling period.</p>

<h2>The core trade-off, in one line</h2>
<ul>
    <li>Underage cost (Cu): the "cost" of being one unit short = p &minus; c.</li>
    <li>Overage cost (Co): the "cost" of having one extra unit = c &minus; v.</li>
</ul>

<div class="formula">
    Critical fractile = Cu / (Cu + Co) = (p &minus; c) / [(p &minus; c) + (c &minus; v)]
</div>

<p>
    The optimal order quantity Q* is the demand quantile at this probability. Intuitively, you order enough so that demand is below your order quantity with probability equal to the critical fractile.
</p>

<h2>How to find Q*</h2>
<ul>
    <li>If demand is Normal with mean &mu; and standard deviation &sigma;: find the z such that &Phi;(z) = critical fractile, then Q* = &mu; + z&middot;&sigma;.</li>
    <li>If demand is given as a discrete table: pick the smallest Q where the cumulative probability &ge; critical fractile.</li>
</ul>

<h2>Profit for one round</h2>
<p>Where D is realized demand:</p>
<ul>
    <li><b>Sales</b> = min(Q, D)</li>
    <li><b>Leftovers</b> = max(Q &minus; D, 0)</li>
</ul>
<div class="formula">
    Profit = (p &times; Sales) &minus; (c &times; Q) + (v &times; Leftovers)
</div>
<p>
    You only earn revenue on units sold, you pay for all units ordered, and you recover v for each leftover unit.
</p>

<h2>Quick example</h2>
<div class="example">
    <p>
        Suppose p = 10, c = 6, v = 2. Then Cu = 10 &minus; 6 = 4 and Co = 6 &minus; 2 = 4, so the critical fractile is 4 / (4 + 4) = 0.5.
        If demand is symmetric (e.g., Normal), Q* is the median of demand. If &mu; = 100 and &sigma; = 20 (Normal), the 50th percentile is &mu;, so Q* &asymp; 100.
    </p>
    <p>
        If demand were discrete with cumulative probabilities crossing 0.5 at Q = 100, you'd choose Q = 100.
    </p>
</div>

<h2>Common pitfalls</h2>
<ul>
    <li>Ignoring salvage value (v). Even a small v lowers the overage cost and can raise Q*.</li>
    <li>Over-reacting to one outcome. A single high or low demand draw doesn't change the optimal rule.</li>
    <li>Chasing worst-case scenarios. The rule is based on expected profit, not extreme cases.</li>
    <li>Forgetting it's single-period. There's no benefit to "saving inventory" for later rounds.</li>
</ul>

<h2>1-minute recipe you can use here</h2>
<ol>
    <li>Note p, c, and v. Compute Cu = p &minus; c and Co = c &minus; v.</li>
    <li>Compute the critical fractile: Cu / (Cu + Co).</li>
    <li>Use the demand info to find the corresponding quantile (Normal: z-lookup; discrete: cumulative &ge; fractile).</li>
    <li>Set Q to that quantile. Round to a feasible integer if required by the interface.</li>
</ol>

<h2>What you'll do in this experiment</h2>
<ul>
    <li>Your task is to select an order quantity (Q) for each sales period.</li>
    <li>Once your choice is submitted, the simulation will reveal the actual customer demand and display your profit for the round.</li>
    <li>The experiment consists of several rounds. Remember that the optimal strategy you've learned remains the same as long as the underlying conditions don't change.</li>
</ul>

<div class="next-button-container">
    <button id="nextButton" class="disabled-button" disabled>Next</button>
    <p id="buttonMessage" class="button-message">Please read the information above. The 'Next' button will be enabled shortly.</p>
</div>
{% endblock %}

{% block scripts %}
<script>
    function enableNextButton() {
        const nextButton = document.getElementById('nextButton');
        const buttonMessage = document.getElementById('buttonMessage');
        nextButton.disabled = false;
        nextButton.className = 'enabled-button';
        if (buttonMessage) {
            buttonMessage.style.display = 'none';
        }
    }

    document.getElementById('nextButton').addEventListener('click', function() {
        if (!this.disabled) {
            document.querySelector('.otree-btn-next').click();
        }
    });

    setTimeout(enableNextButton, 15000);
</script>
{% endblock %}