@extends($theme.'.layouts.loginpage')
@section('content')
<a class="scroll-top-arrow" href="javascript:void(0);"><i class="fa fa-angle-up"></i></a>
<div class="loader1">
    <div class="loader-inner">
        <div id="preloader">
            <div id="loader"></div>
        </div>
    </div>
</div>
<div class="image-container">
    <div class="images">
        <img class="images-1" src="deena/assets/img/banners/Frame 9.png">
    </div>
    <div class="align">
        <div class="log-box">
            <div class="top_img">
            <img src="{{ url($theme."/assets/img/deena-logo.png") }}" alt="img">
                <div class="font_s">
                    <p>Your One Stop For All Uniform Needs</p>
                </div>
            </div>
            <form class="cd-form wow fadeIn animated animated" id="otp_form" data-wow-delay="40ms" data-wow-duration="1500ms">
                <div class="text_2">
                    <h4 style="font-size:22px;">Please provide your mobile number</h4>
                </div>
                <div class="text_3">
                    <p>Please provide your mobile number</p>
                </div>
                <p class="fieldset pb-3">
                
                    <input type="number" name='mobile_number' id='mobile_number_1' required class="full-width has-padding has-border" placeholder="Enter Mobile Number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==10) return false;"></p>
                    <span class="cd-error-message">Error message here!</span>
                </p>
                <p class="fieldset mb-5">
                    <input class="full-width has-padding has-border" name="otp" id="otp " type="text"  placeholder="Enter OTP">
                    <a href="#0" class="hide-password1" id="send_otp" onclick="sendOtp()">Send Otp</a>
                    <a href="#0" class="hide-password1" id="resend_otp" onclick="resend_Otp()" style="display: none;">Resend Otp</a>
                    <span class="cd-error-message">Error message here!</span>
                </p>
                <p class="fieldset">
                    <input class="full-width" type="submit" id="login_btn" value="Login">
                </p>
            </form>

        </div>

    </div>
</div>
@endsection

<style>






@media only screen and (max-width:768px){
    .images, .images-1{
        margin-top: 27px;
        display:none;
    }
    .align {
    top: 125px !important;
    left: 0px !important;
    position: relative !important;
    transform: translate(0px, 0px) !important;
    margin-top: 20px;
    }
    .log-box {
    width: 100% !important;
    margin: 0px 10px;
    height: auto !important;
    }
    .cd-form{
        padding:0px 15px !important;
    }
    .top_img {
    padding-top: 15px !important;
    }
    .font_s {
    font-size: 16px !important;
    }
    .text_2 {
        display:none !important;
    }
    .text_3{
    padding: 10px 25px;
    font-size: 18px;
    font-weight: 500;
    display:block !important;
    }

}





html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden; 
    }

.images-1 {
    width: 100%;
    height: 90%;
}
.images {
    position: relative;
    width: 100%;
    height: auto;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 2px;
}
.log-box
{
    border: 1px solid white;
    width: 650px;
    height: 550px;
    background:rgb(255, 255, 255);
    box-shadow:0px 0px 5px;
}
.top_img {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 45px;
}
.font_s {
    font-size: 22px;
    font-family: sans-serif;
    font-weight: 400;
    padding: 13px;
}

