@extends($activeTemplate.'layouts.app')
@section('panel')
@php
$content  = getContent('login.content', true);
$policies = getContent('policy_pages.element');
@endphp
<section class="account-section login-section">
    <div class="account-area">
        <div class="account-area__inner">
            <ul class="nav nav-tabs account-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <button type="button" class="nav-link switch-btn {{ request()->routeIs('employer.login') ? 'active' : '' }}" data-type="2">@lang('Admin Login')</button>
                </li>
            </ul>
            <!-- <ul class="nav nav-tabs account-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <button type="button" class="nav-link switch-btn {{ request()->routeIs('user.login') ? 'active' : '' }}" data-type="1">@lang('User')</button>
                </li>
                <li class="nav-item">
                    <button type="button" class="nav-link switch-btn {{ request()->routeIs('employer.login') ? 'active' : '' }}" data-type="2">@lang('Employer')</button>
                </li>
            </ul> -->
            <form method="POST" action="{{route('user.login')}}" class="account-form box--border box--shadow p-sm-5 p-3 rounded-3 verify-gcaptcha">
                @csrf
                <div class="form-group">
                    <label>@lang('Username or Email')</label>
                    <div class="custom-icon-field">
                        <i class="las la-user"></i>
                        <input type="text" name="username" value="{{old('username')}}" class="form--control" required >
                    </div>
                </div>
                <div class="form-group">
                    <label>@lang('Password')</label>
                    <div class="custom-icon-field">
                        <i class="las la-key"></i>
                        <input type="password" name="password" class="form--control" required>
                    </div>
                </div>
                <x-captcha hasIcon="true"/>
                <div class="form-group">
                    <input class="form-check-input" type="checkbox" name="remember" id="remember"
                        @checked(old('remember'))>
                    <label class="form-check-label" for="remember">@lang('Remember Me')</label>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn--base w-100">@lang('Login')</button>
                </div>
                <div class="d-flex flex-wrap justify-content-between custom--wrapper">
                    <!-- <p class="mt-3 text-center">
                        <a href="{{route('user.register')}}" class="register-account">@lang('Create an account')</a>
                    </p> -->
                    <p class="mt-3 text-center">
                        <a href="{{route('user.password.request')}}" class="forget-password">@lang('Forgot Your Password?')</a>
                    </p>
                </div>
            </form>
            <ul class="inline-menu d-flex flex-wrap align-items-center justify-content-center mt-5">
                <li><a href="{{route('home')}}">@lang('Home')</a></li>
                @foreach($policies as $policy)
                <li>
                    <a href="{{route('policy.pages', [slug($policy->data_values->title), $policy->id])}}">
                        {{__($policy->data_values->title)}}
                    </a>
                </li>
                @endforeach
            </ul>
        </div>
    </div>
    <div class="account-thumb bg_img" style="background-image: url({{getImage('assets/images/frontend/login/'. @$content->data_values->background_image, '1920x1280')}})">
        <div class="account-thumb__content text-center">
            <h2 class="title text-white mb-4">@lang('Welcome to')</h2>
            <div class="account-area__logo text-center">
                <a href="{{route('home')}}">
                    <img src="{{getImage(getFilePath('logoIcon') .'/logo.png')}}">
                </a>
            </div>
        </div>
    </div>
</section>
@endsection

@push('script')
<script>
    "use strict";
    (function ($) {

        $('.mb-2').addClass('form-group').removeClass('mb-2');

        function changeLink () {
            let type          = parseInt($('#myTab').find('button.active').data('type'));
            let registerRoute = `{{route('user.register')}}`;
            let loginRoute    = `{{route('user.login')}}`;
            let forgetRoute   = `{{ route('user.password.request') }}`;

            if (type == 2) {
                registerRoute = `{{route('employer.register')}}`;
                loginRoute    = `{{route('employer.login')}}`;
                forgetRoute   = `{{ route('employer.password.request') }}`;
            }

            $('.account-form').attr('action',loginRoute);
            $('.register-account').attr('href',registerRoute);
            $('.forget-password').attr('href',forgetRoute);
            $('.account-form').fadeOut().fadeIn();
        };

        changeLink();

        $('.switch-btn').on('click', function (e) {
            $('.switch-btn').removeClass('active');
            $(this).addClass('active');
            changeLink()
        });

    })(jQuery);

</script>
@endpush