<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Muat Turun</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js"
        integrity="sha512-+uTBQREQVLccPeGbB3Q0R5TC/1mfAoRg9fomTL3iOb+kpCCWS5WjMdM1dYE1e1dB/pxEi0Zc2VdFJcCT72QyuA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Open+Sans:800);

        .container-countdown {
            margin: auto;
            width: 400px;
        }

        .path--background {
            fill: rgb(34, 213, 201);
            stroke: #fff;
            stroke-width: 0px;
        }

        .pulse {
            fill: rgb(255, 74, 74) !important;
        }

        .path--foreground {
            fill: #eee;
            stroke: #eee;
            stroke-width: 2px;
        }

        .label {
            font: 90px "Open Sans";
            font-weight: 900;
            text-anchor: middle;
            fill: rgb(34, 213, 201);
        }


        h1 {
            font: "Open Sans";
            font-weight: 900;
            text-anchor: middle;
        }

        .container-page {
            display: flex;
            justify-content: center;
            align-items: center;
            /* for single line flex container */
            align-content: center;
            /* for multi-line flex container */
           height: 100vh;
        }
    </style>
</head>

<body>
    <div class="container-page">
        <div class="container-countdown"></div>
    </div>
    <script>
        var width = 400,
            height = 400,
            timePassed = 0,
            timeLimit = 15;

        var fields = [{
            value: timeLimit,
            size: timeLimit,
            update: function() {
                return timePassed = timePassed + 1;
            }
        }];

        var nilArc = d3.svg.arc()
            .innerRadius(width / 3 - 133)
            .outerRadius(width / 3 - 133)
            .startAngle(0)
            .endAngle(2 * Math.PI);

        var arc = d3.svg.arc()
            .innerRadius(width / 3 - 55)
            .outerRadius(width / 3 - 25)
            .startAngle(0)
            .endAngle(function(d) {
                return ((d.value / d.size) * 2 * Math.PI);
            });

        var svg = d3.select(".container-countdown").append("svg")
            .attr("width", width)
            .attr("height", height);

        var field = svg.selectAll(".field")
            .data(fields)
            .enter().append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
            .attr("class", "field");

        var back = field.append("path")
            .attr("class", "path path--background")
            .attr("d", arc);

        var path = field.append("path")
            .attr("class", "path path--foreground");

        var label = field.append("text")
            .attr("class", "label")
            .attr("dy", ".35em");

        addWaitingText();

        (function update() {

            field
                .each(function(d) {
                    d.previous = d.value, d.value = d.update(timePassed);
                });

            path.transition()
                .ease("elastic")
                .duration(500)
                .attrTween("d", arcTween);

            if ((timeLimit - timePassed) <= 10)
                pulseText();
            else
                label
                .text(function(d) {
                    return d.size - d.value;
                });

            if (timePassed <= timeLimit)
                setTimeout(update, 1000 - (timePassed % 1000));
            else{

                destroyTimer();
                destroyWaitingText();

                downloadMyKadDriver()
                    .then(() => redirectToPagePelanggan());

            }

        })();

        function pulseText() {
            back.classed("pulse", true);
            label.classed("pulse", true);

            if ((timeLimit - timePassed) >= 0) {
                label.style("font-size", "120px")
                    .attr("transform", "translate(0," + +4 + ")")
                    .text(function(d) {
                        return d.size - d.value;
                    });
            }

            label.transition()
                .ease("elastic")
                .duration(900)
                .style("font-size", "90px")
                .attr("transform", "translate(0," + -10 + ")");
        }

        function destroyTimer() {
            label.transition()
                .ease("back")
                .duration(700)
                .style("opacity", "0")
                .style("font-size", "5")
                .attr("transform", "translate(0," + -40 + ")")
                .each("end", function() {
                    field.selectAll("text").remove()
                });

            path.transition()
                .ease("back")
                .duration(700)
                .attr("d", nilArc);

            back.transition()
                .ease("back")
                .duration(700)
                .attr("d", nilArc)
                .each("end", function() {
                    field.selectAll("path").remove()
                });
        }

        function arcTween(b) {
            var i = d3.interpolate({
                value: b.previous
            }, b);
            return function(t) {
                return arc(i(t));
            };
        }

        function addWaitingText()
        {
            var waiting_text = document.createElement("h1");
            waiting_text.innerHTML= "sila tunggu sebentar ... "
            waiting_text.style.marginTop = "0px";
            waiting_text.style.textAlign = "center";
            document.querySelector("svg").after(waiting_text);

        }

        function destroyWaitingText()
        {
            var waiting_text = document.querySelector("h1");
            waiting_text.innerHTML= "";
        }

        let redirectToPagePelanggan = () => {
            let pelanggan_url = "{{ url('pelanggan') }}";
            window.location.href = pelanggan_url
        };

        function downloadMyKadDriver()
        {
            let download_driver_file_url = "{{ route('mykadreader.driver.download') }}";

            let downloadDriverFile = () => {
                return fetch(download_driver_file_url)
                    .then(response => response.blob())
                    .then(blob => {
                        const link = document.createElement("a");
                        link.href = URL.createObjectURL(blob);
                        link.download = 'MyKadReaderDriver.zip';
                        link.click();
                    })
                    .catch(e => console.log(e))
            };

            return downloadDriverFile();
        }

    </script>
</body>

</html>
