@extends('job.layout.web')
@section('title', 'Company Login')
@section('content')
<style>
    .error {
        color: red;
    }
    .toggle-password {
        border: none;
        background: none;
        outline: none;
        box-shadow: none;
        cursor: pointer;
    }
</style>
<section class="form-shared padding-top-100px padding-bottom-100px">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 mx-auto">
                <div class="user-action-form">
                    <div class="tab-content" id="myTabContent">
                        <div
                            class="tab-pane fade show active"
                            id="login-nav"
                            role="tabpanel"
                            aria-labelledby="login-tab">
                            <div class="billing-form-item mb-0">
                                <div class="billing-title-wrap border-bottom-0 text-center">
                                    <h3 class="widget-title font-size-28 pb-2">
                                        Login to Your Account
                                    </h3>
                                </div>
                                <div class="billing-content">
                                    <div class="contact-form-action">
                                        <form id="company_login" method="post" action="{{route('company.login.verify')}}">
                                            @csrf
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <div class="input-box">
                                                        <label class="label-text">Email Address</label>
                                                        <div class="form-group">
                                                            <i class="la la-user form-icon"></i>
                                                            <input
                                                                class="form-control"
                                                                type="text"
                                                                name="email"
                                                                placeholder="Your email address" />
                                                            <span class="email_error error"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    <div class="input-box">
                                                        <label class="label-text">Password</label>
                                                        <div class="form-group">
                                                            <i class="la la-lock form-icon"></i>
                                                            <input
                                                                class="form-control password-field"
                                                                type="password"
                                                                name="password"
                                                                placeholder="Password" />
                                                            <a
                                                                class="btn toggle-password"
                                                                title="Toggle show/hide password">
                                                                <i class="la la-eye eye-on"></i>
                                                                <i class="la la-eye-slash eye-off"></i>
                                                            </a>
                                                            <div style="padding-top: 4px;">
                                                                <span class="password_error error"></span>
                                                                <span class="invalid_credential_error error"></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="row g-2">
                                                        <!-- Register Button -->
                                                        <div class="col-12 col-md-6 d-flex justify-content-center">
                                                            <button class="theme-btn bg-5 border-0 w-100" id="register" type="button">
                                                                Register
                                                            </button>
                                                        </div>
                                                        <!-- Login Button -->
                                                        <div class="col-12 col-md-6 d-flex justify-content-center">
                                                            <button class="theme-btn border-0 w-100" type="submit" id="submit">
                                                                Login Account
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>

                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@section('script')
<script>
    $(document).ready(function() {
        $('#register').on("click", function(event) {
            window.location = "{{ env('APP_URL') }}" + '/company/register';
        });

        $('#company_login').on("submit", function(event) {
            event.preventDefault();
            $('.email_error').text('');
            $('.password_error').text('');
            $('.invalid_credential_error').text('');
            $('#submit').prop('disabled', true);

            const formData = new FormData($('#company_login')[0]);
            const dataAsObject = Object.fromEntries(formData);

            const login_response = fetch("{{ route('company.login.verify') }}", {
                method: "post",
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(dataAsObject)
            });
            login_response.then(function(response) {
                if (!response.ok) {
                    return response.json().then(function(err) {
                        const errors = err.errors;
                        if (errors) {
                            for (const field in errors) {
                                errors[field].forEach(function(item) {
                                    $('.' + field + '_error').text(item);
                                })
                            }
                        }
                        $('#submit').prop('disabled', false);
                    })
                } else {
                    return response.json().then(function(success) {
                        if (success.status == "success") {
                            $('#submit').prop('disabled', false);
                            window.location = success.url
                        }
                    })
                }
            }).catch(function(error) {

            });
        });
    });
</script>
@endsection
@endsection