@extends('Admin.layouts.app_login')
@section('title', 'Cheers To Season - login')
@section('content')
    <div class="row w-100" style="height: 100vh;">
        <div class=" col-md-6 m-auto h-100 d-flex flex-column align-itms-center justify-content-center"
            style="background-color: #05244D;">
            <div class="d-flex justify-content-center">
                <img src="{{ asset('public/assets/img/seasons_logo.png') }}" width="150" height="150" alt="">
            </div>
        </div>
        <div class=" col-md-6 h-100 d-flex justify-content-center align-items-center login-background-img"
            style="background-image: url('public/assets/img/login_screen_background.png');">
            <div class="row d-flex flex-column justify-content-center align-items-center m-auto"
                style="width: 60%; z-index: 999;">
                {{-- @include('admin.layouts.messages') --}}
                <h3 class="text-start font-weight-bold mb-3 text-white">WELCOME BACK</h3>
                <form id="admin_login_form">
                    @csrf
                    <div class="col-md-12">
                        <div class="mb-3 input-parent">
                            <i class="fa fa-envelope" aria-hidden="true"></i>
                            <input type="email" name="email" class="form-control" placeholder="Email address">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="mb-3 input-parent">
                            <i class="fa fa-lock" aria-hidden="true"></i>
                            <input type="password" name="password" id="password" class="form-control"
                                placeholder="Password">
                            <i class="fa fa-eye-slash" aria-hidden="true" id="passwordToggle"></i>
                            {{-- <i class="fa-regular fa-eye-slash eye" id="passwordToggle"></i> --}}
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="mb-3">
                            <a class="text-white" href="{{ url('/forgot_password') }}">Forgot Password?</a>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div>
                            <button type="submit" id="admin_login_btn" class="p-0 download-btn"
                                class="w-100">Login</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>

@endsection
@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
    <script>
        $(document).on("click", "#admin_login_btn", function(e) {
            $('#admin_login_form').validate({
                rules: {
                    email: {
                        required: true,
                    },
                    password: {
                        required: true,
                    }
                },
                messages: {
                    email: {
                        required: "Please enter the email address.",
                    },
                    password: {
                        required: "Please enter the password.",
                    }
                },
                submitHandler: function(form) {
                    e.preventDefault();
                    let base_url = url_path;
                    var formData = new FormData(form);
                    $.ajaxSetup({
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                        },
                    });
                    $.ajax({
                        url: base_url + '/check_login',
                        type: 'POST',
                        data: formData,
                        beforeSend: function() {
                            $('#admin_login_btn').text('Please wait...');
                            $('#admin_login_btn').attr('disabled', true);
                        },
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            console.log(response);
                            $('#admin_login_btn').prop('disabled', false);
                            $('#admin_login_btn').text('Login');

                            if (response.status_code == 200) {
                                toastr.success(response.message);
                                setTimeout(function() {
                                    window.location.href = base_url + "/dashboard";
                                }, 2000);
                            } else if (response.status_code == 401) {
                                toastr.error(response.message);
                                form.reset();
                            } else {
                                toastr.error(response.message);
                            }
                        },
                        error: function(xhr, status, error) {
                            toastr.error('An unexpected error occurred.');
                            $('#admin_login_btn').prop('disabled', false);
                            $('#admin_login_btn').text('Sign In');
                        }
                    });
                }
            });
        });
    </script>
    <script>
        $('#passwordToggle').click(function() {
            var passwordInput = $('#password');
            var eyeIcon = $('#passwordToggle');

            if (passwordInput.attr('type') === 'password') {
                passwordInput.attr('type', 'text');
                eyeIcon.removeClass('fa-eye-slash').addClass('fa-eye');
            } else {
                passwordInput.attr('type', 'password');
                eyeIcon.removeClass('fa-eye').addClass('fa-eye-slash');
            }
        });
    </script>

@endsection
