@extends('layouts.shared.login')

@section('title', 'Login Account')

@section('contents')
    <section class="vh-100">
        <div class="container-fluid h-custom">
            <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col-md-9 col-lg-6 col-xl-5 text-center border-right">
                    <img src="{{ asset('/assets/images/Tablet login.gif') }}" class="img-fluid w-sm-auto" alt="Sample image">
                </div>
                <div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1 p-4 p-xl-0 p-lg-0 p-md-0">
                    <form id="loginForm">
                        @csrf
                        <div class="mb-5 text-lg-left">
                            <h3 class="font-weight-bold">Welcome to SSI {{ env('APP_NAME') }}</h3>
                            <span class="text-muted">Shop Smarter, Pay Easier: Your One-Stop Secure Checkout!</span>
                        </div>

                        <!-- Email input -->
                        <div class="form-outline mb-4">
                            <label class="form-label" for="email">Email address</label>
                            <input type="email" id="email" name="email" class="form-control form-control-lg"
                                placeholder="Enter a valid email address" required>
                        </div>

                        <!-- Password input -->
                        <div class="form-outline mb-3">
                            <label class="form-label" for="password">Password</label>
                            <input type="password" id="password" name="password" class="form-control form-control-lg"
                                placeholder="Enter password" required>
                        </div>

                        <div class="mt-4 pt-2">
                            <button type="submit" class="btn btn-primary btn-lg"
                                style="padding-left: 2.5rem; padding-right: 2.5rem;">Login</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        const login = {
            init() {
                this.events();
            },
            events() {
                document.getElementById('loginForm').addEventListener('submit', (e) => {
                    e.preventDefault(); // Prevent the default form submission behavior
                    const formData = new FormData(e.target);
                    this.submitLogin(formData);
                });

                $("#close").on('click', function() {
                    $("#select_store_modal").modal('toggle')
                })
            },
            submitLogin(formData) {
                $("#submit_button").attr('disabled', true);

                $.ajax({
                        url: '/authenticate-user',
                        method: 'POST',
                        data: formData,
                        processData: false, // Ensure jQuery doesn't process the data
                        contentType: false, // Ensure jQuery doesn't set the content type
                    })
                    .then(function(response) {
                        if (response.status === 200) {
                            window.location.href = `/redirect-page`;
                        } else {
                            Swal.fire({
                                icon: "error",
                                title: "Oops...",
                                text: `${response.message}`,
                            });
                        }
                    })
                    .fail(function(xhr, status, error) {
                        alert('Ajax error:', error)
                        // console.error('Ajax error:', error);
                    });

                $("#submit_button").attr('disabled', true);
            }
        };

        login.init();
    </script>
@endsection