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

@section("content")
    <main class="justify-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 mb-0">Den kan bruges i dagtimerne til almindelig kontakt om ting vedrørende kollegiet.</p>
        <p class="mt-0">(Det er også det nummer div. kontaktpersoner og vejledere ringer på)</p>
        <p class="mt-0 mb-0">Ellers kan Vagttelefonen kontaktes, af eleverne, ”efter lukketid” dvs. 22.30 til 07.00.</p>
        <p class="mt-0">I det tidsrum har nattevagten den på sig.</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-auto">+45 24 62 94 50</span>
        <a class="btn text-center btn-sde-blue btn-disabled mb-1" 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 = "tel:+4524629450";
                btn.classList.remove("btn-disabled");
            } else {
                btn.href = "";
                btn.classList.add("btn-disabled");
            }
        }
    </script>
@endsection