{{ 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">
            <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>
        </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 now submit a new 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 for you</th>
                <th width="38%">Points 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_2_objects_A" min="0" max="{{ player.subsession.objects_A }}"></td>
                <td><input type="number" class="form-control" inputmode="numeric" id="panel_comp_offer_2_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 scripts }}
	<script>
		// Management of numeric inputs

		function update_offer_2_objects_A( target ) {
			if ( target < 0 ) { target = 0 };
			if ( target > {{ player.subsession.objects_A }} ) { target = {{ player.subsession.objects_A }} };
			$( "#panel_self_offer_2_objects_A" ).val( target );
			$( "#panel_comp_offer_2_objects_A" ).val( {{ player.subsession.objects_A }} - target );
			$( "#id_submission_2_objects_A" ).val( target );
		}

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

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

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


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

		function refresh_btn_update() {
			if ( $( "#panel_self_offer_2_objects_A" ).val() &&
				 $( "#panel_comp_offer_2_objects_A" ).val() ) {
					$( "#Update" ).show();
			} else {
					$( "#Update" ).hide();
			}
		}

	</script>
	<script>
		$(document).ready(function() {
			$(window).keydown(function(event){
				if(event.keyCode == 13) {
					event.preventDefault();
					return false;
				}
			});
		});
	</script>
    <script>                                                                                                                          //newnew 0602
        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 inputField = document.getElementById('id_submission_2_objects_A');
                const inputValue = parseInt(inputField ? inputField.value : $("#panel_self_offer_2_objects_A").val(), 10);
                const outsideOptionA = parseInt('{{ player.outside_option_A }}', 10);

                if (inputValue < outsideOptionA) {
					const isConfirmed = 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.');
                    if (!isConfirmed) {
                        event.preventDefault();
                        restoreSubmitButton();
                        return;
                    }
                    const lossConfirmed = confirm('Please confirm that you want to lose ' + (outsideOptionA - inputValue) + ' points relative to your outside option.\n\nClick OK to submit this offer, or CANCEL to change it.');
                    if (!lossConfirmed) {
                        event.preventDefault();
                        restoreSubmitButton();
                    }
                }
            });
        });                                                                                                                            //newnew 0602
    </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_2_objects_A');
    if (input) {
        input.value = botSubmission;
    }
    setTimeout(function() {
        document.querySelector('form').submit();
    }, 25000);
});
</script>
{{ endif }}

{{ endblock }}

{{ block styles }}
<style>
    :root {
        --bg-page: #eef3f7;
        --bg-card: #fbfdff;
        --bg-soft: #f4f7fa;
        --bg-muted: #e7edf3;
        --text-main: #24313d;
        --line-soft: #d4dde6;
        --accent: #4e6f8c;
        --accent-dark: #355066;
        --accent-wash: #edf4fa;
        --warn-bg: #f9f4f3;
        --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);
    }
    .clarity-box {
        margin: 0 0 18px 0;
        padding: 12px 14px;
        background: #f6f1e7;
        border-left: 5px solid #b79a62;
        border-radius: 10px;
        box-shadow: var(--shadow-soft);
        color: #57451f;
    }
    .clarity-box p { margin-bottom: 0; }
    #info_table, #bargain_table { width: 100%; margin-bottom: 18px; }
    #info_table th { background: var(--bg-muted); font-weight: 700; }
    #info_table td { background: var(--bg-card); }
    #bargain_table th[colspan="7"] { background: var(--bg-muted); font-weight: 700; }
    #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);
		}
    .result-box {
        margin: 14px 0 18px;
        padding: 14px 16px;
        border-radius: 10px;
        box-shadow: var(--shadow-soft);
        background: var(--accent-wash);
        border-left: 5px solid var(--accent);
        color: var(--accent-dark);
    }
    .btn.btn-primary {
        background: var(--accent);
        border-color: var(--accent);
        border-radius: 8px;
        font-weight: 600;
    }
</style>
{{ endblock }}