@extends("app.layout.base")
@section("title")
    Vagttelefon
@endsection

@section("content")
    <main style="justify-content: unset">
        <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">{{__('msg.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" onclick="check()">
            <span class="toggle__label sde-blue">
                <span class="toggle__text sde-blue semi-bold">{{__('msg.accepter')}}</span>
            </span>
        </label>
        <span class="text-center sde-black-20 mt-2" style="margin-top: auto;">+45 24 62 94 50</span>
        <a class="btn text-center btn-sde-blue btn-disabled" style="margin-bottom: 8px;" id="call">{{__('msg.ring')}}</a>
    </main>
@endsection

@section("scripts")
    <script>
        function check() {
            var checkBox = document.getElementById("input");
            var btn = document.getElementById("call");
            if (checkBox.checked == true){
                btn.href = "";
                btn.classList.remove("btn-disabled");
            } else {
                btn.href = "tel:+4556304566";
                btn.classList.add("btn-disabled");
            }
        }
    </script>
@endsection