@extends('pwa::layouts.master')

@section('content')
    <div id="nd-offline-page" class="hidden"></div>
    <a href="{{ env('APP_URL')}}/pwa" class="font-bold px-0 absolute ms-4 mt-8">
        <svg class="fill-gray-600 h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m368-417 202 202-90 89-354-354 354-354 90 89-202 202h466v126H368Z"/></svg>
        <span class="d-sm-inline ms-2 hidden">Back</span>
    </a>
    <div class="px-[1.5rem] mx-auto w-full bg-s4s-color">
        <div class="flex flex-col justify-end items-center min-h-screen">
            <div class="relative w-full">
                <div class="absolute logo-position">
                    <img class="logo-height-width" src="{{ asset('assets/img/s4s-logo.png') }}" alt="S4S Logo">
                    <div class="logo-overlay"></div>
                </div>    
            </div>
            <div class="flex flex-col mx-auto w-full">
              <div class="rounded-t-2xl pb-[6rem] bg-white -mx-[1.5rem] border-radius-bottom-start-0 border-radius-bottom-end-0">
                <div class="rounded-t-2xl p-[1.5rem] pb-0 text-left">
                  <h3 class="text-s4s-color text-3xl font-extrabold mb-2">Verify OTP</h3>
                  <p class="mb-0 leading-[1.625] text-[1rem] font-normal text-[#67748e]">Enter your OTP and click the 'Verify OTP' button to verify your OTP</p>
                </div>
                <div class="p-[1.5rem]">
                  <form role="form" id="login-form">
                    <input type="hidden" name="mobile_number" id="mobile_number" value="{{ $mobileNumber }}">
                    <label class="text-lg font-bold">OTP</label>
                    <div class="mb-0 mt-2">
                      <input name="otp" id="otp" type="text" class="form-control" maxlength="4" placeholder="OTP" aria-label="OTP" autocomplete="off">
                    </div>
                    <div class="text-center">
                      <button id="login" type="submit" class="bg-s4s-color text-white text-lg w-full mt-6 mb-0 rounded-lg font-bold leading-[1.4] align-middle text-center py-3 px-6 transition transform duration-150 ease-in-out active:scale-95 active:brightness-90 hover:brightness-105 focus:outline-none focus:ring-2 focus:ring-s4s-color/50">Verify OTP</button>
                      <p class="text-sm mt-2">Did not receive OTP? 
                        <button id="resendOtp" disabled="true" type="button" class="text-s4s-color uppercase font-bold transition transform duration-150 ease-in-out active:scale-95 active:brightness-90 hover:brightness-105 focus:outline-none focus:ring-2 focus:ring-s4s-color/50">
                            Resend OTP in
                            <span id="resend-otp-timer" class="font-extrabold"></span>
                        </button>
                    </p>
                    </div>
                  </form>
                </div>
                
              </div>
            </div>
        </div>
    </div>
@endsection

@section('custom-js')
    <script>
        $("document").ready(function() {
            $("#login-form").submit(async function(e) {
                e.preventDefault();

                $("#login").addClass("opacity-50 cursor-not-allowed").attr("disabled", "disabled");

                var otp = $("#otp").val();
                var mobile = $("#mobile_number").val();

                if (otp == '') {
                    $("#login").removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
                    showToast('Please enter OTP');
                    return;
                }

                if (otp.length != 4) {
                    $("#login").removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
                    showToast('Please enter valid mobile number');
                    return;
                }

                if (mobile == '') {
                    $("#login").removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
                    showToast('Invalid URL. Please try again');
                    return;
                }

                const getFCMToken = await storeGetDataById("sessionStore", 2);

                $.ajax({
                    url: "{{ env('APP_URL') }}/api/employee/verify-otp",
                    method: "POST",
                    data: {
                        otp: otp,
                        mobile_number: mobile,
                        fcm_token: getFCMToken?.fcm_token || "1234567890",
                        os: "ios",
                        app_version: "1.0.0"
                    },
                    success: async function(response) {
                        if (response.success == 1) {
                            // console.log(response);
                            // showToast("OTP sent successfully");
                            Cookies.set('employee_mobile_number', mobile);
                            Cookies.set('employee_api_token', response.token);
                            await storeInsertNewRow("sessionStore", {
                                id: 1,
                                "emp_id": response?.emp_id || '',
                                "name": response?.name || '',
                                "passport_size_photo": response?.passport_size_photo || '',
                                "designation": response?.designation || '',
                                "department": response?.department || '',
                                "email": response?.email || '',
                                "mobile_number": response?.mobile_number || '',
                                "token": response?.token || '',
                            });
                            window.location.href = "{{ env('APP_URL') }}/pwa/dashboard";
                        } else {
                            showToast(response.message);
                            $("#login").removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
                        }
                    },
                    error: function(response) {
                        showToast(response.message || "Please provide correct OTP");
                        $("#login").removeClass("opacity-50 cursor-not-allowed").removeAttr("disabled");
                    }
                })
            });

            $("#otp").keyup(function(e) {
                $(this).val($(this).val().replace(/[^0-9]/g,''));
            })

            $("#resendOtp").click(function(e) {
                e.preventDefault();
                var mobile = $("#mobile_number").val();

                if (mobile == '') {
                    showToast('Please enter mobile number');
                    return;
                }

                $.ajax({
                    url: "{{ env('APP_URL') }}/api/employee/get-otp",
                    method: "POST",
                    data: {
                        mobile_number: mobile,
                        
                    },
                    success: function(response) {   
                        if (response.success == 1) {
                            // console.log(response);
                            showToast("OTP sent successfully");
                            setTimeout(() => {
                                window.location.href = "{{ env('APP_URL') }}/pwa/verify-otp/" + mobile;
                            }, 3000);
                        } else {
                            showToast(response.message);
                        }
                    },
                    error: function(response) {
                        showToast("Please try again");
                    }
                })
            })
        });

        var timer = 60;
        var resendOtpInterval = setInterval(function() {
            $('#resend-otp-timer').text(timer + 's');
            timer--;
            if (timer < 0) {
                clearInterval(resendOtpInterval);
                $('#resendOtp').prop('disabled', false).text('Resend OTP');
                $('#resend-otp-timer').text('');
            }
        }, 1000);
    </script>
@endsection