timer

{{ if $data->isAdmin }}
    <div class="side-by-side voting-session-single-wrapper">

        <div class="title-wrapper">

            <div class="secondary-title">
                <div id="timerVotingSession"></div>
                <div class="secondary-title-name header-bg">
                    <p class="header-text-primary">
                        <b>{{$data->currentVotingSession->name}}</b>
                    </p>
                    <p class="header-text-secondary">
                        од
                    </p>
                    <p class="header-text-primary">
                        {{$data->currentVotingSession->date}}h
                    </p>
                </div>
            </div>

                {{ $data->votingSessionTable }}
                <div class="test-component"></div>
                <div class="timer-component"></div>

        </div>


        <div class="actual-wrapper">
            <div class="agenda_item_form_wrapper display_none">
                {{ $data->agendaItemForm }}
            </div>
            <div class="secondary-title header-bg">
                {{ _("dnevni_red_pokreni_glasanje", "vote", "Дневни редови за Актуелну Седницу") }}
            </div>
            <div>
                {{ $data->agenda }}
            </div>
        </div>
    </div>


    <script>

        $(document).ready(function() {
            var url = new URL(window.location.href);

            if (url.searchParams.get('openForm')) {
                $('.agenda_item_form_wrapper').toggle('display_none');
            }
            if (url.searchParams.get('internal')) {
                $('.agenda_item_form_wrapper').toggle('display_none');
            }
        });

        // $('.add-agenda-item').on('click', function() {
        //     $('.agenda_item_form_wrapper').toggle('display_none');
        // });
    </script>
{{ if $data->currentVotingSession->started }}
{{ if $data->currentVotingSession->ended }}
{{ else }}
<script>

    function convertTZ(date, tzString) {
        return new Date((typeof date === "string" ? new Date(date) : date).toLocaleString("en-US", {timeZone: tzString}));
    }

    (function () {
        console.log('dada');
        var t1 = new Date("{{ $data->currentVotingSession->started }}");
        t1 = convertTZ(t1, "Europe/Belgrade")
        var t2 = new Date();
        t2 = convertTZ(t2, "Europe/Belgrade")

        var dif = (t2 - t1) / 1000;
        console.log(dif, 'diff')
        var timerVar = setInterval(countTimer, 1000);
        var totalSeconds =  Math.round(dif) ? Math.round(dif) : 0;
        console.log(totalSeconds, 'totalSeconds');

        function countTimer() {
            ++totalSeconds;
            var hour = Math.floor(totalSeconds / 3600);
            var minute = Math.floor((totalSeconds - hour * 3600) / 60);
            var seconds = totalSeconds - (hour * 3600 + minute * 60);
            if (hour < 10)
                hour = "0" + hour;
            if (minute < 10)
                minute = "0" + minute;
            if (seconds < 10)
                seconds = "0" + seconds;
            document.getElementById("timerVotingSession").innerHTML = hour + ":" + minute + ":" + seconds;
        }
    })();


</script>
{{ endif }}
{{ endif }}
<style>
    .main-content-header {
        background-color: #859fbb;
        color: white;
        font-size: 16px;
        height: 55px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* flex-direction: column; */
        padding: 0 20px;
        position: relative;
    }
    #timerVotingSession {
        position: absolute;
        left: 10px;
        color: white;
    }
    .section-center-p {
        color: #1b223c;
        font-weight: 500;
        padding: 1rem;
        vertical-align: top;
        border-top: 1px solid #dee2e6;
        text-align: center;
    }
</style>
{{ endif }}

<style>
    .actual-wrapper{

    }
</style>