@extends('layouts.app')

@section('title', 'index')

@section('content')

<style>
.rupee-symbol{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    font-size:16px;
    font-weight:600;
    color:#555;
    z-index:2;
}
.error-message{
    color:#dc3545;
    font-size:13px;
    margin-top:5px;
}

.success-message{
    color:#198754;
    font-size:14px;
    margin-top:10px;
    font-weight:500;
}

.loading-message{
    color:#0d6efd;
    font-size:14px;
    margin-top:10px;
    font-weight:500;
}

.input-error{
    border:1px solid #dc3545 !important;
}

.step-message{
    margin-top:15px;
}

.custom-card{
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #d8d8d8;
    background: #fff;
    padding: 0px;
}

/* Header */
.card-top{
    background:#f8f9ff;
    padding:40px 40px;
}

.icon-box{
    width:58px;
    height:58px;
    background:#c7f1db;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.icon-box i{
    font-size:28px;
    color:#063d2e;
}

.card-top .title{
    font-size:22px;
    font-weight:700;
    color:#152238;
}

.card-top .subtitle{
    color:#6f767d;
    font-size:16px;
}

.card-content{
    padding:40px 40px;
}

.form-label{
    font-size:16px;
    font-weight:600;
    margin-bottom:12px;
}

.field-wrapper{
    border:1px solid #d8ddd9;
    border-radius:12px;
    overflow:hidden;
    height:55px;
}

.country-code{
    width:80px;
    background:#fff;
    border-right:1px solid #d8ddd9;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    color:#666;
}

.input-field{
    border:none;
    box-shadow:none !important;
    font-size:18px;
}

.info-text{
    color:#707070;
    margin-top:10px;
    font-size:12px;
}

.terms-box{
    background:#eff4ff;
    border-radius:12px;
    padding:18px;
    margin-top:28px;
    font-size: 14px
}

.terms-box a{
    text-decoration:none;
    font-weight:600;
    color:#143f2e;
}
/* Footer */
.card-footer-area{
    background:#eff4ff;
    padding:35px 60px;
}

.verify-btn{
    background:#004c3a;
    border:none;
    width:150px;
    height:55px;
    border-radius:12px;
    font-size:18px;
    font-weight:600;
}

.verify-btn:hover{
    background:#01372a;
}

.input-error {
    border-radius: 0px 12px 12px 0px;
}

@media(max-width:768px){

    .card-top,
    .card-content,
    .card-footer-area{
        padding:25px;
    }
    
    .verify-btn{
        width:100%;
    }

}

@media(max-width:576px){

    .card-top,
    .card-content,
    .card-footer-area{
        padding:25px 15px;
    }
    .terms-box{
        font-size: 14px
    }
    
    .verify-btn{
        width:100%;
    }

}

</style>

