@extends('frontend.layouts.app')

@section('title', 'Apply for ' . $vacancy->title)
@section('description', 'Apply for the ' . $vacancy->title . ' position.')

@section('content')
    @php
        $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
    @endphp

    @include('frontend.layouts.breadcrumb', ['title' => 'Apply — ' . Str::limit($vacancy->title, 52)])

    <section class="tv-contact-section inner space bg-light">
        <div class="container">
            <div class="row gy-30">
                <div class="col-lg-5">
                    <div class="contact-content-wrap">
                        <div class="title-wrap">
                            <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Careers</div>
                            <h2 class="sec-title">{{ $vacancy->title }}</h2>
                            <p class="mb-0">You are applying for this opening. Complete the form and we will get back to you.</p>
                        </div>
                        <div class="contact-info">
                            @if($vacancy->department)
                                <div class="contact-item">
                                    <div class="icon"><i class="fa-solid fa-building"></i></div>
                                    <div class="info">
                                        <h4 class="title">Department</h4>
                                        <p>{{ $vacancy->department->name }}</p>
                                    </div>
                                </div>
                            @endif
                            @if($vacancy->location)
                                <div class="contact-item">
                                    <div class="icon"><i class="fa-sharp fa-regular fa-location-dot"></i></div>
                                    <div class="info">
                                        <h4 class="title">Location</h4>
                                        <p>{{ $vacancy->location }}</p>
                                    </div>
                                </div>
                            @endif
                            @if($vacancy->employment_type)
                                <div class="contact-item">
                                    <div class="icon"><i class="fa-solid fa-briefcase"></i></div>
                                    <div class="info">
                                        <h4 class="title">Employment type</h4>
                                        <p>{{ ucfirst($vacancy->employment_type) }}</p>
                                    </div>
                                </div>
                            @endif
                            @if($vacancy->salary_range)
                                <div class="contact-item">
                                    <div class="icon"><i class="fa-regular fa-money-bill-1"></i></div>
                                    <div class="info">
                                        <h4 class="title">Compensation</h4>
                                        <p>{{ $vacancy->salary_range }}</p>
                                    </div>
                                </div>
                            @endif
                        </div>
                        <div class="mt-30">
                            <h4 class="title mb-20">Before you submit</h4>
                            <ul class="list-unstyled mb-0 small text-muted">
                                <li class="mb-10"><i class="fa-solid fa-circle-check text-theme me-2"></i>Use a current résumé tailored to this role.</li>
                                <li class="mb-10"><i class="fa-solid fa-circle-check text-theme me-2"></i>Your cover letter should connect your experience to our requirements.</li>
                                <li class="mb-0"><i class="fa-solid fa-circle-check text-theme me-2"></i>Double-check contact details and file formats (PDF, DOC, DOCX).</li>
                            </ul>
                        </div>
                        <div class="mt-30">
                            <a href="{{ route('frontend.vacancies.show', $vacancy->slug) }}" class="theme-btn style2 br-30 bg-white text-dark">
                                <span class="link-effect"><span class="effect-1"><i class="fa-regular fa-arrow-left"></i> Back to role</span><span class="effect-1"><i class="fa-regular fa-arrow-left"></i> Back to role</span></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="contact-form">
                        <h2 class="title mt--5 mb-35">Application form</h2>
                        <form action="{{ route('frontend.vacancies.apply.submit', $vacancy->slug) }}" method="POST" enctype="multipart/form-data" class="contact_form vacancies-apply-form">
                            @csrf

                            <h4 class="title mb-20 mt-0">Personal information</h4>
                            <div class="form-grid">
                                <div class="form-group">
                                    <span class="icon"><i class="fa-regular fa-user"></i></span>
                                    <input type="text" name="first_name" id="first_name" value="{{ old('first_name') }}" required placeholder="First name *" autocomplete="given-name">
                                    @error('first_name')
                                        <p class="cms-field-error">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <span class="icon"><i class="fa-regular fa-user"></i></span>
                                    <input type="text" name="last_name" id="last_name" value="{{ old('last_name') }}" required placeholder="Last name *" autocomplete="family-name">
                                    @error('last_name')
                                        <p class="cms-field-error">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-grid">
                                <div class="form-group">
                                    <span class="icon"><i class="fa-regular fa-envelope"></i></span>
                                    <input type="email" name="email" id="email" value="{{ old('email') }}" required placeholder="Email *" autocomplete="email">
                                    @error('email')
                                        <p class="cms-field-error">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <span class="icon"><i class="fa-solid fa-phone"></i></span>
                                    <input type="tel" name="phone" id="phone" value="{{ old('phone') }}" required placeholder="Phone *" autocomplete="tel">
                                    @error('phone')
                                        <p class="cms-field-error">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <textarea name="address" id="address" rows="3" placeholder="Address (optional)">{{ old('address') }}</textarea>
                                @error('address')
                                    <p class="cms-field-error">{{ $message }}</p>
                                @enderror
                            </div>

                            <h4 class="title mb-20 mt-30">Professional background</h4>
                            <div class="form-grid">
                                <div class="form-group">
                                    <span class="icon"><i class="fa-regular fa-id-badge"></i></span>
                                    <input type="text" name="current_position" id="current_position" value="{{ old('current_position') }}" placeholder="Current position" autocomplete="organization-title">
                                    @error('current_position')
                                        <p class="cms-field-error">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <span class="icon"><i class="fa-regular fa-building"></i></span>
                                    <input type="text" name="current_company" id="current_company" value="{{ old('current_company') }}" placeholder="Current company" autocomplete="organization">
                                    @error('current_company')
                                        <p class="cms-field-error">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-grid">
                                <div class="form-group">
                                    <span class="icon"><i class="fa-regular fa-clock"></i></span>
                                    <select name="experience_years" id="experience_years" aria-label="Years of experience">
                                        <option value="">Years of experience</option>
                                        <option value="0-1" {{ old('experience_years') == '0-1' ? 'selected' : '' }}>0–1 years</option>
                                        <option value="1-3" {{ old('experience_years') == '1-3' ? 'selected' : '' }}>1–3 years</option>
                                        <option value="3-5" {{ old('experience_years') == '3-5' ? 'selected' : '' }}>3–5 years</option>
                                        <option value="5-10" {{ old('experience_years') == '5-10' ? 'selected' : '' }}>5–10 years</option>
                                        <option value="10+" {{ old('experience_years') == '10+' ? 'selected' : '' }}>10+ years</option>
                                    </select>
                                    @error('experience_years')
                                        <p class="cms-field-error">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <span class="icon"><i class="fa-solid fa-graduation-cap"></i></span>
                                    <select name="education_level" id="education_level" aria-label="Education level">
                                        <option value="">Education level</option>
                                        <option value="high_school" {{ old('education_level') == 'high_school' ? 'selected' : '' }}>High school</option>
                                        <option value="associate" {{ old('education_level') == 'associate' ? 'selected' : '' }}>Associate degree</option>
                                        <option value="bachelor" {{ old('education_level') == 'bachelor' ? 'selected' : '' }}>Bachelor's degree</option>
                                        <option value="master" {{ old('education_level') == 'master' ? 'selected' : '' }}>Master's degree</option>
                                        <option value="phd" {{ old('education_level') == 'phd' ? 'selected' : '' }}>PhD</option>
                                    </select>
                                    @error('education_level')
                                        <p class="cms-field-error">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>

                            <h4 class="title mb-20 mt-30">Cover letter</h4>
                            <div class="form-group">
                                <textarea name="cover_letter" id="cover_letter" rows="6" required placeholder="Why this role? How does your experience fit? *">{{ old('cover_letter') }}</textarea>
                                @error('cover_letter')
                                    <p class="cms-field-error">{{ $message }}</p>
                                @enderror
                            </div>

                            <h4 class="title mb-20 mt-30">Résumé &amp; documents</h4>
                            <div class="form-group">
                                <label class="fw-semibold d-block mb-10" for="resume">Résumé / CV <span class="text-danger">*</span></label>
                                <input type="file" name="resume" id="resume" accept=".pdf,.doc,.docx" required>
                                <p class="cms-field-hint">PDF, DOC, or DOCX · max 5 MB</p>
                                @error('resume')
                                    <p class="cms-field-error">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label class="fw-semibold d-block mb-10" for="additional_documents">Additional documents (optional)</label>
                                <input type="file" name="additional_documents[]" id="additional_documents" accept=".pdf,.doc,.docx" multiple>
                                <p class="cms-field-hint">Multiple files allowed · max 5 MB each</p>
                                @error('additional_documents')
                                    <p class="cms-field-error">{{ $message }}</p>
                                @enderror
                            </div>

                            <h4 class="title mb-20 mt-30">References (optional)</h4>
                            <div class="form-grid">
                                <div class="form-group">
                                    <span class="icon"><i class="fa-regular fa-user"></i></span>
                                    <input type="text" name="reference_name" id="reference_name" value="{{ old('reference_name') }}" placeholder="Reference name">
                                    @error('reference_name')
                                        <p class="cms-field-error">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <span class="icon"><i class="fa-regular fa-id-badge"></i></span>
                                    <input type="text" name="reference_position" id="reference_position" value="{{ old('reference_position') }}" placeholder="Their role">
                                    @error('reference_position')
                                        <p class="cms-field-error">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-grid">
                                <div class="form-group">
                                    <span class="icon"><i class="fa-regular fa-building"></i></span>
                                    <input type="text" name="reference_company" id="reference_company" value="{{ old('reference_company') }}" placeholder="Company">
                                    @error('reference_company')
                                        <p class="cms-field-error">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <span class="icon"><i class="fa-regular fa-envelope"></i></span>
                                    <input type="email" name="reference_email" id="reference_email" value="{{ old('reference_email') }}" placeholder="Email">
                                    @error('reference_email')
                                        <p class="cms-field-error">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group terms mt-30">
                                <input type="checkbox" name="privacy_consent" id="privacy_consent" value="1" {{ old('privacy_consent') ? 'checked' : '' }} required>
                                <label for="privacy_consent">I consent to the processing of my personal data for recruitment purposes. <span class="text-danger">*</span></label>
                            </div>
                            @error('privacy_consent')
                                <p class="cms-field-error">{{ $message }}</p>
                            @enderror

                            <div class="vacancies-apply-actions">
                                <a href="{{ route('frontend.vacancies.show', $vacancy->slug) }}" class="theme-btn style2 br-30 bg-white text-dark">
                                    <span class="link-effect"><span class="effect-1">Cancel</span><span class="effect-1">Cancel</span></span>
                                </a>
                                <button type="submit" class="theme-btn br-30">
                                    <span class="link-effect"><span class="effect-1"><i class="fa-solid fa-paper-plane"></i> Submit application</span><span class="effect-1"><i class="fa-solid fa-paper-plane"></i> Submit application</span></span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('frontend.partials.newsletter')
@endsection