@extends('job.layout.web')
@section('title', 'Login')
@section('content')
<style>
    .error {
        color: red;
    }

    .toggle-password {
        border: none;
        background: none;
        outline: none;
        box-shadow: none;
        cursor: pointer;
    }

    .header-bar {
        display: flex;
        align-items: center;
        padding: 1rem;
    }

    .flex-spacer {
        flex: 1;
    }

    a {
        text-decoration: none;
        color: black;
    }

    a:hover,
    a:focus {
        text-decoration: underline;
    }
</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="header-bar">
                                    <div class="flex-spacer"></div>
                                    <a href="{{route('job.show.register')}}" class="" id="register-anchor">Employee Register</a>
                                </div>
                                <div class="billing-title-wrap border-bottom-0 text-center">
                                    <h3 class="widget-title font-size-28 pb-2" id="login-header">
                                        Login to Your Employee Account
                                    </h3>
                                </div>
                                <div class="billing-content">
                                    <div class="contact-form-action">
                                        <form id="company_login" method="post" action="#">
                                            @csrf
                                            <input type="hidden" id="type" name="type" value="employeer">
                                            <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"
                                                                id="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"
                                                                id="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-lg-12">
                                                    <div class="d-flex flex-column align-items-center">
                                                         <div class="col-10 col-sm-8 col-md-6 col-lg-4 mb-3">
                                                            <button class="theme-btn border-0 w-100" type="submit" id="submit">
                                                                Login Account
                                                            </button>
                                                        </div>
                                                        <div class="col-10 col-sm-8 col-md-6 col-lg-4">
                                                            <a href="#" onclick="changeLogin()" class="text-center d-block w-100" data-login='employeer'>
                                                                Company Login
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@section('script')
<script>
    function changeLogin(){
        let current_login = $(event.target).attr("data-login");
        $('#email').val('');
        $('.error').text('');
        $('#password').val('');
        if(current_login == 'company'){

            $(event.target).text('Company Login');
            $(event.target).attr('data-login', 'employeer');

            $('#login-header').text('Login to Your Employee Account');
            $('#register-anchor').text('Employee Register');
            $('#register-anchor').attr('href', '{{ route('job.show.register') }}');

            $('#type').val('employeer');
        }else if(current_login == 'employeer'){

            $(event.target).text('Employee Login');
            $(event.target).attr('data-login', 'company');

            $('#login-header').text('Login to Your Company Account');
            $('#register-anchor').text('Company Register');
            $('#register-anchor').attr('href', '{{ route('company.show.register') }}');

            $('#type').val('company');
        }
    }
    $(document).ready(function() {
        $('#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('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