{{ block title }}
    Bargaining
{{ endblock }}
{{ block content }}

    {{ include_sibling "TimerWarning.html" }}

    {{ if player.replaced_by_bot == 0 }}

        <table id="info_table" class="table table-bordered info-card">
            {{ if objects == 1 }}
                <tr>
                    <th>Outside option</th>
                    <td>{{ player.outside_option_A }}</td>
                    <th>Round</th>
                    <td>{{ player.round_number }} / {{ C.NUM_ROUNDS }}</td>
                </tr>
                <tr>
                    <th>Rule</th>
                    <td colspan="3">
                        <b>If agreement is reached:</b> Earnings = number of points you receive in the agreement.
                        <br><b>If no agreement is reached:</b> Earnings = your outside option.
                    </td>
                </tr>
            {{ endif }}

            {{ if objects == 2 }}
                <tr>
                    <th>Outside option for objects A</th>
                    <td>{{ player.outside_option_A }}</td>
                    <th>Multiplier for objects B</th>
                    <td>{{ player.objects_B_multiplier }}</td>
                    <th>Round</th>
                    <td>{{ player.round_number }} / {{ C.NUM_ROUNDS }}</td>
                </tr>
                <tr>
                    <th>Outside option type</th>
                    <td>{{ subsession.outside_type }}</td>
                    <td colspan="4">
                        {{ if subsession.outside_type == "Strong" }}
                            If type-A objects >= outside option: Earnings = Number of points
                            <br>If type-A objects < outside option: Earnings = 0 ECU
                        {{ endif }}
                        {{ if subsession.outside_type == "Weak" }}
                            <b>Earnings (in ECU)= Number of points</b>
                        {{ endif }}
                    </td>
                </tr>
            {{ endif }}
        </table>

        <div class="clarity-box">
            <p><b>Important:</b> An offer states how many points you give to the other player.</p>
        </div>

        <div class="result-box result-box-success">
            <p class="result-title"><b>You can submit an offer to be evaluated by the mechanism using the table below.</b></p>
        </div>

        <table id="bargain_table" class="table table-bordered bargaining-card">
            <th colspan="7">Your submission</th>
            <tr>
                <th width="38%">Points {{ if objects == 2 }}A {{ endif }}for you</th>
                <th width="38%">Points {{ if objects == 2 }}A {{ endif }}for your opponent</th>
                <th width="24%" colspan="2">Actions</th>
            </tr>
            <tr>
                <td><input type="number" class="form-control" inputmode="numeric" id="panel_self_offer_1_objects_A" min="0" max="{{ player.subsession.objects_A }}"></td>
                <td><input type="number" class="form-control" inputmode="numeric" id="panel_comp_offer_1_objects_A" min="0" max="{{ player.subsession.objects_A }}"></td>
                <td colspan="2"><button id="Update" class="otree-btn-next btn btn-primary" style="display: none;">Submit offer</button></td>
            </tr>
        </table>

        <span hidden>{{ formfields }}</span>
    {{ else }}
        <div class="alert alert-danger">
            <p>You were not able to answer in time. A bot will play in your place.</p>
        </div>
        <span hidden>{{ formfields }}</span>
    {{ endif }}

{{ endblock }}