.text_2 {
    display: flex;
    justify-content: center;
    padding: 10px 0px 20px 0px;
}
.image-container {
    position: relative;
}
.image-container img {
    object-fit: cover;
}
.align {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.text_3{
    display:none;
}
</style>

<script src="{{ URL::asset($theme.'/assets/js/vendor/jquery-3.4.1.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset($theme.'/assets/js/toastr.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset($theme.'/assets/js/slick.min.js') }}"></script>

<script type="text/javascript">

$(document).on('click','.login_to_checkout',function (e) {
    $('#cart_btn').trigger('click');
});

function sendOtp() {
    // e.preventDefault();
    var token, url, data;
    // alert('dsf');
    mobile_number = $('#mobile_number_1').val();
    data = {'mobile_number' : mobile_number}
    token = $('meta[name="csrf-token"]').attr('content');
    url = "{{ route('customer.signin') }}";
    $.ajax({
        url: url,
        headers: {
            'X-CSRF-TOKEN': token
        },
        data: data,
        type: 'POST',
        datatype: 'JSON',
        success: function (resp) {
            if (resp.http_code == 200) {
                toastr.success(resp.message);
                // $('#otp').val(resp.data.data.otp);
                // $('#login_btn').attr('disabled', false);
                $('#send_otp').css('display', 'none');
                $('#resend_otp').css('display', 'block');
            } else {
                toastr.warning(resp.message);
            }
        }
    });
}



$(document).on('submit', '#otp_form', function (e) {

e.preventDefault();
var token, url, data, otp_type;
otp_type = $('#otp_type').val();
token = $('meta[name="csrf-token"]').attr('content');
url = '{{ route('otp.verify') }}';
data = $('#otp_form').serializeArray();;
$('#verifyOtp').prop('disabled', true);

$.ajax({
url: url,
headers: {
    'X-CSRF-TOKEN': token
},
        data: data,
        type: 'POST',
        datatype: 'JSON',
        success: function (resp) {
            if (resp.http_code == 400) {
                $('#verifyOtp').prop('disabled', false);
                toastr.warning(resp.message);
            } else if (resp.http_code == 200) {
                toastr.success(resp.message);
                // window.location.href="{{url('school-list')}}";
                var student_count=resp.data.student_count;
                /*if ((otp_type == 'login') && (student_count>0)) {
                    window.location.href='{{url('home')}}';
                }
                else{
                    window.location.href='{{url('school-list')}}';
                }*/
                window.location.href='{{url('school-list')}}';
            } else if (resp.http_code == 500) {
                $('#verifyOtp').prop('disabled', false);
                toastr.success(resp.message);
            }
        },
        error: function (err) {}
    });
});

// $(document).on('click', '#resend_otp', function (e) {
//     e.preventDefault();
function resend_otp() {
    var token, url, data;
    token = $('meta[name="csrf-token"]').attr('content');
    url = "{{ route('otp.resend') }}";
    $.ajax({
        url: url,
        headers: {
            'X-CSRF-TOKEN': token
        },
        data: data,
        type: 'POST',
        datatype: 'JSON',
        success: function (resp) {
            if (resp.http_code == 400) {
                toastr.warning(resp.message);
            } else if (resp.http_code == 200) {
                toastr.success(resp.message);
                $('#otp').val(resp.data);
                // $('#otp').focus();
            } else if (resp.http_code == 500) {
                toastr.success(resp.message);
            }
        },
        error: function (err) {}
    });
}

$(document).on('click', '.favProducts', function (e) {
    e.preventDefault();
    var customer_id = $('#customer_id').val();
    if (customer_id <= 0) {
        if (confirm('Please login to continue further')) {
            $('#login').modal('show');
            return false;
        }
    } else {
        var token = $('meta[name="csrf-token"]').attr('content');
        var status = $(this).attr("data-status");
        var product_id = $(this).attr('data-product');
        var warehouse_product_id = $(this).attr('data-warehouse-product');
        var vendor_id = $(this).attr('data-vendor');
        //var vendor_id = '1';
        var data = {
            'product_id': product_id,
            'status': status,
            'warehouse_product_id': warehouse_product_id,
            'vendor_id': vendor_id
        };
        var url = '{{url('update-fav')}}';
        $.ajax({
            url: url,
            headers: {
                'X-CSRF-TOKEN': token
            },
            data: data,
            type: 'POST',
            datatype: 'JSON',
            success: function (resp) {
                if (resp.http_code == 400) {
                    toastr.warning(resp.message);
                } else if (resp.http_code == 200) {
                    toastr.success(resp.message);
                    window.location.reload();
                } else if (resp.http_code == 500) {
                    toastr.success(resp.message);
                }
            }
        });
    }
});
</script>