@extends('layouts.guest')

@section('title', 'Login')

@section('content')
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div class="toast fade hide" id="toast-simple" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true" data-bs-delay="5000">
            <div class="toast-header">
                <span class="avatar avatar-xs me-2" style="background-image: url(./static/avatars/002m.jpg)"> </span>
                <strong class="me-auto">Mallory Hulme</strong>
                <small>11 mins ago</small>
                <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>
    </div>

    <div class="text-center mb-4">
        <!-- BEGIN NAVBAR LOGO --><a href="." aria-label="Tabler" class="navbar-brand navbar-brand-autodark"><img src="{{url('images/logo-removebg-preview.png')}}" style="width:110px;height:50px"></a><!-- END NAVBAR LOGO -->
    </div>
    <div class="card card-md">
        <div class="card-body" id="login-card">
            <h2 class="h2 text-center mb-4">Login to your account</h2>
            <form novalidate="" id="loginForm">
                <div class="mb-3">
                    <label class="form-label">Mobile Number</label>
                    <input type="text"  name="mobile" class="form-control" placeholder="1234567890" autocomplete="off">
                </div>
                <div class="mb-2">
                <label class="form-label">
                    Password
                    <span class="form-label-description">
                    <a href="javascript:void(0)">I forgot password</a>
                    </span>
                </label>
                <div class="input-group input-group-flat">
                    <input type="password" name="password" class="form-control" placeholder="Your password" autocomplete="off">
                </div>
                </div>
                <div class="form-footer">
                    <button type="submit" class="btn btn-primary w-100">Sign in</button>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(function () {
            $('#loginForm').validate({
                rules: {
                    mobile: {
                        required: true,
                        digits: true,
                        minlength: 10,
                        maxlength: 15
                    },
                    password: {
                        required: true,
                        minlength: 6
                    }
                },

                messages: {
                    mobile: {
                        required: "Mobile number is required",
                        digits: "Only numbers allowed",
                        minlength: "Minimum 10 digits"
                    },
                    password: {
                        required: "Password is required",
                        minlength: "Minimum 6 characters"
                    }
                },
                errorClass: 'text-danger',
                errorPlacement: function (error, element) {
                    // Input group handling
                    if (element.parent('.input-group').length) {
                        error.insertAfter(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                },
                submitHandler: function (form) {
                    $.ajax({
                        url: "/login",
                        type: "POST",
                        data: {
                            mobile: $('input[name="mobile"]').val(),
                            password: $('input[name="password"]').val(),
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        beforeSend: function () {
                            $('button[type="submit"]').prop('disabled', true);
                            showLoader('#login-card');
                        },
                        success: function (res) {
                            showAlert('success', 'Login successful');
                            setTimeout(() => {
                                window.location.href = res.redirect;
                            }, 400);
                        },
                        error: function (xhr) {
                            let message = 'Something went wrong';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                message = xhr.responseJSON.message;
                            }
                            showAlert('error', message);
                        },
                        complete: function () {
                            $('button[type="submit"]').prop('disabled', false);
                            hideLoader('#login-card');
                        }
                    });
                }
            });
        });
    </script>
@endpush