<article>
    <section class="container-fluid p-0">
        <div class="row g-0">

            <!-- Sidebar -->
            <aside class=" col-12 col-xl-3 col-lg-4 col-md-5 sidebar-container d-none d-lg-block">

                <!-- Top Content -->
                <div>
                    <h2 class="loan-title">
                      Check your loan application status
                    </h2>
    
                    <!-- Steps -->
                    <div class="steps-wrapper mt-4 pt-3">
                        <div class="step-item active" id="stepNav1">
                            <div class="step-description">
                                Verify your loans application status
                            </div>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- Main Content -->
            <main class="col-12 col-xl-9 col-lg-8 col-md-12 main-content px-1 px-md-3">
                <div class="row justify-content-center mx-0">
                    <div class="col-12 col-lg-8 col-xl-10 px-1 px-md-3">
                        
                         <h2 class="loan-title d-block d-lg-none mb-3">
                          Check your loan application status
                        </h2> 
                    
                        <div class="custom-card">
                            <div class="form-step active" id="step1">
                                
                                <div class="card-top">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="icon-box">
                                            <i class="fa-solid fa-arrow-right-to-bracket"></i>
                                        </div>
                            
                                        <div>
                                            <div class="title">Login</div>
                                            <div class="subtitle">
                                                Enter your registered mobile number
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="card-content">
                                    <label class="form-label">
                                        Phone Number *
                                    </label>
                            
                                    <div class="d-flex field-wrapper">
                                        <div class="country-code">
                                            +91
                                        </div>
                                        <input type="tel" class="form-control input-field" id="phone" placeholder="Please Enter your mobile number registered with Kapston">
                                    </div>
                            
                                    <div class="info-text">
                                        <i class="bi bi-info-circle"></i>
                                        An OTP will be sent for verification
                                    </div>
                                    
                                    <div class="row mt-4 d-none otpSection" id="otpSection">
                                        <div class="col-md-6">
                                            <label>Enter OTP</label>
                                            <input type="text" class="form-control" id="otp" placeholder="Enter OTP">
                                    
                                            <small class="text-success">
                                                Static OTP: 1234
                                            </small>
                                        </div>
                                    
                                        <div class="col-md-6 d-flex align-items-end">
                                    
                                        </div>
                                    </div>
        
                                        <!--<div class="col-md-6">-->
                                        <!--    <label class="mb-2">Email Address (Optional)</label>-->
            
                                        <!--    <input type="email" id="email" class="form-control" placeholder="Enter email address">-->
                                        <!--</div>-->
                                    
                                    <div id="step1Message" class="step-message"></div>
                                    <div id="otpMessage" class="step-message"></div>
                            
                                    <div class="terms-box d-flex align-items-start gap-3">
                                        <input class="form-check-input mt-1" type="checkbox">
                                        <div>
                                            By proceeding, you agree with our
                                            <a href="{{ url('help-center') }}">Terms &amp; Conditions</a>
                                            &amp;
                                            <a href="{{ url('help-center') }}">Privacy Policy</a>.
                                            We will use this number to send important updates regarding your loan status.
                                        </div>
                            
                                    </div>
                            
                                </div>
                                
                                <!-- Footer -->
                                <div class="card-footer-area d-flex justify-content-end">
                                    <button type="button" class="btn-primary-custom d-none otpSection"  onclick="verifyOtp()">
                                        Verify & Continue
                                    </button>
                                    <button type="button" class="btn-primary-custom" id="verifyNumberBtn" onclick="verifyUser()">Verify <i class="bi bi-arrow-right ms-2"></i></button>
                            
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </section>
</article>



<div id="globalLoader">

    <div class="loader-content">

        <i class="fa fa-spinner fa-spin"></i>

        <p id="loaderText">Processing...</p>

    </div>

</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>

$(document).ready(function () {

    /*
    |--------------------------------------------------------------------------
    | INITIAL STEP LOCK
    |--------------------------------------------------------------------------
    */

    $('.step-item').each(function(index){

        if(index !== 0){

            $(this).addClass('locked d-none');
        }
    });

});


function showLoader(message='Processing...'){

    $('#loaderText').text(message);

    $('#globalLoader').css('display','flex');
}

function hideLoader(){

    $('#globalLoader').hide();
}

function clearValidationErrors(){

    $('.error-message').remove();

    $('.input-error').removeClass('input-error');

    $('.step-message').html('');
}

function showInputError(inputId, message){

    $('#' + inputId).addClass('input-error');

    if($('#' + inputId).next('.error-message').length == 0){

        $('#' + inputId).after(
            '<div class="error-message">'+message+'</div>'
        );
    }
}

function showStepMessage(type, message, target){

    let className = '';

    if(type == 'success'){
        className = 'success-message';
    }

    if(type == 'error'){
        className = 'error-message';
    }

    if(type == 'loading'){
        className = 'loading-message';
    }

    $(target).html(
        '<div class="'+className+'">'+message+'</div>'
    );
}

/*
|--------------------------------------------------------------------------
| GO TO STEP
|--------------------------------------------------------------------------
*/

function goToStep(stepNumber) {

    $('.form-step').removeClass('active');

    $('#step' + stepNumber).addClass('active');

    $('.step-item').removeClass('active');

    $('.step-item').eq(stepNumber - 1)
        .addClass('active');

    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}

