{% extends "global/Page.html" %}
{{ block title }}
    <span class="text-primary fw-bold">Instructions</span>
{{ endblock }}

{{ block content }}
<div class="container mt-4">
    <h2 class="text-primary fw-bold">Round {{ roundNum }} / {{ C.NUM_ROUNDS }}</h2>
    <br>
    {{ if is_last_round_of_role }}
    <div class="alert alert-warning border-0 shadow-sm mb-4 d-flex align-items-center" style="border-radius: 15px;">
        <i class="bi bi-exclamation-triangle-fill me-3 fs-4 text-dark"></i>
        <div>
            <h6 class="fw-bold mb-1">Role Switch Notice</h6>
            <p class="mb-0 small">This is the final round in your current role. <strong>Next round, you will switch roles</strong> (Buyers become Sellers, and vice versa).</p>
        </div>
        <button type="button" class="btn btn-sm btn-outline-dark ms-auto" data-bs-toggle="modal" data-bs-target="#instrModal" style="border-radius: 8px;">
            Re-read Instructions
        </button>
    </div>
    {{ endif }}
</div>

<div class="modal fade" id="instrModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow" style="border-radius: 15px;">
            <div class="modal-header border-0 bg-light">
                <h5 class="modal-title fw-bold text-primary">Market Instructions</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <div class="card shadow-sm border-0 mb-4" style="border-radius: 15px;">
                    <div class="card-body p-4">
                        <h5 class="fw-bold"><i class="bi bi-trophy text-warning"></i> Objective</h5>
                        <p class="text-muted mb-0">You will participate in a market as a buyer or seller. Your goal is to <b>maximize your profit</b>.</p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-7">
                        <div class="card shadow-sm border-0" style="border-radius: 15px; margin-bottom: 1.05rem !important;">
                            <div class="card-body p-4">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item border-0">
                                        <strong>Buyers</strong> receive a private value (maximum willingness to pay).
                                    </li>
                                    <li class="list-group-item border-0">
                                        <strong>Sellers</strong> receive a private cost (minimum acceptable price).
                                    </li>
                                </ul>
                                <br>
                                <h5 class="fw-bold mb-3" style="color: maroon">Step 1: Submit Your Price</h5>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item border-0">
                                        <strong>Buyers</strong> submit one bid price: how much they are willing to pay.
                                    </li>
                                    <li class="list-group-item border-0">
                                        <strong>Sellers</strong> submit one ask price: the price they want to be paid.
                                    </li>
                                </ul>
                                <h5 class="fw-bold mt-4 mb-3" style="color: indigo">Step 2: Market Clearing</h5>
                                <p>After all submissions:</p>
                                <ol class="small">
                                    <li>Bids are ranked High-to-Low.</li>
                                    <li>Asks are ranked Low-to-High.</li>
                                    <li>The highest buyer is matched with the lowest seller.</li>
                                    <li>The second-highest buyer is matched with the second-lowest seller.</li>
                                    <li>A match is successful only if the buyer's bid is <strong>&ge;</strong> the seller's ask.</li>
                                    <li>This process of matching continues until the buyer's bid is lower than the seller's ask.</li>
                                </ol>
                            </div>
                        </div>
                        <div class="alert alert-info border-0 shadow-sm" style="border-radius: 12px;">
                            <h6 class="fw-bold small"><i class="bi bi-lightbulb"></i> Strategy Tips</h6>
                            <ul class="mb-0 small">
                                <li><strong>Buyers:</strong> Do not bid above your value; you will lose money.</li>
                                <li><strong>Sellers:</strong> Do not ask below your cost; you will lose money.</li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-md-5">
                        <div class="card shadow-sm border-0 bg-light mb-4" style="border-radius: 15px; border: 1px solid #dee2e6 !important;">
                            <div class="card-body p-4">
                                <h5 class="fw-bold" style="color: navy">Step 3: Market Price (P<sup>*</sup>)</h5>
                                <p class="small" style="text-align: justify">How much will you pay as a buyer? How much will you receive as a seller? A <b>single market price</b> will be calculated on the basis of all submitted bids and asks. All trades occur at the same price.</p>
                                <ul>
                                    <li>Look at the <b>last successful match</b>.</li>
                                    <li>Take the buyer's bid and the seller's ask in that match.</li>
                                    <li>The market price is the average of these two numbers.</li>
                                </ul>

                                <div class="p-3 bg-white rounded border mb-3">
                                    <p class="mb-1"> <strong>Example of a Market Price:</strong></p>
                                    <p class="small mb-0"><b>Bids:</b> 100, 90, 80, 70 <br>
                                        <b>Asks:</b> 20, 40, 60, 85</p>
                                    <ul class="x-small">
                                        <li>100 ≥ 20 (match)</li>
                                        <li>90 ≥ 40 (match)</li>
                                        <li>80 ≥ 60 (match)</li>
                                        <li>70 < 85 (stop)</li>
                                    </ul>
                                    <p class="small mb-0">
                                        The number of trades is 3. The last matched bid: 80 Last matched ask: 60. The market price is P<sup>*</sup> = (80 + 60) / 2 = 70.
                                    </p>
                                </div>

                                <h5 class="fw-bold mt-3" style="color: darkgreen">Step 4: Profit</h5>
                                <p>If you are selected among the matched traders, you will trade at the market price.</p>
                                <ul>
                                    <li><p class="small mb-1"><strong>Buyer profit:</strong> Value − Market Price</p></li>
                                    <li><p class="small mb-0"><strong>Seller profit:</strong> Market Price - Cost </p></li>
                                </ul>
                                <p>If you do not trade, your profit is zero.</p>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-primary px-5" data-bs-dismiss="modal" style="border-radius: 10px;">Return</button>
            </div>
        </div>
    </div>
</div>

<div class="d-grid gap-2">
    <button class="btn btn-dark btn-lg shadow-sm" style="border-radius: 10px; transition: 0.3s;">
        Next
    </button>
</div>

<style>
    body { background-color: #f8f9fa; }
    .otree-title { display: none; }
    .x-small { font-size: 0.85rem; }
    .input-group-text { border-radius: 10px 0 0 10px !important; }
    input { border-radius: 0 10px 10px 0 !important; border-left: none !important; }
    .btn-dark:hover { background-color: #333; transform: translateY(-2px); }
</style>
{{ endblock }}