@extends('layouts.front')

@section('content')
<script src="https://cdn.tailwindcss.com"></script>

<div class="flex min-h-screen relative">
    <!-- Left side with the image -->
    <div class="w-1/2 bg-cover bg-center z-0" style="background-image: url('{{ asset('images/loginpage_bg.jpeg') }}');">
        <!-- Image as a background -->
    </div>

    <!-- Right side with the login form -->
    <div class="w-full md:w-1/2 flex flex-col justify-center items-center bg-white relative z-10">
        <div class="w-full md:w-10/12 mx-auto px-8 grid">
            <div class="text-center mb-6">
                <a href="#">
              
                        <img src="{{asset('images/fpos.png')}}" alt="Logo" class="h-24 mx-auto">
                 
                </a>
            </div>

            <div class="bg-white p-8 md:w-10/12 rounded-lg shadow-md justify-self-center">
                <p class="text-center text-gray-700 mb-6">{{__('Sign in to start your session')}}</p>
                @if (count($errors) > 0)
                    <div class="bg-red-100 text-red-700 p-4 rounded mb-4">
                        <strong>Whoops!</strong> {{__('There were some problems with your input.')}}<br><br>
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form id="otpRequest" class="flex items-center gap-2">
                    <div class="flex-1">
                        <label for="otpIdentifier" class="form-label">Email or Phone</label>
                        <input type="text" id="otpIdentifier" name="identifier" class="form-control" required>
                    </div>
                    <button type="submit" class="btn btn-warning  self-end" id="send_otp">Send OTP</button>
                </form>

                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <label class="inline-flex items-center">
                                <input type="checkbox" name="remember" class="form-checkbox text-blue-600">
                                <span class="ml-2 text-gray-700">{{__('Remember Me')}}</span>
                            </label>
                        </div>
                  
                      
                    </div>
                
               

                    <form id="otpLogin">
                        <div class="mb-4">
                            <label for="otp" class="form-label">Enter OTP</label>
                            <div class="flex items-center gap-3">
                                <input type="text" id="otp" name="otp" class="form-control w-full" required>
                                <input type="hidden" id="otpIdentifierHidden" name="identifier"> <!-- Hidden field to store identifier -->

                                <span id="otpTimer" class="text-red-600 font-bold text-lg">00:00</span>
                            </div>
                        </div>
                    
                        <div class="flex justify-center">
                            <button type="submit" class="btn btn-success w-100">Login</button>
                        </div>
                    </form>
                    


                {{-- <div class="login-box">
                    <div class="text-center">
                      <a href="javascript:;" class="btn btn-success" onclick="onClickLogin('admin@flexibleit.net', 'login_form')"><b>Admin:</b> <b>User:</b> admin@flexibleit.net <b>Pass:</b> password</a>
                      <!-- <a href="javascript:;" class="btn btn-primary" onclick="onClickLogin('salesman@flexibleit.net', 'login_form')"><b>Salesman:</b> <b>User:</b> salesman@flexibleit.net <b>Pass:</b> password</a> -->
                      <!-- <a href="javascript:;" class="btn btn-info" onclick="onClickLogin('account@flexibleit.net', 'login_form')"><b>Account:</b> <b>User:</b> account@flexibleit.net <b>Pass:</b> password</a> -->
                    </div>
                  </div> --}}

         
                


                  
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    // Optional iCheck initialization, adjust if you use a different style for checkboxes.
    function onClickLogin(email, formid) {
        $("#email").val(email);
        $("#password").val('password');
        $("#loginSubmit").text('Loading...');
        $("#"+formid).submit();
    }
</script>

