{% extends "wallet/components/wallet_tab.jinja" %}
{% set tab = 'send' %}
{% block content %}

	{% include "includes/qr-scanner.html" %}

	{% include "includes/hwi/hwi.jinja" %}
	{% from 'includes/overlay/sign_tx_method.jinja' import sign_tx_method %}
	{% for device in wallet.devices %}
		{{ sign_tx_method(wallet, device, psbt, specter.info.chain) }}
	{% endfor %}
	<style>
		.tx_info {
			padding: 1em;
			border: 1px solid #506072;
			border-radius: 4px;
			text-align: center;
			margin-bottom: 2em;
		}
		.signing_container{
			margin-bottom: 2em;
		}
		.signing-column-btn {
			margin: 0.75em;
			width: 200px !important;
		}
		.tx {
			width: 100%;
			max-width: 179px;
			min-width: 120px;
		}
		.checkbox {
			width: 20px;
			height: 20px;
		}
		.tx_details_header {
			text-align: left;
			text-decoration: underline;
		}
		#tx_details {
			line-height: 1.5;
		}
		.toggle{
			display: none;
		}
		.togglebtn {
			margin: auto;
			display: inline-block;
			text-align: center;
			background: var(--cmap-border) !important;
		}
		input[type="checkbox"] ~ label.togglebtn::before{
			content: "Show";
		}
		input[type="checkbox"]:checked ~ label.togglebtn::before{
			content: "Hide";
		}
		input[type="checkbox"]{
			display: none;
		}
		input[type="checkbox"]:checked ~ .toggle{
			display: block;
		}
		@media screen and (max-width:720px) {
			.tx {
				width: 100%;
				max-width: 179px;
				min-width: 0px;
			}
        }
	</style>
	<br>
	{% from 'wallet/components/explorer_link.jinja' import explorer_link %}
	<form action="{{ url_for('wallets_endpoint.send_pending',wallet_alias=wallet_alias) }}" method="POST" class="full-width" id="send_sign_psbt_form" style="margin: auto; margin-top: 0px; max-width: 96%;">
		<input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
		<div class="tx_info">
			{% for i in range(psbt['address']|length) %}
				<div style="word-break: break-all;">Sending <b>{{ psbt["amount"][i] | btcunitamount }}</b>
					{% if specter.unit == 'sat' %}
						sats
					{% else %}
						{% if specter.chain !='main' %}t{%endif%}BTC
					{% endif %}
					{% if specter.price_check %}
						<span class="note">({{ psbt["amount"][i] | altunit }})</span>
					{% endif %}
					to<b>
						{% set addr_label = wallet.getlabel(psbt['address'][i]) %}
						<address-label data-address="{{ psbt['address'][i] }}" data-label="{{ addr_label }}" data-wallet="{{ wallet_alias }}"></address-label>
					</b>
					{% if addr_label != psbt['address'][i] %}
						<span class="note">
							({{ psbt['address'][i] }})
						</span>
					{% endif %}<br><br>
				</div>
			{% endfor %}
			{% if wallet.is_multisig %}
				<div class="log" style="margin: auto;">
					Acquired <b id="sigscount">{{ psbt['sigs_count'] }}</b> of <b>{{ wallet.sigs_required }}</b> signatures.
				</div>
			{% endif %}
			<br>

			<input type="checkbox" id="showdetails">
			<label for="showdetails" class="btn togglebtn">
				transaction details
			</label>
			<div class="toggle" id="tx_details" style="word-break: break-all;">
				<br>
				<h2 class="tx_details_header">Transaction Info</h2>
				<p style="text-align: left; background-color: #131a24; padding: 10px; line-height: 2; border-radius: 15px;">
					<b>Total fee:</b> {{ psbt['fee'] | btc2sat }} sats {% if specter.price_check %}<span class="note">&nbsp;({{ psbt['fee'] | altunit }})</span>{% endif %}<br>
					<b>Fee rate:</b>
					{% if 'tx_full_size' in psbt %}
						{{ (psbt['fee'] / psbt['tx_full_size']) | feerate }} sat/vbyte<br>
						<b>Estimated size:</b> {{ psbt['tx_full_size'] }} vbytes<br>
					{% else %}
						{{ (psbt['fee'] / psbt['tx']['weight']) | feerate }} sat/vbyte<br>
						<b>Size:</b> {{ psbt['tx']['vsize'] }} vbytes<br>
					{% endif %}
					<b>Inputs count:</b> {{ psbt['tx']['vin'] | length }}<br>
					<b>Outputs count:</b> {{ psbt['tx']['vout'] | length }}
				</p>
				<h2 class="tx_details_header">Inputs ({{psbt['tx']['vin'] | length}})</h2>
				{% for input in psbt['tx']['vin'] %}
					{% set tx = wallet.gettransaction(input['txid'], decode=true) %}
					{% set bg_color = '#131a24' %}
					{% if tx and tx.vout and tx.vout|length > input['vout'] and 'addresses' in tx.vout[input['vout']] and tx.vout[input['vout']].addresses|length > 0 %}
						{% set address = tx.vout[input['vout']].addresses[0] %}
						{% set bg_color = '#925d07' if wallet.is_address_mine(address) else bg_color %}
					{% endif %}
					<p class="tx_info" style="text-align: left; background-color: {{ bg_color }};">
						<b style="margin: auto;">Input #{{loop.index0}}</b><br><br>
						<b>Transaction id:</b><br>
						{{ explorer_link('tx', input['txid'], input['txid'], specter.explorer) }}
						(Output #{{ input['vout'] }})<br>
						{% if tx %}
							{% if address %}
								{% set addr_label = wallet.getlabel(address) %}
								<b>Address:</b>
								{{ address }}
								<br>
								{% if addr_label != address %}
									<b>Label:</b>
									<address-label data-address="{{ address }}" data-label="{{ addr_label }}" data-wallet="{{ wallet_alias }}"></address-label>
									<br>
								{% endif %}
							{% endif %}
							<b>Amount:</b> {{ psbt['inputs'][loop.index0].get('witness_utxo',{}).get('amount', -1)|btcamount }} BTC {% if specter.price_check %}<span class="note">&nbsp;({{ psbt['inputs'][loop.index0].get('witness_utxo', {}).get('amount', -1) | altunit }})</span>{% endif %}
						{% endif %}
					</p>
				{% endfor %}
				<h2 class="tx_details_header">Outputs ({{psbt['tx']['vout']|length}})</h2>
				{% for output in psbt['tx']['vout'] if output['scriptPubKey']['type'] != 'fee' %}
					{% set address = output['scriptPubKey']['addresses'][0] if "addresses" in output["scriptPubKey"] else output["scriptPubKey"]["address"] %}
					{% set bg_color = '#154984' if wallet.is_address_mine(address) else '#131a24' %}
					<p class="tx_info" style="text-align: left; background-color: {{ bg_color }};">
						<b>Output #{{loop.index0}}</b> {% if address not in psbt['address'] %}(Change){% endif %}<br><br>
						{% set addr_label = wallet.getlabel(address) %}
						<b>Address:</b>
						{{ address }}
						<br>
						{% if addr_label != address %}
							<b>Label:</b>
							<address-label data-address="{{ address }}" data-label="{{ addr_label }}" data-wallet="{{ wallet_alias }}"></address-label>
							<br>
						{% endif %}
						<b>Amount:</b> {{ output['value']|btcamount }} BTC {% if specter.price_check %}<span class="note">&nbsp;({{ output['value'] | altunit }})</span>{% endif %}
					</p>
				{% endfor %}
				Raw PSBT:<textarea id="raw-psbt" disabled style="background-color: #131a24;">{{ psbt['base64'] }}</textarea>
				<div class="row break-row-mobile" style="margin:auto">
					<a id="download-psbt-btn" class="btn"
					download="binary_{{ psbt['tx']['hash'] }}.psbt" href="data:application/octet-stream;base64;content-disposition=attachment,{{ psbt['base64'] }}">
						<img src="{{ url_for('static', filename='img/file.svg') }}" style="width: 26px; margin: 0px;" class="svg-white">
						Save binary
					</a>&nbsp;
					<a id="download-psbt-btn" class="btn"
					download="base64_{{ psbt['tx']['hash'] }}.psbt" href="data:text/plain;content-disposition=attachment,{{ psbt['base64'] }}">
						<img src="{{ url_for('static', filename='img/file.svg') }}" style="width: 26px; margin: 0px;" class="svg-white">
						Save base64
					</a>&nbsp;
					<a id="copy-raw-psbt-btn" class="btn">
						<img src="{{ url_for('static', filename='img/copy.svg') }}" style="width: 26px; margin: 0px;" class="svg-white">
						Copy Raw PSBT
					</a>&nbsp;
					<a id="show-qr-psbt-btn" class="btn">
						<img src="{{ url_for('static', filename='img/qr-code.svg') }}" style="width: 26px; margin: 0px;" class="svg-white">
						Show QR code
					</a>
				</div>
			</div>
		</div>

		<div id="signing_container" class="signing_container flex-column {% if psbt['raw'] %}hidden{% endif %}" style="text-align: center;">
			<p style="margin-bottom: 15px; margin-top: 0px;">Sign transaction with your:</p>
			{% for device in wallet.devices %}
				<button type="button" class="btn signing-column-btn" id="{{ device.alias }}_tx_sign_btn" {{ 'disabled style=background-color:#303c49;' if device.alias in psbt["devices_signed"] else '' }}>
					{{ device.name }} {% if device.alias in psbt['devices_signed'] %} (&#10004;) {% endif %}
				</button>
			{% endfor %}
		</div>

		{# ===================== Possible tx signers' outputs ===================== #}

		<div id="ready_container" class="output_option {% if not psbt['raw'] %}hidden{% endif %}">
			<p>Transaction is ready to send (&#10004;)</p>
			<div class="output_option">
				<a class="btn centered" id="send_tx_btn">Send transaction</a>
			</div>
		</div>
		<div id="paste_signed" class="output_option {% if psbt['raw'] %}hidden{% endif %}" style="margin-top:20px">
			<button type="button" onclick="showPageOverlay('paste-tx-popup')" class="btn centered" id="pastetx">Paste signed transaction</a>
		</div>
		<div class="hidden" id="paste-tx-popup">
			<h1>Paste signed transaction</h1>
			<input type="text" id="paste-tx-text" placeholder="Paste your transaction here">
			<br><br>
			<button type="button" onclick="currentSigningDevice = '';combine(document.getElementById('paste-tx-text').value);hidePageOverlay();document.getElementById('paste-tx-text').value='';" class="btn centered">Confirm</button>
		</div>
		
		{% include 'includes/overlay/broadcast_tx.jinja' %}

		<div class="row padded">
			<input type="hidden" name="pending_psbt" value='{{psbt|tojson|safe}}'>
			<button id="deletepsbt_btn" type="submit" name="action" value="deletepsbt" class="btn danger centered" style="margin-left: 5px;">Delete Transaction</button>
		</div>
	</form>

<form id="raw-psbt-qr-container" class="flex-center flex-column hidden">
    <input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
	<div class="row" style="min-height: 400px;">
        <span style="margin: auto;" id="raw-psbt-qr-holder">
            <qr-code id="raw-psbt-qr" class='center' value="{{ psbt['base64'] }}" width="400" scalable></qr-code>
        </span>
    </div>
</form>
{% endblock %}


{% block scripts %}
	<script>
		let currentSigningDevice = '';
		let currentSigningDeviceAlias;
		let psbt0 = "{{ psbt['base64'] }}";
		let sigscount = parseInt("{{ psbt['sigs_count'] }}");
		let raw = "{{psbt['raw']}}";

		var copyrawPSBTbtn = document.getElementById("copy-raw-psbt-btn");
		copyrawPSBTbtn.addEventListener("click", function() {
			var raw_psbt = document.getElementById("raw-psbt");
			copyText(raw_psbt.value, "Copied PSBT")
		});
		document.getElementById("show-qr-psbt-btn").addEventListener("click", 
			(e)=>{
                e.preventDefault();
                showPageOverlay('raw-psbt-qr-container');
		});
		document.addEventListener("DOMContentLoaded", function(){
			var sendTxBtn = document.getElementById("send_tx_btn");
			sendTxBtn.addEventListener("click", function() {
				showPageOverlay("tx_broadcast");
			});

			document.getElementById("broadcast_block_explorer_btn").addEventListener("click", async function(e) {
				e.preventDefault();
				document.getElementById("broadcast_local_btn").classList.add("hidden");
				document.getElementById("broadcast_block_explorer_btn").classList.add("hidden");
				document.getElementById("save_psbt_btn").classList.add("hidden");
				document.getElementById("copy_final_tx_btn").classList.add("hidden");
				document.getElementById("broadcast_blockstream_btn").classList.remove("hidden");
				document.getElementById("broadcast_mempool_btn").classList.remove("hidden");
				document.getElementById("broadcast_blockstream_tor_btn").classList.remove("hidden");
				document.getElementById("broadcast_mempool_tor_btn").classList.remove("hidden");
				document.getElementById("broadcast_options_btn").classList.remove("hidden");
			});

			document.getElementById("broadcast_options_btn").addEventListener("click", async function(e) {
				e.preventDefault();
				document.getElementById("broadcast_local_btn").classList.remove("hidden");
				document.getElementById("broadcast_block_explorer_btn").classList.remove("hidden");
				document.getElementById("save_psbt_btn").classList.remove("hidden");
				document.getElementById("copy_final_tx_btn").classList.remove("hidden");
				document.getElementById("broadcast_blockstream_btn").classList.add("hidden");
				document.getElementById("broadcast_mempool_btn").classList.add("hidden");
				document.getElementById("broadcast_blockstream_tor_btn").classList.add("hidden");
				document.getElementById("broadcast_mempool_tor_btn").classList.add("hidden");
				document.getElementById("broadcast_options_btn").classList.add("hidden");
			});

			document.getElementById("broadcast_local_btn").addEventListener("click", async function(e) {
				e.preventDefault();
				broadcastLocal(raw);
			});

			if ("{{ specter.chain }}" != "regtest") {
				document.getElementById("broadcast_blockstream_btn").addEventListener("click", async function(e) {
					e.preventDefault();
					broadcastBlockExplorer(raw, 'blockstream');
				});

				document.getElementById("broadcast_mempool_btn").addEventListener("click", async function(e) {
					e.preventDefault();
					broadcastBlockExplorer(raw, 'mempool');
				});
				
				document.getElementById("broadcast_blockstream_tor_btn").addEventListener("click", async function(e) {
					e.preventDefault();
					broadcastBlockExplorerTor(raw, 'blockstream');
				});
				
				document.getElementById("broadcast_mempool_tor_btn").addEventListener("click", async function(e) {
					e.preventDefault();
					broadcastBlockExplorerTor(raw, 'mempool');
				});
			}

			document.getElementById("save_psbt_btn").addEventListener("click", async function(e) {
				e.preventDefault();
				hidePageOverlay();
				window.location.replace("./pending/");
			});

			document.getElementById("copy_final_tx_btn").addEventListener("click", async function(e) {
				e.preventDefault();
				copyText(raw, 'Copied transaction')
			});
		});
		if (!"{{ psbt['raw'] }}") {
			document.addEventListener("DOMContentLoaded", function(){
				{% if signed_psbt %}
					combine('{{ signed_psbt }}')
				{% endif %}
			});
		}

		async function combine(psbt1) {
			let url = "{{ url_for('wallets_endpoint.combine', wallet_alias=wallet.alias) }}";

			var formData = new FormData();
			formData.append("csrf_token", "{{ csrf_token() }}");
			formData.append("psbt0", psbt0);
			formData.append("psbt1", psbt1);
			formData.append("txid", "{{ psbt['tx']['txid'] }}");
			formData.append("device_name", currentSigningDevice);

			try {
				const response = await fetch(
					url,
					{
						method: 'POST',
						body: formData
					}
				);
				if(response.status != 200){
					showError(await response.text());
					return;
				}
				const jsonResponse = await response.json();
				if("psbt" in jsonResponse){						
					psbt0 = jsonResponse["psbt"];
					if("devices" in jsonResponse){
						jsonResponse["devices"].forEach(alias => {
							let el = document.getElementById(alias + '_tx_sign_btn');
							el.style = "background-color:#303c49;";
							// if not disabled yet - disable
							if(!el.disabled){
								el.disabled = true;
								el.innerHTML += ' (&#10004;)';
							}
						});
						sigscount = jsonResponse["devices"].length;
					}
					let sigsel = document.getElementById("sigscount");
					if(sigsel){
						sigsel.innerHTML = sigscount;
					}
					// add signatures to raw-psbt textarea for export
					document.getElementById("raw-psbt").value = psbt0;
					// download file
					document.getElementById("download-psbt-btn").href = "data:text/plain;content-disposition=attachment,"+psbt0;
					// qr code
					document.getElementById("raw-psbt-qr-holder").innerHTML = `            <qr-code id="raw-psbt-qr" class='center' value="${psbt0}" width="400" scalable></qr-code>`;
					document.getElementById("raw-psbt-qr").setAttribute("value",psbt0);
				}
				console.log(jsonResponse);
				if (jsonResponse.complete) {
					let el = document.getElementById('broadcast_container');
					if(el){
						el.style.display = 'block';
					}
					raw = jsonResponse["hex"];
					document.getElementById("signing_container").style.display = 'none';
					document.getElementById("paste_signed").style.display = 'none';
					document.getElementById("ready_container").style.display = 'block';
					showPageOverlay("tx_broadcast");
				}
			} catch(e) {
				console.log("Caught error: ", e);
				showError(e);
			}
		}

		async function broadcastLocal(tx) {
			showNotification("Sending transaction...");
			let url="{{ url_for('wallets_endpoint.broadcast', wallet_alias=wallet.alias) }}";

			var formData = new FormData();
			formData.append("csrf_token", "{{ csrf_token() }}");
			formData.append("tx", tx);

			try {
				const response = await fetch(
					url,
					{
						method: 'POST',
						body: formData
					}
				);

				const jsonResponse = await response.json();

				if (jsonResponse.success) {
					hidePageOverlay();
					window.location.replace("{{ url_for('wallets_endpoint.history', wallet_alias=wallet.alias) }}");
				} else {
					showError("Server failed to broadcast transactions!\n" + jsonResponse.error);
				}
			} catch(e) {
				showError("Server failed to broadcast transactions!\n" + e);
			}
		}

		async function broadcastBlockExplorerTor(tx, explorer) {
			showNotification("Sending transaction...", 0);
			let url="{{ url_for('wallets_endpoint.broadcast_blockexplorer_tor', wallet_alias=wallet.alias) }}";

			var formData = new FormData();
			formData.append("csrf_token", "{{ csrf_token() }}");
			formData.append("tx", tx);
			formData.append("explorer", explorer);

			try {
				const response = await fetch(
					url,
					{
						method: 'POST',
						body: formData
					}
				);

				const jsonResponse = await response.json();

				if (jsonResponse.success) {
					hidePageOverlay();
					window.location.replace("{{ url_for('wallets_endpoint.history', wallet_alias=wallet.alias) }}");
				} else {
					showError("Server failed to broadcast transactions!\n" + jsonResponse.error);
				}
			} catch(e) {
				showError("Server failed to broadcast transactions!\n" + e);
			}
		}

		function broadcastBlockExplorer(tx, explorer) {
			showNotification("Sending transaction via " + explorer + "...", 0);
			// TODO: Use fetch instead of XMLHttpRequest
			let url;
			if (explorer == "blockstream") {
				url = "https://blockstream.info/"
			} else if (explorer == "mempool") {
				url = "https://mempool.space/"
			}
			if ("{{ specter.chain }}" == "main") {
				url += "api/tx";
			} else if("{{specter.chain}}" == "liquidv1"){
				url += "liquid/api/tx";
			} else if("{{specter.chain}}" == "signet"){
				url += "signet/api/tx";
			} else {
				url += "testnet/api/tx";
			}

			var xmlHttp = new XMLHttpRequest();
			xmlHttp.onreadystatechange = function() { 
				if(xmlHttp.readyState === 4 && xmlHttp.status === 200) {
					var deletePSBTBtn = document.getElementById("deletepsbt_btn");
					deletePSBTBtn.click();
					showNotification("Transaction was sent successfully!");
				} else {
					if(xmlHttp.readyState === 4){
						showError("Server failed to broadcast transactions!\n" + xmlHttp.response);
					}
				}
			}

			xmlHttp.open("POST", url, true); // true for asynchronous 
			xmlHttp.send(tx);
		}

		// ================== Signers various device support ==================
		{% if 'raw' not in psbt %}
			document.addEventListener("DOMContentLoaded", function() {
				{% for device in wallet.devices %}
					document.getElementById("{{ device.alias }}_tx_sign_btn").addEventListener("click", (e) => {
						e.preventDefault();
						currentSigningDevice = "{{ device.name }}";
						currentSigningDeviceAlias = "{{ device.alias }}";
						showPageOverlay('{{ device.alias }}_sign_tx_method');
					});
				{% endfor %}
			});
		{% endif %}
	</script>
{% endblock %}
