<div id="captcharequired">
    <p class="text-gray-800 dark:text-gray-200 font-bold">
        <i class="fa-solid fa-lock-open pr-[4px] text-yellow-400"></i> 1080p
    </p>
    <p class="text-gray-800 dark:text-gray-200">
        Please solve the following captcha:
    </p>
    <p id="message" class="text-red-600">
    </p>
    <div class="block pt-2">
        <altcha-widget id="altcha" theme="cupcake" challenge="/altcha-challenge"></altcha-widget>
    </div>
    <br>
    <p class="text-gray-800 dark:text-gray-200 text-sm">
        You can log in with Discord to avoid the captcha.
    </p>
</div>

<div id="captchsolved" style="display: none;">
    <p class="text-gray-800 dark:text-gray-200 font-bold">
        <i class="fa-solid fa-lock-open pr-[4px] text-green-400"></i> 1080p
    </p>
    <div id="dlbutton">
        <a href="" id="downloadEpisode">
            <button class="group rounded-md shadow bg-rose-600 text-white cursor-pointer flex justify-between items-center overflow-hidden transition-all hover:glow m-1 w-[190px] h-[65px]">
                <div class="relative w-12 h-[65px] bg-white bg-opacity-20 text-white flex justify-center items-center transition-all">
                    <svg class="w-4 h-4 transition-all group-hover:-translate-y-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
                    </svg>
                </div>
                @php
                    $fileExtension = "HEVC";
                    if (str_contains($episode->getDownloadByType('FHD')->url, 'AV1')) {
                        $fileExtension = "AV1";
                    }
                @endphp
                <div class="flex flex-col text-center w-full">
                    <p class="text-xl">Episode {{ $episode->episode }}</p>
                    <p class="text-xs">{{ $fileExtension }} MKV {{ $episode->getDownloadByType('FHD')->getFileSize() ?? '' }}</p>
                    <p class="text-xs" id="downloadCount">Downloaded {{ $episode->getDownloadByType('FHD')->count }} times</p>
                </div>
            </button>
        </a>
    </div>
</div>

<script>
    var downloadCounter = 0;

    function submitCaptcha(captchaToken) {
        document.querySelector("#message").innerHTML = '';
        window.axios.post('/get-download', {
            episode_id: document.getElementById('e_id').value,
            captcha: captchaToken,
        }).then(function (response) {
            document.querySelector("#captcharequired").style.display = "none";
            document.querySelector("#captchsolved").style.display = "block";
            document.querySelector("#downloadEpisode").href = '{{ $dldomains[array_rand($dldomains)] }}/'+ response.data.download_url;
            document.querySelector("#downloadCount").innerText = 'Downloaded ' + response.data.download_count + ' times';
            downloadCounter = response.data.download_count;
        }).catch(function (error) {
            if (error.response.data.message == 'validation.captcha') {
                document.querySelector("#message").innerHTML = 'Captcha Incorrect!';
                reloadCaptcha();
            } else {
                document.querySelector("#message").innerHTML = error.response.data.message;
            }
        });
    }

    function increaseDownloadCounter() {
        downloadCounter += 1;
        document.querySelector("#downloadCount").innerText = 'Downloaded ' + downloadCounter + ' times';
    }

    document.querySelector("#downloadEpisode").addEventListener("click", increaseDownloadCounter);

    document.addEventListener("DOMContentLoaded", () => {
        const altcha = document.querySelector("#altcha");

        altcha.addEventListener("statechange", (ev) => {
            if (ev.detail.state === "verified") {
                submitCaptcha(ev.detail.payload);

                // Remove captcha from DOM
                altcha.remove();
            }
        });
    });
</script>