<script>
    $(document).ready(function() {
        // Hide OTP login initially
        
        $("#otpLogin").hide();
    
        // Request OTP
        $("#otpRequest").submit(function(e) {
            $('body').addClass('ajax-on');
            e.preventDefault();
            let identifier = $("#otpIdentifier").val();

            if (!isValidIdentifier(identifier)) {
 
        $.notify("Please enter a valid email or phone number (starting with 254).", 'error');
        return;
    }

      // Convert phone number to start with 254 if necessary
      if (isPhoneNumber(identifier)) {
        identifier = formatPhoneNumber(identifier);
    }

            $("#send_otp").prop("disabled", true).text("Sending...");

            $.ajax({
                url: "Backoffice/login/otp/send",
                method: "POST",
                data: { identifier: identifier },
                headers: { "X-CSRF-TOKEN": "{{ csrf_token() }}" },
                success: function(response) {
                   // alert(response.message); // Replace with SweetAlert if needed
                    $.notify(response.message, 'success');
                    
                    $("#otpLogin").slideDown(); // Show OTP form
                    $('body').removeClass('ajax-on');
                    $("#otpIdentifierHidden").val(identifier); // Store identifier for login

                    if (response.otp_expiry_time) {
        const expiryTime = new Date(response.otp_expiry_time).getTime(); // Convert to timestamp
        startOtpTimer(expiryTime);
    }


                },
                error: function(error) {
                  //  alert(error.responseJSON.message);
                    $.notify(error.responseJSON.message, 'error');
                    $('body').removeClass('ajax-on');
                    $("#send_otp").prop("disabled", false).text("Send OTP");

                }
            });
        });
    
        // Login with OTP
        $("#otpLogin").submit(function(e) {
            e.preventDefault();
            $('body').addClass('ajax-on');
            $.ajax({
                url: "Backoffice/login/otp",
                method: "POST",
                data: $(this).serialize(),
                headers: { "X-CSRF-TOKEN": "{{ csrf_token() }}" },
                success: function(response) {
                 //   alert(response.message);
                    $.notify(response.message, 'success');
                    $('body').removeClass('ajax-on');
                    window.location.href = "/Backoffice"; // Redirect on success
                },
                error: function(error) {
                  //  alert(error.responseJSON.message);
                    $.notify(error.responseJSON.message, 'error');
                    $('body').removeClass('ajax-on');

                }
            });
        });
    });



    let otpTimer;

function startOtpTimer(expiryTimestamp) {
    clearInterval(otpTimer); // Clear any existing timer

    otpTimer = setInterval(function () {
        const now = new Date().getTime();
        let timeLeft = Math.floor((expiryTimestamp - now) / 1000); // in seconds

        if (timeLeft <= 0) {
            clearInterval(otpTimer);
            $("#otpTimer").text("Expired").addClass("text-gray-500 text-xl");
            $("#send_otp").prop("disabled", false).text("Send OTP");
        } else {
            updateTimerDisplay(timeLeft);
        }
    }, 1000);
}

function updateTimerDisplay(timeLeft) {
    let minutes = Math.floor(timeLeft / 60);
    let seconds = timeLeft % 60;
    $("#otpTimer").text(`${minutes}:${seconds < 10 ? '0' : ''}${seconds}`)
        .removeClass("text-gray-500")
        .addClass("text-red-600 font-bold text-lg");
}





// Function to check if it's a valid phone number or email
function isValidIdentifier(identifier) {
    return isEmail(identifier) || isPhoneNumber(identifier);
}

// Function to check if it's a valid email
function isEmail(identifier) {
    let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return emailPattern.test(identifier);
}

// Function to check if it's a phone number
function isPhoneNumber(identifier) {
    let phonePattern = /^(?:\+?254|0)?[17]\d{8}$/; // Matches +2547xxxxxxx, 07xxxxxxx, or 1xxxxxxxx
    return phonePattern.test(identifier);
}

// Function to format phone number to start with 254
function formatPhoneNumber(phone) {
    phone = phone.replace(/[^0-9]/g, ""); // Remove non-numeric characters
    if (phone.startsWith("0")) {
        return "254" + phone.substring(1);
    }
    if (!phone.startsWith("254")) {
        return "254" + phone;
    }
    return phone;
}


    </script>
    
@endsection