/*
|--------------------------------------------------------------------------
| UNLOCK STEP
|--------------------------------------------------------------------------
*/

function unlockStep(stepNumber){

    $('.step-item').eq(stepNumber - 1)
        .removeClass('locked d-none');
}

/*
|--------------------------------------------------------------------------
| PREVIOUS STEP
|--------------------------------------------------------------------------
*/

function prevStep(stepNumber){

    goToStep(stepNumber - 1);
}

/*
|--------------------------------------------------------------------------
| SIDEBAR CLICK
|--------------------------------------------------------------------------
*/

$('.step-item').click(function () {

    if($(this).hasClass('locked')){

        return false;
    }

    let index = $(this).index() + 1;

    goToStep(index);
});

/*
|--------------------------------------------------------------------------
| STEP 1 VERIFY USER
|--------------------------------------------------------------------------
*/
function verifyUser() {

    clearValidationErrors();

    let phone = $('#phone').val();

    if(phone == ''){

        showInputError(
            'phone',
            'Please enter phone number'
        );

        return;
    }

    if(phone.length != 10){

        showInputError(
            'phone',
            'Phone number must be 10 digits'
        );

        return;
    }

    showLoader('Verifying...');

    showStepMessage(
        'loading',
        'Verifying... Please wait',
        '#step1Message'
    );

    $.ajax({

        url: "{{ url('loan-verify-number') }}",

        type: "POST",

        data: {

            _token: "{{ csrf_token() }}",

            phone: $('#phone').val()
        },

        success: function(response) {

            hideLoader();

            if(response.status){

                $('.otpSection').removeClass('d-none');

                $('#verifyNumberBtn').hide();

                showStepMessage(
                    'success',
                    'OTP Sent Successfully.',
                    '#step1Message'
                );

            } else {

                showStepMessage(
                    'error',
                    response.message,
                    '#step1Message'
                );
            }
        },

        error: function(xhr){

            hideLoader();

            console.log(xhr.responseText);

            showStepMessage(
                'error',
                'Something went wrong',
                '#step1Message'
            );
        }
    });
}

/*
|--------------------------------------------------------------------------
| VERIFY OTP
|--------------------------------------------------------------------------
*/
function verifyOtp() {

    clearValidationErrors();

    let otp = $('#otp').val().trim();

    let phone = $('#phone').val().trim();

    if (otp == '') {

        showInputError(
            'otp',
            'Please enter OTP'
        );

        return;
    }

    showLoader('Verifying OTP...');

    showStepMessage(
        'loading',
        'Verifying OTP... Please wait',
        '#otpMessage'
    );

    $.ajax({

        url: "{{ url('verify-loan-otp') }}",

        type: "POST",

        dataType: "json",

        data: {

            _token: "{{ csrf_token() }}",

            otp: otp,

            phone: phone
        },

        success: function(response) {

            hideLoader();

            console.log(response);

            if (response.status === true) {

                showStepMessage(
                    'success',
                    response.message ??
                    'Login successful',
                    '#otpMessage'
                );

                setTimeout(function () {

                    window.location.href =
                        response.redirect_url;

                }, 400);

            } else {

                showStepMessage(
                    'error',
                    response.message ??
                    'Invalid OTP',
                    '#otpMessage'
                );
            }
        },

        error: function(xhr) {

            hideLoader();

            console.log(xhr.responseText);

            let errorMessage =
                'Something went wrong';

            if (xhr.responseJSON &&
                xhr.responseJSON.message) {

                errorMessage =
                    xhr.responseJSON.message;
            }

            showStepMessage(
                'error',
                errorMessage,
                '#otpMessage'
            );
        }
    });
}


</script>
<script>
    function showInputError(inputId, message){

        let input = $('#' + inputId);
    
        input.addClass('input-error');
    
        let wrapper = input.closest('.field-wrapper');
    
        if(wrapper.next('.error-message').length === 0){
            wrapper.after(
                '<div class="error-message">' + message + '</div>'
            );
        }
    }
</script>




@endsection