{{ block styles }}
<style>
    :root {
        --bg-page: #eef3f7;
        --bg-card: #fbfdff;
        --bg-soft: #f4f7fa;
        --bg-muted: #e7edf3;
        --text-main: #24313d;
        --text-soft: #5c6b79;
        --line-soft: #d4dde6;
        --accent: #4e6f8c;
        --accent-dark: #355066;
        --accent-wash: #edf4fa;
        --warn-bg: #f9f4f3;
        --warn-border: #9c6b64;
        --gold-bg: #f6f1e7;
        --gold-border: #b79a62;
        --shadow-soft: 0 8px 24px rgba(30, 48, 66, 0.06);
    }

    body { background: var(--bg-page); }
    table { text-align: center; }

    .info-card,
    .bargaining-card {
        background: var(--bg-card);
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--shadow-soft);
    }

    #info_table,
    #bargain_table {
        margin-bottom: 18px;
        width: 100%;
    }

    #info_table th {
        background: var(--bg-muted);
        color: var(--text-main);
        font-weight: 700;
        vertical-align: middle;
    }

    #info_table td {
        background: var(--bg-card);
        color: var(--text-main);
        vertical-align: middle;
    }

    .clarity-box {
        margin: 0 0 18px 0;
        padding: 12px 14px;
        background: var(--gold-bg);
        border-left: 5px solid var(--gold-border);
        border-radius: 10px;
        box-shadow: var(--shadow-soft);
        color: #57451f;
    }

    .clarity-box p { margin-bottom: 0; }

    #bargain_table th[colspan="7"] {
        background: var(--bg-muted);
        color: var(--text-main);
        font-size: 1rem;
        font-weight: 700;
    }

    #bargain_table td,
    #bargain_table th {
        border-color: var(--line-soft);
        vertical-align: middle;
    }

    #bargain_table tr:nth-child(odd) td { background: var(--bg-card); }
    #bargain_table tr:nth-child(even) td { background: var(--bg-soft); }
    #bargain_table td { height: 55px; }

    #bargain_table input.form-control {
			width: 140px;
			max-width: 100%;
			margin: 0 auto;
			display: block;
			border-radius: 8px;
			border: 1px solid #c5d1dc;
			background: #ffffff;
			text-align: center;
			font-weight: 600;
			color: var(--text-main);
		}

    #bargain_table input.form-control:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 0.15rem rgba(78, 111, 140, 0.15);
    }

    .btn.btn-primary {
        background: var(--accent);
        border-color: var(--accent);
        border-radius: 8px;
        font-weight: 600;
        padding: 7px 16px;
    }

    .btn.btn-primary:hover,
    .btn.btn-primary:focus {
        background: var(--accent-dark);
        border-color: var(--accent-dark);
    }

    .result-box {
        margin: 14px 0 18px;
        padding: 14px 16px;
        border-radius: 10px;
        box-shadow: var(--shadow-soft);
    }

    .result-box-success {
        background: var(--accent-wash);
        border-left: 5px solid var(--accent);
        color: var(--accent-dark);
    }

    .result-title { margin-bottom: 0; }

    .alert-danger {
        border-radius: 10px;
        border: 1px solid #d9c4c1;
        background: var(--warn-bg);
        color: #7c4f48;
    }

</style>
{{ endblock }}

{{ block scripts }}
   <script>
		var anyOfferSubmitted = false;                                                                                        // newnew 0525

		function checkAndUpdateOfferSubmission() {
			anyOfferSubmitted = $("#active_self_offer_1_objects_A").text() || $("#active_self_offer_2_objects_A").text();
			refresh_btn_accept_reject_1();
			refresh_btn_accept_reject_2();
		}
	</script>
	<script>
		// Management of numeric inputs

		function update_offer_1_objects_A( target ) {
			if ( target < 0 ) { target = 0 };
			if ( target > {{ player.subsession.objects_A }} ) { target = {{ player.subsession.objects_A }} };
			$( "#panel_self_offer_1_objects_A" ).val( target );
			$( "#panel_comp_offer_1_objects_A" ).val( {{ player.subsession.objects_A }} - target );
			$( "#id_submission_1_objects_A" ).val( target );
		}

	</script>
	<script>
		// Handling of input changes

		$( "#panel_self_offer_1_objects_A" ).on( "change", function() {
			target = $( "#panel_self_offer_1_objects_A" ).val();
			update_offer_1_objects_A( target );
			refresh_btn_update();
		} );

		$( "#panel_comp_offer_1_objects_A" ).on( "change", function() {
			target = {{ player.subsession.objects_A }} - $( "#panel_comp_offer_1_objects_A" ).val();
			update_offer_1_objects_A( target );
			refresh_btn_update();
		} );


	</script>
	<script>
		// Showing and hiding buttons

		function refresh_btn_update() {
			var target_A = $("#panel_self_offer_1_objects_A").val();
			if (parseInt(target_A, 10) >= 0 && target_A !== "") {
				$("#Update").show();
			} else {
				$("#Update").hide();
			}
		}
	</script>
	<script>
		document.addEventListener('DOMContentLoaded', function() {
			const form = document.querySelector('form');

			if (!form) {
				return;
			}

			function restoreSubmitButton() {
				$("#Update").show().prop("disabled", false);
			}

			form.addEventListener('submit', function(event) {
				const targetA = parseInt($("#id_submission_1_objects_A").val(), 10);
				const outsideOptionA = {{ player.outside_option_A }};

				if (targetA < outsideOptionA) {
					if (!confirm(
							'You are submitting an offer lower than your outside option ' + outsideOptionA +
							'.\n\nIf accepted, you may receive fewer points than your outside option and lose some potential payoff.\n\nClick OK to submit this offer, or CANCEL to change it.'
					)) {
						event.preventDefault();
						restoreSubmitButton();
						return;
					}
					if (!confirm('Please confirm that you want to lose ' + (outsideOptionA - targetA) + ' points relative to your outside option.\n\nClick OK to submit this offer, or CANCEL to change it.')) {
						event.preventDefault();
						restoreSubmitButton();
					}
				}
			});
		});
	</script>
	<script>
		$(document).ready(function() {
			$(window).keydown(function(event){
				if(event.keyCode == 13) {
					event.preventDefault();
					return false;
				}
			});
		});
	</script>

