@extends("base")

@section("styles")
    <style>
        html, body {
            height: 100%;
        }
    </style>
@endsection

@section("main")
    <main class="container h-100">
        <div class="row h-100">
            <div class="col h-100 d-flex align-items-center justify-content-center">
                @if ($generate_paycode)
                    @if ($manual_pay == "on")
                        <div class="card" style="width: 400px;">
                            <div class="card-body">
     <p class="card-text text-center">
    Thank you for your work. We are currently in the process of validating it. <br />
    Please submit the following email on the platform to proceed with payment: <strong id="account-email">{{ $account->email }}</strong>
    <button id="copy-btn" class="btn btn-sm btn-primary" style="margin-left: 10px;">Copy Email</button><br>
    <span id="copy-success" class="text-success" style="display: none; margin-left: 10px;">Email copied successfully , Paste this prof in microworkers!</span>
</p>
                            </div>
                        </div>
                    @elseif ($platform->value === "micro" || $platform->value === "pico")
                        <div id="paycode-checker" class="card text-center p-4">
                            <p>Thank you for your patience. We are reviewing your work. Please wait 3 minutes..</p>

                            <div id="failed-msg" class="alert alert-danger" style="display: none;">
                                Verification failed. Please contact us for manual review or try again with a different email.
                            </div>

                            <div class="progress">
                                <div class="progress-bar" style="width: 0%;"></div>
                            </div>
                        </div>

                        <div id="paycode-box" class="card text-center p-4" style="display: none;">
                            <p class="h4"><strong>Pay-Code</strong></p>
                            <div class="input-group mb-3">
                                <input
                                    type="text"
                                    class="form-control"
                                    id="paycode-txt"
                                    value=""
                                    readonly style="width: 400px; font-size: 1.2em;"
                                             >
                                             <button id="copy-btn" class="btn btn-primary">Copy</button>
                            </div>
                            <small id="copy-confirmation" class="text-success" style="display:none;">Code copied to clipboard!</small>
                        </div>
                    @else
                        <div class="alert alert-warning">
                            Platform {{ $platform->value }} is not supported
                        </div>
                    @endif
                @else
                    <div class="alert alert-danger">
                        This account has already been used before.
                    </div>
                @endif
            </div>
        </div>
    </main>
@endsection

@section("scripts")
<script>
    document.getElementById('copy-btn').addEventListener('click', function() {
        const emailText = document.getElementById('account-email').textContent;
        navigator.clipboard.writeText(emailText).then(function() {
            document.getElementById('copy-success').style.display = 'inline';
        }).catch(function(err) {
            console.error('Failed to copy email: ', err);
        });
    });
</script>

    @if ($manual_pay == "off")
        <script>
            $(document).ready(function() {
                function copyToClipboard() {
                    var $copyText = $("#paycode-txt");

                    if (navigator.clipboard) {
                        navigator.clipboard.writeText($copyText.val()).then(function() {
                            showConfirmationMessage();
                        }).catch(function(err) {
                            alert("Failed to copy text: " + err);
                        });
                    } else {
                        $copyText.select();
                        $copyText[0].setSelectionRange(0, 99999);
                        document.execCommand("copy");
                        showConfirmationMessage();
                    }
                }

                function showConfirmationMessage() {
                    var $confirmationMessage = $("#copy-confirmation");
                    $confirmationMessage.show();

                    setTimeout(function() {
                        $confirmationMessage.hide();
                    }, 3000);
                }

                $("#copy-btn").on("click", function() {
                    console.log("Copy btn clicked")
                    copyToClipboard();
                });
            })
        </script>
    @endif

    <script>
        var recheck_counter = 0;

        function try_get_paycode() {
            $(document).ready(function() {
                $.ajax({
                    url: "/paycode?counter=" + recheck_counter,
                    method: "GET",
                    success: function(response) {
                        if (response.action) {
                            if (response.action == "recheck") {
                                recheck_counter += 1.6

                                @if ($manual_pay == "off")
                                    $(".progress-bar").css({
                                        width: recheck_counter + "%",
                                    })
                                @endif

                                setTimeout(try_get_paycode, 3000)
                            } else if (response.action === "release") {
                                @if ($manual_pay == "off")
                                    $("#paycode-checker").hide()
                                    $("#paycode-box").show()

                                    $("#paycode-box input").val(response.paycode)
                                @endif
                            }
                        }
                    },
                    error: function(error) {
                        console.log(error)
                    }
                })
            })
        }

        setTimeout(function() {
            try_get_paycode()
        }, 5 * 1000)
    </script>
@endsection