@extends("webapp.layout.base")
@extends("webapp.layout.header")
@section("title")
    Menuplan
@endsection

@section("content")
    <main>
        <img class="mt-3" src="{{ URL::asset('/images/icons/Vagttelefon-normal.svg') }}" alt="Vagttelefon" style="height: 16vw;">
        <h1 class="text-center sde-blue mt-0">Vagttelefon</h1>
        <p class="mt-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales pulvinar congue aenean suspendisse.</p>
        <label class="toggle">
            <input class="toggle__input" type="checkbox" name="accept" id="input">
            <span class="toggle__label sde-blue">
                <span class="toggle__text sde-blue semi-bold">Accepterer</span>
            </span>
        </label>
        <span class="text-center sde-black-20 mt-2">+45 56 30 45 66</span>
        <a class="btn text-center btn-sde-blue btn-disabled" id="call">Tilkald</a>
    </main>
@endsection

@section("scripts")
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function(){
            // Handler when the DOM is fully loaded
            start();
        });

        function start() {
            document.getElementById('input').addEventListener ('click', toggleCall, false);
        }

        function toggleCall() {
            var elm = document.getElementById('input');

            if(elm.checked) {
                document.getElementById('call').classList.remove("btn-disabled");
                document.getElementById('call').href = "tel:+4556304566";
            }
            else
            {
                document.getElementById('call').classList.add("btn-disabled");
                document.getElementById('call').removeAttribute("href");
            }
        }
    </script>
@endsection