@extends('common.layout-empty')

@section('header')
    <style>
        .container { padding: 24px;   position: absolute;top: 40%;left: 50%;transform: translate(-50%, -40%);text-align: center;max-width: 600px;}
        .container .content { border-radius: 16px; background: #fff; padding: 24px;; }
        a { text-decoration: underline !important;}


        .icon img { max-width: 160px; width: 160px; margin-bottom: 40px;   }
        .title {margin: 0; color: var(--bs-gray-900); font-size: small; font-weight: 400; }

        .time-box { position: relative;}
        .time-box .timer{ color: red; position: absolute; top: 50% ; right: 16px; transform: translateY(-50%); font-size: 12px;;}
    </style>
@endsection

@section('content')

<div class="container">
    <h1 class="icon mb-3 font-weight-600">
        {{-- <img src="{{ env("AWS_S3_IMG_URL") }}/icon/forbidden.svg"> --}}
        Permission
    </h1>
    <div class="content">
        <ul class="list-item-none">
            <li class="mb-3">
                <div class="col-12 text-left mb-2 px-0 title">아이디</div>
                <div class="col-12">
                    <input type="text" name="id" id="id" value="" class="form-control" />
                </div>
            </li>
            <li class="row mx-0 px-0 mb-3">
                <div class="col-12 text-left mb-2 px-0 title">핸드폰</div>
                <div class="col-12 px-0">
                    <input type="text" name="phone" id="phone" value="" class="form-control number-only" maxlength="11" />
                </div>
            </li>
            <li class="row mx-0 px-0 mb-3 time-warp" style="display: none">
                <div class="col-12 text-left mb-2 px-0 title">인증번호입력</div>
                <div class="col-12 px-0 time-box">
                    <input type="text" name="number" value="" class="form-control number-only" maxlength="6" id="number"  />
                    <span class="timer">03:00</span>
                </div>
            </li>
        </ul>

        <div class="mt-3">
            <button class="btn w-100 btn-dark" onclick="onCertify()" id="btnSend">인증번호발송</button>
            <button class="btn w-100 btn-dark" onclick="onSubmit()" id="btnSubmit" style="display: none">제한해제</button>
        </div>
    </div>
</div>
@endsection

@push("script")
    <script>
        let nowTimer = 180;
        let timer
        let onTimer;
        let userId ;
        async function onCertify() {
            if ( $.isEmptyObject($('#id').val()) || $.isEmptyObject($('#phone').val())  ) {
                alert("아이디 & 핸드폰 번호를 모두 입력하세요");
                return false;
            }

            const result = await customFetch("/api/access/certify", {
                method: "POST",
                body : JSON.stringify({"id" : $('#id').val(), 'phone' : $('#phone').val()}) ,
                headers: { "Content-Type" : "application/json"}
            });

            if ( result.status ) {
                userId = result.userId;
                $('#id, #phone').prop("disabled", true);
                onStartTimer();
            } else {
                alert(result.message);
            }
        }

        const onStartTimer = () => {
            $('.time-warp, #btnSubmit').show();
            $('#btnSend').hide()

            onTimer = setInterval(() => {
                nowTimer --;
                if (nowTimer <= 0) {
                    onResetCertify();
                }
                const min = String(Math.floor(nowTimer/60)).padStart(2, "0");
                const sec = String(nowTimer%60).padStart(2,"0");

                $('.timer').text( min + ":" + sec);
            }, 1000);
        }

        function onResetCertify( ) {
            $('.time-warp, #btnSubmit').hide();
            $('#id, #phone').prop("disabled", false);
            $('#btnSend').show();

            nowTimer = 180;
            $('.timer').text( "03:00" );

            clearInterval(onTimer)
        }

        async function onSubmit() {
            if ( $.isEmptyObject($('#number').val())  ) {
                alert("인증번호를 입력하세요");
                return false;
            }

            const result = await customFetch("/api/access/lift", {
                method: "POST",
                body : JSON.stringify({ 'userId' : userId, "number": $('#number').val() }) ,
                headers: { "Content-Type" : "application/json"}
            });

            if ( result.status ) {
                location.href= "/"
            } else {
                alert("인증번호 불일치");
            }


        }
    </script>
@endpush