<x-ui.layout.career-portal :title="__('recruitment.career_portal.apply_title')" :settings="$settings" :tenant="$tenant">
    <div class="container py-5" style="max-width: 720px;">
        <h1 class="h3 mb-1">{{ __('recruitment.career_portal.apply_title') }}</h1>
        <p class="cp-muted mb-4">{{ $job->title }}</p>

        <form method="POST" action="{{ route('careers.jobs.apply.store', ['tenant' => $tenant->slug, 'vacancy' => $job->slug]) }}" enctype="multipart/form-data" class="cp-card">
            @csrf
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">{{ __('recruitment.candidates.fields.first_name') }}</label>
                    <input name="first_name" value="{{ old('first_name') }}" class="form-control @error('first_name') is-invalid @enderror" required>
                    @error('first_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ __('recruitment.candidates.fields.last_name') }}</label>
                    <input name="last_name" value="{{ old('last_name') }}" class="form-control @error('last_name') is-invalid @enderror" required>
                    @error('last_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ __('recruitment.candidates.fields.email') }}</label>
                    <input type="email" name="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" required>
                    @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{ __('recruitment.candidates.fields.phone') }}</label>
                    <input name="phone" value="{{ old('phone') }}" class="form-control">
                </div>
                <div class="col-12">
                    <label class="form-label">{{ __('recruitment.applications.fields.cover_letter') }}</label>
                    <textarea name="cover_letter" rows="4" class="form-control">{{ old('cover_letter') }}</textarea>
                </div>
                <div class="col-12">
                    <label class="form-label">{{ __('recruitment.career_portal.fields.cv') }}</label>
                    <input type="file" name="cv" class="form-control @error('cv') is-invalid @enderror" accept=".pdf,.doc,.docx" required>
                    @error('cv')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                @if ($settings->recaptcha_enabled && $recaptchaSiteKey)
                    <div class="col-12">
                        <div class="g-recaptcha" data-sitekey="{{ $recaptchaSiteKey }}"></div>
                        @error('g-recaptcha-response')<div class="text-danger small">{{ $message }}</div>@enderror
                    </div>
                    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
                @endif
                <div class="col-12">
                    <button type="submit" class="cp-btn">{{ __('recruitment.career_portal.actions.submit_application') }}</button>
                </div>
            </div>
        </form>
    </div>
</x-ui.layout.career-portal>
