@extends('frontend::layouts.master')

@push('styles')
    <script type="text/javascript">
        var onloadCallback = function() {
            grecaptcha.render('get_recaptcha', {
                'sitekey': "{{ $page_init['setting']['recapcha'] ?? '' }}",
                'callback': function() {
                    $('#submit').removeAttr('disabled');
                }
            });
        };
    </script>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
    <link type="text/css" href="{{ asset('assets/libs/toastr/build/toastr.min.css') }}" rel="stylesheet">
    <style>
        .form-invalid-message {
            color: rgb(239 68 68) !important;
            font-size: 11px !important;
            margin-top: 3px !important;
            padding-bottom: 0.25rem !important;
        }
    </style>
@endpush

@section('content')
    @php
        $breadcrumbArray = [['name' => $link_index['name'] ?? '', 'url' => $link_index['url'] ?? ''], ['name' => $link_recruitment['name'] ?? '', 'url' => 'javascript:void(0);']];
    @endphp
    <x-frontend::section.banner name="{{ $link_recruitment['name'] ?? '' }}" image="{{ $link_recruitment['image'] ?? '' }}" :breadcrumbArray=$breadcrumbArray />

    <section class="section sect-recruitment">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 center mb-4">
                    <div class="contact-box recruitment-box p-4">
                        <h4 class="htitle border-bottom m-b-20">
                            {{ __('frontend::lang.page.recruitment.title_form') }}
                            <span class="text-red" style="float: right; font-size: 15px;">
                                {{ __('frontend::lang.page.recruitment.title_description') }}
                            </span>
                        </h4>
                        <form class="form-recruitment" id="recruitment_frm" method="POST" onsubmit="send_recruitment();">
                            <div class="recruitment-form-grid">
                                <div class="recruitment-form-row">
                                    <label class="recruitment-label" for="position">
                                        {{ __('frontend::lang.page.recruitment.form.position') }}
                                        &nbsp;<span class="text-danger">*</span>
                                    </label>
                                    <div class="recruitment-field">
                                        <input class="recruitment-input" id="position" name="position" data-max="{{ __('frontend::lang.page.recruitment.form.placeholder.max', ['label' => __('frontend::lang.page.recruitment.form.position'), 'max' => 255]) }}" type="text" placeholder="{{ __('frontend::lang.page.recruitment.form.placeholder.input', ['label' => __('frontend::lang.page.recruitment.form.position')]) }}">
                                    </div>
                                </div>
                                <div class="recruitment-form-row">
                                    <label class="recruitment-label" for="first_name">
                                        {{ __('frontend::lang.page.recruitment.form.first_name') }}
                                        &nbsp;<span class="text-danger">*</span>
                                    </label>
                                    <div class="recruitment-field">
                                        <input class="recruitment-input" id="first_name" name="first_name" data-max="{{ __('frontend::lang.page.recruitment.form.placeholder.max', ['label' => __('frontend::lang.page.recruitment.form.first_name'), 'max' => 255]) }}" type="text" placeholder="{{ __('frontend::lang.page.recruitment.form.placeholder.input', ['label' => __('frontend::lang.page.recruitment.form.first_name')]) }}">
                                    </div>
                                </div>
                                <div class="recruitment-form-row">
                                    <label class="recruitment-label" for="last_name">
                                        {{ __('frontend::lang.page.recruitment.form.last_name') }}
                                        &nbsp;<span class="text-danger">*</span>
                                    </label>
                                    <div class="recruitment-field">
                                        <input class="recruitment-input" id="last_name" name="last_name" data-max="{{ __('frontend::lang.page.recruitment.form.placeholder.max', ['label' => __('frontend::lang.page.recruitment.form.last_name'), 'max' => 255]) }}" type="text" placeholder="{{ __('frontend::lang.page.recruitment.form.placeholder.input', ['label' => __('frontend::lang.page.recruitment.form.last_name')]) }}">
                                    </div>
                                </div>
                                <div class="recruitment-form-row">
                                    <label class="recruitment-label" for="gender">
                                        {{ __('frontend::lang.page.recruitment.form.gender') }}
                                        &nbsp;<span class="text-danger">*</span>
                                    </label>
                                    <div class="recruitment-field recruitment-inline-options">
                                        <div>
                                            <label class="recruitment-option">
                                                <input name="gender" type="radio" value="male" placeholder="{{ __('frontend::lang.page.recruitment.form.placeholder.select', ['label' => __('frontend::lang.page.recruitment.form.gender')]) }}">
                                                <span>{{ __('frontend::lang.page.recruitment.form.gender_option.male') }}</span>
                                            </label>
                                            <label class="recruitment-option">
                                                <input name="gender" type="radio" value="female" placeholder="{{ __('frontend::lang.page.recruitment.form.placeholder.select', ['label' => __('frontend::lang.page.recruitment.form.gender')]) }}">
                                                <span>{{ __('frontend::lang.page.recruitment.form.gender_option.female') }}</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="recruitment-form-row">
                                    <label class="recruitment-label" for="birth_date">
                                        {{ __('frontend::lang.page.recruitment.form.birth_date') }}
                                        &nbsp;<span class="text-danger">*</span>
                                    </label>
                                    <div class="recruitment-field recruitment-birthdate-group">
                                        <div class="recruitment-inline-field">
                                            <input class="recruitment-input" id="birth_date" name="birth_date" type="date" placeholder="{{ __('frontend::lang.page.recruitment.form.placeholder.select', ['label' => __('frontend::lang.page.recruitment.form.birth_date')]) }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="recruitment-form-row">
                                    <label class="recruitment-label" for="age">
                                        {{ __('frontend::lang.page.recruitment.form.age') }}
                                        &nbsp;<span class="text-danger">*</span>
                                    </label>
                                    <div class="recruitment-field">
                                        <input class="recruitment-input" id="age" name="age" data-max="{{ __('frontend::lang.page.recruitment.form.placeholder.max', ['label' => __('frontend::lang.page.recruitment.form.age'), 'max' => 3]) }}" type="number" min="0" max="999" placeholder="{{ __('frontend::lang.page.recruitment.form.placeholder.input', ['label' => __('frontend::lang.page.recruitment.form.age')]) }}">
                                    </div>
                                </div>
                                <div class="recruitment-form-row recruitment-form-row-top">
                                    <label class="recruitment-label" for="address">
                                        {{ __('frontend::lang.page.recruitment.form.address') }}
                                        &nbsp;<span class="text-danger">*</span>
                                    </label>
                                    <div class="recruitment-field">
                                        <textarea class="recruitment-input recruitment-textarea" id="address" name="address" data-max="{{ __('frontend::lang.page.recruitment.form.placeholder.max', ['label' => __('frontend::lang.page.recruitment.form.address'), 'max' => 255]) }}" rows="4" placeholder="{{ __('frontend::lang.page.recruitment.form.placeholder.input', ['label' => __('frontend::lang.page.recruitment.form.address')]) }}"></textarea>
                                    </div>
                                </div>
                                <div class="recruitment-form-row">
                                    <label class="recruitment-label" for="email">
                                        {{ __('frontend::lang.page.recruitment.form.email') }}
                                        &nbsp;<span class="text-danger">*</span>
                                    </label>
                                    <div class="recruitment-field">
                                        <input class="recruitment-input" id="email" name="email" data-max="{{ __('frontend::lang.page.recruitment.form.placeholder.max', ['label' => __('frontend::lang.page.recruitment.form.email'), 'max' => 255]) }}" data-email="{{ __('frontend::lang.page.recruitment.form.placeholder.email') }}" type="email" placeholder="{{ __('frontend::lang.page.recruitment.form.placeholder.input', ['label' => __('frontend::lang.page.recruitment.form.email')]) }}">
                                    </div>
                                </div>
                                <div class="recruitment-form-row">
                                    <label class="recruitment-label" for="tel">
                                        {{ __('frontend::lang.page.recruitment.form.tel') }}
                                        &nbsp;<span class="text-danger">*</span>
                                    </label>
                                    <div class="recruitment-field">
                                        <input class="recruitment-input tel-number" id="tel" name="tel" data-max="{{ __('frontend::lang.page.recruitment.form.placeholder.max', ['label' => __('frontend::lang.page.recruitment.form.tel'), 'max' => 20]) }}" type="text" placeholder="{{ __('frontend::lang.page.recruitment.form.placeholder.input', ['label' => __('frontend::lang.page.recruitment.form.tel')]) }}">
                                    </div>
                                </div>
                                <div class="recruitment-form-row recruitment-form-row-top">
                                    <label class="recruitment-label" for="educational_background">
                                        {{ __('frontend::lang.page.recruitment.form.educational_background') }}
                                        &nbsp;<span class="text-danger">*</span>
                                    </label>
                                    <div class="recruitment-field">
                                        <textarea class="recruitment-input recruitment-textarea" id="educational_background" name="educational_background" data-max="{{ __('frontend::lang.page.recruitment.form.placeholder.max', ['label' => __('frontend::lang.page.recruitment.form.educational_background'), 'max' => 255]) }}" rows="4" placeholder="{{ __('frontend::lang.page.recruitment.form.placeholder.input', ['label' => __('frontend::lang.page.recruitment.form.educational_background')]) }}"></textarea>
                                    </div>
                                </div>
                                <div class="recruitment-form-row">
                                    <label class="recruitment-label" for="current_job">
                                        {{ __('frontend::lang.page.recruitment.form.current_job') }}
                                        &nbsp;<span class="text-danger">*</span>
                                    </label>
                                    <div class="recruitment-field recruitment-inline-options">
                                        <div>
                                            <label class="recruitment-option">
                                                <input name="current_job" type="radio" value="atWork" placeholder="{{ __('frontend::lang.page.recruitment.form.placeholder.select', ['label' => __('frontend::lang.page.recruitment.form.current_job')]) }}">
                                                <span>{{ __('frontend::lang.page.recruitment.form.current_job_option.working') }}</span>
                                            </label>
                                            <label class="recruitment-option">
                                                <input name="current_job" type="radio" value="notAtWork" placeholder="{{ __('frontend::lang.page.recruitment.form.placeholder.select', ['label' => __('frontend::lang.page.recruitment.form.current_job')]) }}">
                                                <span>{{ __('frontend::lang.page.recruitment.form.current_job_option.resigned') }}</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="recruitment-form-row recruitment-form-row-top">
                                    <label class="recruitment-label" for="comment">
                                        {{ __('frontend::lang.page.recruitment.form.comment') }}
                                        &nbsp;<span class="text-danger">*</span>
                                    </label>
                                    <div class="recruitment-field">
                                        <textarea class="recruitment-input recruitment-textarea" id="comment" name="comment" data-max="{{ __('frontend::lang.page.recruitment.form.placeholder.max', ['label' => __('frontend::lang.page.recruitment.form.comment'), 'max' => 255]) }}" rows="5" placeholder="{{ __('frontend::lang.page.recruitment.form.placeholder.input', ['label' => __('frontend::lang.page.recruitment.form.comment')]) }}"></textarea>
                                    </div>
                                </div>
                                <div class="form-check mb-4 m-t-20">
                                    <input class="form-check-input" id="policy" name="policy" type="checkbox" placeholder="{{ __('frontend::lang.page.recruitment.form.placeholder.input', ['label' => __('frontend::lang.page.recruitment.form.policy')]) }}">
                                    <label class="form-check-label" for="policy">
                                        {{ __('frontend::lang.page.recruitment.form.policy') }}
                                        <a class="m-l-5" href="{{ $page_init['policy']['url'] ?? 'javascript:void(0)' }}" target="_blank">
                                            {{ $page_init['policy']['name'] ?? '' }}
                                        </a>
                                    </label>
                                </div>
                                <div class="mb-4" id="get_recaptcha"></div>
                                <div class="recruitment-submit-wrap m-t-30">
                                    <button class="btn btn-primary" id="submit" type="submit" disabled>
                                        {{ __('frontend::lang.btn.send_recruitment') }}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
    </section>
@endsection

@push('scripts')
    <script src="{{ asset('assets/libs/validator/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/libs/toastr/build/toastr.min.js') }}"></script>

    {{ module_vite('build-frontend', 'resources/assets/js/recruitment.js') }}
@endpush