@extends('layouts.app')

@section('title', $job->title)

@section('content')
    <section class="section" style="background: linear-gradient(140deg, #f2ecff, #ffffff 58%);">
        <div class="container">
            <a class="btn btn-outline" href="{{ route('careers.index') }}" style="margin-bottom: 14px;">Back to Jobs</a>
            <article class="card">
                <h1 style="margin-top:0; font-size: clamp(28px, 5vw, 50px);">{{ $job->title }}</h1>
                <p class="muted" style="margin-top:0;">{{ $job->location }} - {{ $job->department }} - {{ $job->type }}</p>
                <p class="muted">{{ $job->description }}</p>
                @if (!empty($job->requirements))
                    <h3>Requirements</h3>
                    <ul class="muted">
                        @foreach ($job->requirements as $requirement)
                            <li>{{ $requirement }}</li>
                        @endforeach
                    </ul>
                @endif
            </article>
        </div>
    </section>

    <section class="section-sm">
        <div class="container">
            <h2 style="margin-top:0;">Submit Application</h2>
            <form method="post" action="{{ route('careers.apply', $job) }}" enctype="multipart/form-data" class="card">
                @csrf
                <div class="grid grid-2">
                    <div class="form-group"><label>Full Name *</label><input name="full_name" value="{{ old('full_name') }}" required></div>
                    <div class="form-group"><label>Email *</label><input type="email" name="email" value="{{ old('email') }}" required></div>
                    <div class="form-group"><label>Phone *</label><input name="phone" value="{{ old('phone') }}" required></div>
                    <div class="form-group"><label>Birth Date *</label><input type="date" name="birth_date" value="{{ old('birth_date') }}" required></div>
                </div>

                <div class="form-group"><label>Address</label><textarea name="address">{{ old('address') }}</textarea></div>
                <div class="form-group"><label>Skills</label><input name="skills" value="{{ old('skills') }}"></div>

                <div class="grid grid-2">
                    <div class="form-group"><label>Current Company</label><input name="current_company" value="{{ old('current_company') }}"></div>
                    <div class="form-group"><label>Current Salary</label><input name="current_salary" value="{{ old('current_salary') }}"></div>
                    <div class="form-group"><label>Total Experience</label><input name="total_experience" value="{{ old('total_experience') }}" placeholder="2 years"></div>
                    <div class="form-group"><label>Education Level *</label><input name="education_level" value="{{ old('education_level') }}" required></div>
                    <div class="form-group"><label>Major *</label><input name="major" value="{{ old('major') }}" required></div>
                    <div class="form-group"><label>Institution *</label><input name="institution" value="{{ old('institution') }}" required></div>
                    <div class="form-group"><label>Start Year *</label><input name="start_year" value="{{ old('start_year') }}" required></div>
                    <div class="form-group"><label>End Year *</label><input name="end_year" value="{{ old('end_year') }}" required></div>
                    <div class="form-group"><label>GPA *</label><input name="gpa" value="{{ old('gpa') }}" required></div>
                    <div class="form-group"><label>Gender</label>
                        <select name="gender">
                            <option value="">Choose</option>
                            @foreach (['Female','Male','Others'] as $gender)
                                <option value="{{ $gender }}" @selected(old('gender') === $gender)>{{ $gender }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group"><label>Referral Source</label><input name="referral_source" value="{{ old('referral_source') }}"></div>
                    <div class="form-group"><label>LinkedIn URL</label><input type="url" name="linkedin_url" value="{{ old('linkedin_url') }}"></div>
                    <div class="form-group"><label>GitHub URL</label><input type="url" name="github_url" value="{{ old('github_url') }}"></div>
                    <div class="form-group"><label>Portfolio URL</label><input type="url" name="portfolio_url" value="{{ old('portfolio_url') }}"></div>
                </div>

                <div class="grid grid-2">
                    <div class="form-group"><label>Willing to Relocate? *</label>
                        <select name="willing_to_relocate" required>
                            <option value="">Choose</option>
                            @foreach (['Yes','No'] as $choice)
                                <option value="{{ $choice }}" @selected(old('willing_to_relocate') === $choice)>{{ $choice }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group"><label>Know current employee? *</label>
                        <select name="knows_employee" required>
                            <option value="">Choose</option>
                            @foreach (['Yes','No'] as $choice)
                                <option value="{{ $choice }}" @selected(old('knows_employee') === $choice)>{{ $choice }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-group"><label>Data consent *</label>
                    <select name="data_consent" required>
                        <option value="">Choose</option>
                        @foreach (['Yes','No'] as $choice)
                            <option value="{{ $choice }}" @selected(old('data_consent') === $choice)>{{ $choice }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="grid grid-2">
                    <div class="form-group"><label>CV File (PDF/DOC up to 2MB)</label><input type="file" name="cv_file" accept=".pdf,.doc,.docx"></div>
                    <div class="form-group"><label>Photo File (JPG/PNG/WEBP up to 2MB)</label><input type="file" name="photo_file" accept=".jpg,.jpeg,.png,.webp"></div>
                </div>

                <button class="btn btn-primary" type="submit">Submit Application</button>
            </form>
        </div>
    </section>
@endsection