{{ if player.replaced_by_bot == 1 and player.subsession.treatment_name in C.TREATMENTS_1 }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const outsideOption = Number('{{ player.outside_option_A }}');
    const botSubmission = outsideOption < 75
        ? Math.round((2 / 3) * outsideOption + 25)
        : outsideOption;
    const input = document.getElementById('id_submission_1_objects_A');
    if (input) {
        input.value = botSubmission;
    }
    setTimeout(function() {
        document.querySelector('form').submit();
    }, 25000);
});
</script>
{{ endif }}

<!-- slider function code -->
<!--   <script>                                                                                                             // add slider 250605
 function calculateSimPayoff(a1, a2, multiplier) {
    a1 = parseInt(a1) || 0;
    a2 = parseInt(a2) || 0;
    var total = 100;
    var outside_option = {{ player.outside_option_A }};
    multiplier = multiplier || 1;

    if (a1 + a2 > total) {
        return {
            breakdown: true,
            payoff: outside_option,
            objectsA: outside_option,
            objectsB: 0
        };
    } else if (a1 > 50) {
        // 你要的A大于50，你得a1个A，100-a1个B
        return {
            breakdown: false,
            payoff: a1 + (total - a1) * multiplier,
            objectsA: a1,
            objectsB: total - a1
        };
   } else if (a2 > 50) {
        // 对手要的A大于50，你得100-a2个A，a2个B
        return {
            breakdown: false,
            payoff: (total - a2) + a2 * multiplier,
            objectsA: total - a2,
            objectsB: a2
       };
    } else {
        // 双方都≤50，各得50
        return {
            breakdown: false,
            payoff: 50 + 50 * multiplier,
            objectsA: 50,
            objectsB: 50
        };
    }
}


 function updateSimPayoff() {
    var a1 = $("#panel_self_offer_1_objects_A").val();
    var a2 = $("#sim_a2").val();
    var multiplier = {{ player.objects_B_multiplier}};
    var res = calculateSimPayoff(a1, a2, multiplier);
    $("#sim_a2_val").text(a2);
     var res = calculateSimPayoff(a1, a2);
    if (res.breakdown) {
        $("#sim_result").html(
				"Negotiation failed. Your payoff will be your outside option of object A: " + "<b style='color: red;'>"+  {{player.outside_option_A}}  + "</b>");
   } else {
        $("#sim_result").html(
				"Your potential payoff for this round is: objects A+ Multiplier × objects B = " + "<b style='color: red;'>" + res.payoff + "</b>");
    }
}


     slider change
    $(document).ready(function() {
   		 $("#sim_a2").on("input", updateSimPayoff);
		 $("#panel_self_offer_1_objects_A").on("input", updateSimPayoff);
   		 updateSimPayoff();
});
    </script>
-->


{{ endblock }}