@extends('website.layouts.main')

@section('meta_title', 'Apply — '.$jobPosting->title)
@section('content')
<section class="section-space">
    <div class="container" style="max-width: 720px;">
        <a href="{{ route('careers.index', $companyKey) }}" class="small text-decoration-none">&larr; Back to careers</a>
        <h1 class="h4 fw-bold mt-3">Apply for {{ $jobPosting->title }}</h1>
        <p class="text-muted">{{ $company->name }}</p>

        <div class="card card-soft border-0 shadow-sm mt-4">
            <div class="card-body">
                <form action="{{ route('careers.apply', $companyKey) }}" method="POST" enctype="multipart/form-data" class="vstack gap-3" novalidate data-careers-apply-form="apply">
                    @csrf
                    <input type="hidden" name="job_posting_id" value="{{ $jobPosting->id }}">

                    <div>
                        <label class="form-label">Full name <span class="text-danger">*</span></label>
                        <input type="text" name="name" value="{{ old('name') }}" class="form-control">
                        @error('name')<div class="text-danger small">{{ $message }}</div>@enderror
                        <div data-js-error="name" class="text-danger small hidden"></div>
                    </div>
                    <div>
                        <label class="form-label">Email <span class="text-danger">*</span></label>
                        <input type="email" name="email" value="{{ old('email') }}" class="form-control">
                        @error('email')<div class="text-danger small">{{ $message }}</div>@enderror
                        <div data-js-error="email" class="text-danger small hidden"></div>
                    </div>
                    <div>
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" value="{{ old('phone') }}" class="form-control" maxlength="10" inputmode="numeric">
                        @error('phone')<div class="text-danger small">{{ $message }}</div>@enderror
                        <div data-js-error="phone" class="text-danger small hidden"></div>
                    </div>
                    <div>
                        <label class="form-label">Resume (PDF or Word, max 5 MB) <span class="text-danger">*</span></label>
                        <input type="file" name="resume" accept=".pdf,.doc,.docx" class="form-control" data-resume-required="1">
                        @error('resume')<div class="text-danger small">{{ $message }}</div>@enderror
                        <div data-js-error="resume" class="text-danger small hidden"></div>
                    </div>
                    <div>
                        <label class="form-label">Cover note</label>
                        <textarea name="notes" rows="3" class="form-control">{{ old('notes') }}</textarea>
                        @error('notes')<div class="text-danger small">{{ $message }}</div>@enderror
                        <div data-js-error="notes" class="text-danger small hidden"></div>
                    </div>
                    <button type="submit" class="btn btn-kiyo">Submit application</button>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<style>
    [data-js-error].hidden { display: none !important; }
</style>
<script src="{{ asset('js/form-validation.js') }}"></script>
<script src="{{ asset('js/form-text-rules.js') }}"></script>
<script src="{{ asset('js/careers-apply-form-validation.js') }}"></script>
@endpush