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

@section('content')
    <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">Login</h3>
                    <p class="mb-0">Enter your mobile number and click the 'Login' button to receive an OTP for login</p>
                    </div>
                    <div class="card-body">
                    <form role="form" id="login-form">
                        <label class="text-lg">Mobile Number</label>
                        <div class="mb-0">
                        <input name="mobile_number" id="mobile_number" type="text" class="form-control" placeholder="Mobile Number" aria-label="Mobile Number">
                        </div>
                        <div class="text-center">
                        <button id="login" type="submit" class="btn bg-s4s-color text-white text-lg w-100 mt-4 mb-0">Login</button>
                        </div>
                    </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

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

                if (mobile.length != 10) {
                    alert('Please enter valid 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);
                    }
                })
            });

            $("#mobile_number").keyup(function(e) {
                $(this).val($(this).val().replace(/[^0-9]/g,''));
            })
        });
    </script>
@endsection