<HTML>

<HEAD>

    <TITLE>ZOHO Dashboard FOR MERCER</TITLE>

    <link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY style="overflow:hidden">
<div>
    <iframe id="zohoDashboard"
            style="width:100%; height:100%; position:absolute; margin:0; top:0; left:0; bottom:0; right:0"
            src=""></iframe>
</div>
<div id="model_id">
    <div class="modal" tabindex="-1" role="dialog" id="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" style="align-content: center; text-align: center">Log In</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Please choose Country or Region</p>
                    <!-- <form class="user" id="login_creds" name="login_creds"> -->
                    <div class="alert alert-danger" id="invalid_creds" style="display: none">
                        <strong>Invalid Country Key!</strong><br>
                    </div>

		    <div class="form-group">
			<div class="form-check form-check-inline">
			    <input class="form-check-input" type="checkbox" value="" id="countryId" name="group">
			    <label class="form-check-label" for="countryId">Country</label>
			</div>
			<div class="form-check form-check-inline">
			    <input class="form-check-input" type="checkbox" value="" id="regionId" name="group">
			    <label class="form-check-label" for="regionId">Zone</label>
			</div>

			<br>
			<br>

                        <input type="password" style="text-align: center; display: none"
                               class="form-control form-control-user" name="Enter Unique Key"
                               id="key_input" placeholder="Enter Unique Key">
                    </div>


                    <!-- <input type="submit" id="submit" class="btn btn-primary btn-user btn-block"/> -->

                    <!-- </form> -->

                </div>

                <div class="modal-footer">
                    <button type="button" id="submitCreds" class="btn btn-primary" disabled>Submit</button>
                    <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
                </div>
            </div>

        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
<script>
    window.onload = function () {
        // alert("Image is loaded");
        $('#myModal').modal('show');
        // $( window ).load(function() {

    };
    $(document).ready(function () {

	$('#key_input').css('display', 'none');

	$("input:checkbox").click(function() {
	    if ($(this).is(":checked")) {
		var group = "input:checkbox[name='" + $(this).attr("name") + "']";
		$(group).prop("checked", false);
		$(this).prop("checked", true);
		$("input:password").val("");
		$('#key_input').css('display', 'block');
		$("#submitCreds").prop("disabled", true);
	    } else {
		$(this).prop("checked", false);
		$('#key_input').css('display', 'none');
		$("input:password").val("");
		$("#submitCreds").prop("disabled", true);
	    }
	});

	$("#key_input").on('keyup', function () {
	    if (this.value.length) {
		$("#submitCreds").prop("disabled", false);
	    } else {
		$("#submitCreds").prop("disabled", true);
	    }
	});
	$("input").keydown(function(event) { 
            if (event.keyCode === 13 && this.value.length) {
                $("#submitCreds").click();
            }
        });

        $(function () {
            $('#submitCreds').click(function () {
                $('#myModal').modal('hide');

		var key = $("#key_input").val();
                if ($("#countryId").is(":checked")) {
		    $('#zohoDashboard').attr('src', "https://crmplus.zoho.com/reports/open-view/1993783000022028026/af36ddb1886a65d07e001dc5e03eca9c?ZOHO_CRITERIA=%22Country%20%26%20Target%20Data%22.%22Country%20Key%22IN('" + key + "')");
                } else if ($("#regionId").is(":checked")){
		    $('#zohoDashboard').attr('src', "https://crmplus.zoho.com/reports/open-view/1993783000022028026/af36ddb1886a65d07e001dc5e03eca9c?ZOHO_CRITERIA=%22Country%20%26%20Target%20Data%22.%22Region%20Key%22IN('" + key + "')");
                }
            })
        });
    });


</script>

</BODY>
</HTML>