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

@section('content')
    <a href="{{ url('/employee')}}" class="nav-link font-weight-bold px-0 position-absolute ms-4 mt-4 text-dark h3">
        <i class="fa fa-arrow-left ms-sm-1"></i>
        <span class="d-sm-inline ms-2 d-none">Back</span>
    </a>
    <div class="container-fluid bg-s4s-color">
        <div class="row d-flex flex-column justify-content-end align-items-center min-vh-100">
            <div class="position-relative w-100">
                <div class="position-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="col-xl-4 col-lg-5 col-md-6 d-flex flex-column mx-auto">
              <div class="card card-plain pb-7 border-radius-2xl bg-white ms-n4 me-n4 border-radius-bottom-start-0 border-radius-bottom-end-0">
                <div class="card-header pb-0 text-left">
                  <h3 class="font-weight-bolder h2 text-s4s-color">Verify OTP</h3>
                  <p class="mb-0">Enter your OTP and click the 'Verify OTP' button to verify your OTP</p>
                </div>
                <div class="card-body">
                  <form role="form" id="login-form">
                    <input type="hidden" name="mobile_number" id="mobile_number" value="{{ $mobileNumber }}">
                    <label class="text-lg">OTP</label>
                    <div class="mb-0">
                      <input name="otp" id="otp" type="text" class="form-control" maxlength="4" placeholder="OTP" aria-label="OTP">
                    </div>
                    <div class="text-center">
                      <button id="login" type="submit" class="btn bg-s4s-color text-lg text-white w-100 mt-4 mb-0">Verify OTP</button>
                      <p class="text-sm mt-2">Did not receive OTP? 
                        <button id="resendOtp" disabled="true" type="button" class="btn btn-link text-s4s-color btn-sm mb-0 m-0 p-0 text-sm">
                            Resend OTP in
                            <span id="resend-otp-timer" class="font-weight-bolder"></span>
                        </button>
                    </p>
                    </div>
                  </form>
                </div>
                
              </div>
            </div>
        </div>
    </div>
@endsection

@section('custom-js')
    <script>
        $("document").ready(function() {
            $("#login-form").submit(function(e) {
                e.preventDefault();
                var otp = $("#otp").val();
                var mobile = $("#mobile_number").val();

                if (otp == '') {
                    alert('Please enter OTP');
                    return;
                }

                if (otp.length != 4) {
                    alert('Please enter valid mobile number');
                    return;
                }

                if (mobile == '') {
                    alert('Invalid URL. Please try again');
                    return;
                }

                $.ajax({
                    url: "{{ env('APP_URL') }}/api/employee/verify-otp",
                    method: "POST",
                    data: {
                        otp: otp,
                        mobile_number: mobile,
                        // _token: "{{ csrf_token() }}",
                        
                    },
                    success: function(response) {
                        if (response.success == 1) {
                            console.log(response);
                            // alert("OTP sent successfully");
                            Cookies.set('employee_mobile_number', mobile);
                            Cookies.set('employee_api_token', response.token);
                            window.location.href = "{{ env('APP_URL') }}/employee/dashboard";
                        } else {
                            alert(response.message);
                        }
                    },
                    error: function(response) {
                        alert(response.message);
                    }
                })
            });

            $("#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 == '') {
                    alert('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);
                            alert("OTP sent successfully");
                            window.location.href = "{{ env('APP_URL') }}/employee/verify-otp/" + mobile;
                        } else {
                            alert(response.message);
                        }
                    },
                    error: function(response) {
                        alert(response.message);
                    }
                })
            })
        });

        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